From 25f86d091446381a888c5cb36118c0286665086c Mon Sep 17 00:00:00 2001
From: jefry <jefrycen@thamrin.co.id>
Date: Thu, 15 Sep 2022 11:37:44 +0700
Subject: [PATCH] multi select

---
 public/js/main.js                       | 40 +++++++++++++++++++++++++++++---
 public/js/page/dashboard.js             | 41 +++++++++++++++++++++++++--------
 views/partials/dashboard/modal_form.ejs |  6 ++---
 3 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/public/js/main.js b/public/js/main.js
index dfbf9c7..87ac848 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -1,5 +1,19 @@
 $(".modalCompanyAll").change((e)=>{
     e.preventDefault();
+    selectCompanyList.preselected = [];
+    selectCompanyList.preselect();
+    selectCompanyList.render();
+    selectCompanyList.load();
+    selectCompanyList.renderOptions();
+
+    selectDivisiList.preselected = [];
+    selectDivisiList.preselect();
+    selectDivisiList.render();
+    selectDivisiList.load();
+    selectDivisiList.renderOptions();
+
+
+    
     if($(e.target).prop('checked')){
         $("#modal-form .modalCompanySelect").parent('.drop').hide();
         $("#modal-form .modalCompanySelect").val('All').change();
@@ -12,14 +26,29 @@ $(".modalCompanyAll").change((e)=>{
 
 
 $(".modalCompanySelect").change(async(e)=>{
+    if($('#modal-form .modalDivisionSelect').length>0){
+        selectDivisiList.preselected = [];
+        selectDivisiList.preselect();
+        selectDivisiList.render();
+        selectDivisiList.load();
+        selectDivisiList.renderOptions();
+    }
     if($(e.target).val()&&$(e.target).val().length>0){
-        // console.log(`/api/divisions${(e.target.value == 'All')?'':`?filters[companies][id][$in]=[${$(e.target).val()}]`}`);
+        // console.log(typeof $(e.target).val());
+        var filters = [];
+        if(typeof $(e.target).val() == 'string'){
+            filters.push($(e.target).val());
+        }
+        else {
+            filters = $(e.target).val();
+        }
+        // console.log($(e.target).val() == 'string',filters);
         $(".modalDivisionSelect").removeAttr('disabled');
         $(".modalDivisiAll").removeAttr('disabled');
         var getToken = await fetch(`/session/key?s=jwt`);
         if(getToken.ok){
             var token = await getToken.text();
-            var res = await fetch(`/api/divisions${(e.target.value == 'All')?'':`?${$(e.target).val().map((i,idx)=>`filters[companies][id][$in][${idx}]=${i}`).join('&')}`}`,{
+            var res = await fetch(`/api/divisions${(e.target.value == 'All')?'':`?${filters.map((i,idx)=>`filters[companies][id][$in][${idx}]=${i}`).join('&')}`}`,{
                 headers:{
                     "Authorization" : "Bearer "+token,
                 }
@@ -32,7 +61,7 @@ $(".modalCompanySelect").change(async(e)=>{
                     $(".modalDivisionSelect").append(`<option  value="${i.id}">${i.attributes.Name}</option>`);
                 });
                 
-                if($('#modal-form .modalDivisionSelect')){
+                if($('#modal-form .modalDivisionSelect').length>0){
                     selectDivisiList.load();
                     selectDivisiList.renderOptions();
                 }
@@ -49,6 +78,11 @@ $(".modalCompanySelect").change(async(e)=>{
 
 $(".modalDivisiAll").change((e)=>{
     e.preventDefault();
+    selectDivisiList.preselected = [];
+    selectDivisiList.preselect();
+    selectDivisiList.render();
+    selectDivisiList.load();
+    selectDivisiList.renderOptions();
     if($(e.target).prop('checked')){
         $(".modalDivisionSelect").parent('.drop').hide();
     }
diff --git a/public/js/page/dashboard.js b/public/js/page/dashboard.js
index 8b80e8e..7c26e42 100644
--- a/public/js/page/dashboard.js
+++ b/public/js/page/dashboard.js
@@ -4,13 +4,20 @@ let list;
 let attachment;
 let removeMedia = [];
 
-var selectCompanyList = new drop({
-  selector:  '#modal-form .modalCompanySelect'
-});
+if($('#modal-form .modalCompanySelect').length>0){
+  var selectCompanyList = new drop({
+    selector:  '#modal-form .modalCompanySelect'
+  });
+}
+
+
+var defaultSelectDivisi = $('#modal-form .modalDivisionSelect').clone();
+if($('#modal-form .modalDivisionSelect').length>0){
+  var selectDivisiList = new drop({
+    selector:  '#modal-form .modalDivisionSelect'
+  });
+}
 
-var selectDivisiList = new drop({
-  selector:  '#modal-form .modalDivisionSelect'
-});
 
 
 
@@ -282,9 +289,22 @@ $('#modal-form').on('hide.bs.modal', function(e) {
     $(`#modal-form input#thumbnail`).closest('.form-group').show();
     $('#modal-form select[name=company]').closest('.form-group').show();
     $('#modal-form select[name=division]').closest('.form-group').show();
+    $('#modal-form select[name=division]').empty();
     $("#thumbnailSelected").remove();
     $("#videoSelected").remove();
     $(`#modal-form .completeData`).addClass('hide');
+    
+    selectCompanyList.preselected = [];
+    selectCompanyList.preselect();
+    selectCompanyList.render();
+    selectCompanyList.load();
+    selectCompanyList.renderOptions();
+
+    selectDivisiList.preselected = [];
+    selectDivisiList.preselect();
+    selectDivisiList.render();
+    selectDivisiList.load();
+    selectDivisiList.renderOptions();
   }
 });
 
@@ -663,10 +683,10 @@ $('#modal-form').on('shown.bs.modal', async function() {
                   obj[element.name] = moment(element.value,'MM/DD/YYYY').format('YYYY-MM-DD');
                 }
                 else{
-                  obj[element.name] = element.value;
+                  obj[element.name] = (obj[element.name]?obj[element.name]+',':'')+element.value;
                 }
               } catch (e) {
-                obj[element.name] = `"${element.value}"`;
+                obj[element.name] = (obj[element.name]?obj[element.name]+',':'')+`"${element.value}"`;
               }
             });
           if(!$(`#modal-form .completeData`).hasClass('hide')){
@@ -756,14 +776,15 @@ $('#modal-form').on('shown.bs.modal', async function() {
             .serializeArray()
             .forEach(element => {
               try {
+                
                 if(element.value[0]=='{'){
                   obj[element.name] = JSON.parse(element.value);
                 }
                 else{
-                  obj[element.name] = element.value;
+                  obj[element.name] = (obj[element.name]?obj[element.name]+',':'')+element.value;
                 }
               } catch (e) {
-                obj[element.name] = element.value;
+                obj[element.name] = (obj[element.name]?obj[element.name]+',':'')+element.value;
               }
             });
           // console.log(JSON.stringify(obj));
diff --git a/views/partials/dashboard/modal_form.ejs b/views/partials/dashboard/modal_form.ejs
index 028a7e3..5c7f9b7 100644
--- a/views/partials/dashboard/modal_form.ejs
+++ b/views/partials/dashboard/modal_form.ejs
@@ -53,7 +53,7 @@
                            </div>
                            <div class="form-group">
                               <label for="modalDivisionSelect" class="form-control-label">Division</label>
-                              <div class="input-group input-group-merge input-group-alternative" style="background-color: white;">
+                              <div class="divisi-group input-group input-group-merge input-group-alternative" style="background-color: white;">
                                  <div class="input-group">
                                     <span class="col-9 input-group-text"><i class="ni ni-shop"></i>&nbsp;Pilih Divisi</span>
                                     <div class="form-group col-3 input-group-text" style="justify-content: end;">
@@ -64,8 +64,8 @@
                                        </label>
                                    </div>
                                  </div>
-                                 <select name="division" class="form-control modalDivisionSelect" disabled>
-                                    <!-- <option value="All">Semua</option> -->
+                                 <select multiple name="division" class="form-control modalDivisionSelect" disabled>
+                                    <option hidden class="hide" value="All">Semua</option>
                                  </select>
                               </div>
                            </div>