Merge pull request #30 from Rena-Yuan/feature/support-attachment-rename

Support rename attachment.

frontend/src/api.js

@@ -92,6 +92,14 @@ export const removeAttachment = (id) => {
   })
 }
 
+export const renameAttachment = (id, newName) => {
+  return axios({
+    url: API_PREFIX + '/attachments/' + id,
+    method: 'POST',
+    data: { newName }
+  })
+}
+
 export const getCache = (key) => {
   return axios({
     url: API_PREFIX + '/cache/' + key

frontend/src/components/event/EventInspector.vue

@@ -37,6 +37,7 @@
         @on-change="onPageChange"
       ></Page>
     </div>
+    <Spin fix v-if="loadingEvents">Loading Events...</Spin>
     <div
       v-show="isContextMenuShown"
       class="row-contextmenu ivu-select-dropdown"
@@ -86,6 +87,9 @@ export default {
     events () {
       return this.$store.state.event.events
     },
+    loadingEvents () {
+      return this.$store.state.event.loadingEvents
+    },
     page () {
       return this.$store.state.event.page
     },

frontend/src/components/form/AttachmentItem.vue

@@ -1,25 +1,90 @@
 <template>
   <FormItem>
-    <Tooltip content="Click to preview" placement="top">
-      <a style="padding-right:10px;color:#515a6e" @click="displayAttach(data)">
-        <Icon type="md-attach" /> {{data.name}}
-      </a>
-    </Tooltip>
-    <Tooltip content="Delete this attachment" placement="top">
-      <a @click="deleteAttach(data)">delete</a>
-    </Tooltip>
+    <Row>
+      <template v-if="editMode">
+        <Col span="20" class="attachment-col">
+          <Input style="padding-right:10px" v-model="baseName" size="small" type="text">
+            <span slot="append">.{{extensionName}}</span>
+          </Input>
+        </Col>
+        <Col span="4">
+          <Tooltip content="Save new attachment name" placement="top">
+            <a style="padding-right:5px" @click="saveName">Save</a>
+          </Tooltip>
+          <Tooltip content="Cancel" placement="top">
+            <a @click="cancelRename">Cancel</a>
+          </Tooltip>
+        </Col>
+      </template>
+      <template v-else>
+        <Col span="20">
+          <Tooltip content="Click to preview" placement="top">
+            <a style="padding-right:10px;color:#515a6e" @click="displayAttach">
+              <Icon type="md-attach" /> {{attachment.name}}
+            </a>
+          </Tooltip>
+        </Col>
+        <Col span="4">
+          <Tooltip content="Rename this attachment" placement="top">
+            <a style="padding-right:5px" @click="rename">Rename</a>
+          </Tooltip>
+          <Tooltip content="Delete" placement="top">
+            <a @click="deleteAttach">Delete</a>
+          </Tooltip>
+        </Col>
+      </template>
+    </Row>
   </FormItem>
 </template>
 
 <script>
 export default {
-  props: ['data', 'index'],
+  props: ['attachment', 'index'],
+  data () {
+    return {
+      'baseName': this.attachment.name,
+      'extensionName': ''
+    }
+  },
+  computed: {
+    editMode: {
+      get () {
+        return this.$store.state.form.attachmentsList[this.index].editMode
+      },
+      set (val) {
+        this.$store.commit('setAttachmentEditMode', {
+          index: this.index,
+          mode: val
+        })
+      }
+    }
+  },
   methods: {
-    deleteAttach (data) {
-      this.$store.dispatch('removeAttachment', { id: data.id, index: this.index })
+    deleteAttach () {
+      this.$store.dispatch('removeAttachment', { id: this.attachment.id, index: this.index })
+    },
+    displayAttach () {
+      this.$bus.$emit('displayAttach', this.attachment)
+    },
+    rename () {
+      this.splitName()
+      this.editMode = true
+    },
+    saveName () {
+      this.$store.dispatch('renameAttachment', {
+        index: this.index,
+        baseName: this.baseName,
+        extensionName: this.extensionName
+      })
+    },
+    cancelRename () {
+      this.editMode = false
     },
-    displayAttach (data) {
-      this.$bus.$emit('displayAttach', data)
+    splitName () {
+      if (this.attachment.name.indexOf('.') > -1) {
+        this.baseName = this.attachment.name.split('.').slice(0, -1).join('.')
+        this.extensionName = String(this.attachment.name.split('.').slice(-1))
+      }
     }
   }
 }

frontend/src/components/form/AttachmentsList.vue

@@ -2,12 +2,12 @@
   <FormItem label="Attachments">
     <div v-if="attachments.length">
       <p v-for="(attachment, index) in attachments" :key="index">
-        <AttachmentItem :data="attachment" :index="index"/>
+        <AttachmentItem :attachment="attachment" :index="index"/>
       </p>
     </div>
     <div v-if="snapshots.length">
       <p v-for="(snapshot, index) in snapshots" :key="index">
-        <SnapshotItem :data="snapshot" :index="index"/>
+        <SnapshotItem :snapshot="snapshot" :index="index"/>
       </p>
     </div>
     <Upload
@@ -17,8 +17,8 @@
         accept=".jpg,.jpeg,.png,.gif,.bmp,.wbmp,.webp,.tif,.psd"
         :show-upload-list="false"
       >
-      <Tooltip 
-        placement="right" 
+      <Tooltip
+        placement="right"
         content="Support .jpg/.jpeg/.png/.gif/.bmp/.wbmp/.webp/.tif/.psd files"
         max-width="450"
       >
@@ -61,3 +61,10 @@ export default {
   }
 }
 </script>
+<style>
+.attachment-col {
+  display: flex !important;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

frontend/src/components/form/BugItForm.vue

@@ -10,7 +10,7 @@
           :index="index"
         ></component>
         <AttachmentsList/>
-        <Spin fix v-if="loadTempalte">Loading Template</Spin>
+        <Spin fix v-if="loadTemplate">Loading Template...</Spin>
       </Form>
       <Submit></Submit>
     </div>
@@ -36,15 +36,15 @@ export default {
     Submit
   },
   computed: {
-    fields() {
+    fields () {
       return this.$store.state.form.templateDetail
     },
-    loadTempalte(){
+    loadTemplate () {
       return this.$store.state.form.loadTemplate
     }
   },
   methods: {
-    getFormComponentByData(index, field) {
+    getFormComponentByData (index, field) {
       if (field.component === 'input') {
         return 'InputFormItem'
       } else if (field.component === 'select') {

frontend/src/components/form/SnapshotItem.vue

@@ -1,25 +1,80 @@
 <template>
   <FormItem>
-    <Tooltip content="Click to preview" placement="top">
-      <a style="padding-right:10px;color:#515a6e" @click="displayAttach(data)">
-        <Icon type="md-attach" /> {{data.name}}
-      </a>
-    </Tooltip>
-    <Tooltip content="Delete this snapshot" placement="top">
-      <a @click="deleteAttach(data)">delete</a>
-    </Tooltip>
+    <Row>
+      <template v-if="editMode">
+        <Col span="20" class="attachment-col">
+          <Input style="padding-right:10px" v-model="name" size="small" type="text" />
+        </Col>
+        <Col span="4">
+          <Tooltip content="Save new snapshot name" placement="top">
+            <a style="padding-right:5px" @click="saveName">Save</a>
+          </Tooltip>
+          <Tooltip content="Cancel" placement="top">
+            <a @click="cancelRename">Cancel</a>
+          </Tooltip>
+        </Col>
+      </template>
+      <template v-else>
+        <Col span="20">
+          <Tooltip content="Click to preview" placement="top">
+            <a style="padding-right:10px;color:#515a6e" @click="displayAttach">
+              <Icon type="md-attach" /> {{name}}
+            </a>
+          </Tooltip>
+        </Col>
+        <Col span="4">
+          <Tooltip content="Rename this snapshot" placement="top">
+            <a style="padding-right:5px" @click="rename">Rename</a>
+          </Tooltip>
+          <Tooltip content="Delete" placement="top">
+            <a @click="deleteAttach">Delete</a>
+          </Tooltip>
+        </Col>
+      </template>
+    </Row>
   </FormItem>
 </template>
 
 <script>
 export default {
-  props: ['data', 'index'],
+  props: ['snapshot', 'index'],
+  data () {
+    return {
+      'name': this.snapshot.name
+    }
+  },
+  computed: {
+    editMode: {
+      get () {
+        return this.$store.state.form.snapshotList[this.index].editMode
+      },
+      set (val) {
+        this.$store.commit('setSnapshotEditMode', {
+          index: this.index,
+          mode: val
+        })
+      }
+    }
+  },
   methods: {
-    deleteAttach (data) {
+    deleteAttach () {
       this.$store.commit('deleteSnapshot', this.index)
     },
-    displayAttach (data) {
-      this.$bus.$emit('displayAttach', data)
+    displayAttach () {
+      this.$bus.$emit('displayAttach', this.snapshot)
+    },
+    rename () {
+      this.editMode = true
+    },
+    cancelRename () {
+      this.name = this.snapshot.name
+      this.editMode = false
+    },
+    saveName () {
+      this.$store.dispatch('renameSnapshot', {
+        index: this.index,
+        newName: this.name
+      })
     }
   }
 }

frontend/src/store/event.js

@@ -6,46 +6,51 @@ export default {
     channelNames: [],
     channelFilters: ['flow', 'notice', 'snapshot'],
     events: [],
+    loadingEvents: false,
     selectedEventId: null,
     eventDetail: '',
     page: null
   },
   mutations: {
-    setChannelNames(state, channelNames) {
+    setChannelNames (state, channelNames) {
       state.channelNames = channelNames
     },
-    setChannelFilters(state, filters) {
+    setChannelFilters (state, filters) {
       state.channelFilters = filters
     },
-    setEvents(state, events) {
+    setEvents (state, events) {
       state.events = events
     },
-    setSelectedEventId(state, eventId) {
+    setLoadingEvents (state, isLoading) {
+      state.loadingEvents = isLoading
+    },
+    setSelectedEventId (state, eventId) {
       state.selectedEventId = eventId
     },
-    setEventDetail(state, eventDetail) {
+    setEventDetail (state, eventDetail) {
       state.eventDetail = eventDetail
     },
-    setPage(state, page) {
+    setPage (state, page) {
       state.page = page
     }
   },
   actions: {
-    loadChannelNames({ commit }) {
+    loadChannelNames ({ commit }) {
       // Filter out the target channel
       api.getDefaultChannelNames().then(response => {
         if (response.data.code === 1000) {
           commit('setChannelNames', response.data.data)
         }
       })
     },
-    loadEvents({ state, commit }, options = {}) {
+    loadEvents ({ state, commit }, options = {}) {
       let eventId = null
       if (options.eventId) {
         eventId = options.eventId
       } else if (state.selectedEventId) {
         eventId = state.selectedEventId
       }
+      commit('setLoadingEvents', true)
       api.getEvent({ channelFilters: state.channelFilters, eventId: eventId, page: options.page }).then(response => {
         if (response.data.code === 1000) {
           let events = response.data.events
@@ -67,17 +72,18 @@ export default {
           commit('setPage', {
             index: response.data.page, count: response.data.page_count, size: response.data.page_size
           })
+          commit('setLoadingEvents', false)
         }
       })
     },
-    updateChannelFilters({ commit, dispatch }, filters) {
+    updateChannelFilters ({ commit, dispatch }, filters) {
       commit('setChannelFilters', filters)
       dispatch('loadEvents')
     },
-    showNotice({ dispatch }) {
+    showNotice ({ dispatch }) {
       dispatch('updateChannelFilters', ['notice'])
     },
-    showAll({ dispatch }) {
+    showAll ({ dispatch }) {
       api.getDefaultChannelNames().then(response => {
         if (response.data.code === 1000) {
           dispatch('updateChannelFilters', response.data.data)