From 5b8a15e218998905f42f66929a6e9c2ebc162527 Mon Sep 17 00:00:00 2001
From: Rena-Yuan <yuanrenna8@sina.com>
Date: Tue, 31 May 2022 18:05:21 +0800
Subject: [PATCH] Feature: search in event list.

---
 frontend/src/api.js                           |  3 ++
 frontend/src/components/BugitDevices.vue      | 30 ++++++++++++++-----
 frontend/src/components/BugitExtra.vue        | 14 ++++-----
 frontend/src/components/event/CodeEditor.vue  |  3 +-
 .../src/components/event/EventInspector.vue   | 20 ++++++++++++-
 .../form/CompoundTextAreaFormItem.vue         |  8 ++---
 frontend/src/store/event.js                   | 13 ++++++--
 setup.py                                      |  2 +-
 8 files changed, 69 insertions(+), 24 deletions(-)

diff --git a/frontend/src/api.js b/frontend/src/api.js
index 27dc0c4..50b1b8e 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -35,6 +35,9 @@ export const getEvent = (options) => {
   } else if (options && options.hasOwnProperty('page') && options.page) {
     url += '/page/' + options.page
   }
+  if (options.searchStr && options.searchStr.trim()) {
+    url += '/search/' + options.searchStr.trim().split(/\s+/).join('+')
+  }
   return axios({
     url: url
   })
diff --git a/frontend/src/components/BugitDevices.vue b/frontend/src/components/BugitDevices.vue
index 97214ce..53844b3 100644
--- a/frontend/src/components/BugitDevices.vue
+++ b/frontend/src/components/BugitDevices.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="split-right-bar">
-    <p style="line-height:28px;vertical-align:middle;">
+  <Row class="split-right-bar">
+    <i-col span="14">
       <span style="padding-left:10px;padding-right:10px">
         <b>Devices:</b>
       </span>
       <span v-if="noneDevices">
-        <b>N/A - Please connect your phone to your computer using a USB cable</b>
+        No devices
       </span>
       <span v-for="(device, index) in devicesInfo" :key="index" class="device-btn-group">
         <a @click="addDevice(device)" class="device-btn">
-          <Tooltip max-width="400" placement="bottom-end">
+          <Tooltip max-width="400" placement="bottom-end" transfer>
             <span>
               <Icon v-if="device.platform === 'Android'" type="logo-android"/>
               <Icon v-else type="logo-apple"/>
@@ -29,14 +29,19 @@
           </Tooltip>
         </a>
         <a class="screenshot-btn" @click="takeScreenshot(device)">
-          <Tooltip placement="bottom-end">
+          <Tooltip placement="bottom-end" transfer>
             <Icon type="md-images"/>
             <div slot="content">Take a screenshot</div>
           </Tooltip>
         </a>
       </span>
-    </p>
-  </div>
+    </i-col>
+    <i-col span="10" style="padding-right: 10px;">
+      <span>
+        <Input v-model="searchStr" prefix="ios-search" placeholder="Separate multiple keywords by spaces" size="small" type="text" style="vertical-align: baseline;" clearable />
+      </span>
+    </i-col>
+  </Row>
 </template>
 
 <script>
