CHANGELOG :

* Added checkboxes for table content interaction
* Attached user id to table checkboxes
* Added cycle handler for filter action

package.json

@@ -17,12 +17,12 @@
     "@rollup/plugin-commonjs": "17.1.0",
     "@rollup/plugin-node-resolve": "11.2.0",
     "autoprefixer": "10.2.5",
-    "postcss": "8.2.8",
+    "postcss": "^8.4.19",
     "rollup": "^2.41.5",
     "rollup-plugin-livereload": "2.0.0",
     "rollup-plugin-svelte": "7.1.0",
     "rollup-plugin-terser": "7.0.2",
-    "svelte": "3.35.0"
+    "svelte": "^3.53.1"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "5.15.3",
@@ -33,6 +33,6 @@
     "chart.js": "2.9.4",
     "sirv-cli": "1.0.11",
     "svelte-routing": "1.5.0",
-    "tailwindcss": "2.0.4"
+    "tailwindcss": "^2.2.19"
   }
 }

src/components/Cards/CardWGControl.svelte

@@ -1,42 +1,46 @@
 <script>
 
-    import CardSettings from "components/Cards/CardSettings.svelte";
+    import Modal            from "components/Modals/Modals.svelte"
+    import CardSettings     from "components/Cards/CardSettings.svelte";
     import CardCreateWGUser from "components/Cards/CardCreateWGUser.svelte";
-    import CardWGFilter from "components/Cards/CardWGFilter.svelte";
+    import CardWGFilter     from "components/Cards/CardWGFilter.svelte";
-    import Modal from "components/Modals/Modals.svelte"
+    import CardWGControl    from "components/Cards/CardWGControl.svelte";
-    import CardWGControl from "components/Cards/CardWGControl.svelte";
     
-  export let filter;
+    export let filter;
-  let showModal = false;
-  let showFilter = false;
 
-  let submitFilter = "";
+    let showModal = false;
-
+    let showFilter = false;
-
+    let filter_action = false;
-  filter = submitFilter;
+    let submitFilter = "";
 
     $: submitFilter != ""?
-        filter = submitFilter : filter = "";
+        apply_filter() : filter = "";
     
