knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

<suspense> added to LocationEditPage

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-06 14:16:31 +01:00
parent 7f08349688
commit cf97b3d4b5
3 changed files with 84 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/location/[id]/edit/LocationEditPage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { notFound } from 'next/navigation';
import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { fetchLocationById } from '@/app/lib/actions/locationActions';
export default async function LocationEditPage({ locationId }: { locationId:string }) {
const location = await fetchLocationById(locationId);
if (!location) {
return(notFound());
}
const result = <LocationEditForm location={location} yearMonth={location.yearMonth} />;
return (result);
}

20
app/location/[id]/edit/page.tsx
View File

@@ -1,13 +1,15 @@
import { notFound } from 'next/navigation';
import { LocationEditForm } from '@/app/ui/LocationEditForm';
import { fetchLocationById } from '@/app/lib/actions/locationActions';
import { Suspense } from 'react';
import LocationEditPage from './LocationEditPage';
import { Main } from '@/app/ui/Main';
import { LocationEditFormSkeleton } from '@/app/ui/LocationEditForm';
export default async function Page({ params:{ id } }: { params: { id:string } }) {
const location = await fetchLocationById(id);
if (!location) {
return(notFound());
}
return (<LocationEditForm location={location} yearMonth={location.yearMonth} />);
return (
<Main>
<Suspense fallback={<LocationEditFormSkeleton />}>
<LocationEditPage locationId={id} />
</Suspense>
</Main>
);
}

101
app/ui/LocationEditForm.tsx
View File

@@ -5,7 +5,6 @@ import { FC } from "react";
import { BillingLocation, YearMonth } from "../lib/db-types";
import { updateOrAddLocation } from "../lib/actions/locationActions";
import { useFormState } from "react-dom";
import { Main } from "./Main";
import Link from "next/link";
import { gotoHome } from "../lib/actions/navigationActions";
@@ -32,52 +31,66 @@ export const LocationEditForm:FC<LocationEditFormProps> = ({ location, yearMonth
};
return(
<Main>
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
<div className="card-body">
<form action={dispatch}>
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
<div className="card-body">
<form action={dispatch}>
{
location &&
<Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
</Link>
}
<input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.locationName &&
state.errors.locationName.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
<textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.locationNotes &&
state.errors.locationNotes.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
<div id="status-error" aria-live="polite" aria-atomic="true">
{
location &&
<Link href={`/location/${location._id}/delete`} className="absolute bottom-5 right-4 tooltip" data-tip="Delete Location">
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
</Link>
state.message &&
<p className="mt-2 text-sm text-red-500">
{state.message}
</p>
}
<input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" defaultValue={location?.name ?? ""} />
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.locationName &&
state.errors.locationName.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
</div>
<textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis" defaultValue={location?.notes ?? ""}></textarea>
<div id="status-error" aria-live="polite" aria-atomic="true">
{state.errors?.locationNotes &&
state.errors.locationNotes.map((error: string) => (
<p className="mt-2 text-sm text-red-500" key={error}>
{error}
</p>
))}
</div>
<div id="status-error" aria-live="polite" aria-atomic="true">
{
state.message &&
<p className="mt-2 text-sm text-red-500">
{state.message}
</p>
}
</div>
<div className="pt-4">
<button className="btn btn-primary">Save</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
</div>
</form>
</div>
<div className="pt-4">
<button className="btn btn-primary">Save</button>
<button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
</div>
</form>
</div>
</Main>
</div>
)
}
export const LocationEditFormSkeleton:FC = () =>
{
return(
<div className="skeleton card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
<div className="card-body">
<input id="locationName" name="locationName" type="text" placeholder="Naziv lokacije" className="input input-bordered w-full" />
<textarea id="locationNotes" name="locationNotes" className="textarea textarea-bordered my-1 w-full block" placeholder="Opis"></textarea>
<div className="pt-4">
<button className="btn btn-primary">Save</button>
<button type="button" className="btn btn-neutral ml-3">Cancel</button>
</div>
</div>
</div>
)
}