feat: category delete

src/components/CategoriesTable.vue

@@ -1,9 +1,37 @@
 <script setup lang="ts">
 import type { Category } from '@/composables/category'
+import { useCategoriesStore } from '@/stores/categories'
+import { ref, type Ref } from 'vue'
+
+interface CategoryItem {
+	id: number
+	name: string
+}
 
 const props = defineProps<{
 	fetchedCategories: Category | undefined
 }>()
+
+const emit = defineEmits<{
+	categoryDeleted: [id: number]
+}>()
+
+const categoriesStore = useCategoriesStore()
+
+const deleteDialog: Ref<boolean> = ref(false)
+const deleteDialogCategory: Ref<CategoryItem | undefined> = ref()
+
+function onDeleteClick(category: CategoryItem) {
+	deleteDialogCategory.value = category
+	deleteDialog.value = true
+}
+
+async function deleteCategory() {
+	const categoryPromise = await categoriesStore.deleteCategory(deleteDialogCategory.value?.id ?? -1)
+	const response = await categoryPromise.json()
+	emit('categoryDeleted', response.id)
+	deleteDialog.value = false
+}
 </script>
 
 <template>
@@ -14,13 +42,23 @@ const props = defineProps<{
 		]"
 		:items="props.fetchedCategories?.categories"
 	>
-		<template
+		<template v-slot:[`item.actions`]="{ item }">
-			v-slot:[`item.actions`]="{
-				// item
-			}"
-		>
 			<VBtn icon="mdi-pencil" variant="flat" size="small"></VBtn>
-			<VBtn icon="mdi-delete" variant="flat" size="small"></VBtn>
+			<VBtn icon="mdi-delete" variant="flat" size="small" @click="onDeleteClick(item)" />
 		</template>
 	</VDataTable>
+
+	<VDialog max-width="340" v-model="deleteDialog">
+		<VCard prepend-icon="mdi-delete" title="Delete Category">
+			<VCardText class="text-body-1">
+				Are you sure you want to delete the
+				<span class="text-decoration-underline">{{ deleteDialogCategory?.name }}</span> category?
+			</VCardText>
+			<VDivider />
+			<VCardActions>
+				<VBtn variant="outlined" text="Cancel" color="primary" @click="deleteDialog = false"></VBtn>
+				<VBtn variant="flat" text="Delete" color="error" @click="deleteCategory"></VBtn>
+			</VCardActions>
+		</VCard>
+	</VDialog>
 </template>

src/components/CategoryCreate.vue

@@ -24,6 +24,7 @@ async function onSubmit(): Promise<void> {
 	const createdCategory: { id: number } = await createdCategoryPromise.json()
 	emit('categoryCreated', createdCategory.id)
 	dialog.value = false
+	name.value = ''
 }
 </script>
 
@@ -50,9 +51,9 @@ async function onSubmit(): Promise<void> {
 						required
 					></VText-field>
 				</VCardText>
-				<VDivider></VDivider>
+				<VDivider />
 				<VCardActions>
-					<VSpacer></VSpacer>
+					<VSpacer />
 					<VBtn color="primary" text="Close" variant="outlined" @click="dialog = false"></VBtn>
 					<VBtn
 						color="primary"

src/stores/categories.ts

@@ -16,5 +16,12 @@ export const useCategoriesStore = defineStore('categories', () => {
 		})
 	}
 
-	return { getCategories, postCategory }
+	const deleteCategory = async (id: number): Promise<Response> => {
+		return await fetch(`${api.url}/category/${id}`, {
+			...api.options,
+			method: 'DELETE'
+		})
+	}
+
+	return { getCategories, postCategory, deleteCategory }
 })

src/views/CategoriesView.vue

@@ -13,7 +13,9 @@ async function updateCategories() {
 	fetchedCategories.value = await categoriesPromise.json()
 }
 
-onMounted(updateCategories)
+onMounted(async () => {
+	await updateCategories()
+})
 </script>
 
 <template>
@@ -21,5 +23,5 @@ onMounted(updateCategories)
 		<h1 class="text-h3">Categories</h1>
 		<CategoryCreate @categoryCreated="updateCategories" />
 	</header>
-	<CategoriesTable :fetched-categories="fetchedCategories" />
+	<CategoriesTable :fetchedCategories="fetchedCategories" @categoryDeleted="updateCategories" />
 </template>