@@ -56,6 +61,14 @@ export default {
     },
     noneDevices () {
       return this.devicesInfo === null || this.devicesInfo.length === 0
+    },
+    searchStr: {
+      get () {
+        return this.$store.state.event.searchStr
+      },
+      set (val) {
+        this.$store.commit('setSearchStr', val)
+      }
     }
   },
   methods: {
@@ -84,11 +97,12 @@ export default {
 
 <style scoped>
 .split-right-bar {
-  height: 28px;
+  height: 32px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
   border-bottom: 1px solid #dcdee2;
+  line-height: 32px;
 }
 .device-btn-group {
   margin: 2px 2px;
diff --git a/frontend/src/components/BugitExtra.vue b/frontend/src/components/BugitExtra.vue
index c9b971b..b8db197 100644
--- a/frontend/src/components/BugitExtra.vue
+++ b/frontend/src/components/BugitExtra.vue
@@ -20,18 +20,18 @@ export default {
     EventInspector,
     CodeEditor
   },
-  data() {
+  data () {
     return {
       detailSplit: 0.6,
       scrollRate: 0
     }
   },
-  created() {
+  created () {
     this.$bus.$on('eventLitScroll', this.setEventContainerScroll)
   },
   computed: {
     eventDetail: {
-      get() {
+      get () {
         return this.$store.state.event.eventDetail
       },
       set(val) {
@@ -40,7 +40,7 @@ export default {
     }
   },
   methods: {
-    addDescAttach(row) {
+    addDescAttach (row) {
       if (this.channelAddToDesc.indexOf(row.channel) > -1) {
         this.dispatch('addIntoDesc', row.id)
       } else if (this.channelAddToAttach.indexOf(row.channel) > -1) {
@@ -50,7 +50,7 @@ export default {
         'Add description and attachments have not supported yet!'
       )
     },
-    timestampToTime(timeStamp) {
+    timestampToTime (timeStamp) {
       let date = new Date(timeStamp * 1000)
       let hour = date.getHours() + ':'
       let minute =
@@ -60,10 +60,10 @@ export default {
         date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
       return hour + minute + second
     },
-    getColunmsFilterItem() {
+    getColunmsFilterItem () {
       return []
     },
-    setEventContainerScroll(event) {
+    setEventContainerScroll (event) {
       this.scrollRate = event
       setTimeout(() => {
         const container = this.$refs.eventContainer
diff --git a/frontend/src/components/event/CodeEditor.vue b/frontend/src/components/event/CodeEditor.vue
index c28fb8c..fee91e2 100644
--- a/frontend/src/components/event/CodeEditor.vue
+++ b/frontend/src/components/event/CodeEditor.vue
@@ -49,7 +49,8 @@ export default {
         value: this.content,
         language: this.language,
         theme: 'vs',
-        readOnly: this.readOnly
+        readOnly: this.readOnly,
+        automaticLayout: true
       }
     )
     this.editor.addAction({
diff --git a/frontend/src/components/event/EventInspector.vue b/frontend/src/components/event/EventInspector.vue
index 052c381..d516cfc 100644
--- a/frontend/src/components/event/EventInspector.vue
+++ b/frontend/src/components/event/EventInspector.vue
@@ -80,7 +80,8 @@ export default {
       tableRect: null,
       isContextMenuShown: false,
       contextMenuLeft: 0,
-      contextMenuTop: 0
+      contextMenuTop: 0,
+      refreshEventListTimer: null
     }
   },
   computed: {
@@ -130,6 +131,23 @@ export default {
           slot: 'content'
         }
       ]
+    },
+    searchStr () {
+      return this.$store.state.event.searchStr
+    }
+  },
+  watch: {
+    searchStr (newValue, oldValue) {
+      if (newValue === null) {
+        newValue = ''
+      }
+      clearTimeout(this.refreshEventListTimer)
+      this.refreshEventListTimer = setTimeout(() => {
+        if (newValue.trim() !== oldValue.trim()) {
+          this.$store.dispatch('loadEvents')
+          clearTimeout(this.refreshEventListTimer)
+        }
+      }, 500)
     }
   },
   methods: {
diff --git a/frontend/src/components/form/CompoundTextAreaFormItem.vue b/frontend/src/components/form/CompoundTextAreaFormItem.vue
index 54ccd78..6bcd54d 100644
--- a/frontend/src/components/form/CompoundTextAreaFormItem.vue
+++ b/frontend/src/components/form/CompoundTextAreaFormItem.vue
@@ -22,17 +22,17 @@ export default {
   components: {
     MovableDescription
   },
-  created() {
+  created () {
     this.$bus.$on('addMessage', this.addDesc)
   },
   methods: {
-    addDesc(desc) {
+    addDesc (desc) {
       this.$store.commit('addExtraMsg', { index: this.index, value: desc })
     },
-    deleteDesc(index) {
+    deleteDesc (index) {
       this.$store.commit('deleteExtraMsg', { index, propsIndex: this.index })
     },
-    sortDesc(index) {
+    sortDesc (index) {
       this.$store.dispatch('setExtraMsgUpward', { index, propsIndex: this.index })
     }
   },
diff --git a/frontend/src/store/event.js b/frontend/src/store/event.js
index 0de7c25..96afcf0 100644
--- a/frontend/src/store/event.js
+++ b/frontend/src/store/event.js
@@ -9,7 +9,8 @@ export default {
     loadingEvents: false,
     selectedEventId: null,
     eventDetail: '',
-    page: null
+    page: null,
+    searchStr: ''
   },
   mutations: {
     setChannelNames (state, channelNames) {
@@ -32,6 +33,9 @@ export default {
     },
     setPage (state, page) {
       state.page = page
+    },
+    setSearchStr (state, searchStr) {
+      state.searchStr = searchStr
     }
   },
   actions: {
@@ -51,7 +55,12 @@ export default {
         eventId = state.selectedEventId
       }
       commit('setLoadingEvents', true)
-      api.getEvent({ channelFilters: state.channelFilters, eventId: eventId, page: options.page }).then(response => {
+      api.getEvent({
+        channelFilters: state.channelFilters,
+        eventId: eventId,
+        page: options.page,
+        searchStr: state.searchStr
+      }).then(response => {
         if (response.data.code === 1000) {
           let events = response.data.events
           if (eventId) {
diff --git a/setup.py b/setup.py
index c12e05d..e9ea5f8 100644
--- a/setup.py
+++ b/setup.py
@@ -8,7 +8,7 @@
 
 setup(
     name='lyrebird-bugit',
-    version='1.11.0',
+    version='1.12.0',
     packages=['lyrebird_bugit'],
     url='https://github.com/Meituan-Dianping/lyrebird-bugit',
     author='HBQA',