api/src/Models/Dto.cs

@@ -1,22 +0,0 @@
-
-public class RegisterDto {
-
-    public string UserName { get; set; } = "";
-    public string Email { get; set; } = "";
-    public string Password { get; set; } = "";
-
-}
-
-public class LoginDto {
-
-    public string UserName { get; set; } = "";
-    public string Password { get; set; } = "";
-
-}
-
-public class ItemDto {
-
-    public String Name { get; set; } = "";
-    public String Description { get; set; } = "";
-
-}

api/src/Models/Item.cs

@@ -10,3 +10,10 @@ public class Item {
     public DateTime LastEditedAt { get; set; }
 
 };
+
+public class ItemDto {
+
+    public String Name { get; set; } = "";
+    public String Description { get; set; } = "";
+
+}

api/src/Models/User.cs

@@ -30,3 +30,19 @@ public class User : IdentityUser {
     https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.identity.entityframeworkcore.identityuser?view=aspnetcore-1.1
     */
 };
+
+// DTOs include only the minimum information for transit
+public class RegisterDto {
+
+    public string UserName { get; set; } = "";
+    public string Email { get; set; } = "";
+    public string Password { get; set; } = "";
+
+}
+
+public class LoginDto {
+
+    public string UserName { get; set; } = "";
+    public string Password { get; set; } = "";
+
+}

client/src/api/ItemsApi.ts

@@ -0,0 +1,18 @@
+
+// services are kinda whatever, but in general its a good idea for all api calls to be within a service (at least thats how angular handles it)
+// this item service will handle all to <-> from the server when handling item objects
+
+import api from "./axios.ts"
+import type { Item } from "../models/Item.ts";
+
+const API_URL: string = "/items";
+
+export const getItems = () => api.get<Item[]>(`${API_URL}`);
+
+export const getItem = (id: number) => api.get<Item>(`${API_URL}/${id}`);
+
+export const createItem = (data: Item) => api.post<Item>(`${API_URL}`, data);
+
+export const updateItem = (id: number, data: Item) => api.put<Item>(`${API_URL}/${id}`, data);
+
+export const deleteItem = (id: number) => api.delete<Item>(`${API_URL}/${id}`);

client/src/api/UsersApi.ts

@@ -1,18 +0,0 @@
-
-// services are kinda whatever, but in general its a good idea for all api calls to be within a service (at least thats how angular handles it)
-// this user service will handle all to <-> from the server when handling user objects
-
-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 createUser = (data: User) => api.post<User>(`${API_URL}`, data);
-
-export const updateUser = (id: number, data: User) => api.put<User>(`${API_URL}/${id}`, data);
-
-export const deleteUser = (id: number) => api.delete<User>(`${API_URL}/${id}`);

client/src/components/ItemsTable.vue

@@ -0,0 +1,33 @@
+
+<script setup lang="ts">
+
+import { onMounted } from "vue";
+import { useItemsStore} from "../stores/ItemsStore.ts";
+
+const store = useItemsStore();
+
+onMounted(() => { // register callback for when component is loaded on page
+    store.fetchItems();
+})
+
+</script>
+
+<template>
+
+    <div>
+        <h1>Items</h1>
+
+        <router-link to="/item/new">Create Item</router-link>
+
+        <table>
+            <tr v-for="item in store.items" :key="item.id">
+                <td>{{ item.name }}</td>
+                <td>
+                    <router-link :to="`/item/${item.id}`">Edit</router-link>
+                    <button @click="store.removeItem(item.id)">Delete</button>
+                </td>
+            </tr>
+        </table>
+    </div>
+
+</template>

client/src/components/UsersTable.vue

@@ -1,33 +0,0 @@
-
-<script setup lang="ts">
-
-import { onMounted } from "vue";
-import { useUsersStore} from "../stores/UsersStore.ts";
-
-const store = useUsersStore();
-
-onMounted(() => { // register callback for when component is loaded on page
-    store.fetchUsers();
-})
-
-</script>
-
-<template>
-
-    <div>
-        <h1>Users</h1>
-
-        <router-link to="/user/new">Create User</router-link>
-
-        <table>
-            <tr v-for="user in store.users" :key="user.id">
-                <td>{{ user.username }}</td>
-                <td>
-                    <router-link :to="`/user/${user.id}`">Edit</router-link>
-                    <button @click="store.removeUser(user.id)">Delete</button>
-                </td>
-            </tr>
-        </table>
-    </div>
-
-</template>

client/src/models/Item.ts

@@ -0,0 +1,19 @@
+
+export interface Item {
+    id: number;
+    name: string;
+    description: string;
+    createdAt: string;
+    lastEditedAt: string;
+}
+
+export interface RegisterDto {
+    username: string;
+    email: string;
+    password: string;
+}
+
+export interface LoginDto {
+    username: string;
+    password: string;
+}

client/src/pages/ItemForm.vue

@@ -5,37 +5,38 @@
 import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 
-import { useUsersStore } from "../stores/UsersStore.ts";
-import type { User } from "../models/User.ts";
+import { useItemsStore } from "../stores/ItemsStore.ts";
+import type { Item } from "../models/Item.ts";
 
-const store = useUsersStore();
+const store = useItemsStore();
 const route = useRoute();
 const router = useRouter();
 
