90 lines
2.0 KiB
TypeScript
90 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import LocationDialog from "@/components/locations/location-dialog";
|
|
import IUser from "@/interfaces/IUser";
|
|
import hasPermissions from "@/lib/hasPermissions";
|
|
import { useState } from "react";
|
|
import { Location } from "@/types/types";
|
|
import request from "@/lib/request";
|
|
import { useApi } from "@/hooks/use-api";
|
|
import { LocationCard } from "@/components/locations/location-card";
|
|
|
|
export default function LocationsPage({ user }: { user: IUser }) {
|
|
const { locations: locationsPerm } = hasPermissions(user.roles, {
|
|
locations: ["update", "insert", "delete"],
|
|
} as const);
|
|
|
|
const locations = useApi<Location[]>("/locations/all");
|
|
|
|
const onUpdate = async (l: Location) => {
|
|
try {
|
|
const res = await request("/locations", {
|
|
method: "PATCH",
|
|
body: l,
|
|
requiresAuth: true,
|
|
});
|
|
if (res.status === "Success") {
|
|
locations.mutate();
|
|
} else {
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
const onDelete = async (l: Location) => {
|
|
try {
|
|
const res = await request("/locations", {
|
|
method: "DELETE",
|
|
body: l,
|
|
requiresAuth: true,
|
|
});
|
|
|
|
if (res.status === "Success") locations.mutate();
|
|
else {
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-4 flex flex-col gap-2">
|
|
{locationsPerm.insert && (
|
|
<div className="self-end">
|
|
<LocationDialog
|
|
onAdd={async (l) => {
|
|
try {
|
|
const res = await request("/locations/new", {
|
|
body: l,
|
|
method: "POST",
|
|
requiresAuth: true,
|
|
csrfToken: false,
|
|
});
|
|
if (res.status === "Success") {
|
|
locations.mutate();
|
|
} else {
|
|
}
|
|
} catch (e) {}
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
<section className="flex flex-wrap gap-2">
|
|
{locations.data?.map((l) => {
|
|
return (
|
|
<LocationCard
|
|
key={`${l.city}:${l.street}:${l.postalCode}`}
|
|
location={l}
|
|
onUpdate={onUpdate}
|
|
onDelete={onDelete}
|
|
canUpdate={locationsPerm.update}
|
|
canDelete={locationsPerm.delete}
|
|
/>
|
|
);
|
|
})}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|