ADD: Filter to OUTree

frontend/src/components/OUTreeEntry.vue

 <template>
   <div>
-    <p>
-      <b-button variant="link" class="mr-2 px-2 py-1" v-b-toggle="ou.short_name + '-children'"
-                :style="{color: (ou.short_name + ou.name).toHSL()}"
-                v-if="ous_by_parent[ou.short_name] && ous_by_parent[ou.short_name].length > 0">
-        <netvs-icon class="collapse-icon" icon="collapse"></netvs-icon>
-      </b-button>
-      <b-link class="mr-3" :to="'/org/ou/'+ou.short_name">{{ ou.name }} ({{ ou.short_name }})</b-link>
-      <b-button variant="link" :id="'edit-ou-' + ou.short_name"
-                @click="edit_ou(ou)" class="m-0 p-0">
-        <netvs-icon icon="edit"></netvs-icon>
-      </b-button>
-    </p>
+    <template v-if="filter_match">
+      <p>
+        <b-button variant="link" class="mr-2 px-2 py-1" v-b-toggle="ou.short_name + '-children'"
+                  :style="{color: (ou.short_name + ou.name).toHSL()}"
+                  v-if="ous_by_parent[ou.short_name] && ous_by_parent[ou.short_name].length > 0">
+          <netvs-icon class="collapse-icon" icon="collapse"></netvs-icon>
+        </b-button>
+        <b-link class="mr-3" :to="'/org/ou/'+ou.short_name">{{ ou.name }} ({{ ou.short_name }})</b-link>
+        <b-button variant="link" :id="'edit-ou-' + ou.short_name"
+                  @click="edit_ou(ou)" class="m-0 p-0">
+          <netvs-icon icon="edit"></netvs-icon>
+        </b-button>
+      </p>
+    </template>
     <div class="pl-4 ml-2" v-if="ous_by_parent[ou.short_name]"
          :style="{'border-left': `6px solid ${(ou.short_name + ou.name).toHSL()}`, borderRadius: '14px'}">
       <b-collapse :id="ou.short_name + '-children'" visible>
         <OUTreeEntry v-for="child_ou in ous_by_parent[ou.short_name]" :key="child_ou.short_name" :ou="child_ou"
-                     :ous_by_parent="ous_by_parent" :edit_ou="edit_ou"/>
+                     :ous_by_parent="ous_by_parent" :edit_ou="edit_ou" :filter="filter"/>
       </b-collapse>
     </div>
   </div>
@@ -44,6 +46,11 @@ export default {
       default: (ou) => {
         window.console.log('No DBEditor handler was passed to edit', ou)
       }
+    },
+    filter: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   data() {
@@ -51,6 +58,11 @@ export default {
       db_editor_presets: this.ou
     }
   },
+  computed: {
+    filter_match() {
+      return this.filter === '' || this.ou.name.toLowerCase().includes(this.filter.toLowerCase())
+    }
+  },
 }
 </script>
 

frontend/src/views/org/OU.vue

@@ -282,9 +282,10 @@
     <hr>
     <h2 v-if="!is_entry && ou !== ''">{{ $t('views.org.ou.sub_ous') }}</h2>
     <Loading :data="[ous, ous_by_parent]">
+      <FilterInput v-model="filter"/>
       <template v-if="ou">
         <div v-for="top_level_ou in ous_by_parent[ou.short_name]" :key="top_level_ou.short_name">
-          <OUTreeEntry :ou="top_level_ou" :ous_by_parent="ous_by_parent" :edit_ou="edit_ou"/>
+          <OUTreeEntry :ou="top_level_ou" :ous_by_parent="ous_by_parent" :edit_ou="edit_ou" :filter="filter"/>
         </div>
         <div v-if="!ous_by_parent[ou.short_name] || ous_by_parent[ou.short_name].length === 0"
              class="font-italic text-center my-3">
@@ -293,7 +294,7 @@
       </template>
       <template v-else>
         <div v-for="top_level_ou in root_ous" :key="top_level_ou.short_name">
-          <OUTreeEntry :ou="top_level_ou" :ous_by_parent="ous_by_parent" :edit_ou="edit_ou"/>
+          <OUTreeEntry :ou="top_level_ou" :ous_by_parent="ous_by_parent" :edit_ou="edit_ou" :filter="filter"/>
         </div>
         <div v-if="!root_ous || root_ous.length === 0"
              class="font-italic text-center my-3">
@@ -352,10 +353,11 @@ import EVLogViewer from '@/components/EVLogViewer'
 import OUTreeEntry from '@/components/OUTreeEntry'
 import PaginatorTable from '@/components/PaginatorTable'
 import {EventBus} from '@/eventbus'
+import FilterInput from '@/components/FilterInput.vue'
 
 export default {
   name: 'OUOverview',
-  components: { OUTreeEntry, EVLogViewer, DBEditor, Loading, PaginatorTable },
+  components: { FilterInput, OUTreeEntry, EVLogViewer, DBEditor, Loading, PaginatorTable },
   data() {
     return {
       groups2ou: {},
@@ -372,6 +374,7 @@ export default {
       ous: null,
       ous_by_name: null,
       ous_by_parent: null,
+      filter: '',
       db_editor_presets: {},
       fqdn2ou_db_editor_old_data: null,
       fqdn2ou_db_editor_non_optionals: ['ou_short_name', 'fqdn_value'],