From 4b6cff6a1fdfecf9455e0aeac07deca8ec73811b Mon Sep 17 00:00:00 2001
From: geoffreychen777 <geoffreychen777@gmail.com>
Date: Sat, 16 Apr 2022 23:00:18 +0100
Subject: [PATCH] + better categorizer UI, auto suggestion

---
 src/css/edit-view.scss                       |  29 +++-
 src/pages/Index.vue                          |   2 +-
 src/pages/edit_view/CategorizerEditView.vue  |  79 ++++++++-
 src/pages/edit_view/EditView.vue             | 167 +++++++++++++++++--
 src/pages/edit_view/components/TextField.vue |   2 +-
 5 files changed, 262 insertions(+), 17 deletions(-)

diff --git a/src/css/edit-view.scss b/src/css/edit-view.scss
index cd6fb21f..a9e59198 100644
--- a/src/css/edit-view.scss
+++ b/src/css/edit-view.scss
@@ -1,6 +1,15 @@
 .edit-view {
   background-color: var(--q-bg-primary);
 }
+
+.edit-view .q-field--outlined ::before {
+    border: none !important;
+}
+
+.edit-view .q-field--outlined ::after {
+    border: none !important;   
+}
+
 .edit-textfield .q-field__control {
   background-color: var(--q-bg-secondary);
 }
@@ -13,10 +22,22 @@
   color: var(--q-text);
 }
 
-.edit-select-ield {
+.edit-select-field {
   min-width: 40px;
 }
 
+.edit-select-field .q-select__dropdown-icon {
+    color: var(--q-text-2);
+}
+
+.edit-select-field .q-field--outlined ::before {
+    border: none !important;
+}
+
+.edit-select-field .q-field--outlined ::after {
+    border: none !important;   
+}
+
 .edit-select-field .q-field__control {
   background-color: var(--q-bg-secondary);
   font-size: 0.8rem;
@@ -32,6 +53,10 @@
   color: var(--q-text);
 }
 
+.edit-select-field input {
+  color: var(--q-text-2) !important;
+}
+
 .q-menu > .q-virtual-scroll__content > .q-item {
   min-height: 20px;
 }
@@ -43,4 +68,4 @@
   > .q-item__label
   > span {
   color: var(--q-text);
-}
+}
\ No newline at end of file
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 7acb89c7..4ce9db6a 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -15,7 +15,7 @@
       </div>
 
       <!-- Edit Window -->
-      <EditView />
+      <EditView :tags="tags" :folders="folders" />
       <!-- Categorizer Add Window -->
       <CategorizerEditView :tags="tags" :folders="folders"/>
       <!-- Note Add Window -->
diff --git a/src/pages/edit_view/CategorizerEditView.vue b/src/pages/edit_view/CategorizerEditView.vue
index 9b600a93..a458b028 100644
--- a/src/pages/edit_view/CategorizerEditView.vue
+++ b/src/pages/edit_view/CategorizerEditView.vue
@@ -1,13 +1,13 @@
 <template>
     <q-dialog v-model="isViewShown" @before-show="onShow" @hide="onClose" transition-show="fade" transition-hide="fade" transition-duration="100" >
         <q-card flat style="width: 500px; height: 530px" class="edit-view">
-            <EditTextField :label="isTagViewShown ? 'Tags' : 'Folders'" :value="categorizerDraftStr" @update:model-value="(value) => categorizerDraftStr = value"/>
+            <EditTextField :label="isTagViewShown ? 'Tags' : 'Folders'" :value="categorizerDraftStr" @update:model-value="onUpdate"/>
             <q-scroll-area style="height: 420px" class="q-pa-sm">
                 <q-list dense>
                     <q-item
                         clickable
                         class="radius-border"
-                        v-for="categorizer in (isTagViewShown ? tags : folders)"
+                        v-for="categorizer in (isTagViewShown ? filteredTags : filteredFolders)"
                         @click="onCategorizerClicked(categorizer)"
                         :key="categorizer.id"
                     >
