Added search to library tree views

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>

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"
+              v-model="filter"
-              :items="filterOptions"
-              prepend-inner-icon="mdi-magnify"
               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: '',
+      filter: undefined,
-      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.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) {

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'

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(){

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: [],

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: {