Added search to library tree views

2021-08-02 00:29:56 +02:00
parent 1e38295164
commit ee174210fd
6 changed files with 123 additions and 58 deletions
--- a/app/imports/ui/components/tree/TreeSearchInput.vue
+++ b/app/imports/ui/components/tree/TreeSearchInput.vue
@@ -0,0 +1,81 @@
+<template lang="html">
+  <v-combobox
+    v-model="filterTerms"
+    :items="filterOptions"
+    prepend-inner-icon="mdi-magnify"
+    hide-no-data
+    hide-selected
+    multiple
+    clearable
+    small-chips
+    deletable-chips
+  />
+</template>
+
+<script lang="js">
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: undefined,
+    },
+  },
+  data(){return {
+    filterTerms: [],
+    filterOptions: [
+      {text: 'Actions', value: 'action'},
+      {text: 'Attacks', value: 'attack'},
+      {text: 'Attributes', value: 'attribute'},
+      {text: 'Buffs', value: 'buff'},
+      {text: 'Class Levels', value: 'classLevel'},
+      {text: 'Damage Multipliers', value: 'damageMultiplier'},
+      {text: 'Effects', value: 'effect'},
+      {text: 'Experiences', value: 'experience'},
+      {text: 'Features', value: 'feature'},
+      {text: 'Folders', value: 'folder'},
+      {text: 'Notes', value: 'note'},
+      {text: 'Proficiencies', value: 'proficiency'},
+      {text: 'Rolls', value: 'roll'},
+      {text: 'Saving Throws', value: 'savingThrow'},
+      {text: 'Skills', value: 'skill'},
+      {text: 'Spell Lists', value: 'spellList'},
+      {text: 'Spells', value: 'spell'},
+      {text: 'Containers', value: 'container'},
+      {text: 'Items', value: 'item'},
+    ],
+  }},
+  computed: {
+    filter(){
+      if (!this.filterTerms.length) return;
+      let typeFilters = [];
+      let nameFilters = [];
+      this.filterTerms.forEach(filter => {
+        if (filter.value){
+          typeFilters.push(filter.value);
+        } else {
+          // escape string
+          let term = filter.replace( /[-/\\^$*+?.()|[\]{}]/g, '\\$&' );
+          var reg = new RegExp( '.*' + term + '.*', 'i' );
+          nameFilters.push(reg)
+        }
+      });
+      let filter = {};
+      if (typeFilters.length){
+        filter.type = {$in: typeFilters};
+      }
+      if (nameFilters.length){
+        filter.name = {$in: nameFilters};
+      }
+      return filter;
+    },
+  },
+  watch:{
+    filter(value){
+      this.$emit('input', value);
+    }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>
--- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
@@ -23,19 +23,11 @@
              :disabled="organizeDisabled"
              style="flex-grow: 0; height: 32px;"
            />
-            <v-combobox
+            <tree-search-input
              ref="searchBox"
              slot="extension"
-              v-model="filterString"
-              :items="filterOptions"
-              prepend-inner-icon="mdi-magnify"
+              v-model="filter"
              class="mx-4"
-              hide-no-data
-              hide-selected
-              multiple
-              clearable
-              small-chips
-              deletable-chips
            />
          </v-toolbar>
          <creature-properties-tree
@@ -65,13 +57,14 @@
  import TreeDetailLayout from '/imports/ui/components/TreeDetailLayout.vue';
  import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
  import CreaturePropertyDialog from '/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue';
-
+  import TreeSearchInput from '/imports/ui/components/tree/TreeSearchInput.vue';
  import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
  import { getPropertyName } from '/imports/constants/PROPERTIES.js';

  export default {
    components: {
      TreeDetailLayout,
+      TreeSearchInput,
      CreaturePropertiesTree,
      CreaturePropertyDialog,
    },
@@ -89,50 +82,8 @@
      organizeDisabled: false,
      selectedNodeId: undefined,
      fab: false,
-      filterString: '',
-      filterOptions: [
-        {text: 'Actions', value: 'action'},
-        {text: 'Attacks', value: 'attack'},
-        {text: 'Attributes', value: 'attribute'},
-        {text: 'Buffs', value: 'buff'},
-        {text: 'Class Levels', value: 'classLevel'},
-        {text: 'Damage Multipliers', value: 'damageMultiplier'},
-        {text: 'Effects', value: 'effect'},
-        {text: 'Experiences', value: 'experience'},
-        {text: 'Features', value: 'feature'},
-        {text: 'Folders', value: 'folder'},
-        {text: 'Notes', value: 'note'},
-        {text: 'Proficiencies', value: 'proficiency'},
-        {text: 'Rolls', value: 'roll'},
-        {text: 'Saving Throws', value: 'savingThrow'},
-        {text: 'Skills', value: 'skill'},
-        {text: 'Spell Lists', value: 'spellList'},
-        {text: 'Spells', value: 'spell'},
-        {text: 'Containers', value: 'container'},
-        {text: 'Items', value: 'item'},
-      ],
+      filter: undefined,
    };},