@@ -71,12 +71,17 @@ export default defineComponent({
     const isTagViewShown = ref(false);
     const isFolderViewShown = ref(false);
     const isViewShown = ref(false);
+    const isAutoSuggestion = ref(false)
 
     const categorizerDraftStr = ref('');
     const tagDraftStr = ref('');
     const folderDraftStr = ref('');
     const entityDraft = ref(new PaperEntityDraft());
 
+    const filteredTags = ref(props.tags);
+    const filteredFolders = ref(props.folders);
+    const filterCategorizer = ref('');
+
     window.systemInteractor.registerState(
         'viewState.isTagViewShown',
         (event, message) => {
@@ -109,6 +114,11 @@ export default defineComponent({
       } else {
         categorizerDraftStr.value = folderDraftStr.value;
       }
+      isAutoSuggestion.value = false;
+
+      filteredTags.value = props.tags;
+      filteredFolders.value = props.folders;
+      filterCategorizer.value = '';
     };
 
     const onClose= () => {
@@ -128,6 +138,29 @@ export default defineComponent({
       window.systemInteractor.setState('viewState.isFolderViewShown', false);
     };
 
+    const onUpdate = (value: string) => {
+      if(categorizerDraftStr.value != value) {
+        isAutoSuggestion.value = true;
+        const oldCategorizerList = categorizerDraftStr.value.replace(/ /g, '').split(';').filter(x => x !== '');
+        const newCategorizerList = value.replace(/ /g, '').split(';').filter(x => x !== '');
+
+        filterCategorizer.value = '';
+        for (const newCategorizer of newCategorizerList) {
+          if (!oldCategorizerList.includes(newCategorizer)) {
+            filterCategorizer.value = newCategorizer;
+            break;
+          }
+        }
+
+        filterCategorizers()
+
+        categorizerDraftStr.value = value;
+      } else {
+        categorizerDraftStr.value = value;
+      }
+
+    };
+
     const onCategorizerClicked = (categorizer: PaperCategorizer) => {
       let existingCategorizers = categorizerDraftStr.value.replace(/ /g, '').split(';').filter(x => x !== '');
 
@@ -136,22 +169,62 @@ export default defineComponent({
       );
 
       if (duplicatedCategorizers.length == 0) {
+        if (filterCategorizer.value !== '') {
+          existingCategorizers = existingCategorizers.filter(
+              (f) => f !== filterCategorizer.value,
+          );
+        }
         existingCategorizers.push(categorizer.name);
         categorizerDraftStr.value = existingCategorizers.join('; ');
       }
     };
 
+    const filterCategorizers = () => {
+      if (isAutoSuggestion.value) {
+        if (filterCategorizer.value === '') {
+          if (isTagViewShown.value) {
+            filteredTags.value = props.tags
+          } else {
+            filteredFolders.value = props.folders
+          }
+        }
+        else {
+          const needle = filterCategorizer.value.toLowerCase()
+          if (isTagViewShown.value) {
+            filteredTags.value = props.tags.filter(
+              v => v.name.toLowerCase().indexOf(needle) > -1
+            )
+          } else {
+            filteredFolders.value = props.folders.filter(
+              v => v.name.toLowerCase().indexOf(needle) > -1
+            )
+          }
+        }
+      }
+      else {
+        if (isTagViewShown.value) {
+          filteredTags.value = props.tags
+        } else {
+          filteredFolders.value = props.folders
+        }
+      }
+    }
+
     return {
       categorizerDraftStr,
+      filteredTags,
+      filteredFolders,
+
       isViewShown,
       isTagViewShown,
       isFolderViewShown,
       entityDraft,
+      onUpdate,
       onCategorizerClicked,
+      filterCategorizers,
       onShow,
       onClose,
       onSave,
-      ...toRefs(props),
     };
   },
 });
diff --git a/src/pages/edit_view/EditView.vue b/src/pages/edit_view/EditView.vue
index 69c1c0a6..ab10d359 100644
--- a/src/pages/edit_view/EditView.vue
+++ b/src/pages/edit_view/EditView.vue
@@ -1,6 +1,6 @@
 <template>
     <q-dialog v-model="isEditViewShown" @hide="onClose" transition-show="fade" transition-hide="fade" transition-duration="100" >
-        <q-card flat style="width: 500px; height: 440px" class="q-pa-none edit-view">
+        <q-card flat style="width: 500px; height: 435px" class="q-pa-none edit-view">
             <EditTextField label="Title" :value="entityDraft.title" @update:model-value="(value) => onUpdate('title', value)"/>
             <EditTextField label="Authors" :value="entityDraft.authors" @update:model-value="(value) => onUpdate('authors', value)"/>
             <EditTextField
@@ -16,9 +16,9 @@
                 />
                 <q-select 
                   dense
+                  outlined
                   class="col q-mr-sm q-mt-sm edit-select-field"
-                  standout="bg-accent text-secondary"
-                  v-model="pubType" 
+                  v-model="entityPubType" 
                   :options="['Journal', 'Conference', 'Book', 'Others']" 
                   label="Publication Type"
                   @update:model-value="(value) => onUpdatePubType(value)"
@@ -31,8 +31,57 @@
                 />
                 <EditTextField label="DOI" class="col" :value="entityDraft.doi" @update:model-value="(value) => onUpdate('doi', value)"/>
             </div>
-            <EditTextField label="Tags" :value="entityDraft.tags" @update:model-value="(value) => onUpdate('tags', value)"/>
-            <EditTextField label="Folders" :value="entityDraft.folders" @update:model-value="(value) => onUpdate('folders', value)"/>
+            <q-select 
+                dense
+                use-input
+                multiple
+                outlined
+                input-debounce="0"
+                class="col q-ml-sm q-mr-sm q-mt-sm edit-select-field"
+                @new-value="onCreateTags"
+                :options="filteredTags.map(tag => tag.name)"
+                @filter="filterTags"
+                v-model="entityTags" 
+                label="Tags"
+                @update:model-value="(value) => onUpdateTag(value)"
+            >
+              <template v-slot:option="scope">
+                <q-item v-bind="scope.itemProps">
+                  <q-item-section>
+                    {{ scope.opt }}
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-icon name="bi-check2" style="font-size: 0.8rem" v-show="scope.selected"/>
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+            <q-select 
+                dense
+                use-input
+                multiple
+                outlined
+                input-debounce="0"
+                class="col q-ml-sm q-mr-sm q-mt-sm edit-select-field"
+                @new-value="onCreateFolders"
+                :options="filteredFolders.map(folder => folder.name)"
+                @filter="filterFolders"
+                v-model="entityFolders" 
+                label="Folders"
+                @update:model-value="(value) => onUpdateFolder(value)"
+            >
+              <template v-slot:option="scope">
+                <q-item v-bind="scope.itemProps">
+                  <q-item-section>
+                    {{ scope.opt }}
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-icon name="bi-check2" style="font-size: 0.8rem" v-show="scope.selected"/>
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+
             <EditTextField label="Note" :value="entityDraft.note" @update:model-value="(value) => onUpdate('note', value)"/>
             <div class="row justify-end q-ml-sm q-mr-sm">
                 <q-btn
@@ -59,16 +108,27 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, toRefs } from 'vue';
+import { defineComponent, PropType, Ref, ref, toRefs } from 'vue';
 
 import EditTextField from './components/TextField.vue';
 
 import { PaperEntity } from '../../models/PaperEntity';
 import { PaperEntityDraft } from '../../models/PaperEntityDraft';
+import { formatString } from '../../utils/string';
+import { PaperFolder, PaperTag } from '../../models/PaperCategorizer';
 
 export default defineComponent({
   name: 'EditView',
-
+  props: {
+    tags: {
+      type: Array as PropType<PaperTag[]>,
+      required: true,
+    },
+    folders: {
+      type: Array as PropType<PaperFolder[]>,
+      required: true,
+    }
+  },
   components: {
     EditTextField,
   },
@@ -76,7 +136,11 @@ export default defineComponent({
   setup(props, {emit}) {
     const isEditViewShown = ref(false);
     const entityDraft = ref(new PaperEntityDraft());
-    const pubType = ref('Journal');
+    const entityPubType = ref('Journal');
+    const entityTags: Ref<string[]> = ref([]);
+    const entityFolders: Ref<string[]> = ref([]);
+    const filteredTags = ref(props.tags)
+    const filteredFolders = ref(props.folders)
 
     window.systemInteractor.registerState('viewState.isEditViewShown', (event, message) => {
       isEditViewShown.value = JSON.parse(message as string) as boolean;
@@ -84,7 +148,19 @@ export default defineComponent({
 
     window.systemInteractor.registerState('sharedData.editEntityDraft', (event, message) => {
       entityDraft.value.initialize(JSON.parse(message as string) as PaperEntity);
-      pubType.value = ['Journal', 'Conference', 'Others', 'Book'][entityDraft.value.pubType];
+      entityPubType.value = ['Journal', 'Conference', 'Others', 'Book'][entityDraft.value.pubType];
+      entityTags.value = formatString(
+        {
+          str:entityDraft.value.tags,
+          removeWhite: true,  
+        }
+      ).split(';').filter(tag => tag.length > 0);
+      entityFolders.value = formatString(
+        {
+          str:entityDraft.value.folders,
+          removeWhite: true,  
+        }
+      ).split(';').filter(tag => tag.length > 0);
     });
 
     const onClose = () => {
@@ -104,12 +180,83 @@ export default defineComponent({
       entityDraft.value.pubType = ['Journal', 'Conference', 'Others', 'Book'].indexOf(value);
     };
 
+    const onUpdateTag = (value: string[]) => {
+      entityDraft.value.tags = value.join(';');
+    };
+
+    const onUpdateFolder = (value: string[]) => {
+      entityDraft.value.folders = value.join(';');
+    };
+
+    const onCreateTags = (value: string, done: (arg0: string, arg1: string) => void) => {
+      let duplicatedTags = entityTags.value.filter(
+          (f) => f === value,
+      );
+
+      if (duplicatedTags.length == 0) {
+        entityTags.value.push(value);
+        onUpdateTag(entityTags.value);
+        done(value, 'add-unique');
+      }
+    };
+
+    const onCreateFolders = (value: string, done: (arg0: string, arg1: string) => void) => {
+      let duplicatedFolders = entityFolders.value.filter(
+          (f) => f === value,
+      );
+
+      if (duplicatedFolders.length == 0) {
+        entityFolders.value.push(value);
+        onUpdateFolder(entityFolders.value);
+        done(value, 'add-unique');
+      }
+    };
+
+    const filterTags = (val: string, update: (arg0: () => void) => void) => {
+      console.log(val)
+      update(() => {
+        if (val === '') {
+          filteredTags.value = props.tags
+        }
+        else {
+          const needle = val.toLowerCase()
+          filteredTags.value = props.tags.filter(
+            v => v.name.toLowerCase().indexOf(needle) > -1
+          )
+        }
+      })
+    }
+
+    const filterFolders = (val: string, update: (arg0: () => void) => void) => {
+      update(() => {
+        if (val === '') {
+          filteredFolders.value = props.folders
+        }
+        else {
+          const needle = val.toLowerCase()
+          filteredFolders.value = props.folders.filter(
+            v => v.name.toLowerCase().indexOf(needle) > -1
+          )
+        }
+      })
+    }
+
     return {
       isEditViewShown,
       entityDraft,
-      pubType,
+      entityPubType,
+      entityTags,
+      entityFolders,
+      filteredTags,
+      filteredFolders,
       onUpdate,
       onUpdatePubType,
+      onUpdateTag,
+      onUpdateFolder,
+      onCreateTags,
+      onCreateFolders,
+      filterTags,
+      filterFolders,
       onClose,
       onSave,
       ...toRefs(props),
diff --git a/src/pages/edit_view/components/TextField.vue b/src/pages/edit_view/components/TextField.vue
index a1dd367b..b50a4687 100644
--- a/src/pages/edit_view/components/TextField.vue
+++ b/src/pages/edit_view/components/TextField.vue
@@ -4,7 +4,7 @@
         dense
         v-model="textFieldValue"
         class="q-mt-sm q-mb-sm q-ml-sm q-mr-sm edit-textfield"
-        standout="bg-accent text-secondary"
+        outlined
         :label="label"
         style="font-size: 0.85em"
         @update:model-value="onUpdate"