From 4d75e7c3dc3a1d12d03bc54885cd213e8bd8c429 Mon Sep 17 00:00:00 2001
From: WangJie <i@i8e.net>
Date: Wed, 19 Sep 2018 19:44:48 +0800
Subject: [PATCH] 1.3.7: feat: search

---
 CHANGELOG.md                     |  4 ++
 src/_locales/en/messages.json    |  3 ++
 src/_locales/zh_CN/messages.json |  3 ++
 src/common/options.js            | 13 ++++-
 src/manifest.json                |  2 +-
 src/page/DetailList.vue          | 81 ++++++++++++++++++++++++++++++++
 6 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b0ad0b0..1d9c8e5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### v1.3.7 9/19/2018
+
+ - feat: search function in the detail list page & add an option to allow to enable or disable it
+
 ### v1.3.6 9/17/2018
 
  - fix: cover browser action in firefox
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index bfabff2..de56063 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -104,6 +104,9 @@
   "opt_desc_removeDuplicate": {
     "message": "Remove duplicate item in a list"
   },
+  "opt_desc_enableSearch": {
+    "message": "Enable search in the detail list page"
+  },
   "opt_label_popup": {
     "message": "popup simple list"
   },
diff --git a/src/_locales/zh_CN/messages.json b/src/_locales/zh_CN/messages.json
index a519f2e..5857149 100644
--- a/src/_locales/zh_CN/messages.json
+++ b/src/_locales/zh_CN/messages.json
@@ -104,6 +104,9 @@
   "opt_desc_removeDuplicate": {
     "message": "去除列表中重复的项目"
   },
+  "opt_desc_enableSearch": {
+    "message": "启用详细列表中的搜索功能"
+  },
   "opt_label_popup": {
     "message": "弹出简单列表"
   },
diff --git a/src/common/options.js b/src/common/options.js
index 8449483..9332cd3 100644
--- a/src/common/options.js
+++ b/src/common/options.js
@@ -205,9 +205,20 @@ export const optionsList = [
     default: false,
     new: '1.3.6',
   },
+  {
+    cate: cate.APPEARANCE,
+    name: 'enableSearch',
+    desc: __('opt_desc_enableSearch'),
+    type: Boolean,
+    default: true,
+    new: '1.3.7',
+  },
 ]
 
-if (DEBUG) console.debug('current options number:', optionsList.length)
+if (DEBUG) {
+  console.debug('current options number', optionsList.length)
+  window.printOptionsMap = () => console.debug(optionsList.map(i => i.name + ': ' + i.type.name + ',').join('\n'))
+}
 
 const getDefaultOptions = () => _.mapValues(_.keyBy(optionsList, 'name'), i => i.default)
 
diff --git a/src/manifest.json b/src/manifest.json
index daeed6a..c7e65f8 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "__MSG_ext_name__",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "default_locale": "en",
   "description": "__MSG_ext_desc__",
   "author": "WangJie <doudou19758@gmail.com>",
diff --git a/src/page/DetailList.vue b/src/page/DetailList.vue
index de1fd77..ff8460d 100644
--- a/src/page/DetailList.vue
+++ b/src/page/DetailList.vue
@@ -1,11 +1,41 @@
 <template>
 <div>
+
+<v-autocomplete
+  v-if="opts.enableSearch"
+  solo
+  :label="'search'"
+  :items="searchItems"
+  clearable
+  item-text="title"
+  item-value="value"
+  :filter="searchItem"
+  v-model="choice"
+>
+  <template
+    slot="item"
+    slot-scope="{ item }"
+  >
+    <v-list-tile-content
+      :class="item.color ? item.color + '--text' : ''"
+      transition="none"
+    >
+      <v-list-tile-title v-text="item.title"></v-list-tile-title>
+      <v-list-tile-sub-title v-text="item.subtitle"></v-list-tile-sub-title>
+    </v-list-tile-content>
+    <v-list-tile-action>
+      <v-icon>{{ 'tabIndex' in item.value ? 'link' : 'list' }}</v-icon>
+    </v-list-tile-action>
+  </template>
+</v-autocomplete>
+
 <v-expansion-panel ref="panel" expand popout :value="expandStatus" @input="expandStatusChanged">
   <v-expansion-panel-content
     hide-actions
     v-for="(list, listIndex) in lists"
     class="tab-list"
     :key="listIndex"
+    ref="list"
   >
     <v-layout slot="header" row spacer>
       <v-flex no-wrap md7 lg4>
@@ -75,6 +105,7 @@
             :target="opts.itemClickAction !== 'none' ? '_blank' : null"
             @click="itemClicked(listIndex, tabIndex)"
             class="list-item"
+            :ref="'list-' + listIndex + '-tab'"
             :key="tabIndex">
             <v-list-tile-action v-if="opts.removeItemBtnPos === 'left'">
               <v-icon class="clear-btn" color="red" @click.stop.prevent="removeTab(listIndex, tabIndex)">clear</v-icon>
@@ -129,12 +160,15 @@ const colorList = [
   'green', 'yellow', 'orange', 'brown',
 ]
 
+const SEPARATOR = '__$$SEPARATOR$$__'
+
 export default {
   data() {
     return {
       colorList,
       lists: [],
       processed: false, // if task to get list completed
+      choice: null,
     }
   },
   computed: {
@@ -142,17 +176,63 @@ export default {
     expandStatus() {
       return this.lists.map(i => i.expand)
     },
+    searchItems() {
+      const tabs = this.lists.map((list, listIndex) => {
+        return list.tabs.map((tab, tabIndex) => ({
+          text: [tab.title, tab.url].join(SEPARATOR),
+          title: tab.title,
+          subtitle: tab.url,
+          value: {listIndex, tabIndex},
+          color: list.color || '',
+        }))
+      })
+      const lists = this.lists.map((list, listIndex) => {
+        return {
+          text: [list.title || '', formatTime(list.time), list.color || ''].join(SEPARATOR),
+          title: list.title || __('ui_untitled'),
+          subtitle: formatTime(list.time),
+          value: {listIndex},
+          color: list.color || '',
+        }
+      })
+      return _.flatten(tabs).concat(lists)
+    },
   },
   created() {
     this.init()
+    window.d = this
   },
   components: {
     draggable,
     dynamicTime,
   },
+  watch: {
+    choice(item) {
+      const opt = {
+        duration: 500,
+        offset: -50,
+        easing: 'easeInOutCubic',
+      }
+      if (item.tabIndex) {
+        this.expandList(true, item.listIndex)
+        this.$vuetify.goTo(this.$refs[`list-${item.listIndex}-tab`][item.tabIndex], opt)
+      } else {
+        this.$vuetify.goTo(this.$refs.list[item.listIndex], opt)
+      }
+    }
+  },
   methods: {
     __,
     formatTime,
+    searchItem(item, query, itemText) {
+      const texts = itemText.split(SEPARATOR)
+        .filter(t => t)
+        .map(i => i.toLowerCase())
+      return query.split(' ')
+        .filter(i => i)
+        .map(i => i.toLowerCase())
+        .every(i => texts.some(t => ~t.indexOf(i)))
+    },
     async itemClicked(listIndex, tabIndex) {
       const action = this.opts.itemClickAction
       if (action === 'open-and-remove') {
@@ -244,6 +324,7 @@ export default {
       this.swapListItem(listIndex, listIndex + 1)
     },
     expandList(expand, listIndex) {
+      if (this.lists[listIndex].expand === expand) return
       this.lists[listIndex].expand = expand
       this.storeLists()
     },