kamilniemczycki/kamilcraft-api
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

- add category management

Browse Source
This commit is contained in:
Kamil Niemczycki
2023-07-28 15:43:53 +02:00
parent d47c719d13
commit 8974721c9c
9 changed files with 235 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
resources/js/Pages/Categories/ConfirmDelete.vue Normal file
View File

@@ -0,0 +1,37 @@
<script setup>
import { router } from '@inertiajs/vue3';
const props = defineProps({
category: {
type: Object,
required: true,
},
});
function confirmDelete() {
router.delete(`/dashboard/category/${props.category.id}/delete`);
}
</script>
<template>
<InertiaHead title="Usuwanie kategorii" />
<div class="p-4">
<header class="pb-4">
<h1 class="text-3xl font-roboto font-light">Usuwanie kategorii</h1>
</header>
<div class="max-w-[600px]">
<p class="mb-4">Na pewno usunąć kategorię o nazwie {{ category.name }}?</p>
<div class="grid grid-cols-3 gap-2">
<InertiaLink
as="button"
href="/dashboard"
class="col-span-1 flex justify-center items-center gap-3 w-full px-2 py-1 border-t-4 border-b-4 border-transparent hover:border-b-black"
><FontAwesomeIcon :icon="['fas', 'backward']" />Anuluj</InertiaLink>
<button
@click.prevent="confirmDelete"
class="col-span-2 flex justify-center items-center gap-3 w-full px-2 py-1 rounded-md bg-red-600 border-4 border-red-600 text-white text-lg hover:bg-transparent hover:text-red-600"
><FontAwesomeIcon :icon="['fas', 'trash']" />Usuń kategorię {{ category.name }}</button>
</div>
</div>
</div>
</template>

64
resources/js/Pages/Categories/Create.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup>
import { useForm } from '@inertiajs/inertia-vue3';
import Input from '../../Share/Components/Input.vue';
const form = useForm({
name: null,
slug: null,
priority: Number(0),
default: Boolean(false),
visible: Boolean(false),
});
function createCategory() {
form.post('/dashboard/category');
}
</script>
<template>
<InertiaHead title="Nowa kategoria" />
<div class="p-4">
<header class="pb-4">
<h1 class="text-3xl font-roboto font-light">Nowa kategoria</h1>
</header>
<div>
<form class="flex flex-col gap-4" @submit.prevent="createCategory">
<Input
id="name"
label="Nazwa"
placeholder="Nazwa kategorii"
v-model="form.name"
:error="form.errors.name"
/>
<Input
id="slug"
label="Slug"
placeholder="Slug dla kategorii"
v-model="form.slug"
:error="form.errors.slug"
/>
<Input
id="priority"
label="Priorytet"
type="number"
placeholder="Priorytet dla danej kategorii"
v-model="form.priority"
:error="form.errors.priority"
/>
<Input
id="visible"
label="Widoczny"
type="checkbox"
v-model="form.visible"
/>
<Input
id="default"
label="Domyślny"
type="checkbox"
v-model="form.default"
/>
<button class="px-0.5 py-1 rounded-lg bg-[#436da7] border-4 border-[#436da7] text-white text-lg hover:bg-transparent hover:text-[#436da7]">Dodaj kategorię</button>
</form>
</div>
</div>
</template>

78
resources/js/Pages/Categories/Edit.vue Normal file
View File

@@ -0,0 +1,78 @@
<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/inertia-vue3';
import Input from '../../Share/Components/Input.vue';
const props = defineProps({
category: {
type: Object,
required: true,
},
});
const visibleCheckbox = ref(props.category.visible);
const defaultCheckbox = ref(props.category.default);
const form = useForm({
name: props.category.name,
slug: props.category.slug,
priority: props.category.priority,
visible: visibleCheckbox,
default: defaultCheckbox,
});
function updateProject() {
form.clearErrors();
form.put(`/dashboard/category/${props.category.id}`);
if (defaultCheckbox.value)
visibleCheckbox.value = true;
}
</script>
<template>
<InertiaHead title="Nowy projekt" />
<div class="p-4">
<header class="pb-4">
<h1 class="text-3xl font-roboto font-light">Edytuj {{ category.name }}</h1>
</header>
<div>
<form class="flex flex-col gap-4" @submit.prevent="updateProject">
<Input
id="name"
label="Nazwa"
placeholder="Nazwa kategorii"
v-model="form.name"
:error="form.errors.name"
/>
<Input
id="slug"
label="Slug"
placeholder="Slug dla kategorii"
v-model="form.slug"
:error="form.errors.slug"
/>
<Input
id="priority"
label="Priorytet"
type="number"
placeholder="Priorytet dla danej kategorii"
v-model="form.priority"
:error="form.errors.priority"
/>
<Input
id="visible"
label="Widoczny"
type="checkbox"
v-model="form.visible"
/>
<Input
id="default"
label="Domyślny"
type="checkbox"
v-model="form.default"
/>
<button class="px-0.5 py-1 rounded-lg bg-[#436da7] border-4 border-[#436da7] text-white text-lg hover:bg-transparent hover:text-[#436da7]">Aktualizuj kategorię</button>
</form>
</div>
</div>
</template>