-  function toggleModal(){
+    function apply_filter() {
-    showModal = !showModal;
+        filter = submitFilter;
-    showFilter = false;
+        filter_action = !filter_action;
-    console.log("Modal...");
-  }
-
-  function handleOnSubmit() {
-          console.log("Submitted...");
     }
 
-  function toggleFilter(){
+    function reset_filter(){
-    showFilter = !showFilter;
+        submitFilter = "";
-    showModal = false;
+    }  
-    console.log("toggle Filter...");
-    console.log(filter);
-  }
 
+    function toggleModal(){
+      showModal = !showModal;
+      showFilter = false;
+      console.log("Modal...");
+    }
 
+    function handleOnSubmit() {
+            console.log("Submitted...");
+    }
 
+    function toggleFilter(){
+      showFilter = !showFilter;
+      showModal = false;
+      console.log("toggle Filter...");
+      console.log(filter);
+    }
 
 </script>
 
@@ -45,8 +49,8 @@
 >
   <div class="rounded bg-white mb-0 px-6 py-6">
     <div class="text-center flex justify-between">
-      <h6 class="text-blueGray-700 text-xl font-bold">Action</h6>
+      <h6 class="mt-3 text-blueGray-700 text-xl font-bold">Action</h6>
-      <div class="sm:flex sm:flex-col">
+      <div class="">
         <button
           class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
           type="button"
@@ -111,13 +115,22 @@
         <div class="rounded-t bg-teal-500 mb-0 px-6 py-6">
           <div class="text-center flex justify-between">
             <h6 class="text-teal-50 text-xl font-bold">Create Filter</h6>
-            <button
+            <div>
-              class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+                <button
-              type="button"
+                  class="bg-blueGray-700 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
-              on:click="{toggleFilter}"
+                  type="button"
-            >
+                  on:click="{reset_filter}"
-              Cancel
+                >
-            </button>
+                  Reset Filter
+                </button>
+                <button
+                  class="bg-red-400 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+                  type="button"
+                  on:click="{toggleFilter}"
+                >
+                  Close Filter
+                </button>
+            </div>
           </div>
         </div>
         <div class="rounded-t bg-white mb-0 px-6 py-6">
@@ -131,3 +144,47 @@
         </div>
     </div>
 {/if}
+
+{#if filter_action}
+
+<div
+  class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-blueGray-100 border-0"
+>
+  <div class="rounded bg-white mb-0 px-6 py-6">
+    <div class="text-center flex justify-between">
+      <h6 class="text-blueGray-700 text-xl font-bold">Filter Action</h6>
+      <div class="">
+
+        <button
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          type="button"
+          on:click="{toggleModal}"
+        >
+          Create Profile
+        </button>
+
+        <button
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          type="button"
+          on:click="{toggleFilter}"
+        >
+          Filter
+        </button>
+        <button
+          class="mt-3 bg-teal-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          type="button"
+        >
+          Apply to System
+        </button>
+        <button
+          class="mt-3 bg-red-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          type="button"
+        >
+          Backup
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+{/if}

src/components/Cards/CardWGFilter.svelte

@@ -1,5 +1,31 @@
 <script>
+
     export let submitFilter;
+    let barWidth = 0;
+
+    const addColor = () => barWidth += 1;
+
+    function progress_start() {
+            for (let i = 0; i < 1000; i++) {
+                addColor();
+                console.log("Bar width -> "+barWidth);
+            }
+    }
+    async function getwgOrgs() {
+            const wgResponse = await fetch(
+                    '/api2/wgClients?param=orgs'
+                );
+            progress_start();
+            return await wgResponse.json();
+        }
+
+    async function getwgEmails() {
+            const wgResponse = await fetch(
+                    '/api2/wgClients?param=email'
+                );
+            progress_start();
+            return await wgResponse.json();
+        }
 
     const validate = (e) => {
             const formData = new FormData(e.target)
@@ -13,10 +39,18 @@
 
             console.log(data);
             console.log("I'm the tester function");
-            submitFilter = data["org"];
+            submitFilter = data["name"]+"+"+data["org"]+"+"+data["email_domain"];
             console.log(submitFilter);
         }
 
+    // let options = getwgOrgs();
+    // let options = ["GCI", "META"];
+
+    let promise_orgs = getwgOrgs();
+    let promise_email = getwgEmails();
+
+    
+
 </script>
 
     <form on:submit|preventDefault={validate}>
@@ -30,9 +64,9 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-username"
             >
-              Fuckery
+              Name Contains :
             </label>
-            <input class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" id="fuckery" type="text" name="Fuckery_name" />
+            <input class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" id="fuckery" type="text" name="name" />
           </div>
 
           <div class="relative w-full mb-3">
@@ -42,12 +76,34 @@
             >
               Organization
             </label>
-            <select name="org" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+                {#await promise_orgs}
-              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+                    <div class="relative pt-1">
-              <option value="gci">GCI</option>
+                      <div class="flex mb-2 items-center justify-between">
-              <option value="meta">META</option>
+                        <div>
-              <option value="ph-training">PH-Training</option>
+                          <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
-            </select>
+                            Load Options
+                          </span>
+                        </div>
+                        <div class="text-right">
+                          <span class="text-xs font-semibold inline-block text-orange-600">
+                              bind:barwidth={barWidth}%
+                          </span>
+                        </div>
+                      </div>
+                      <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
+                          <div style="width:{barWidth}%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"></div>
+                      </div>
+                    </div>
+                {:then wgOrgs}
+                    <select name="org" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+                      <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+                      <option class="text-blueGray-100" value="" >No Organization</option>
+                        {#each wgOrgs as value} 
+                            <p> {value} </p>
+                            <option value="{value.orgs}">{value.orgs}</option>
+                        {/each}
+                    </select>
+                {/await}
           </div>
 
           <div class="relative w-full mb-3">
@@ -57,12 +113,34 @@
             >
               Email Domain
             </label>
-          <select name="email_domain" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+                {#await promise_email}
-            <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
+                    <div class="relative pt-1">
-            <option>GCI</option>
+                      <div class="flex mb-2 items-center justify-between">
-            <option>META</option>
+                        <div>
-            <option>PH-Training</option>
+                          <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
-          </select>
+                            Load Options...
+                          </span>
+                        </div>
+                        <div class="text-right">
+                          <span class="text-xs font-semibold inline-block text-orange-600">
+                              {barWidth}%
+                          </span>
+                        </div>
+                      </div>
+                      <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-teal-200">
+                          <div style="width:{barWidth}%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-teal-500"></div>
+                      </div>
+                    </div>
+                {:then wgEmail}
+                    <select name="email_domain" class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150" >
+                      <option class="text-blueGray-100" value="" disabled selected>Select the Email Domain</option>
+                      <option class="text-blueGray-100" value="" >No Email</option>
+                        {#each wgEmail as value} 
+                            <p> {value} </p>
+                            <option value="{value.email}">{value.email}</option>
+                        {/each}
+                    </select>
+                {/await}
           </div>
           <div class="relative w-full mb-3">
             <label

src/components/Cards/CardWGProfiles.svelte

@@ -1,6 +1,8 @@
 <script>
     // import axios from 'axios';
     // import {onMount} from 'svelte';
+    import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
+
     let footprint;
     let promise;
 
@@ -20,12 +22,8 @@
     $: filter != ""?
         promise = getwgResponse(filter) : promise = getwgResponse("");
 
-  // core components
+    export let color = "light";
 
-  import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
-
-  // can be one of light or dark
-  export let color = "light";
 </script>
 
 {#await promise}
@@ -34,8 +32,24 @@
       class="rounded relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
     >
       <div class="rounded bg-white mb-0 px-6 py-6">
-        <div class="text-center flex justify-between">
+        <div class="text-center w-full">
-          <h6 class="uppercase text-blueGray-500 text-xl font-bold">Fetching . . .</h6>
+          <div class="relative pt-1">
+              <div class="flex mb-2 items-center justify-between">
+                <div>
+                  <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-orange-600 bg-orange-200">
+                    Task in progress
+                  </span>
+                </div>
+                <div class="text-right">
+                  <span class="text-xs font-semibold inline-block text-orange-600">
+                    0%
+                  </span>
+                </div>
+              </div>
+              <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-orange-200">
+                 <div style="width:30%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-orange-500"></div>
+              </div>
+            </div>
         </div>
       </div>
     </div>
@@ -62,9 +76,10 @@
       <thead>
         <tr>
           <th
-            class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
+            class="px-4 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-300 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
           >
-            #
+              <input id="default-checkbox" type="checkbox" value="" class="w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+              <label for="default-checkbox" class="ml-2 text-sm font-bold text-blueGray-500 dark:text-gray-300">#</label>
           </th>
           <th
             class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
@@ -106,10 +121,12 @@
       <tbody>
         {#each wgProfileData as infRows}
             <tr class="{infRows.enabled != true ? 'bg-red-50 text-red-500 text-sm' : 'text-blueGray-500 bg-white text-sm'} ">
+                
                 <td
-                  class="border-t-8 px-6 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4"
+                  class="bg-blueGray-300 border-t-8 px-4 align-middle border-l-0 border-r-0 text-sm whitespace-nowrap p-4 rounded"
                 >
-                    { infRows.data_id }
+                <input id="default-checkbox" type="checkbox" value="{infRows.id}" class="w-4 h-4 text-teal-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                    <label for="default-checkbox" class="ml-2 text-sm font-bold text-blueGray-500 dark:text-gray-300">{ infRows.data_id }</label>
                 </td>
 
                 <td