Activity show query inputs should be read only

enferno/admin/templates/admin/partials/activity_search_viewer.html

@@ -4,47 +4,61 @@
             <v-spacer></v-spacer>
             <v-btn icon="mdi-close" @click="closeSearch()"></v-btn>
         </v-toolbar>
-        <v-card-text class="position-relative">
-            <v-overlay v-model="activitySearchViews" absolute contained persistent opacity="0" scroll-strategy="none"></v-overlay>
-            <v-expansion-panels v-if="searchClass!='incident'" multiple accordion v-model="searchPanels">
-                <v-expansion-panel v-for="(q,i) in search">
-                    <v-expansion-panel-title>${translations.query_} ${i+1} 
-                    </v-expansion-panel-title>
-                    <v-expansion-panel-text>
+        <v-card-text>
+            <div class="position-relative min-h-100">
+                <v-expansion-panels v-if="searchClass!='incident'" multiple accordion v-model="searchPanels">
+                    <v-expansion-panel v-for="(q,i) in search">
+                        <v-expansion-panel-title>${translations.query_} ${i+1} 
+                        </v-expansion-panel-title>
+                        <v-expansion-panel-text>
 
-                        {{ i }}
+                            {{ i }}
 
-                        <bulletin-search-box
-                            v-if="searchClass=='bulletin'"
-                            :show-op="!i==0"
-                            v-model="search[i]"
-                            :users="users"
-                            :roles="roles"
-                            :is-admin="has_role(currentUser,'Admin')"
-                        >
-                        </bulletin-search-box>
+                            <bulletin-search-box
+                                v-if="searchClass=='bulletin'"
+                                :show-op="!i==0"
+                                v-model="search[i]"
+                                :users="users"
+                                :roles="roles"
+                                :is-admin="has_role(currentUser,'Admin')"
+                                expand-active-panels
+                            >
+                            </bulletin-search-box>
 
-                        <actor-search-box
-                            v-if="searchClass=='actor'"
-                            :show-op="!i==0"
-                            v-model="search[i]"
-                            :users="users"
-                            :roles="roles"
-                            :is-admin="has_role(currentUser,'Admin')"
-                        >
-                        </actor-search-box>
-                    </v-expansion-panel-text>
-                </v-expansion-panel>
-            </v-expansion-panels>
+                            <actor-search-box
+                                v-if="searchClass=='actor'"
+                                :show-op="!i==0"
+                                v-model="search[i]"
+                                :users="users"
+                                :roles="roles"
+                                :is-admin="has_role(currentUser,'Admin')"
+                                expand-active-panels
+                            >
+                            </actor-search-box>
+                        </v-expansion-panel-text>
+                    </v-expansion-panel>
+                </v-expansion-panels>
 
-            <incident-search-box
-                v-if="searchClass=='incident'"
-                v-model="search"
-                :users="users"
-                :roles="roles"
-                :is-admin="has_role(currentUser,'Admin')"
-            >
-            </incident-search-box>
+                <incident-search-box
+                    v-if="searchClass=='incident'"
+                    v-model="search"
+                    :users="users"
+                    :roles="roles"
+                    :is-admin="has_role(currentUser,'Admin')"
+                    expand-active-panels
+                >
+                </incident-search-box>
+
+                <v-overlay
+                    v-model="activitySearchViews"
+                    absolute
+                    contained
+                    persistent
+                    opacity="0"
+                    scroll-strategy="none"
+                    class="h-100 w-100"
+                ></v-overlay>
+            </div>
         </v-card-text>
     </v-card>
-</v-dialog>
+</v-dialog>

enferno/static/js/components/ActorSearchBox.js

