UserPermissions - working edit

ref #12

src/components/UserPermissions.svelte

@@ -8,79 +8,66 @@
   import Toastify from "toastify-js";
   import PromiseError from "./PromiseError.svelte";
   export let params;
-  let grantedPermissions_initial = [];
+  let [
-  let grantedPermissions = [];
+    grantedPermissions_initial,
-  let inheritedPermissions = [];
+    grantedPermissions,
-  let to_add = [];
+    inheritedPermissions,
-  let to_delete = [];
+    to_add,
+    to_delete,
+    allpermissions,
+    promises,
+  ] = [[], [], [], [], [], [], []];
   $: original_data = {};
   $: save_enabled =
     JSON.stringify(grantedPermissions) ===
     JSON.stringify(grantedPermissions_initial);
-
   const user_promise = UserService.userControllerGetOne(params.userid);
   user_promise.then((data) => {
     original_data = Object.assign(original_data, data);
   });
   function submit() {
+    Toastify({
+      text: "updating permissions...",
+      duration: 2500,
+    }).showToast();
     to_delete.forEach((d) => {
-      console.log("processing...");
+      promises = promises.concat([
-      console.log(d);
+        PermissionService.permissionControllerRemove(d, true),
-      console.log("api-calling...");
+      ]);
-      PermissionService.permissionControllerRemove(d, true)
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((err) => {
-          console.log(err);
-        });
     });
     to_add.forEach((a) => {
-      console.log("processing...");
+      promises = promises.concat([
-      console.log(a);
+        PermissionService.permissionControllerPost(a),
-      console.log("api-calling...");
+      ]);
-      PermissionService.permissionControllerPost(a)
-        .then((res) => {
-          console.log(res);
-        })
-        .catch((err) => {
-          console.log(err);
     });
+    Promise.all(promises).then((values) => {
+      promises = [];
+      to_delete.forEach((d) => {
+        to_delete = to_delete.filter((o) => o !== d);
+      });
+      to_add.forEach((a) => {
+        to_add = to_add.filter(
+          (o) => o.target + ":" + o.action !== a.target + ":" + a.action
+        );
+      });
+      Toastify({
+        text: "Permissions updated!",
+        duration: 2500,
+        backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
+      }).showToast();
     });
-    // Toastify({
-    //   text: $_("updating-user"),
-    //   duration: 2500,
-    // }).showToast();
-    // UserService.userControllerPut(original_data.id, editable_userdata)
-    //   .then((resp) => {
-    //     Object.assign(original_data, editable_userdata);
-    //     original_data = editable_userdata;
-    //     Object.assign(original_data, editable_userdata);
-    //     //
-    //     Toastify({
-    //       text: $_("user-updated"),
-    //       duration: 2500,
-    //       backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
-    //     }).showToast();
-    //   })
-    //   .catch((err) => {});
   }
-  let allpermissions = [];
-  console.log(CreatePermission.target);
   Object.values(CreatePermission.target).forEach((t) => {
     Object.values(CreatePermission.action).forEach((a) => {
       allpermissions = allpermissions.concat([{ target: t, action: a }]);
     });
   });
   UserService.userControllerGetPermissions(params.userid).then((val) => {
-    console.log(val);
     val.inherited.forEach((p) => {
       inheritedPermissions = inheritedPermissions.concat([p]);
     });
     val.directlyGranted.forEach((p) => {
-      grantedPermissions = grantedPermissions.concat([
+      grantedPermissions = grantedPermissions.concat([p]);
-        p.target + ":" + p.action,
-      ]);
     });
     grantedPermissions_initial = grantedPermissions;
   });
@@ -159,12 +146,19 @@
       {original_data.middlename || ''}
       {original_data.lastname}
       <span>
+        {#if promises.length === 0}
           <button
             disabled={save_enabled}
             class:opacity-50={save_enabled}
             type="button"
             on:click={submit}
             class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">{$_('save-changes')}</button>
+        {:else}
+          <button
+            type="button"
+            class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-600 text-base font-medium text-white hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:ml-3 sm:w-auto sm:text-sm">Applying
+            Changes</button>
+        {/if}
       </span>
     </div>
     <!--  -->
@@ -198,7 +192,6 @@
                           },
                         ]);
                       }
-                      console.log({ to_delete, to_add });
                     }}
                     type="button"
                     class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-200 text-base font-medium text-black hover:bg-green-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm">+</button>
@@ -222,7 +215,6 @@
                     } else {
                       to_delete = to_delete.concat([p.id]);
                     }
-                    console.log({ to_delete, to_add });
                   }}
                   type="button"
                   class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-300 text-base font-medium text-black hover:bg-red-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">-</button>