From 72a5f66bc6806d6703cbbb0c3fa7c67244d60778 Mon Sep 17 00:00:00 2001
From: Neeli Katti <neeli.katti@diamond.ac.uk>
Date: Thu, 21 Sep 2023 17:05:01 +0100
Subject: [PATCH] adding multiple input component with dialogue box

---
 .../app/components/multi-input-dialogue.vue   | 129 ++++++++++++++++++
 .../src/js/modules/summary/views/summary.vue  | 125 +++++++++++++----
 2 files changed, 229 insertions(+), 25 deletions(-)
 create mode 100644 client/src/js/app/components/multi-input-dialogue.vue

diff --git a/client/src/js/app/components/multi-input-dialogue.vue b/client/src/js/app/components/multi-input-dialogue.vue
new file mode 100644
index 000000000..0312acce2
--- /dev/null
+++ b/client/src/js/app/components/multi-input-dialogue.vue
@@ -0,0 +1,129 @@
+<template>
+    <div class="tw-relative tw-max-w-sm tw-mx-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 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">
+                <input type="text" v-model="search" ref="search_input"
+                @click="openDialog" placeholder="Search"
+                    class="tw-w-full tw-border-0 focus:tw-border-0 focus:tw-outline-none focus:tw-ring-0 tw-py-1 tw-px-0">
+                
+                    <dialog-modal
+                        class="tw-w-full"
+                        v-if="showDialog"
+                        :show-dialog="showDialog"
+                        :title="title"
+                        @cancel="showDialog = false"
+                        >
+                        <slot name="dialog-content"></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>
+
+    </div>
+
+</template>
+
+<script>
+import DialogModal from 'app/components/dialog-modal.vue'
+
+export default {
+    name: 'multi-input-dia',
+    props: {
+        multInputSelected: {},
+    },
+    components: {
+        'dialog-modal': DialogModal,
+    },
+    data() {
+        return {
+        search: '',
+        showSelector: false,
+        inputContent: '',
+        selected: {...this.multInputSelected},
+        debounceTimeout: null,
+        showDialog: false,
+        }
+    },
+    mounted() {
+        document.addEventListener('click', this.handleClickOutside);
+    },
+    beforeDestroy() {
+        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
+            console.log('Clicked outside!');
+            this.showSelector = false;
+            }
+        },
+        clearOpts() {
+                this.search = '';
+                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;
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>
+
+    
diff --git a/client/src/js/modules/summary/views/summary.vue b/client/src/js/modules/summary/views/summary.vue
index e57f83fed..c52f0e85d 100644
--- a/client/src/js/modules/summary/views/summary.vue
+++ b/client/src/js/modules/summary/views/summary.vue
@@ -9,15 +9,6 @@
             
         </div>
 
-        <!-- <div style="position:relative;border:1px solid blue;">
-            <div style="height: 100px; width: 100px; background: red; overflow: auto;">
-                if there is some really long content here, it will cause overflow, but the green box will not
-                <div style="position:absolute; z-index:1; left: 20px; top:0; height: 200px; width: 200px; background: green;">
-                </div>
-            </div>
-        </div> -->
-
-
         <div>
             <i class="tooltip fa fa-info-circle" aria-hidden="true">
                 <span class="tooltiptext">Use the Advanced Filter Search bar to filter your values</span>
@@ -76,7 +67,60 @@
                         <div class="filter-options-grid tw-col-span-3 ">
 
                                 <div class="tw-flex" v-for="(value, index) in filters.slice(2)" :key="value.id">
-                                    <combo-box
+                                    <multi-input-dia 
+                                        :multInputSelected="multInputSelected"
+                                        @selected-changed="updateSelected"
+                                    > {{ index }}
+                                    <template v-slot:dialog-content>
+                                        <div class="">
+                                            <combo-box
+                                                v-if="value.title!='Proposal'"
+                                                    class="combo-box t-mr-1 tw-text-black"
+                                                    :data="summaryParameters"
+                                                    textField="title"
+                                                    valueField="valueField"
+                                                    size="small"
+                                                    :can-create-new-item="false"
+                                                    v-model="value.selected"
+                                                    :defaultText="value.title"
+                                            ></combo-box>
+
+                                            <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
+                                                class="combo-box-description tw-my-5"
+                                                :data="value.data"
+                                                :textField="value.textField"
+                                                :valueField="value.valueField"
+                                                size="small"
+                                                :can-create-new-item="false"
+                                                v-model="value.selected"
+                                                defaultText='Select Multiple'
+                                                :multiple="true"
+                                                :valueArray="value.selectedArr"
+                                                :searchArray="value.selectedArr"
+                                            ></combo-box>
+
+                                            <combo-box v-if="value.inputtype == 'search-operands'"
+                                                class="combo-box-description tw-my-5"
+                                                :data="operands"
+                                                textField="title"
+                                                valueField="value"
+                                                size="small"
+                                                :can-create-new-item="false"
+                                                v-model="value.operand"
+                                                defaultText='Select Operand'
+                                                ></combo-box>
+
+                                            <input  v-if="value.inputtype == 'search-operands'"
+                                                v-model="value.value"
+                                                class="input-description tw-mb-4"
+                                                placeholder="Enter Value"
+                                            >
+                                        </div>
+                                    </template>
+                                </multi-input-dia>
+                                <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
+                                    class="fa fa-times-circle tw-text-red-600 tw-ml-2 tw-mb-3"></button>
+                                    <!-- <combo-box
                                     v-if="value.title!='Proposal'"
                                     class="combo-box tw-w-7/12 t-mr-1 tw-text-black"
                                     :data="summaryParameters"
@@ -88,11 +132,43 @@
                                     :defaultText="value.title"
                                     ></combo-box>
 
+                                    <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
+                                    class="combo-box-description tw-px-4 tw-my-5"
+                                    :data="value.data"
+                                    :textField="value.textField"
+                                    :valueField="value.valueField"
+                                    size="small"
+                                    :can-create-new-item="false"
+                                    v-model="value.selected"
+                                    defaultText='Select Multiple'
+                                    :multiple="true"
+                                    :valueArray="value.selectedArr"
+                                    :searchArray="value.selectedArr"
+                                    ></combo-box>
+
+                                    <combo-box v-if="value.inputtype == 'search-operands'"
+                                    class="combo-box-description tw-px-4 tw-my-5"
+                                    :data="operands"
+                                    textField="title"
+                                    valueField="value"
+                                    size="small"
+                                    :can-create-new-item="false"
+                                    v-model="value.operand"
+                                    defaultText='Select Operand'
+                                    ></combo-box>
+
+                                    <input  v-if="value.inputtype == 'search-operands'"
+                                    v-model="value.value"
+                                    class="input-description tw-mb-4 tw-mx-4"
+                                    placeholder="Enter Value"
+                                    >
+
                                     <div class="param-options-wrapper">
                                         <div class="param-options-tooltip">
                                             Add Values
                                             <div class="param-preview">
-                                                <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
+                                            
+                                            <combo-box v-if="value.inputtype == 'combo-box' & value.title != 'Proposal'"
                                             class="combo-box-description tw-px-4 tw-my-5"
                                             :data="value.data"
                                             :textField="value.textField"
@@ -128,7 +204,7 @@
                                         <button v-if="value.textField != 'PROP'" v-on:click="popArr(filters, index+1)" 
                                             class="fa fa-times-circle tw-text-red-600 tw-ml-2 tw-mb-3"></button>
 
-                                    </div>
+                                    </div> -->
 
 
                                     <!-- <i class="tooltip tooltip-position-relative fa fa-ellipsis-v tw-ml-1 tw-text-base tw-my-2" aria-hidden="true">
@@ -435,8 +511,7 @@
         @page-changed="handlePageChange"
         />
 
-  
-    
+
 
 
     </div>
@@ -460,6 +535,7 @@ import CustomTableRow from 'app/components/custom-table-row.vue'
 import ComboBox from 'app/components/combo-box.vue'
 import DialogModal from 'app/components/dialog-modal.vue'
 import ExpandableSidebar from 'app/components/expandable-sidebar.vue'
+import MultiInputDialogue from 'app/components/multi-input-dialogue.vue'
 
 import { popArr, convertToCSV, exportCSV } from 'modules/summary/utils/utils.js'
 
@@ -475,7 +551,8 @@ export default {
     'expandable-sidebar': ExpandableSidebar,
     'dialog-modal': DialogModal,
     'base-input-select': BaseInputSelect,
-    'base-input-text' : BaseInputText
+    'base-input-text' : BaseInputText,
+    'multi-input-dia' : MultiInputDialogue
     },
     props: {
 
@@ -489,6 +566,7 @@ export default {
             isOpen: true,
             isSelectAll: true,
             showFavourites: false,
+            showDialog: true,
             totalRecords:  10,
             pageSize: 15,
             currentPage: 1,
@@ -502,6 +580,7 @@ export default {
             beamLines: [],
             searchedSamplePrefix: [],
             selectedColumns: [],
+            multInputSelected: {1:'Chris'},
             operands: [
                 {   
                     "title": "greater than",
@@ -1286,14 +1365,10 @@ export default {
                 this.$refs.iframeref[index].setAttribute('src', src)
 
             }
-
+        },
+        updateSelected(newSelected) {
+            this.multInputSelected = newSelected;
         }
-
-
-
-    },
-    computed: {
-
     },
     watch: {
         windowWidth: {
@@ -1359,8 +1434,8 @@ export default {
 
     .combo-box {
         font-size: small;
-        position: absolute;
-        width: 15%
+        position: relative;
+        width: 200px;
     }
 
     .combo-box-description {
@@ -1369,7 +1444,7 @@ export default {
     }
 
     .input-description {
-        width: 170px;
+        width: 200px;
         font-size: small;
     }