diff --git a/frontend/src/components/OUTreeEntry.vue b/frontend/src/components/OUTreeEntry.vue index fc1724604a7eff04ce6e417b6a41ae161f0e7634..0ab10b83f466fd0a614fa6811b5178ee434de082 100644 --- a/frontend/src/components/OUTreeEntry.vue +++ b/frontend/src/components/OUTreeEntry.vue @@ -1,22 +1,24 @@ <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> diff --git a/frontend/src/views/org/OU.vue b/frontend/src/views/org/OU.vue index cc4990ab0b3f1b9d2f96125659d6c1d2015f7c52..e8b623f7e4c7f9c0860c128fb0fd5340ea50c4bd 100644 --- a/frontend/src/views/org/OU.vue +++ b/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'],