use slim select

dshomoye · Jan 17, 2021 · e06c2c3 · e06c2c3
1 parent 8755694
commit e06c2c3
Showing 1 changed file with 21 additions and 5 deletions.
diff --git a/resources/templates/globalConfig.html b/resources/templates/globalConfig.html
@@ -4,11 +4,15 @@
 <head>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.css" rel="stylesheet">
+    </link>
     <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js" defer></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.27.0/slimselect.min.js"></script>
     <title>Config Preview</title>
 </head>
 
-<body style="font-size: 0.7rem;" x-data="data()" x-init="listen()">
+<body style="font-size: 0.7rem;" x-data="data()" x-init="listen()"
+    @update-slim-select.window="$nextTick(() => { initMultiSelect() });">
     <div>
         <nav class="navbar navbar-expand-lg bg-success">
             <div class="container" id="main-nav">
@@ -37,7 +41,7 @@
                     <template x-if="entity.type === 'text' ">
                         <div class="mb-3">
                             <label class="form-label" x-text="entity.label"></label>
-                            <input type="text" class="form-control">
+                            <input type="text" class="form-control form-control-sm">
                         </div>
                     </template>
                     <template x-if="entity.type === 'checkbox' ">
@@ -62,7 +66,7 @@
                     <template x-if="entity.type === 'singleSelect' ">
                         <div class="mb-3">
                             <p x-text="entity.label"></p>
-                            <select :id="entity.field" class="form-select form-select-sm" aria-label="entity.label">
+                            <select :id="entity.field" aria-label="entity.label">
                                 <template x-for="option in entity.options.autoCompleteFields">
                                     <option :value="option.value" x-text="option.label"></option>
                                 </template>
@@ -72,7 +76,7 @@
                     <template x-if="entity.type === 'multipleSelect'">
                         <div class="mb-3">
                             <p x-text="entity.label"></p>
-                            <select class="form-select form-select-sm" multiple :id="entity.field" aria-label="entity.label" >
+                            <select multiple :id="entity.field" aria-label="entity.label" >
                                 <template x-for="option in entity.options.items">
                                     <option :value="option.value" x-text="option.label"></option>
                                 </template>
@@ -98,14 +102,17 @@
                 pages: [],
                 configTabs: [],
                 entities: [],
+                slimSelects: [],
                 listen() {
                     window.addEventListener('message', event => {
                         const message = event.data;
                         if (message.action === "config-data") {
+                            this.slimSelects.forEach(s => s?.destroy())
+                            this.slimSelects = []
                             this.globalConfig = message.data
                             this.pages = Object.keys(message.data.pages).map(p => this.globalConfig.pages[p].title)
                             this.configTabs = this.globalConfig.pages.configuration.tabs.map(t => t.name)
-                            this.updateEntities(this.activeForm)
+                            this.updateEntities(this.activeForm);
                         }
                     })
                 },
@@ -117,13 +124,22 @@
                     } else {
                         this.entities = []
                     }
+                    window.dispatchEvent(new CustomEvent('update-slim-select'));
                 },
                 updatePage(page) {
                     this.activePage = page;
                     this.updateEntities('')
+                },
+                initMultiSelect(id) {
+                    this.entities.forEach((entity) => {
+                        if(entity.type === 'singleSelect' || entity.type === 'multipleSelect') {
+                            this.slimSelects.push(new SlimSelect({ select: `#${entity.field}` }))
+                        }
+                    })
                 }
             }
         }
+
     </script>
 </body>