@@ -18,6 +18,10 @@ const ActorSearchBox = Vue.defineComponent({
     roles: {
       type: Array,
     },
+    expandActivePanels: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: ['update:modelValue', 'search'],
 
@@ -68,6 +72,7 @@ const ActorSearchBox = Vue.defineComponent({
         } else {
           this.dyn = new Map();
         }
+        this.setActivePanels();
       },
       immediate: true
     }
@@ -88,6 +93,8 @@ const ActorSearchBox = Vue.defineComponent({
     (this.q?.dyn || []).forEach(field => {
       this.dyn.set(field.name, field)
     });
+
+    this.setActivePanels();
   },
 
   computed: {
@@ -191,6 +198,26 @@ const ActorSearchBox = Vue.defineComponent({
 
 
   methods: {
+    setActivePanels() {
+      if (!this.expandActivePanels) {
+        return;
+      }
+
+      this.$nextTick(() => {
+        const panels = [];
+        if (this.textSearchCount) panels.push('0');
+        if (this.dateCount) panels.push('1');
+        if (this.eventCount) panels.push('2');
+        if (this.personalInfoCount) panels.push('3');
+        if (this.classificationCount) panels.push('4');
+        if (this.workflowCount) panels.push('5');
+        if (this.locationCount) panels.push('6');
+        if (this.dynamicFieldCount) panels.push('7');
+
+        this.openPanels = panels.length ? panels : ['0'];
+      });
+    },
+
     fetchIdNumberTypes() {
       // If already loaded then exit
       if (this.idNumberTypes.length) return
@@ -1093,4 +1120,4 @@ const ActorSearchBox = Vue.defineComponent({
         </v-expansion-panels>
       </div>
   `,
-});
+});

enferno/static/js/components/BulletinSearchBox.js

@@ -22,6 +22,10 @@ const BulletinSearchBox = Vue.defineComponent({
       type: Boolean,
       default: false,
     },
+    expandActivePanels: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ['update:modelValue', 'search'],
@@ -46,6 +50,8 @@ const BulletinSearchBox = Vue.defineComponent({
     (this.q?.dyn || []).forEach(field => {
       this.dyn.set(field.name, field)
     });
+
+    this.setActivePanels();
   },
 
   watch: {
@@ -75,6 +81,7 @@ const BulletinSearchBox = Vue.defineComponent({
         } else {
           this.dyn = new Map();
         }
+        this.setActivePanels();
       },
       immediate: true
     }
@@ -158,6 +165,25 @@ const BulletinSearchBox = Vue.defineComponent({
   },
 
   methods: {
+    setActivePanels() {
+      if (!this.expandActivePanels) {
+        return;
+      }
+
+      this.$nextTick(() => {
+        const panels = [];
+        if (this.textSearchCount) panels.push('0');
+        if (this.dateCount) panels.push('1');
+        if (this.eventCount) panels.push('2');
+        if (this.classificationCount) panels.push('3');
+        if (this.workflowCount) panels.push('4');
+        if (this.locationCount) panels.push('5');
+        if (this.dynamicFieldCount) panels.push('6');
+
+        this.openPanels = panels.length ? panels : ['0'];
+      });
+    },
+
     updateDynamicField(value, field, operator) {
       const normalized = Array.isArray(value)
         ? value.filter((item) => item !== undefined && item !== null && item !== '')

enferno/static/js/components/IncidentSearchBox.js

@@ -14,6 +14,10 @@ const IncidentSearchBox = Vue.defineComponent({
     roles: {
       type: Array,
     },
+    expandActivePanels: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: ['update:modelValue', 'search'],
@@ -54,6 +58,7 @@ const IncidentSearchBox = Vue.defineComponent({
         } else {
           this.dyn = new Map();
         }
+        this.setActivePanels();
       },
       immediate: true
     }
@@ -141,9 +146,30 @@ const IncidentSearchBox = Vue.defineComponent({
     (this.q?.dyn || []).forEach(field => {
       this.dyn.set(field.name, field)
     });
+    this.setActivePanels();
   },
 
   methods: {
+    setActivePanels() {
+      if (!this.expandActivePanels) {
+        return;
+      }
+
+      this.$nextTick(() => {
+        const panels = [];
+        if (this.textSearchCount) panels.push('0');
+        if (this.dateCount) panels.push('1');
+        if (this.eventCount) panels.push('2');
+        if (this.violationsCount) panels.push('3');
+        if (this.classificationCount) panels.push('4');
+        if (this.workflowCount) panels.push('5');
+        if (this.locationCount) panels.push('6');
+        if (this.dynamicFieldCount) panels.push('7');
+
+        this.openPanels = panels.length ? panels : ['0'];
+      });
+    },
+
     fetchViolationCategories(endpointSuffix, categoryVarName) {
       axios
         .get(`/admin/api/${endpointSuffix}/`)
@@ -640,4 +666,4 @@ const IncidentSearchBox = Vue.defineComponent({
         </v-expansion-panels>
       </div>
     `,
-});
+});