create-nevela 0.5.2 → 0.6.0

package/template/web/components/dashboard/row-actions.tsx

@@ -7,6 +7,7 @@ import { ExternalLinkIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lu
 import { toast } from "sonner";
 import type { ClientResource } from "@flaredev/core";
 import { deleteRecordAction } from "@/app/dashboard/actions";
+import { restoreRecordAction } from "@/app/dashboard/trash/actions";
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -26,7 +27,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Spinner } from "@/components/ui/spinner";
+import { keptFor, type TrashInfo } from "@/lib/trash-info";
 import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
+import { toastMovedToTrash } from "./trash-actions";
 
 /**
  * Edit and delete for one row. Edit opens a dialog when the row's record came with it
@@ -42,6 +45,7 @@ export function RowActions({
   detailHref,
   canUpdate = true,
   canDelete = true,
+  trash,
 }: {
   resource: ClientResource;
   id: string;
@@ -54,18 +58,21 @@ export function RowActions({
   detailHref: string;
   canUpdate?: boolean;
   canDelete?: boolean;
+  /** This resource's trash, when a deleted record goes there instead of going for good. */
+  trash?: TrashInfo;
 }) {
   const router = useRouter();
   const [confirming, setConfirming] = useState(false);
   const [editing, setEditing] = useState(false);
   const [pending, startTransition] = useTransition();
-  const { name: resourceName, label } = resource;
+  const { name: resourceName, label, slug } = resource;
 
   function onDelete() {
     startTransition(async () => {
       const result = await deleteRecordAction(resourceName, id);
       if (result.ok) {
-        toast.success(`${label} deleted.`);
+        if (trash) toastMovedToTrash(`${label} moved to the trash.`, () => restoreRecordAction(slug, id), () => router.refresh());
+        else toast.success(`${label} deleted.`);
         setConfirming(false);
         router.refresh();
       } else {
@@ -74,8 +81,6 @@ export function RowActions({
     });
   }
 
-
-
   return (
     <>
       <DropdownMenu>
@@ -139,14 +144,14 @@ export function RowActions({
       <AlertDialog open={confirming} onOpenChange={setConfirming}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete this {label.toLowerCase()}?</AlertDialogTitle>
-            <AlertDialogDescription>This can&apos;t be undone.</AlertDialogDescription>
+            <AlertDialogTitle>{trash ? `Move this ${label.toLowerCase()} to the trash?` : `Delete this ${label.toLowerCase()}?`}</AlertDialogTitle>
+            <AlertDialogDescription>{trash ? `It can be restored from the trash ${keptFor(trash)}.` : "This can't be undone."}</AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
             <Button variant="destructive" onClick={onDelete} disabled={pending}>
               {pending && <Spinner data-icon="inline-start" />}
-              Delete
+              {trash ? "Move to trash" : "Delete"}
             </Button>
           </AlertDialogFooter>
         </AlertDialogContent>

package/template/web/components/dashboard/table-selection.tsx

@@ -5,6 +5,7 @@ import { useRouter } from "next/navigation";
 import { DownloadIcon, Trash2Icon, XIcon } from "lucide-react";
 import { toast } from "sonner";
 import { deleteManyAction } from "@/app/dashboard/actions";
+import { restoreManyAction } from "@/app/dashboard/trash/actions";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -19,6 +20,8 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Spinner } from "@/components/ui/spinner";
 import { toCsv } from "@/lib/csv";
+import { keptFor, type TrashInfo } from "@/lib/trash-info";
+import { toastMovedToTrash } from "./trash-actions";
 
 interface SelectionValue {
   ids: string[];
@@ -94,13 +97,16 @@ interface BarProps {
   /** Rows as they're shown, for exporting what's selected without another round trip. */
   rows: Record<string, unknown>[];
   columns: { key: string; label: string }[];
+  /** The resource's address, and its trash when deleted records go there instead of going for good. */
+  slug: string;
+  trash?: TrashInfo;
 }
 
 /**
  * What you can do with the rows you've ticked. Appears only when something is selected,
  * pinned to the bottom so it's reachable in a long table.
  */
-export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows, columns }: BarProps) {
+export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows, columns, slug, trash }: BarProps) {
   const { selected, clear } = useSelection();
   const router = useRouter();
   const [confirming, setConfirming] = useState(false);
@@ -117,7 +123,8 @@ export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows
 
   const remove = () => {
     startTransition(async () => {
-      const result = await deleteManyAction(resourceName, [...selected]);
+      const ids = [...selected];
+      const result = await deleteManyAction(resourceName, ids);
       setConfirming(false);
       if (!result.ok) {
         toast.error(result.error);
@@ -126,8 +133,17 @@ export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows
       const { deleted, failed } = result.data;
       clear();
       router.refresh();
-      if (failed > 0) toast.warning(`Deleted ${deleted}; ${failed} couldn't be deleted.`);
-      else toast.success(`Deleted ${deleted} ${deleted === 1 ? label.toLowerCase() : pluralLabel.toLowerCase()}.`);
+      const what = `${deleted} ${deleted === 1 ? label.toLowerCase() : pluralLabel.toLowerCase()}`;
+      // The ones that wouldn't go aren't in the trash, and restoring passes over them.
+      const undo = async () => {
+        const result = await restoreManyAction(slug, ids);
+        if (!result.ok || result.data.refused === 0) return result;
+        return { ok: true as const, partly: `Restored ${result.data.restored}. ${result.data.refused} couldn't be: ${result.data.reason}` };
+      };
+      if (trash && deleted > 0) {
+        toastMovedToTrash(failed > 0 ? `${what} moved to the trash; ${failed} couldn't be deleted.` : `${what} moved to the trash.`, undo, () => router.refresh(), failed > 0);
+      } else if (failed > 0) toast.warning(`Deleted ${deleted}; ${failed} couldn't be deleted.`);
+      else toast.success(`Deleted ${what}.`);
     });
   };
 
@@ -156,15 +172,19 @@ export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows
         <AlertDialogContent>
           <AlertDialogHeader>
             <AlertDialogTitle>
-              Delete {count} {noun}?
+              {trash ? `Move ${count} ${noun} to the trash?` : `Delete ${count} ${noun}?`}
             </AlertDialogTitle>
-            <AlertDialogDescription>This can&apos;t be undone. Anything that belongs to them may be deleted too.</AlertDialogDescription>
+            <AlertDialogDescription>
+              {trash
+                ? `${count === 1 ? "It" : "They"} can be restored from the trash ${keptFor(trash)}.`
+                : "This can't be undone. Anything that belongs to them may be deleted too."}
+            </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogCancel disabled={pending}>Keep them</AlertDialogCancel>
             <AlertDialogAction onClick={(event) => { event.preventDefault(); remove(); }} disabled={pending}>
               {pending && <Spinner data-icon="inline-start" />}
-              Delete {count}
+              {trash ? `Move ${count} to trash` : `Delete ${count}`}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>

package/template/web/components/dashboard/trash-actions.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState, useTransition } from "react";
+import { RotateCcwIcon, Trash2Icon } from "lucide-react";
+import { toast } from "sonner";
+import { emptyTrashAction, purgeRecordAction, restoreRecordAction } from "@/app/dashboard/trash/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+
+/**
+ * The toast after a delete that went to the trash: it says where the record went, and
+ * offers to take it back. `undo` restores, and says so in `partly` when only some of
+ * several came back; `after` is what to do once it has. `warn` is for a delete that
+ * itself only partly worked.
+ */
+export function toastMovedToTrash(
+  message: string,
+  undo: () => Promise<{ ok: true; partly?: string } | { ok: false; error: string }>,
+  after: () => void,
+  warn = false,
+) {
+  (warn ? toast.warning : toast.success)(message, {
+    action: {
+      label: "Undo",
+      onClick: async () => {
+        const result = await undo();
+        if (!result.ok) {
+          toast.error(result.error);
+          return;
+        }
+        if (result.partly) toast.warning(result.partly);
+        else toast.success("Restored.");
+        after();
+      },
+    },
+  });
+}
+
+/** How long a deleted record has left: "in 29 days", worked out on the reader's own clock. */
+export function TimeLeft({ until }: { until: string | null }) {
+  const [text, setText] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!until) return;
+    const hours = (new Date(until).getTime() - Date.now()) / 3_600_000;
+    const relative = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+    // Past its time and still here: it goes the next time the trash is swept.
+    if (hours <= 0) setText("soon");
+    else if (hours < 1) setText("in under an hour");
+    else setText(hours < 48 ? relative.format(Math.round(hours), "hour") : relative.format(Math.round(hours / 24), "day"));
+  }, [until]);
+
+  if (!until) return <span>Kept until removed</span>;
+  return (
+    <time dateTime={until} title={until} suppressHydrationWarning>
+      {text ?? new Intl.DateTimeFormat("en-GB", { dateStyle: "medium", timeZone: "UTC" }).format(new Date(until))}
+    </time>
+  );
+}
+
+/** Restore, or delete forever, for one record in the trash. */
+export function TrashRowActions({ slug, id, label, noun }: { slug: string; id: string; label: string; noun: string }) {
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  function restore() {
+    startTransition(async () => {
+      const result = await restoreRecordAction(slug, id);
+      if (result.ok) {
+        toast.success(`${label} is back in its list.`);
+        router.refresh();
+      } else {
+        toast.error(result.error);
+      }
+    });
+  }
+
+  function purge() {
+    startTransition(async () => {
+      const result = await purgeRecordAction(slug, id);
+      if (result.ok) {
+        toast.success(`${label} is deleted for good.`);
+        setConfirming(false);
+        router.refresh();
+      } else {
+        setConfirming(false);
+        toast.error(result.error);
+      }
+    });
+  }
+
+  return (
+    <div className="flex items-center justify-end gap-1">
+      <Button variant="outline" size="sm" disabled={pending} onClick={restore}>
+        {pending && !confirming ? <Spinner data-icon="inline-start" /> : <RotateCcwIcon data-icon="inline-start" />}
+        Restore
+      </Button>
+      <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive" disabled={pending} onClick={() => setConfirming(true)}>
+        Delete forever
+      </Button>
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete {label} forever?</AlertDialogTitle>
+            <AlertDialogDescription>This {noun} is removed for good, now. This can&apos;t be undone.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <Button variant="destructive" onClick={purge} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete forever
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}
+
+/** Remove everything of one resource from the trash, after being asked twice. */
+export function EmptyTrashButton({ slug, count, noun, plural }: { slug: string; count: number; noun: string; plural: string }) {
+  const router = useRouter();
+  const [confirming, setConfirming] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  function empty() {
+    startTransition(async () => {
+      const result = await emptyTrashAction(slug);
+      setConfirming(false);
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      const { removed, kept } = result.data;
+      if (kept > 0) toast.warning(`Deleted ${removed} for good. ${kept} couldn't be: other deleted records still belong to them.`);
+      else toast.success(`Deleted ${removed.toLocaleString()} ${removed === 1 ? noun : plural} for good.`);
+      router.refresh();
+    });
+  }
+
+  return (
+    <>
+      <Button variant="outline" size="sm" className="text-destructive hover:text-destructive" onClick={() => setConfirming(true)}>
+        <Trash2Icon data-icon="inline-start" />
+        Empty
+      </Button>
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Delete {count === 1 ? `the one deleted ${noun}` : `all ${count.toLocaleString()} deleted ${plural}`} forever?
+            </AlertDialogTitle>
+            <AlertDialogDescription>Everything of this kind in the trash is removed for good, now. None of it can be restored afterwards.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <Button variant="destructive" onClick={empty} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete forever
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/template/web/lib/trash-info.ts

@@ -0,0 +1,13 @@
+/**
+ * What a delete button needs to know to say truthfully what pressing it does. Kept apart
+ * from lib/trash.ts, which talks to Laravel and so can't be loaded in the browser.
+ */
+export interface TrashInfo {
+  /** How many days a deleted record can be restored, or null when it is kept until someone removes it. */
+  days: number | null;
+}
+
+/** "for 30 days", or "until someone removes it for good". */
+export function keptFor(trash: TrashInfo): string {
+  return trash.days === null ? "until someone removes it for good" : `for ${trash.days} ${trash.days === 1 ? "day" : "days"}`;
+}

package/template/web/lib/trash.ts

@@ -0,0 +1,66 @@
+import { cache } from "react";
+import { laravel } from "./laravel";
+import type { TrashInfo } from "./trash-info";
+
+/**
+ * The trash, as Laravel serves it (`/_nevela/trash`).
+ *
+ * A deleted record is kept, hidden, and can be restored for a number of days. Which
+ * resources have a trash is Laravel's to say: one whose table hasn't been migrated yet
+ * still deletes for good, and so does every resource of an app whose API is from before
+ * the trash existed.
+ */
+
+export interface TrashBucket {
+  name: string;
+  label: string;
+  pluralLabel: string;
+  slug: string;
+  icon: string | null;
+  /** How many of this resource's records are in the trash. */
+  count: number;
+}
+
+export interface TrashedRecord {
+  id: string;
+  /** What a list would call it: its title. */
+  label: string;
+  deletedAt: string | null;
+  /** When it is removed for good, or null when it is kept until someone removes it. */
+  expiresAt: string | null;
+}
+
+export interface TrashList {
+  data: TrashedRecord[];
+  meta: { page: number; perPage: number; total: number; totalPages: number };
+}
+
+/**
+ * Which resources have a trash this person may use. Asked once for a page, however many
+ * delete buttons are on it; nothing is counted. Null when the API has no trash at all.
+ */
+const trashStatus = cache(async (): Promise<{ days: number | null; resources: string[] } | null> => {
+  const response = await laravel("_nevela/trash/_status");
+  return response.ok ? (response.body as { days: number | null; resources: string[] }) : null;
+});
+
+/** For a resource's delete buttons: its trash, or undefined when deleting it is for good. */
+export async function trashFor(slug: string): Promise<TrashInfo | undefined> {
+  const status = await trashStatus();
+  return status?.resources.includes(slug) ? { days: status.days } : undefined;
+}
+
+/**
+ * Everything in the trash, by resource, for the Trash page. Opening it is also what
+ * removes anything past its time, where no scheduler does that overnight.
+ */
+export async function trashBuckets(): Promise<{ days: number | null; resources: TrashBucket[] } | null> {
+  const response = await laravel("_nevela/trash");
+  return response.ok ? (response.body as { days: number | null; resources: TrashBucket[] }) : null;
+}
+
+export async function trashedRecords(slug: string, page?: string): Promise<TrashList | null> {
+  const query = new URLSearchParams(page ? { page } : {});
+  const response = await laravel(`_nevela/trash/${encodeURIComponent(slug)}?${query}`);
+  return response.ok ? (response.body as TrashList) : null;
+}

package/template/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nevela-web",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "private": true,
   "type": "module",
   "scripts": {