push

public/js/main.js

@@ -1,10 +1,25 @@
+$(".modalCompanyAll").change((e)=>{
+    e.preventDefault();
+    if($(e.target).prop('checked')){
+        $("#modal-form .modalCompanySelect").parent('.drop').hide();
+        $("#modal-form .modalCompanySelect").val('All').change();
+    }
+    else{
+        $(".modalCompanySelect").parent('.drop').show();
+    }
+});
+
+
+
 $(".modalCompanySelect").change(async(e)=>{
-    if(e.target.value&&e.target.value!=''){
+    if($(e.target).val()&&$(e.target).val().length>0){
+        // console.log(`/api/divisions${(e.target.value == 'All')?'':`?filters[companies][id][$in]=[${$(e.target).val()}]`}`);
         $(".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')?'':`?filters[companies][id][$in]=${e.target.value}`}`,{
+            var res = await fetch(`/api/divisions${(e.target.value == 'All')?'':`?${$(e.target).val().map((i,idx)=>`filters[companies][id][$in][${idx}]=${i}`).join('&')}`}`,{
                 headers:{
                     "Authorization" : "Bearer "+token,
                 }
@@ -12,10 +27,15 @@ $(".modalCompanySelect").change(async(e)=>{
             if(res.ok){
                 var obj = await res.json();
                 $(".modalDivisionSelect").empty();
-                $(".modalDivisionSelect").append(($("#formCreateAdmin").length>0)?'<option value="All">Semua</option>':'<option  value="">Pilih divisi dari list</option>');
+                // $(".modalDivisionSelect").append(($("#formCreateAdmin").length>0)?'<option value="All">Semua</option>':'<option  value="">Pilih divisi dari list</option>');
                 obj.data.forEach((i)=>{
                     $(".modalDivisionSelect").append(`<option  value="${i.id}">${i.attributes.Name}</option>`);
                 });
+                
+                if($('#modal-form .modalDivisionSelect')){
+                    selectDivisiList.load();
+                    selectDivisiList.renderOptions();
+                }
             }
         }
         else{
@@ -27,6 +47,16 @@ $(".modalCompanySelect").change(async(e)=>{
     }
 });
 
+$(".modalDivisiAll").change((e)=>{
+    e.preventDefault();
+    if($(e.target).prop('checked')){
+        $(".modalDivisionSelect").parent('.drop').hide();
+    }
+    else{
+        $(".modalDivisionSelect").parent('.drop').show();
+    }
+});
+
 $('#modal-reset-password').on('shown.bs.modal',async function () {
     var getToken = await fetch(`/session/key?s=jwt`);
         if(getToken.ok){

public/js/page/dashboard.js

@@ -5,11 +5,11 @@ let attachment;
 let removeMedia = [];
 
 var selectCompanyList = new drop({
-  selector:  '.modalCompanySelect'
+  selector:  '#modal-form .modalCompanySelect'
 });
 
 var selectDivisiList = new drop({
-  selector:  '.modalDivisionSelect'
+  selector:  '#modal-form .modalDivisionSelect'
 });
 
 
@@ -294,6 +294,10 @@ $('#modal-form').on('shown.bs.modal', async function() {
   $("#modal-form input[type!='hidden']").val('');
   $('#modal-form select').val('');
   $('#modal-form select[name=division]').attr('disabled','disabled');
+  $('#modal-form input.modalDivisiAll').attr('disabled','disabled');
+  $('#modal-form input[type=checkbox]').prop('checked',false);
+  $("#modal-form .modalCompanySelect").parent('.drop').show();
+  $("#modal-form .modalDivisionSelect").parent('.drop').show();
   $('#modal-form textarea').html('');
   $('#modal-form textarea').val('');
   const container = document.getElementById('participantCounter');

public/vendor/multiselect-master/js/index.js

@@ -54,6 +54,9 @@ var drop = function(info){var o = {
       this.render();
    },
    toggle: function(){
+      // if(this.html.drop.classList.contains('open')){
+      //    $(info.selector).val(this.selected.filter(i=>!i.removed).map(i=>$(info.selector).children('option')[i.index].value)).trigger('change')
+      // }
       this.html.drop.classList.toggle('open');
    },
    addOption: function(e, element){ 
@@ -82,14 +85,18 @@ var drop = function(info){var o = {
    },
    load: function(){
       this.options = [];
+      this.html.options =render.get(info.selector + ' option');
       for(var i = 0; i < this.html.options.length; i++){
-         var option = this.html.options[i]
-         this.options[i] = {
-            html:  option.innerHTML,
-            value: option.value,
-            selected: option.selected,
-            state: ''
+         var option = this.html.options[i];
+         if(!$(option).prop('hidden')){
+            this.options[i] = {
+               html:  option.innerHTML,
+               value: option.value,
+               selected: option.selected,
+               state: '',
+            }
          }
+         
       }
    },
    preselect: function(){
@@ -145,6 +152,10 @@ var drop = function(info){var o = {
       })
    },
    changeState: function(state){
+      var drop = this;
+      setTimeout(function(){
+         $(info.selector).val(drop.selected.filter(i=>!i.removed).map(i=>$(info.selector).children('option')[i.index].value)).trigger('change');
+      }, 1000);
       switch(state){
          case 'remove':
             return 'hide'
@@ -152,13 +163,14 @@ var drop = function(info){var o = {
             return 'hide'
          default:
             return ''
-       }
+       };
    },
    isSelected: function(index){
       var check = false
       this.selected.forEach(function(select){ 
          if(select.index == index && select.removed == false) check = true
       })
+
       return check
    }
 }; o.init(); return o;}

views/pages/dashboard.ejs

@@ -1,5 +1,5 @@
 <link href="/assets/owl.carousel.min.css" rel="stylesheet">
-
+<link href="/vendor/multiselect-master/css/style.css" rel="stylesheet">
 <body>
   <link rel="stylesheet" href="/css/dashboard.css">
   <!-- Sidenav -->
@@ -109,7 +109,7 @@
         <div class="row mt-3 <%= locals.role!='Admin' ?'hide' : '' %>">
           <div class="col-sm">
             <select name="company" class="form-control form-control-sm ml-2" id="companySelect">
-              <option value="">Pilih Company</option>
+              <option disabled value="">Pilih Company</option>
               <option <%= locals.company &&(company == 'All')  ? `selected` : '' %> value="All">Semua</option>
               <% for(var i=0; i<companies.length; i++) {%>
                 <% var selected = locals.company &&(company == companies[i].id)  ? `selected` : '' %>

views/partials/dashboard/modal_form.ejs

@@ -31,13 +31,20 @@
                            </div>
                            <div class="form-group mb-3">
                               <label for="modalCompanySelect" class="form-control-label">Company</label>
-                              <div class="input-group input-group-merge input-group-alternative">
-                                 <div class="input-group-prepend">
-                                    <span class="input-group-text"><i class="ni ni-istanbul"></i></span>
+                              <div class="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-istanbul"></i>&nbsp;Pilih Company</span>
+                                    <div class="form-group col-3 input-group-text" style="justify-content: end;">
+                                       <label for="modalCompanyAll" class="form-control-label">&nbsp;All</label>
+                                       <label class="custom-toggle">
+                                         <input class="modalCompanyAll" type="checkbox">
+                                         <span class="custom-toggle-slider rounded-circle"></span>
+                                       </label>
+                                   </div>
                                  </div>
-                                 <select name="company" class="form-control modalCompanySelect">
-                                    <option value="">Pilih company</option>
-                                    <option value="All">Semua</option>
+                                 <select multiple name="company" class="form-control modalCompanySelect">
+                                    <!-- <option value="">Pilih company</option> -->
+                                    <option hidden class="hide" value="All">Semua</option>
                                     <% for(var i=0; i<companies.length; i++) {%>
                                        <option value="<%= companies[i].id %>"><%= companies[i].attributes.Name %></option>
                                     <% } %>
@@ -46,12 +53,19 @@
                            </div>
                            <div class="form-group">
                               <label for="modalDivisionSelect" class="form-control-label">Division</label>
-                              <div class="input-group input-group-merge input-group-alternative">
-                                 <div class="input-group-prepend">
-                                    <span class="input-group-text"><i class="ni ni-shop"></i></span>
+                              <div class="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;">
+                                       <label for="modalDivisiAll" class="form-control-label">&nbsp;All</label>
+                                       <label class="custom-toggle">
+                                         <input class="modalDivisiAll" type="checkbox">
+                                         <span class="custom-toggle-slider rounded-circle"></span>
+                                       </label>
+                                   </div>
                                  </div>
                                  <select name="division" class="form-control modalDivisionSelect" disabled>
-                                    <option value="All">Semua</option>
+                                    <!-- <option value="All">Semua</option> -->
                                  </select>
                               </div>
                            </div>