LIMS-926: Feature advanced filter do not show logic

client/src/js/app/components/combo-box.vue

@@ -434,9 +434,6 @@ export default {
   @apply tw-bg-white tw-h-8 tw-rounded tw-border tw-border-content-dark-background tw-flex tw-items-center tw-cursor-pointer
 }
 
-.select-selected-multiple {
-  @apply tw-bg-white tw-h-8 tw-rounded tw-border tw-border-content-dark-background tw-flex tw-items-center tw-cursor-pointer
-}
 .select-selected.disabled {
   @apply tw-bg-content-page-background
 }
@@ -522,6 +519,8 @@ export default {
 .item-multiple-selected {
   @apply tw-bg-content-active tw-text-white;
 }
+
+
 .select-search-input.small {
   @apply tw-h-8;
 }
@@ -531,7 +530,7 @@ export default {
 
 .pill-input {
   white-space: nowrap;
-  @apply tw-rounded-full tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-content-active tw-text-sm
+  @apply tw-rounded-md tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-gray-300 tw-text-sm
 }
 
 ::-webkit-scrollbar {

client/src/js/app/components/multi-input-dialogue.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="tw-relative tw-w-auto tw-text-xs">
+        <div ref="myElement" class="tw-bg-white tw-rounded-md tw-p-2 tw-flex gap-1 tw-flex-wrap" 
+        @click="$refs.search_input.focus()">
+            <div v-for="(name, id) in selected" :key="id">
+                <div v-if="name" class="tw-bg-gray-300 tw-h-8 tw-m-1 tw-rounded-md tw-flex tw-items-center">
+                    <div class="tw-p-2"> {{ name }}</div>
+                </div>
+            </div>
+            <div class="tw-flex-1">
+                <div type="text" ref="search_input"
+                @click="openDialog" placeholder="Search"
+                    class="tw-w-full tw-h-8 tw-border-0 focus:tw-border-0 focus:tw-outline-none focus:tw-ring-0 tw-py-1 tw-px-0">
+            </div>
+                    <dialog-modal
+                        class="tw-w-full"
+                        v-if="showDialog"
+                        :show-dialog="showDialog"
+                        :title="title"
+                        @cancel="showDialog = false"
+                        >
+                        <slot></slot>
+                    </dialog-modal>
+            </div>
+        </div>
+
+    </div>
+
+</template>
+
+<script>
+import DialogModal from 'app/components/dialog-modal.vue'
+
+export default {
+    name: 'multi-input-dia',
+    props: {
+        multInputSelected: Object,
+        index: Number
+    },
+    components: {
+        'dialog-modal': DialogModal,
+    },
+    data() {
+        return {
+        selected: this.multInputSelected,
+        showDialog: false,
+        }
+    },
+    mounted() {
+        document.addEventListener('click', this.handleClickOutside);
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.handleClickOutside);
+    },
+    methods: {
+        openDialog() {
+            this.showDialog = true;
+        }
+    },
+    watch: {
+        multInputSelected: {
+            handler(newValue) {
+                this.selected = newValue;
+            },
+            deep: true
+        }
+    }
+
+}
+</script>
+
+<style scoped>
+    .pill-input {
+        white-space: nowrap;
+        @apply tw-rounded-full tw-h-6 tw-max-w-xs tw-ml-1 tw-px-2 tw-py-1 tw-bg-content-active tw-text-sm
+    }
+
+</style>
+
+

client/src/js/modules/summary/styles/_summary.scss

@@ -55,17 +55,15 @@
     @apply tw-text-content-active tw-text-content-active
 }
 
-.filter-grid {
-    @apply tw-grid tw-grid-rows-1 tw-grid-cols-4 tw-grid-flow-col 
-}
-
 .filter-options-grid {
-    @apply tw-grid tw-grid-rows-6 tw-grid-cols-3 tw-grid-flow-col tw-mb-2
+    @apply tw-flex tw-flex-wrap 
 }
 
-.format-options-grid {
-    @apply tw-grid tw-grid-rows-6 tw-grid-cols-1 tw-grid-flow-col tw-mb-2
-
+.flex-thirds {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-auto-flow: row; /* this will make items flow vertically within columns */
+    gap: 1rem; /* for spacing between rows/columns, you can adjust this */
 }
 
 .select-column-button {