diff --git a/api/src/Models/Dto.cs b/api/src/Models/Dto.cs deleted file mode 100644 index dc84f6f..0000000 --- a/api/src/Models/Dto.cs +++ /dev/null @@ -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; } = ""; - -} diff --git a/api/src/Models/Item.cs b/api/src/Models/Item.cs index 9fd670d..f735ec9 100644 --- a/api/src/Models/Item.cs +++ b/api/src/Models/Item.cs @@ -9,4 +9,11 @@ public class Item { public DateTime CreatedAt { get; set; } public DateTime LastEditedAt { get; set; } -}; \ No newline at end of file +}; + +public class ItemDto { + + public String Name { get; set; } = ""; + public String Description { get; set; } = ""; + +} diff --git a/api/src/Models/User.cs b/api/src/Models/User.cs index 2488222..98bdb7c 100644 --- a/api/src/Models/User.cs +++ b/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; } = ""; + +} diff --git a/client/src/api/ItemsApi.ts b/client/src/api/ItemsApi.ts new file mode 100644 index 0000000..517b015 --- /dev/null +++ b/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(`${API_URL}`); + +export const getItem = (id: number) => api.get(`${API_URL}/${id}`); + +export const createItem = (data: Item) => api.post(`${API_URL}`, data); + +export const updateItem = (id: number, data: Item) => api.put(`${API_URL}/${id}`, data); + +export const deleteItem = (id: number) => api.delete(`${API_URL}/${id}`); diff --git a/client/src/api/UsersApi.ts b/client/src/api/UsersApi.ts deleted file mode 100644 index 608b879..0000000 --- a/client/src/api/UsersApi.ts +++ /dev/null @@ -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(`${API_URL}`); - -export const getUser = (id: number) => api.get(`${API_URL}/${id}`); - -export const createUser = (data: User) => api.post(`${API_URL}`, data); - -export const updateUser = (id: number, data: User) => api.put(`${API_URL}/${id}`, data); - -export const deleteUser = (id: number) => api.delete(`${API_URL}/${id}`); diff --git a/client/src/components/ItemsTable.vue b/client/src/components/ItemsTable.vue new file mode 100644 index 0000000..cbe7714 --- /dev/null +++ b/client/src/components/ItemsTable.vue @@ -0,0 +1,33 @@ + + + + diff --git a/client/src/components/UsersTable.vue b/client/src/components/UsersTable.vue deleted file mode 100644 index 76ec2b9..0000000 --- a/client/src/components/UsersTable.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - - diff --git a/client/src/models/Item.ts b/client/src/models/Item.ts new file mode 100644 index 0000000..089e210 --- /dev/null +++ b/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; +} diff --git a/client/src/pages/UserForm.vue b/client/src/pages/ItemForm.vue similarity index 51% rename from client/src/pages/UserForm.vue rename to client/src/pages/ItemForm.vue index 7b70f23..ea62155 100644 --- a/client/src/pages/UserForm.vue +++ b/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({ +const item = ref({ 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 { 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 } @@ -43,10 +44,10 @@ async function save(): Promise { diff --git a/client/src/router/index.ts b/client/src/router/index.ts index e80ac1c..643be40 100644 --- a/client/src/router/index.ts +++ b/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({ diff --git a/client/src/stores/ItemsStore.ts b/client/src/stores/ItemsStore.ts new file mode 100644 index 0000000..d0d9267 --- /dev/null +++ b/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); + } + } + +}); diff --git a/client/src/stores/UsersStore.ts b/client/src/stores/UsersStore.ts deleted file mode 100644 index 1d78fb0..0000000 --- a/client/src/stores/UsersStore.ts +++ /dev/null @@ -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); - } - } - -});