client/src/api/UsersApi.ts

@@ -0,0 +1,11 @@
+
+import api from "./axios.ts"
+import type { User } from "../models/User.ts";
+
+const API_URL: string = "/users";
+
+export const getUsers = () => api.get<User[]>(`${API_URL}`);
+
+export const getUser = (id: number) => api.get<User>(`${API_URL}/${id}`);
+
+export const deleteUser = (id: number) => api.delete<User>(`${API_URL}/${id}`);

client/src/pages/UsersForm.vue

@@ -0,0 +1,56 @@
+<!-- pages/views in vue are basically root-level full-page components -->
+
+<script setup lang="ts">
+
+import { ref, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useItemsStore } from "../stores/ItemsStore.ts";
+import type { Item } from "../models/Item.ts";
+
+const store = useItemsStore();
+const route = useRoute();
+const router = useRouter();
+
+const item = ref<Item>({
+    id: 0,
+    name: "",
+    description: "",
+    createdAt: "",
+    lastEditedAt: ""
+});
+
+const id: string | undefined = route.params.id as string | undefined
+
+onMounted(() => {
+    if(id) {
+        const existing = store.items.find(i => i.id == Number(id));
+        if (existing) item.value = { ...existing };
+    }
+});
+
+async function save(): Promise<void> {
+    if(id) {
+        await store.updateItem(Number(id), item.value);
+    } else {
+        await store.addItem(item.value);
+    }
+
+    router.push("/items"); // redirect
+}
+
+</script>
+
+<template>
+
+    <div>
+        <h2>{{ id ? "Edit Item" : "Create Item" }}</h2> <!-- omg I love ternary operator :D -->
+
+        <form @submit.prevent="save">
+            <input v-model="item.name" placeholder="Name" />
+            <input v-model="item.description" placeholder="Name" />
+            <button type="submit">Save</button>
+        </form>
+    </div>
+
+</template>

client/src/router/index.ts

@@ -17,7 +17,8 @@ const routes = [
 	{ path: "/register", component: RegisterForm },
 	{ path: "/items", component: ItemsList, meta: { requiresAuth: true } },
 	{ path: "/item/new", component: ItemForm, meta: { requiresAuth: true } },
-	{ path: "/item/:id", component: ItemForm, meta: { requiresAuth: true } }
+	{ path: "/item/:id", component: ItemForm, meta: { requiresAuth: true } },
+	{ path: "/users", component: ItemsList, meta: { requiresAuth: true } }
 ]; // I really like this
 
 const router = createRouter({
@@ -36,5 +37,6 @@ router.beforeEach((to, from, next) => {
 	}
 
 });
+// if the api responds unauthorized (401) then it also will auto-redirect to the login page
 
 export default router;

client/src/stores/UsersStore.ts

@@ -0,0 +1,32 @@
+
+import { defineStore } from "pinia";
+import type { User } from "../models/User.ts";
+import * as usersApi from "../api/UsersApi";
+
+interface UserState {
+    users: User[];
+    loading: boolean;
+}
+
+export const useUsersStore = defineStore("users", {
+    
+    state: (): UserState => ({
+        users: [],
+        loading: false
+    }),
+
+    actions: {
+        async fetchUsers() {
+            this.loading = true;
+            const response = await usersApi.getUsers();
+            this.users = response.data;
+            this.loading = false;
+        },
+
+        async removeUser(id: number) {
+            await usersApi.deleteUser(id);
+            this.users = this.users.filter(i => i.id !== id);
+        }
+    }
+
+});