-const user = ref<User>({
+const item = ref<Item>({
     id: 0,
-    username: "",
-    email: "",
-    password: ""
+    name: "",
+    description: "",
+    createdAt: "",
+    lastEditedAt: ""
 });
 
 const id: string | undefined = route.params.id as string | undefined
 
 onMounted(() => {
     if(id) {
-        const existing = store.users.find(i => i.id == Number(id));
-        if (existing) user.value = { ...existing };
+        const existing = store.items.find(i => i.id == Number(id));
+        if (existing) item.value = { ...existing };
     }
 });
 
 async function save(): Promise<void> {
     if(id) {
-        await store.updateUser(Number(id), user.value);
+        await store.updateItem(Number(id), item.value);
     } else {
-        await store.addUser(user.value);
+        await store.addItem(item.value);
     }
 
-    router.push("/users"); // redirect
+    router.push("/items"); // redirect
 }
 
 </script>
@@ -43,10 +44,10 @@ async function save(): Promise<void> {
 <template>
 
     <div>
-        <h2>{{ id ? "Edit User" : "Create User" }}</h2> <!-- omg I love ternary operator :D -->
+        <h2>{{ id ? "Edit Item" : "Create Item" }}</h2> <!-- omg I love ternary operator :D -->
 
         <form @submit.prevent="save">
-            <input v-model="user.username" placeholder="Name" />
+            <input v-model="item.name" placeholder="Name" />
             
             <button type="submit">Save</button>
         </form>

client/src/pages/ItemsList.vue

@@ -3,14 +3,14 @@
 
 import { onMounted } from "vue"
 import { useRoute, useRouter } from "vue-router";
-import { useUsersStore } from "../stores/UsersStore.ts"
+import { useItemsStore } from "../stores/ItemsStore.ts"
 import * as authApi from "../api/AuthApi";
 
-const store = useUsersStore()
+const store = useItemsStore()
 const router = useRouter();
 
 onMounted(() => {
-  store.fetchUsers()
+  store.fetchItems()
 })
 
 function logout() {
@@ -22,20 +22,20 @@ function logout() {
 
 <template>
     <div>
-        <h1>Users</h1>
+        <h1>Items</h1>
 
-        <router-link to="/user/new">Create User</router-link>
+        <router-link to="/user/new">Create Item</router-link>
 
         <table>
-            <tr v-for="user in store.users" :key="user.id">
-                <td>{{ user.username }}</td>
+            <tr v-for="item in store.items" :key="item.id">
+                <td>{{ item.name }}</td>
                 <td>
 
-                    <router-link :to="`/user/${user.id}`" custom v-slot="{ navigate }">
+                    <router-link :to="`/item/${item.id}`" custom v-slot="{ navigate }">
                         <button @click="navigate" role="link">Edit</button>
                     </router-link>
 
-                    <button @click="store.removeUser(user.id)">Delete</button>
+                    <button @click="store.removeItem(item.id)">Delete</button>
                 </td>
             </tr>
         </table>

client/src/router/index.ts

@@ -4,8 +4,8 @@
 import { createRouter, createWebHistory } from "vue-router";
 import LoginForm from "../pages/LoginForm.vue";
 import RegisterForm from "../pages/RegisterForm.vue";
-import UsersList from "../pages/UsersList.vue";
-import UserForm from "../pages/UserForm.vue";
+import ItemsList from "../pages/ItemsList.vue";
+import ItemForm from "../pages/ItemForm.vue";
 import index from "../pages/index.vue";
 
 // link path to the page component
@@ -13,9 +13,9 @@ const routes = [
 	{ path: "/", component: index },
 	{ path: "/login", component: LoginForm },
 	{ path: "/register", component: RegisterForm },
-	{ path: "/users", component: UsersList, meta: { requiresAuth: true } },
-	{ path: "/user/new", component: UserForm, meta: { requiresAuth: true } },
-	{ path: "/user/:id", component: UserForm, meta: { requiresAuth: true } }
+	{ path: "/items", component: ItemsList },
+	{ path: "/item/new", component: ItemForm, meta: { requiresAuth: true } },
+	{ path: "/item/:id", component: ItemForm, meta: { requiresAuth: true } }
 ]; // I really like this
 
 const router = createRouter({

client/src/stores/ItemsStore.ts

@@ -0,0 +1,48 @@
+
+// stores are for component state management
+// 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 { Item } from "../models/Item.ts";
+import * as itemsApi from "../api/ItemsApi";
+
+interface ItemState {
+    items: Item[];
+    loading: boolean;
+}
+
+export const useItemsStore = defineStore("items", {
+    
+    state: (): ItemState => ({
+        items: [],
+        loading: false
+    }),
+
+    actions: {
+        async fetchItems() {
+            this.loading = true;
+            const response = await itemsApi.getItems();
+            this.items = response.data;
+            this.loading = false;
+        },
+
+        async addItem(item: Item) {
+            const response = await itemsApi.createItem(item);
+            this.items.push(response.data);
+        },
+
+        async updateItem(id: number, item: Item) {
+            await itemsApi.updateItem(id, item);
+            const index = this.items.findIndex(i => i.id === id);
+            this.items[index] = item;
+        },
+
+        async removeItem(id: number) {
+            await itemsApi.deleteItem(id);
+            this.items = this.items.filter(i => i.id !== id);
+        }
+    }
+
+});

client/src/stores/UsersStore.ts

@@ -1,48 +0,0 @@
-
-// stores are for component state management
-// 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 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 addUser(user: User) {
-            const response = await usersApi.createUser(user);
-            this.users.push(response.data);
-        },
-
-        async updateUser(id: number, user: User) {
-            await usersApi.updateUser(id, user);
-            const index = this.users.findIndex(i => i.id === id);
-            this.users[index] = user;
-        },
-
-        async removeUser(id: number) {
-            await usersApi.deleteUser(id);
-            this.users = this.users.filter(i => i.id !== id);
-        }
-    }
-
-});