Merge pull request #116 from sebadob/ui-api-keys-group-selectors

group / op selectors for ApiKeys
sebadob · Oct 29, 2023 · 269f00c · 269f00c
2 parents 76185ca + 40ac1ae
commit 269f00c
Showing 1 changed file with 52 additions and 7 deletions.
diff --git a/frontend/src/components/admin/api_keys/ApiKeyAccessMatrix.svelte b/frontend/src/components/admin/api_keys/ApiKeyAccessMatrix.svelte
@@ -24,6 +24,10 @@
         'delete',
     ];
 
+    // keep the state for whole row or column toggles
+    let groupsToggle = new Array(GROUPS.length).fill(false);
+    let opsToggle = new Array(OPS.length).fill(false);
+
     onMount(() => {
         buildArray();
         if (apiKey?.access) {
@@ -73,6 +77,31 @@
         return access;
     }
 
+    function toggleGroup(idx) {
+        groupsToggle[idx] = !groupsToggle[idx];
+
+        const toggleTo = groupsToggle[idx];
+        let row = accessMatrix[idx];
+        for (let i = 0; i < OPS.length; i++) {
+            for (let [key, value] of Object.entries(row)) {
+                if (key !== 'group') {
+                    console.log(`${key} - ${value}`);
+                    row[key] = toggleTo;
+                }
+            }
+        }
+        accessMatrix[idx] = row;
+    }
+
+    function toggleOp(idx) {
+        opsToggle[idx] = !opsToggle[idx];
+
+        const toggleTo = opsToggle[idx];
+        for (let i = 0; i < GROUPS.length; i++) {
+            accessMatrix[i][OPS[idx]] = toggleTo;
+        }
+    }
+
 </script>
 
 <div class="matrix">
@@ -81,18 +110,34 @@
     <div class="mr">
         <div class="label"></div>
         {#each OPS as op, i (i)}
-            <div class="cell">{OPS[i]}</div>
+            <div
+                    role="button"
+                    tabindex="0"
+                    class="cell pointer"
+                    on:click={toggleOp.bind(this, i)}
+                    on:keypress={toggleOp.bind(this, i)}
+            >
+                {OPS[i]}
+            </div>
         {/each}
     </div>
 
     {#if accessMatrix}
         {#each GROUPS as group, i (i)}
             <div class="mr">
-                <div class="label">{GROUPS[i]}</div>
+                <div
+                        role="button"
+                        tabindex="0"
+                        class="label pointer"
+                        on:click={toggleGroup.bind(this, i)}
+                        on:keypress={toggleGroup.bind(this, i)}
+                >
+                    {GROUPS[i]}
+                </div>
                 {#each OPS as op, j (j)}
                     <div class="cell">
                         <input
-                                class="chkbox"
+                                class="pointer"
                                 type="checkbox"
                                 bind:checked={accessMatrix[i][op]}
                         >
@@ -109,10 +154,6 @@
         text-align: center;
     }
 
-    .chkbox {
-        cursor: pointer;
-    }
-
     .label {
         width: 6.5rem;
     }
@@ -130,4 +171,8 @@
     .mr:hover {
         background: var(--col-gmid);
     }
+
+    .pointer {
+        cursor: pointer;
+    }
 </style>