diff --git a/src/components/CategoriesTable.vue b/src/components/CategoriesTable.vue
index d3db85d..1eb919c 100644
--- a/src/components/CategoriesTable.vue
+++ b/src/components/CategoriesTable.vue
@@ -1,31 +1,9 @@
@@ -34,7 +12,7 @@ onMounted(async () => {
{ title: 'Name', key: 'name', sortable: true },
{ title: 'Actions', key: 'actions', align: 'end', sortable: false }
]"
- :items="fetchedCategories?.categories"
+ :items="props.fetchedCategories?.categories"
>
+import { useCategoriesStore } from '@/stores/categories'
+import { ref, type Ref } from 'vue'
+
+const emit = defineEmits<{
+ categoryCreated: [id: number]
+}>()
+
+const dialog: Ref = ref(false)
+
+const valid: Ref = ref(false)
+const name: Ref = ref('')
+const nameRules: Ref boolean | string>> = ref([
+ (value) => {
+ if (value.length > 0 && value.length <= 50) return true
+ return `Name length should be below 50 characters. (currently: ${value.length})`
+ }
+])
+
+const categoriesStore = useCategoriesStore()
+
+async function onSubmit(): Promise {
+ const createdCategoryPromise = await categoriesStore.postCategory(name.value)
+ const createdCategory: { id: number } = await createdCategoryPromise.json()
+ emit('categoryCreated', createdCategory.id)
+ dialog.value = false
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/composables/category.ts b/src/composables/category.ts
new file mode 100644
index 0000000..f6f92a7
--- /dev/null
+++ b/src/composables/category.ts
@@ -0,0 +1,16 @@
+export interface Category {
+ categories: {
+ id: number
+ name: string
+ user_id: number
+ }[]
+ pagination: {
+ skip: number
+ take: number
+ }
+ links: {
+ next: string
+ prev: string
+ }
+ total: number
+}
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index c33cd77..8f0e106 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -13,10 +13,9 @@ export const useAuthStore = defineStore('auth', () => {
const postLogin = async (credentials: LoginFields): Promise => {
const loginPromise = await fetch(`${api.url}/session/login`, {
- headers: { 'Content-Type': 'application/json' },
+ ...api.options,
method: 'POST',
- body: JSON.stringify(credentials),
- credentials: 'include'
+ body: JSON.stringify(credentials)
})
cookie.setCookie('loggedIn', new Date(new Date().getTime() + 7200000).toString())
return loginPromise
@@ -24,9 +23,8 @@ export const useAuthStore = defineStore('auth', () => {
const postLogout = async (): Promise => {
return await fetch(`${api.url}/session/logout`, {
- headers: { 'Content-Type': 'application/json' },
- method: 'POST',
- credentials: 'include'
+ ...api.options,
+ method: 'POST'
})
}
diff --git a/src/stores/categories.ts b/src/stores/categories.ts
index 5228bb7..3a9df0c 100644
--- a/src/stores/categories.ts
+++ b/src/stores/categories.ts
@@ -4,9 +4,17 @@ import { defineStore } from 'pinia'
export const useCategoriesStore = defineStore('categories', () => {
const api = useApi()
- const getCategories = async () => {
+ const getCategories = async (): Promise => {
return await fetch(`${api.url}/category`, api.options)
}
- return { getCategories }
+ const postCategory = async (name: string): Promise => {
+ return await fetch(`${api.url}/category`, {
+ ...api.options,
+ method: 'POST',
+ body: JSON.stringify({ name })
+ })
+ }
+
+ return { getCategories, postCategory }
})
diff --git a/src/views/CategoriesView.vue b/src/views/CategoriesView.vue
index efa7912..def74b0 100644
--- a/src/views/CategoriesView.vue
+++ b/src/views/CategoriesView.vue
@@ -1,11 +1,25 @@
Categories
- Create category
+
-
+
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 2243b8b..d1a3548 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -39,7 +39,7 @@ async function onSubmit(): Promise {
{