-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: edit dialogs for categories and disciplines
- Loading branch information
Showing
18 changed files
with
711 additions
and
37 deletions.
There are no files selected for viewing
45 changes: 45 additions & 0 deletions
45
.../src/app/(dashboard)/(management)/secretariaat/diplomalijn/categorieen/_actions/update.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| "use server"; | ||
|
|
||
| import { revalidatePath } from "next/cache"; | ||
| import { z } from "zod"; | ||
| import { updateCategory } from "~/lib/nwd"; | ||
|
|
||
| export default async function update( | ||
| categoryId: string, | ||
| data: { | ||
| title: string; | ||
| description: string; | ||
| handle: string; | ||
| weight: number; | ||
| parentCategoryId: string; | ||
| }, | ||
| ) { | ||
| try { | ||
| await updateCategory(categoryId, data); | ||
|
|
||
| revalidatePath("/secretariaat/diplomalijn/categorieen"); | ||
|
|
||
| return { | ||
| message: "Success", | ||
| errors: {}, | ||
| }; | ||
| } catch (error) { | ||
| if (error instanceof z.ZodError) { | ||
| return { | ||
| message: "Error", | ||
| errors: error.issues.reduce( | ||
| (acc, issue) => { | ||
| acc[issue.path.join(".")] = issue.message; | ||
| return acc; | ||
| }, | ||
| {} as Record<string, string>, | ||
| ), | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| message: "Error", | ||
| errors: {}, | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
172 changes: 172 additions & 0 deletions
172
...(dashboard)/(management)/secretariaat/diplomalijn/categorieen/_components/edit-dialog.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,172 @@ | ||
| "use client"; | ||
| import { parseAsString, useQueryState } from "nuqs"; | ||
| import { useFormState, useFormStatus } from "react-dom"; | ||
| import { toast } from "sonner"; | ||
| import { Button } from "~/app/(dashboard)/_components/button"; | ||
| import { | ||
| Dialog, | ||
| DialogActions, | ||
| DialogBody, | ||
| DialogDescription, | ||
| DialogTitle, | ||
| } from "~/app/(dashboard)/_components/dialog"; | ||
| import { | ||
| ErrorMessage, | ||
| Field, | ||
| FieldGroup, | ||
| Fieldset, | ||
| Label, | ||
| } from "~/app/(dashboard)/_components/fieldset"; | ||
| import { Input } from "~/app/(dashboard)/_components/input"; | ||
| import { | ||
| Listbox, | ||
| ListboxLabel, | ||
| ListboxOption, | ||
| } from "~/app/(dashboard)/_components/listbox"; | ||
| import Spinner from "~/app/_components/spinner"; | ||
| import type { listCategories, listParentCategories } from "~/lib/nwd"; | ||
| import update from "../_actions/update"; | ||
|
|
||
| export default function EditDialog({ | ||
| editCategory, | ||
| parentCategories, | ||
| }: { | ||
| editCategory: Awaited<ReturnType<typeof listCategories>>[number] | null; | ||
| parentCategories: Awaited<ReturnType<typeof listParentCategories>>; | ||
| }) { | ||
| const [editCategoryId, setEditCategoryId] = useQueryState<string>( | ||
| "bewerken", | ||
| parseAsString.withDefault(""), | ||
| ); | ||
|
|
||
| const [state, formAction] = useFormState( | ||
| async (_prevState: unknown, formData: FormData) => { | ||
| const title = formData.get("title") as string; | ||
| const description = formData.get("description") as string; | ||
| const handle = formData.get("handle") as string; | ||
| const weight = Number(formData.get("weight")); | ||
| const parentCategoryId = formData.get("parentCategoryId") as string; | ||
|
|
||
| const result = await update(editCategoryId, { | ||
| title, | ||
| handle, | ||
| weight, | ||
| description, | ||
| parentCategoryId, | ||
| }); | ||
| if (result.message === "Success") { | ||
| toast.success("Categorie is geüpdatet."); | ||
| await setEditCategoryId(null); | ||
| } | ||
|
|
||
| return result; | ||
| }, | ||
| null, | ||
| ); | ||
|
|
||
| if (!editCategory) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <Dialog open={!!editCategoryId} onClose={() => setEditCategoryId(null)}> | ||
| <DialogTitle>Categorie wijzigen</DialogTitle> | ||
| <DialogDescription> | ||
| Pas de gegevens van de categorie aan. | ||
| </DialogDescription> | ||
| <form action={formAction}> | ||
| <DialogBody> | ||
| <Fieldset> | ||
| <FieldGroup> | ||
| <Field> | ||
| <Label>Naam</Label> | ||
| <Input | ||
| name="title" | ||
| invalid={!!state?.errors?.title} | ||
| defaultValue={editCategory.title ?? undefined} | ||
| required | ||
| /> | ||
| {state?.errors?.title ? ( | ||
| <ErrorMessage>{state.errors.title}</ErrorMessage> | ||
| ) : null} | ||
| </Field> | ||
| <Field> | ||
| <Label>Handle</Label> | ||
| <Input | ||
| name="handle" | ||
| invalid={!!state?.errors?.handle} | ||
| defaultValue={editCategory.handle} | ||
| required | ||
| /> | ||
| {state?.errors?.handle ? ( | ||
| <ErrorMessage>{state.errors.handle}</ErrorMessage> | ||
| ) : null} | ||
| </Field> | ||
| <Field> | ||
| <Label>Beschrijving</Label> | ||
| <Input | ||
| name="description" | ||
| invalid={!!state?.errors?.description} | ||
| defaultValue={editCategory.description ?? undefined} | ||
| /> | ||
| {state?.errors?.description ? ( | ||
| <ErrorMessage>{state.errors.description}</ErrorMessage> | ||
| ) : null} | ||
| </Field> | ||
| <FieldGroup className="sm:columns-2"> | ||
| <Field> | ||
| <Label>Hoofdcategorie</Label> | ||
| <Listbox | ||
| name="parentCategoryId" | ||
| invalid={!!state?.errors?.parentCategoryId} | ||
| defaultValue={editCategory.parent?.id} | ||
| > | ||
| {parentCategories.map((category) => ( | ||
| <ListboxOption value={category.id}> | ||
| <ListboxLabel> | ||
| {category.title ?? category.handle} | ||
| </ListboxLabel> | ||
| </ListboxOption> | ||
| ))} | ||
| </Listbox> | ||
| {state?.errors?.parentCategoryId ? ( | ||
| <ErrorMessage>{state.errors.parentCategoryId}</ErrorMessage> | ||
| ) : null} | ||
| </Field> | ||
| <Field> | ||
| <Label>Sortering</Label> | ||
| <Input | ||
| type="number" | ||
| invalid={!!state?.errors?.weight} | ||
| name="weight" | ||
| defaultValue={editCategory.weight} | ||
| required | ||
| /> | ||
| {state?.errors?.weight ? ( | ||
| <ErrorMessage>{state.errors.weight}</ErrorMessage> | ||
| ) : null} | ||
| </Field> | ||
| </FieldGroup> | ||
| </FieldGroup> | ||
| </Fieldset> | ||
| </DialogBody> | ||
| <DialogActions> | ||
| <Button plain onClick={() => setEditCategoryId(null)}> | ||
| Annuleren | ||
| </Button> | ||
| <SubmitButton /> | ||
| </DialogActions> | ||
| </form> | ||
| </Dialog> | ||
| ); | ||
| } | ||
|
|
||
| function SubmitButton() { | ||
| const { pending } = useFormStatus(); | ||
| return ( | ||
| <Button color="branding-dark" disabled={pending} type="submit"> | ||
| {pending ? <Spinner className="text-white" /> : null} | ||
| Opslaan | ||
| </Button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
43 changes: 43 additions & 0 deletions
43
.../src/app/(dashboard)/(management)/secretariaat/diplomalijn/disciplines/_actions/update.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| "use server"; | ||
|
|
||
| import { revalidatePath } from "next/cache"; | ||
| import { z } from "zod"; | ||
| import { updateDiscipline } from "~/lib/nwd"; | ||
|
|
||
| export default async function update( | ||
| disciplineId: string, | ||
| data: { | ||
| title: string; | ||
| handle: string; | ||
| weight: number; | ||
| }, | ||
| ) { | ||
| try { | ||
| await updateDiscipline(disciplineId, data); | ||
|
|
||
| revalidatePath("/secretariaat/diplomalijn/disciplines"); | ||
|
|
||
| return { | ||
| message: "Success", | ||
| errors: {}, | ||
| }; | ||
| } catch (error) { | ||
| if (error instanceof z.ZodError) { | ||
| return { | ||
| message: "Error", | ||
| errors: error.issues.reduce( | ||
| (acc, issue) => { | ||
| acc[issue.path.join(".")] = issue.message; | ||
| return acc; | ||
| }, | ||
| {} as Record<string, string>, | ||
| ), | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| message: "Error", | ||
| errors: {}, | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.