-    computed: {
-      filter(){
-        if (!this.filterString.length) return;
-        let typeFilters = [];
-        let nameFilters = [];
-        this.filterString.forEach(filter => {
-          if (filter.value){
-            typeFilters.push(filter.value);
-          } else {
-            // escape string
-            let term = filter.replace( /[-/\\^$*+?.()|[\]{}]/g, '\\$&' );
-            var reg = new RegExp( '.*' + term + '.*', 'i' );
-            nameFilters.push(reg)
-          }
-        });
-        return {$or: [
-          {type: {$in: typeFilters}},
-          {name: {$in: nameFilters}},
-        ]};
-      },
-    },
    watch: {
      filter(filter){
        if (filter) {
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
@@ -28,7 +28,10 @@
        type: Object,
        default: undefined,
      },
-			filter: Object,
+      filter: {
+        type: Object,
+        default: undefined,
+      },
 			group: {
 				type: String,
 				default: 'creatureProperties'
--- a/app/imports/ui/library/LibraryAndNode.vue
+++ b/app/imports/ui/library/LibraryAndNode.vue
@@ -25,9 +25,16 @@
          class="mx-3"
          style="flex-grow: 0; height: 32px;"
        />
+        <tree-search-input
+          ref="searchBox"
+          slot="extension"
+          v-model="filter"
+          class="mx-4"
+        />
        <insert-library-node-button
          v-if="libraryId && canEditLibrary"
-          style="bottom: -32px"
+          slot="extension"
+          style="bottom: -24px"
          fab
          :library-id="libraryId"
          :selected-node-id="selectedNodeId"
@@ -43,6 +50,7 @@
          :organize-mode="organize"
          :selected-node="selectedNode"
          should-subscribe
+          :filter="filter"
          @selected="clickNode"
        />
      </div>
@@ -52,6 +60,7 @@
        :organize-mode="organize"
        :selected-node="selectedNode"
        style="overflow-y: auto; padding: 12px;"
+        :filter="filter"
        @selected="clickNode"
      />
    </div>
@@ -82,6 +91,7 @@ import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import isDarkColor from '/imports/ui/utility/isDarkColor.js';
 import { assertEditPermission } from '/imports/api/sharing/sharingPermissions.js';
 import getThemeColor from '/imports/ui/utility/getThemeColor.js';
+import TreeSearchInput from '/imports/ui/components/tree/TreeSearchInput.vue';

 export default {
  components: {
@@ -90,6 +100,7 @@ export default {
    LibraryNodeDialog,
    LibraryContentsContainer,
    InsertLibraryNodeButton,
+    TreeSearchInput,
  },
  props: {
    selection: Boolean,
@@ -101,6 +112,7 @@ export default {
  data(){ return {
    organize: false,
    selectedNodeId: undefined,
+    filter: undefined,
  };},
  computed: {
    isToolbarDark(){
--- a/app/imports/ui/library/LibraryBrowser.vue
+++ b/app/imports/ui/library/LibraryBrowser.vue
@@ -47,6 +47,7 @@
            :organize-mode="organizeMode && editPermission(library)"
            :edit-mode="editMode"
            :selected-node="selectedNode"
+            :filter="filter"
            should-subscribe
            @selected="e => $emit('selected', e)"
          />
@@ -87,6 +88,10 @@ export default {
      type: Object,
      default: undefined,
    },
+    filter: {
+      type: Object,
+      default: undefined,
+    },
  },
  data(){ return {
    expandedLibrary: [],
--- a/app/imports/ui/library/LibraryContentsContainer.vue
+++ b/app/imports/ui/library/LibraryContentsContainer.vue
@@ -38,13 +38,20 @@
 			TreeNodeList,
 		},
 		props: {
-			libraryId: String,
+			libraryId: {
+        type: String,
+        default: undefined,
+      },
 			organizeMode: Boolean,
 			selectedNode: {
        type: Object,
        default: undefined,
      },
      shouldSubscribe: Boolean,
+      filter: {
+        type: Object,
+        default: undefined,
+      },
 		},
    data(){return {
      slowShouldSubscribe: this.shouldSubscribe,
@@ -79,7 +86,13 @@
 			},
 			libraryChildren(){
 				if (!this.library) return;
-				return nodesToTree({collection: LibraryNodes, ancestorId: this.library._id});
+				return nodesToTree({
+          collection: LibraryNodes,
+          ancestorId: this.library._id,
+          filter: this.filter,
+          includeFilteredDocAncestors: true,
+          includeFilteredDocDescendants: true,
+        });
 			},
 		},
 		methods: {