Merge pull request #21 from yumiguan/feature/multiple-draft

Feature/multiple draft
Meituan-Dianping · Sep 28, 2021 · 8d9b7c6 · 8d9b7c6
2 parents b4d3dce + f79a882
commit 8d9b7c6
Show file tree

Hide file tree

Showing 11 changed files with 415 additions and 89 deletions.
diff --git a/frontend/src/api.js b/frontend/src/api.js
@@ -2,13 +2,13 @@ import axios from 'axios'
 
 const API_PREFIX = '/plugins/bugit/api'
 
-export const getTemplate = (path) => {
+export const getTemplate = (path, cacheName) => {
   let url = API_PREFIX + '/template'
   if (path) {
     return axios({
       url: url,
       method: 'POST',
-      data: { path }
+      data: { path, cache_name: cacheName }
     })
   } else {
     return axios({
@@ -23,7 +23,7 @@ export const getDevices = () => {
   })
 }
 
-//------EventInspector------
+// ------EventInspector------
 
 export const getEvent = (options) => {
   let url = '/api/event'
@@ -98,10 +98,25 @@ export const getCache = (key) => {
   })
 }
 
-export const setCache = (key, data) => {
+export const setCache = (key, templatePath, cacheName, data) => {
   return axios({
     url: API_PREFIX + '/cache/' + key,
     method: 'POST',
-    data: data
+    data: {
+      template_path: templatePath,
+      cache_name: cacheName,
+      data
+    }
+  })
+}
+
+export const deleteCache = (key, templatePath, cacheName) => {
+  return axios({
+    url: API_PREFIX + '/cache/' + key,
+    method: 'DELETE',
+    data: {
+      cache_name: cacheName,
+      template_path: templatePath
+    }
   })
 }
diff --git a/frontend/src/components/BugTemplateSelector.vue b/frontend/src/components/BugTemplateSelector.vue
@@ -1,29 +1,106 @@
 <template>
   <Form :label-width="80" class="split-left-template-selector">
-    <FormItem label="template">
-      <Select v-model="selectedTemplateIndex" filterable size="small" placeholder="Select template">
-        <Option v-for="(template, index) in templates" :value="index" :key="index">{{template.name}}</Option>
-      </Select>
-    </FormItem>
+    <Row>
+      <i-col span="12">
+        <FormItem label="template">
+          <Select
+            v-model="selectedTemplateIndex"
+            filterable
+            size="small"
+            placeholder="Select template"
+            not-found-text="No saved draft"
+          >
+            <Option v-for="(template, index) in templates" :value="index" :key="index">{{ template.name }}</Option>
+          </Select>
+        </FormItem>
+      </i-col>
+      <i-col span="12">
+        <FormItem label="Draft">
+          <Select
+            v-model="selectedDraft"
+            filterable
+            clearable
+            size="small"
+            placeholder="Select a saved draft"
+            not-found-text="No Template"
+          >
+            <Option
+              v-for="(template, index) in cacheList"
+              :value="template.cacheName"
+              :key="index"
+            >{{template.cacheName}}<Icon
+                v-show="template.cacheName===selectedCache"
+                class="icon-form"
+                style="float: right"
+                type="md-trash"
+                @click="isShownDeleteModal = true"
+              />
+            </Option>
+          </Select>
+        </FormItem>
+      </i-col>
+    </Row>
+    <Modal v-model="isShownDeleteModal">
+      <p slot="header" style="color: #f60; text-align: center">
+        <Icon type="ios-information-circle"/>
+        <span>Delete confirmation</span>
+      </p>
+      <div style="text-align: center">
+        <span style="font-size: 14px">
+          Are you sure you want to delete draft <b>{{selectedCache}}</b>?
+        </span>
+      </div>
+      <div slot="footer">
+        <Button type="error" long @click="onDelete">Delete</Button>
+      </div>
+    </Modal>
   </Form>
 </template>
 
 <script>
 export default {
-  created() {
+  data () {
+    return {
+      isShownDeleteModal: false
+    }
+  },
+  created () {
     this.$store.dispatch('loadTemplateList')
   },
+  methods: {
+    onDelete () {
+      this.$store.dispatch('deleteCache', this.selectedCache)
+      this.isShownDeleteModal = false
+    }
+  },
   computed: {
-    templates() {
+    templates () {
       return this.$store.state.form.templates
     },
+    selectedCache () {
+      return this.$store.state.form.selectedCache
+    },
+    cacheList () {
+      return this.$store.state.form.cacheList
+    },
     selectedTemplateIndex: {
-      get() {
+      get () {
         return this.$store.state.form.selectedTemplateIndex
       },
-      set(val) {
+      set (val) {
         this.$store.dispatch('updateSelectedTemplateIndex', val)
       }
+    },
+    selectedDraft: {
+      get () {
+        return this.$store.state.form.selectedCache
+      },
+      set (val) {
+        if (val !== undefined) {
+          this.$store.commit('setSelectedCache', val)
+          this.$store.dispatch('loadTemplate')
+        }
+      }
     }
   }
 }

diff --git a/frontend/src/components/Bugit.vue b/frontend/src/components/Bugit.vue
@@ -46,12 +46,13 @@ export default {
     onKeyDown (event) {
       if (event.key === 'Meta') {
         this.metaKey = true
-      }
-      else if (event.key == 's') {
+      } else if (event.key === 's') {
         if (this.metaKey) {
           window.event.preventDefault()
-          this.$store.dispatch('saveCache')
+          this.$store.commit('setShownDraftNameModal', true)
         }
+      } else if (event.key === 'Enter' && this.$store.state.form.shownDraftNameModal) {
+        this.$store.dispatch('saveCache')
       }
     },
     onKeyUp (event) {

diff --git a/frontend/src/components/form/SnapshotItem.vue b/frontend/src/components/form/SnapshotItem.vue
@@ -13,10 +13,10 @@
 export default {
   props: ['data', 'index'],
   methods: {
-    deleteAttach(data) {
-      this.$store.commit('deleteSnapshot', this.index )
+    deleteAttach (data) {
+      this.$store.commit('deleteSnapshot', this.index)
     },
-    displayAttach(data) {
+    displayAttach (data) {
       this.$bus.$emit('displayAttach', data)
     }
   }

diff --git a/frontend/src/components/form/Submit.vue b/frontend/src/components/form/Submit.vue
@@ -13,38 +13,70 @@
       </i-col>
       <i-col span="6">
         <Tooltip content="Save (⌘+s)" placement="top" :delay="500">
-          <Button @click="onSave" long type="info">
+          <Button @click="shownDraftNameModal = true" long type="info">
             <span>
               <b>Draft</b>
             </span>
           </Button>
         </Tooltip>
       </i-col>
+      <Modal v-model="shownDraftNameModal" title="Create Draft">
+        <Row>
+          <i-col span="3" align="right">
+            <span>Name:</span>
+          </i-col>
+          <i-col span="18" offset="1">
+            <Input v-model="createName" clearable size="small" />
+          </i-col>
+        </Row>
+        <div slot="footer">
+          <Button type="primary" long @click="onSave">Save</Button>
+        </div>
+      </Modal>
     </Row>
   </div>
 </template>
 
 <script>
 export default {
+  computed: {
+    submitLock () {
+      return this.$store.state.form.submitLock
+    },
+    shownDraftNameModal: {
+      get () {
+        return this.$store.state.form.shownDraftNameModal
+      },
+      set (val) {
+        this.$store.commit('setShownDraftNameModal', val)
+      }
+    },
+    createName: {
+      get () {
+        return this.$store.state.form.createName
+      },
+      set (val) {
+        this.$store.commit('setCreateName', val)
+      }
+    }
+  },
   methods: {
     onSubmit () {
       this.$store.dispatch('submit')
     },
     onSave () {
       this.$store.dispatch('saveCache')
-    }
-  },
-  computed: {
-    submitLock () {
-      return this.$store.state.form.submitLock
+    },
+    selectCacheName (name) {
+      this.$store.dispatch('loadTemplate', name)
     }
   }
 }
 </script>
 
 <style scoped>
 .ivu-tooltip {
-    display: inline-block;
-    width: 100%;
+  display: inline-block;
+  width: 100%;
 }
 </style>