removed remove function and filter structure

DiamondLightSource · Sep 25, 2023 · 22714c1 · 22714c1
1 parent 72a5f66
commit 22714c1
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 257 deletions.
diff --git a/client/src/js/app/components/combo-box.vue b/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 {

diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
@@ -1,17 +1,10 @@
 <template>
-    <div class="tw-relative tw-max-w-sm tw-mx-auto tw-text-xs">
+    <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 class="tw-bg-blue-200 tw-rounded-md tw-flex items-center">
+                <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 @click="remove(id)"
-                        class="tw-p-2 tw-select-none tw-rounded-r-md tw-cursor-pointer hover:tw-bg-magma-orange-clear">
-                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                            <path d="M12.5745 1L1 12.5745" stroke="#FEAD69" stroke-width="2" stroke-linecap="round"/>
-                            <path d="M1.00024 1L12.5747 12.5745" stroke="#FEAD69" stroke-width="2" stroke-linecap="round"/>
-                        </svg>
-                    </div>
                 </div>
             </div>
             <div class="tw-flex-1">
@@ -26,27 +19,8 @@
                         :title="title"
                         @cancel="showDialog = false"
                         >
-                        <slot name="dialog-content"></slot>
+                        <slot></slot>
                     </dialog-modal>
-
-                    <!-- <div v-show="showSelector" class="tw-absolute tw-left-0 tw-bg-white tw-z-30 tw-w-full tw-rounded-b-md tw-font-medium">
-                    <div class="tw-p-2 tw-space-y-1">
-                        <div v-for="(name, id) in options" :key="id">
-                            <div>
-                                <template v-if="!selected[id]">
-                                    <div @click="select(id, name)"
-                                        class="tw-bg-blue-200 tw-border-2 tw-border-blue-200 tw-cursor-pointer tw-rounded-md tw-p-2 hover:tw-border-light-blue-1"
-                                        >{{ name }}</div>
-                                </template>
-                            </div>
-                        </div>
-                        <div v-if="options.length === 0">
-                            <div class="tw-text-gray-500">
-                                No result
-                            </div>
-                        </div>
-                    </div>
-                </div> -->
             </div>
         </div>
 
@@ -60,7 +34,8 @@ import DialogModal from 'app/components/dialog-modal.vue'
 export default {
     name: 'multi-input-dia',
     props: {
-        multInputSelected: {},
+        multInputSelected: Object,
+        index: Number
     },
     components: {
         'dialog-modal': DialogModal,
@@ -70,7 +45,7 @@ export default {
         search: '',
         showSelector: false,
         inputContent: '',
-        selected: {...this.multInputSelected},
+        selected: this.multInputSelected,
         debounceTimeout: null,
         showDialog: false,
         }
@@ -82,14 +57,6 @@ export default {
         document.removeEventListener('click', this.handleClickOutside);
     },
     methods: {
-        updateInput(event) {
-            clearTimeout(this.debounceTimeout);
-
-            this.debounceTimeout = setTimeout(() => {
-                this.inputContent = event.target.value;
-                this.goSearch();
-            }, 300);  // 300ms debounce time
-        },
         handleClickOutside(event) {
             if (this.$refs.myElement && !this.$refs.myElement.contains(event.target)) {
             // Clicked outside the element
@@ -102,27 +69,27 @@ export default {
                 this.showSelector = false;
                 this.options = []
             },
-        remove(id) {
-            console.log('trying to delete', this.selected[id]);
-            this.$delete(this.selected, id); // Vue's method to ensure reactivity
-            this.$emit('selected-changed', this.selected);
-        },
-        goSearch() {
-            if (this.search) {
-                this.showSelector = true;
-            } else {
-                this.showSelector = false;
-            }
-            console.log(this.options)
-        },
         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>
 

diff --git a/client/src/js/modules/summary/styles/_summary.scss b/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 {