Skip to content

Commit

Permalink
- CRUD forms tweaks (#45)
Browse files Browse the repository at this point in the history
  • Loading branch information
@krzysztofrewak
krzysztofrewak authored Sep 27, 2023
1 parent a07d485 commit cf96396
Show file tree
Hide file tree
Showing 14 changed files with 371 additions and 280 deletions.
6 changes: 5 additions & 1 deletion app/Http/Controllers/Dashboard/SemesterController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,14 @@ class SemesterController extends Controller
{
public function index(): Response
{
$semesters = Semester::query()->orderByDesc("created_at")->get();
$semesters = Semester::query()
->orderByDesc("created_at")
->get();

return inertia("Dashboard/Semester/Index", [
"semesters" => $semesters,
"total" => Semester::query()->count(),
"lastUpdate" => Semester::query()->orderByDesc("updated_at")->first()?->updated_at->diffForHumans(),
]);
}

Expand Down
86 changes: 47 additions & 39 deletions resources/js/Pages/Dashboard/PasswordUpdate.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import SubmitButton from '@/Shared/Components/Buttons/SubmitButton.vue'
import FormGroup from '@/Shared/Forms/FormGroup.vue'
import FormLabel from '@/Shared/Forms/FormLabel.vue'
import TextInput from '@/Shared/Forms/TextInput.vue'
import SecondaryButton from '@/Shared/Components/Buttons/SecondaryButton.vue'
import { useForm } from '@inertiajs/inertia-vue3'
import FormError from '@/Shared/Forms/FormError.vue'
import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
const form = useForm({
current_password: '',
Expand All @@ -27,43 +28,50 @@ function updatePassword() {

<template>
<DashboardLayout>
<h3 class="text-base font-semibold leading-6 text-gray-900">
Edycja hasła
</h3>
<form @submit.prevent="updatePassword">
<Section class="mt-3">
<div class="flex justify-between">
<FormGroup>
<FormLabel for="current_password">
Aktualne hasło
</FormLabel>
<TextInput id="current_password" v-model="form.current_password" :error="form.errors.current_password" type="password" />
<FormError :error="form.errors.current_password" class="mt-2" />
</FormGroup>
<FormGroup>
<FormLabel for="password">
Nowe hasło
</FormLabel>
<TextInput id="password" v-model="form.password" :error="form.errors.password" type="password" />
<FormError :error="form.errors.password" class="mt-2" />
</FormGroup>
<FormGroup>
<FormLabel for="password_confirmation">
Potwierdź nowe hasło
</FormLabel>
<TextInput id="password_confirmation" v-model="form.password_confirmation" :error="form.errors.password_confirmation" type="password" />
<FormError :error="form.errors.password_confirmation" class="mt-2" />
</FormGroup>
</div>
<div class="flex justify-end space-x-3 py-3">
<SecondaryButton href="/dashboard">
Cofnij
</SecondaryButton>
<SubmitButton>
Zapisz
</SubmitButton>
</div>
</Section>
</form>
<div class="flex flex-col gap-8">
<ManagementHeader>
<template #header>
Zarządzanie profilem
</template>
<template #statistics>
<ManagementHeaderItem>
Formularz zmiany hasła
</ManagementHeaderItem>
</template>
</ManagementHeader>

<form class="grid grid-cols-2" @submit.prevent="updatePassword">
<Section>
<div class="flex flex-col justify-between gap-4">
<FormGroup>
<FormLabel for="current_password">
Aktualne hasło
</FormLabel>
<TextInput id="current_password" v-model="form.current_password" :error="form.errors.current_password" type="password" />
<FormError :error="form.errors.current_password" />
</FormGroup>
<FormGroup>
<FormLabel for="password">
Nowe hasło
</FormLabel>
<TextInput id="password" v-model="form.password" :error="form.errors.password" type="password" />
<FormError :error="form.errors.password" />
</FormGroup>
<FormGroup>
<FormLabel for="password_confirmation">
Potwierdź nowe hasło
</FormLabel>
<TextInput id="password_confirmation" v-model="form.password_confirmation" :error="form.errors.password_confirmation" type="password" />
<FormError :error="form.errors.password_confirmation" />
</FormGroup>
<div class="mt-4 flex justify-end">
<SubmitButton>
Utwórz
</SubmitButton>
</div>
</div>
</Section>
</form>
</div>
</DashboardLayout>
</template>
64 changes: 39 additions & 25 deletions resources/js/Pages/Dashboard/Semester/Create.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import SubmitButton from '@/Shared/Components/Buttons/SubmitButton.vue'
import FormGroup from '@/Shared/Forms/FormGroup.vue'
import FormLabel from '@/Shared/Forms/FormLabel.vue'
import TextInput from '@/Shared/Forms/TextInput.vue'
import SecondaryButton from '@/Shared/Components/Buttons/SecondaryButton.vue'
import { useForm } from '@inertiajs/inertia-vue3'
import FormError from '@/Shared/Forms/FormError.vue'
import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
const form = useForm({
name: '',
Expand All @@ -20,29 +21,42 @@ function createSemester() {

<template>
<DashboardLayout>
<h3 class="text-base font-semibold leading-6 text-gray-900">
Dodawanie semestru
</h3>
<form @submit.prevent="createSemester">
<Section class="mt-3">
<div class="flex justify-between">
<FormGroup :full-width="false">
<FormLabel for="name">
Nazwa
</FormLabel>
<TextInput id="name" v-model="form.name" :error="form.errors.name" />
<FormError :error="form.errors.name" class="mt-2" />
</FormGroup>
</div>
<div class="flex justify-end space-x-3 py-3">
<SecondaryButton href="/dashboard/semesters">
Cofnij
</SecondaryButton>
<SubmitButton>
Utwórz
</SubmitButton>
</div>
</Section>
</form>
<div class="flex flex-col gap-8">
<ManagementHeader>
<template #header>
Zarządzanie semestrami
</template>
<template #statistics>
<ManagementHeaderItem>
Formularz dodawania nowego semestru
</ManagementHeaderItem>
</template>
</ManagementHeader>

<form class="grid grid-cols-2" @submit.prevent="createSemester">
<Section>
<div class="flex flex-col justify-between gap-4">
<FormGroup>
<FormLabel for="id">
Id
</FormLabel>
<TextInput class="opacity-75" placeholder="autogenerowany ulid" autocomplete="off" disabled />
</FormGroup>
<FormGroup>
<FormLabel for="name">
Nazwa
</FormLabel>
<TextInput id="name" v-model="form.name" :error="form.errors.name" autocomplete="off" />
<FormError :error="form.errors.name" />
</FormGroup>
<div class="mt-4 flex justify-end">
<SubmitButton>
Utwórz
</SubmitButton>
</div>
</div>
</Section>
</form>
</div>
</DashboardLayout>
</template>
64 changes: 39 additions & 25 deletions resources/js/Pages/Dashboard/Semester/Edit.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,10 @@ import SubmitButton from '@/Shared/Components/Buttons/SubmitButton.vue'
import FormGroup from '@/Shared/Forms/FormGroup.vue'
import FormLabel from '@/Shared/Forms/FormLabel.vue'
import TextInput from '@/Shared/Forms/TextInput.vue'
import SecondaryButton from '@/Shared/Components/Buttons/SecondaryButton.vue'
import { useForm } from '@inertiajs/inertia-vue3'
import FormError from '@/Shared/Forms/FormError.vue'
import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
const props = defineProps({
semester: Object,
Expand All @@ -24,29 +25,42 @@ function updateSemester() {

<template>
<DashboardLayout>
<h3 class="text-base font-semibold leading-6 text-gray-900">
Edycja semestru
</h3>
<form @submit.prevent="updateSemester">
<Section class="mt-3">
<div class="flex justify-between">
<FormGroup :full-width="false">
<FormLabel for="name">
Nazwa
</FormLabel>
<TextInput id="name" v-model="form.name" :error="form.errors.name" />
<FormError :error="form.errors.name" class="mt-2" />
</FormGroup>
</div>
<div class="flex justify-end space-x-3 py-3">
<SecondaryButton href="/dashboard/semesters">
Cofnij
</SecondaryButton>
<SubmitButton>
Zapisz
</SubmitButton>
</div>
</Section>
</form>
<div class="flex flex-col gap-8">
<ManagementHeader>
<template #header>
Zarządzanie semestrami
</template>
<template #statistics>
<ManagementHeaderItem>
Formularz edycji semestru {{ semester.name }}
</ManagementHeaderItem>
</template>
</ManagementHeader>

<form class="grid grid-cols-2" @submit.prevent="updateSemester">
<Section>
<div class="flex flex-col justify-between gap-4">
<FormGroup>
<FormLabel for="id">
Id
</FormLabel>
<TextInput class="opacity-75" :placeholder="semester.id" autocomplete="off" disabled />
</FormGroup>
<FormGroup>
<FormLabel for="name">
Nazwa
</FormLabel>
<TextInput id="name" v-model="form.name" :error="form.errors.name" autocomplete="off" />
<FormError :error="form.errors.name" />
</FormGroup>
<div class="mt-4 flex justify-end">
<SubmitButton>
Zapisz
</SubmitButton>
</div>
</div>
</Section>
</form>
</div>
</DashboardLayout>
</template>
92 changes: 58 additions & 34 deletions resources/js/Pages/Dashboard/Semester/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,33 @@ import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
import { ref } from 'vue'
import { Method } from '@inertiajs/inertia'
import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
import { Cog6ToothIcon, XCircleIcon, CheckIcon } from '@heroicons/vue/24/outline'
defineProps({
semesters: Object,
total: Number,
lastUpdate: String,
})
const showModal = ref(false)
const semesterToDeleteId = ref(0)
</script>

<template>
<DashboardLayout>
<div v-if="semesters.length" class="flex flex-col gap-8">
<div class="flex flex-col gap-8">
<ManagementHeader>
<template #header>
Zarządzanie semestrami
</template>
<template #statistics>
<ManagementHeaderItem>
Liczba semestrów w bazie: {{ total }}
</ManagementHeaderItem>
<ManagementHeaderItem v-if="lastUpdate">
Ostatnie zmiany: {{ lastUpdate }}
</ManagementHeaderItem>
</template>
<template #actions>
<span class="hidden sm:block">
<Button :href="`/dashboard/semesters/create`">
Expand All @@ -34,40 +45,53 @@ const semesterToDeleteId = ref(0)
</span>
</template>
</ManagementHeader>
<TableWrapper class="mt-2">
<template #header>
<TableHeader class="w-1/5">
Nazwa
</TableHeader>
<TableHeader class="w-1/5">
Status
</TableHeader>
<TableHeader />
</template>
<template #body>
<TableRow v-for="semester in semesters" :key="semester.id" :class="semester.active === true ? 'bg-green-50' : ''">
<TableCell>
{{ semester.name }}
</TableCell>
<TableCell>
{{ semester.active ? "aktywny" : "nieaktywny" }}
</TableCell>
<TableCell class="text-right">
<Button v-if="semester.status !== true" :method="Method.POST" :href="`/dashboard/semesters/${semester.id}/activate`">
<CheckIcon class="w-6" />
</Button>
<Button :href="`/dashboard/semesters/${semester.id}/edit`">
<Cog6ToothIcon class="w-6" />
</Button>
<Button class="text-red-600" @click="[showModal = true, semesterToDeleteId = semester.id]">
<XCircleIcon class="w-6" />
</Button>
</TableCell>
</TableRow>
</template>
</TableWrapper>
<div v-if="semesters.length" class="flex flex-col gap-8">
<TableWrapper>
<template #header>
<TableHeader class="w-1/6">
ID
</TableHeader>
<TableHeader class="w-1/5">
Nazwa
</TableHeader>
<TableHeader class="w-1/5">
Status
</TableHeader>
<TableHeader />
</template>
<template #body>
<TableRow v-for="semester in semesters" :key="semester.id"
:class="semester.active === true ? 'bg-green-50' : ''"
>
<TableCell class="pr-12 opacity-75">
{{ semester.id }}
</TableCell>
<TableCell>
{{ semester.name }}
</TableCell>
<TableCell>
{{ semester.active ? "aktywny" : "nieaktywny" }}
</TableCell>
<TableCell class="flex justify-end gap-2">
<Button v-if="semester.status !== true" :method="Method.POST"
:href="`/dashboard/semesters/${semester.id}/activate`"
>
<CheckIcon class="w-5" />
</Button>
<Button :href="`/dashboard/semesters/${semester.id}/edit`">
<Cog6ToothIcon class="w-5" />
</Button>
<Button class="text-red-600" @click="[showModal = true, semesterToDeleteId = semester.id]">
<XCircleIcon class="w-5" />
</Button>
</TableCell>
</TableRow>
</template>
</TableWrapper>
</div>
<EmptyState v-else />
</div>
<EmptyState v-else class="mt-3" />
</DashboardLayout>

<RemoveModal :show="showModal" :href="`/dashboard/semesters/${semesterToDeleteId}`" @close="showModal = false" />
</template>
Loading

0 comments on commit cf96396

Please sign in to comment.