MAJOR IMPROVEMENTS:

* bind value can sync accross components <profileView + wgProfile + wgControl + wgFilter>
* Table select on wgFilter can trigger filtered request to backend
* Table select on wgFilter can trigger filtered request to backend
* Table select on wgFilter can trigger filtered request to backend
* Table select on wgFilter can trigger filtered request to backend

package-lock.json

@@ -24,7 +24,7 @@
         "@rollup/plugin-node-resolve": "11.2.0",
         "autoprefixer": "10.2.5",
         "postcss": "8.2.8",
-        "rollup": "2.41.5",
+        "rollup": "^2.41.5",
         "rollup-plugin-livereload": "2.0.0",
         "rollup-plugin-svelte": "7.1.0",
         "rollup-plugin-terser": "7.0.2",

package.json

@@ -18,7 +18,7 @@
     "@rollup/plugin-node-resolve": "11.2.0",
     "autoprefixer": "10.2.5",
     "postcss": "8.2.8",
-    "rollup": "2.41.5",
+    "rollup": "^2.41.5",
     "rollup-plugin-livereload": "2.0.0",
     "rollup-plugin-svelte": "7.1.0",
     "rollup-plugin-terser": "7.0.2",

src/components/Cards/CardWGControl.svelte

@@ -6,11 +6,17 @@
     import Modal from "components/Modals/Modals.svelte"
     import CardWGControl from "components/Cards/CardWGControl.svelte";
     
+  export let filter;
   let showModal = false;
   let showFilter = false;
-    export let filter = null;
 
-    let submitFilter = null;
+  let submitFilter = "";
+
+
+  filter = submitFilter;
+
+    $: submitFilter != ""?
+        filter = submitFilter : filter = "";
   
   function toggleModal(){
     showModal = !showModal;
@@ -25,18 +31,11 @@
   function toggleFilter(){
     showFilter = !showFilter;
     showModal = false;
-          filter = submitFilter;
     console.log("toggle Filter...");
     console.log(filter);
   }
 
-   function getwgResponse(param) {
-            const wgResponse = fetch(
-                    '/api2/wgClients?filter='+param
-                );
 
-            return wgResponse;
-    }
 
 
 </script>
@@ -126,7 +125,7 @@
               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="flex-auto px-4 lg:px-10 py-10 pt-0">
-                  <CardWGFilter bind:submitFilter={submitFilter} on:submit={handleOnSubmit} />
+                  <CardWGFilter bind:submitFilter={submitFilter} on:submit={handleOnSubmit}></CardWGFilter >
               </div>
             </div>
         </div>

src/components/Cards/CardWGFilter.svelte

@@ -1,10 +1,22 @@
 <script>
-    export let submitFilter = null;
+    export let submitFilter;
-    function validate() {
+
+    const validate = (e) => {
+            const formData = new FormData(e.target)
+            console.log(formData);
+            const data = {};
+
+            for (let field of formData) {
+                const [key, value] = field;
+                data[key] = value;
+            }
+
+            console.log(data);
             console.log("I'm the tester function");
-            submitFilter = "meta";
+            submitFilter = data["org"];
             console.log(submitFilter);
         }
+
 </script>
 
     <form on:submit|preventDefault={validate}>
@@ -18,16 +30,9 @@
               class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
               for="grid-username"
             >
-              Username
+              Fuckery
             </label>
-            <select 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" >
+            <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" />
-              <option class="text-blueGray-100" value="" disabled selected>Select the Organization</option>
-
-              <option>GCI</option>
-              <option>META</option>
-              <option>PH-Training</option>
-
-            </select>
           </div>
 
           <div class="relative w-full mb-3">
@@ -37,7 +42,7 @@
             >
               Organization
             </label>
-            <select 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" >
+            <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 value="gci">GCI</option>
               <option value="meta">META</option>
@@ -52,7 +57,7 @@
             >
               Email Domain
             </label>
-          <select 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" >
+          <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 Organization</option>
             <option>GCI</option>
             <option>META</option>

src/components/Cards/CardWGProfiles.svelte

@@ -5,7 +5,7 @@
     let promise;
 
     export let wgResponse = null;
-    export let filter = null;
+    export let filter = "";
 
     async function getwgResponse(o_filter) {
             const wgResponse = await fetch(
@@ -16,8 +16,9 @@
         }
 
     // let promise = getwgResponse();
-    $: filter != null ?
+
-        promise = getwgResponse(filter) : promise = getwgReseponse("");
+    $: filter != ""?
+        promise = getwgResponse(filter) : promise = getwgResponse("");
 
   // core components