add crud store/api service

client/src/stores/UsersStore.ts

@@ -3,3 +3,46 @@
 // Pinia (?) i kinda dont get it because in angular you just hook a component to a service and that's it,
 // though I guess the service handled the state management
 // sighh
+
+import { defineStore } from "pinia";
+import type { User } from "../models/User.ts";
+import * as api from "../api/UsersApi";
+
+interface UserState {
+    users: User[];
+    loading: boolean;
+}
+
+export const useUsersStore = defineStore("users", {
+    
+    state: (): UserState => ({
+        users: [],
+        loading: false
+    }),
+
+    actions: {
+        async fetchItems() {
+            this.loading = true;
+            const response = await api.getUsers();
+            this.users = response.data;
+            this.loading = false;
+        },
+
+        async addUser(user: User) {
+            const response = await api.createUser(user);
+            this.users.push(response.data);
+        },
+
+        async updateUser(id: number, user: User) {
+            await api.updateUser(id, user);
+            const index = this.users.findIndex(i => i.id === id);
+            this.users[index] = user;
+        },
+
+        async removeUser(id: number) {
+            await api.deleteUser(id);
+            this.users = this.users.filter(i => i.id !== id);
+        }
+    }
+
+});