- add category management

This commit is contained in:
2023-07-28 15:43:53 +02:00
parent d47c719d13
commit 8974721c9c
9 changed files with 235 additions and 41 deletions

View File

@@ -9,16 +9,33 @@ defineProps({
<template>
<section class="bg-gray-100 rounded-md p-4">
<header class="pb-4">
<h2 class="text-2xl font-roboto font-light">Categories</h2>
<header class="flex justify-between items-center pb-4">
<h2 class="text-2xl font-roboto font-light">Kategorie</h2>
<InertiaLink
as="button"
href="/dashboard/category/create"
class="bg-blue-400 hover:bg-blue-500 text-white px-2.5 py-1 rounded-full"><FontAwesomeIcon :icon="['fas', 'plus']" /></InertiaLink>
</header>
<ul class="flex flex-col gap-2">
<li
v-for="(category, key) in categories"
:key="key"
class="px-3 py-2 bg-white hover:bg-zinc-300"
class="flex items-center justify-between px-3 py-2 bg-white hover:bg-neutral-200"
>
{{ category.name }}
<InertiaLink :href="`/dashboard/category/${category.id}`">{{ category.name }}</InertiaLink>
<div class="flex items-center gap-1">
<InertiaLink
as="button"
class="px-1 py-0.5 text-lime-600 hover:text-lime-800 border-t-2 border-b-2 border-transparent hover:border-b-lime-600"
:href="`/dashboard/category/${category.id}`"
title="Edytuj kategorię"><FontAwesomeIcon :icon="['fas', 'pen-to-square']" /></InertiaLink>
<InertiaLink
v-if="!category.default"
as="button"
class="px-1 py-0.5 text-red-600 hover:text-red-800"
:href="`/dashboard/category/${category.id}/delete`"
title="Usuń kategorię z listy"><FontAwesomeIcon :icon="['fas', 'trash']" /></InertiaLink>
</div>
</li>
</ul>
</section>

View File

@@ -20,7 +20,7 @@ defineProps({
default: null,
}
});
defineEmits(['update:modelValue']);
defineEmits(['update:model-value']);
</script>
<template>
@@ -32,19 +32,21 @@ defineEmits(['update:modelValue']);
:id="id"
:class="['w-full min-w-full max-w-full h-[200px] min-h-[200px] px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
@input="$emit('update:model-value', $event.target.value)"
:placeholder="placeholder"></textarea>
<input v-else-if="type === 'checkbox'"
:id="id"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
:checked="modelValue"
@input="$emit('update:model-value', $event.target.checked)"
:true-value="true"
:false-value="false"
type="checkbox" />
<input v-else
:id="id"
:class="['w-full px-2.5 py-2 border-b-2 rounded-md', error ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
:type="type"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
@input="$emit('update:model-value', $event.target.value)"
:placeholder="placeholder" />
<span class="text-red-400" v-if="error">{{ error }}</span>
</div>

View File

@@ -11,7 +11,11 @@ defineProps({
<section class="bg-gray-100 rounded-md p-4">
<header class="flex justify-between items-center pb-4">
<h2 class="text-2xl font-roboto font-light">Projekty</h2>
<InertiaLink as="button" href="/dashboard/project/create" class="bg-blue-400 hover:bg-blue-500 text-white px-2 py-1">Dodaj nowy</InertiaLink>
<InertiaLink
as="button"
href="/dashboard/project/create"
class="bg-blue-400 hover:bg-blue-500 text-white px-2.5 py-1 rounded-full"
><FontAwesomeIcon :icon="['fas', 'plus']" /></InertiaLink>
</header>
<ul v-if="projects.length" class="flex flex-col gap-2">
<li