Merge pull request #69 from GeoffreyChen777/electron-dev

+ better categorizer UI, auto suggestion
Future-Scholars · Apr 16, 2022 · 66dd30f · 66dd30f
2 parents 866f02b + 4b6cff6
commit 66dd30f
Show file tree

Hide file tree

Showing 5 changed files with 262 additions and 17 deletions.
diff --git 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);
-}
+}
diff --git 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
@@ -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),
     };
   },
 });