From 5c87cb2cf6cb8f9f0b543dedb5276a90ad2c960a Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 28 Jun 2023 17:37:34 +0200
Subject: [PATCH] ADD: Filter to OUTree
---
frontend/src/components/OUTreeEntry.vue | 38 ++++++++++++++++---------
frontend/src/views/org/OU.vue | 9 ++++--
2 files changed, 31 insertions(+), 16 deletions(-)
diff --git a/frontend/src/components/OUTreeEntry.vue b/frontend/src/components/OUTreeEntry.vue
index fc1724604..0ab10b83f 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 cc4990ab0..e8b623f7e 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'],
--
GitLab