markcraig / hdap-demo

Another try at an HDAP UI
MIT License
0 stars 0 forks source link

Advanced search #15

Closed markcraig closed 5 months ago

markcraig commented 6 months ago

Basic search uses a hard-coded filter and subtree search from the root DN ("").

Advanced search lets you:

Is _countOnly useful in this UI?

markcraig commented 5 months ago

Maybe it would look something like this:

image

That's this diff:

diff --git a/src/pages/search.vue b/src/pages/search.vue
index f243e4b..9c7678b 100644
--- a/src/pages/search.vue
+++ b/src/pages/search.vue
@@ -1,7 +1,54 @@
 <template>
     <v-container>
         <v-responsive class="align-center fill-height">
-            <v-text-field placeholder="Search" clearable v-model.trim="terms" @keyup.enter="search()"></v-text-field>
+            <v-tabs v-model="tab">
+                <v-tab value="basic">Basic search</v-tab>
+                <v-tab value="advanced">Advanced search</v-tab>
+            </v-tabs>
+            <v-window v-model="tab">
+                <v-window-item value="basic">
+                    <v-text-field placeholder="Search" clearable v-model.trim="terms"
+                        @keyup.enter="search()"></v-text-field>
+                </v-window-item>
+                <v-window-item value="advanced">
+                    <v-row no-gutters>
+                        <v-col cols="2">
+                            <v-sheet class="pa-2 ma-2">
+                                <v-select label="Base"
+                                    :items="['dc=com/dc=example', 'uid=admin', 'uid=monitor']"></v-select>
+                            </v-sheet>
+                        </v-col>
+                        <v-col>
+                            <v-sheet class="pa-2 ma-2">
+                                <v-text-field placeholder="Query filter" clearable></v-text-field>
+                            </v-sheet>
+                        </v-col>
+                    </v-row>
+                    <v-row no-gutters>
+                        <v-col cols="4">
+                            <v-sheet class="pa-2 ma-2">
+                                <v-select label="Fields" :items="['cn', 'uid', 'mail', 'manager']" chips
+                                    multiple></v-select>
+                            </v-sheet>
+                        </v-col>
+                        <v-col>
+                            <v-sheet class="pa-2 ma-2">
+                                <v-checkbox label="Get operational fields"></v-checkbox>
+                            </v-sheet>
+                        </v-col>
+                        <v-col>
+                            <v-sheet class="pa-2 ma-2">
+                                <v-checkbox label="Count only"></v-checkbox>
+                            </v-sheet>
+                        </v-col>
+                        <v-col>
+                            <v-sheet class="pa-2 ma-2">
+                                <v-select label="Scope" :items="['base', 'one', 'sub', 'subordinates']"></v-select>
+                            </v-sheet>
+                        </v-col>
+                    </v-row>
+                </v-window-item>
+            </v-window>
             <v-btn v-if="selected && selected.length" prepend-icon="mdi-pencil" @click="bulkEdit()">
                 Bulk edit
             </v-btn>
@@ -57,6 +104,7 @@ import { useHdapStore } from '@/store/hdap'

 const hdap = useHdap()
 const hdapStore = useHdapStore()
+const tab = ref('basic')
 const terms = ref('')
 const results = ref('')
 const entries = computed(() => {

@allandenis38 , you can probably improve on the layout. Is anything missing?

I'm sort of ignoring paging and sorting here because Vuetify mostly takes care of that. Here's the reference for query: https://backstage.forgerock.com/docs/ds/7.5/rest-guide/rest-operations.html#query