client/src/pages/UsersList.vue

@@ -1,7 +1,7 @@
 
 <script setup lang="ts">
 
-import { onMounted } from "vue"
+import { onMounted, reactive } from "vue"
 import { useRoute, useRouter } from "vue-router";
 import { useUsersStore } from "../stores/UsersStore.ts"
 import * as authApi from "../api/AuthApi";
@@ -18,6 +18,15 @@ function logout() {
     router.push("/login");
 }
 
+const inputs = reactive<Record<number, string>>({});
+store.users.forEach((_, i) => {
+    inputs[i] = ""
+});
+
+const addPermission = (userId: string, index: number) => {
+    if(inputs[index] != null) store.addPermission(userId, inputs[index]);
+}
+
 </script>
 
 <template>
@@ -25,11 +34,20 @@ function logout() {
         <h1>Users</h1>
 
         <table>
-            <tr v-for="user in store.users" :key="user.id">
+            <tr v-for="(user, index) in store.users" :key="user.id">
                 <td>{{ user.userName }}</td>
                 <td>
                     <button @click="store.removeUser(user.id)">Delete</button>
                 </td>
+                <td v-for="perm in user.permissions" :key="user.id">
+                    <button @click="store.removePermission(user.id, perm)">Remove {{ perm }} permission</button>
+                </td>
+                <td>
+                    <form @submit.prevent="addPermission(user.id, index)">
+                        <input type="text" v-model="inputs[index]" placeholder="permission" />
+                        <button type="submit">Add Permission</button>
+                    </form>
+                </td>
             </tr>
         </table>
         <button @click="logout()">Logout</button>

client/src/stores/UsersStore.ts

@@ -26,6 +26,14 @@ export const useUsersStore = defineStore("users", {
         async removeUser(id: string) {
             await usersApi.deleteUser(id);
             this.users = this.users.filter(i => i.id !== id);
+        },
+
+        removePermission(id: string, permission: string) {
+            console.log("removing permission", permission, "for user", id);
+        },
+
+        addPermission(id: string, permission: string) {
+            console.log("adding permission", permission, "for user", id);
         }
     }