@hed-hog/contact 0.0.304 → 0.0.305

package/hedhog/frontend/app/contact-type/page.tsx.ejs

@@ -18,14 +18,6 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Button } from '@/components/ui/button';
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -43,6 +35,14 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
 import {
   Table,
   TableBody,
@@ -51,13 +51,16 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { formatDate } from '@/lib/format-date';
+import { useFormDraft } from '@/hooks/use-form-draft';
+import { formatDate, formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { formatDistanceToNow } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
 import { MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { useMemo, useState } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
 import { toast } from 'sonner';
 import { z } from 'zod';
 
@@ -76,6 +79,37 @@ type ContactType = {
   created_at: string;
 };
 
+type ContactTypeDraftPayload = {
+  mode: 'create' | 'edit';
+  contactTypeId: number | null;
+  values: {
+    code: string;
+    name: string;
+  };
+};
+
+type ContactTypeResponse = {
+  code?: string;
+  name?: string;
+};
+
+function getErrorMessage(error: unknown, fallbackMessage: string) {
+  if (
+    error &&
+    typeof error === 'object' &&
+    'message' in error &&
+    typeof error.message === 'string'
+  ) {
+    return error.message;
+  }
+
+  return fallbackMessage;
+}
+
+const CONTACT_TYPE_CREATE_DRAFT_STORAGE_KEY =
+  'contact-contact-type-create-draft';
+const CONTACT_TYPE_EDIT_DRAFT_STORAGE_KEY = 'contact-contact-type-edit-draft';
+
 export default function ContactTypePage() {
   const t = useTranslations('contact.ContactType');
 
@@ -129,6 +163,124 @@ export default function ContactTypePage() {
     resolver: zodResolver(contactTypeSchema),
   });
 
+  const watchedCreateValues = useWatch({
+    control: form.control,
+  });
+  const watchedEditValues = useWatch({
+    control: editForm.control,
+  });
+
+  const {
+    clearDraft: clearCreateDraft,
+    loadDraft: loadCreateDraft,
+    hasDraft: hasCreateDraft,
+    savedAt: createDraftSavedAt,
+  } = useFormDraft<ContactTypeDraftPayload>({
+    storageKey: CONTACT_TYPE_CREATE_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'create',
+      contactTypeId: null,
+      values: {
+        code: watchedCreateValues.code ?? '',
+        name: watchedCreateValues.name ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedCreateValues.code ?? '').trim() ||
+      (watchedCreateValues.name ?? '').trim()
+    ),
+    enabled: isDialogOpen,
+  });
+
+  const {
+    clearDraft: clearEditDraft,
+    loadDraft: loadEditDraft,
+    hasDraft: hasEditDraft,
+    savedAt: editDraftSavedAt,
+  } = useFormDraft<ContactTypeDraftPayload>({
+    storageKey: CONTACT_TYPE_EDIT_DRAFT_STORAGE_KEY,
+    value: {
+      mode: 'edit',
+      contactTypeId:
+        editingContactType?.contact_type_id || editingContactType?.id || null,
+      values: {
+        code: watchedEditValues.code ?? '',
+        name: watchedEditValues.name ?? '',
+      },
+    },
+    hasData: Boolean(
+      (watchedEditValues.code ?? '').trim() ||
+      (watchedEditValues.name ?? '').trim()
+    ),
+    enabled: isEditDialogOpen,
+  });
+
+  const createDraftStatusContent = useMemo(() => {
+    if (!hasCreateDraft || !createDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(createDraftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [createDraftSavedAt, currentLocaleCode, getSettingValue, hasCreateDraft]);
+
+  const editDraftStatusContent = useMemo(() => {
+    if (!hasEditDraft || !editDraftSavedAt) {
+      return null;
+    }
+
+    const savedDate = new Date(editDraftSavedAt);
+    if (Number.isNaN(savedDate.getTime())) {
+      return null;
+    }
+
+    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
+    const relativeLabel = formatDistanceToNow(savedDate, {
+      addSuffix: true,
+      locale,
+    });
+    const absoluteLabel = formatDateTime(
+      savedDate,
+      getSettingValue,
+      currentLocaleCode
+    );
+
+    return currentLocaleCode.startsWith('pt')
+      ? `Rascunho salvo ${relativeLabel} • Último salvamento: ${absoluteLabel}`
+      : `Draft saved ${relativeLabel} • Last saved: ${absoluteLabel}`;
+  }, [editDraftSavedAt, currentLocaleCode, getSettingValue, hasEditDraft]);
+
+  const openCreateDialog = () => {
+    const storedDraft = loadCreateDraft();
+
+    form.reset(
+      storedDraft?.payload.mode === 'create'
+        ? storedDraft.payload.values
+        : {
+            code: '',
+            name: '',
+          }
+    );
+    setIsDialogOpen(true);
+  };
+
   const onSubmit = async (values: z.infer<typeof contactTypeSchema>) => {
     const payload = {
       code: values.code,
@@ -146,12 +298,13 @@ export default function ContactTypePage() {
         data: payload,
       });
 
+      clearCreateDraft();
       toast.success(t('successCreate'));
       setIsDialogOpen(false);
       form.reset();
       refetch();
-    } catch (error: any) {
-      toast.error(error?.message || t('errorCreate'));
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('errorCreate')));
     }
   };
 
@@ -174,13 +327,14 @@ export default function ContactTypePage() {
         data: payload,
       });
 
+      clearEditDraft();
       toast.success(t('successUpdate'));
       setIsEditDialogOpen(false);
       setEditingContactType(null);
       editForm.reset();
       refetch();
-    } catch (error: any) {
-      toast.error(error?.message || t('errorUpdate'));
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('errorUpdate')));
     }
   };
 
@@ -196,8 +350,8 @@ export default function ContactTypePage() {
       setDeleteDialogOpen(false);
       setDeletingId(null);
       refetch();
-    } catch (error: any) {
-      toast.error(error?.message || t('errorDelete'));
+    } catch (error: unknown) {
+      toast.error(getErrorMessage(error, t('errorDelete')));
     }
   };
 
@@ -205,19 +359,39 @@ export default function ContactTypePage() {
     (async () => {
       setEditingContactType(contactType);
       try {
-        const { data } = await request<any>({
+        const { data } = await request<ContactTypeResponse>({
           url: `/person-contact-type/${contactType.contact_type_id || contactType.id}?locale=${currentLocaleCode}`,
           method: 'GET',
         });
-        editForm.reset({
-          code: data.code || contactType.code,
-          name: data.name || contactType.name || '',
-        });
+        const storedDraft = loadEditDraft();
+        const shouldRestoreDraft =
+          storedDraft?.payload.mode === 'edit' &&
+          storedDraft.payload.contactTypeId ===
+            (contactType.contact_type_id || contactType.id);
+
+        editForm.reset(
+          shouldRestoreDraft
+            ? storedDraft.payload.values
+            : {
+                code: data.code || contactType.code,
+                name: data.name || contactType.name || '',
+              }
+        );
       } catch {
-        editForm.reset({
-          code: contactType.code,
-          name: contactType.name || '',
-        });
+        const storedDraft = loadEditDraft();
+        const shouldRestoreDraft =
+          storedDraft?.payload.mode === 'edit' &&
+          storedDraft.payload.contactTypeId ===
+            (contactType.contact_type_id || contactType.id);
+
+        editForm.reset(
+          shouldRestoreDraft
+            ? storedDraft.payload.values
+            : {
+                code: contactType.code,
+                name: contactType.name || '',
+              }
+        );
       }
       setIsEditDialogOpen(true);
     })();
@@ -235,7 +409,7 @@ export default function ContactTypePage() {
         actions={[
           {
             label: t('buttonNewType'),
-            onClick: () => setIsDialogOpen(true),
+            onClick: openCreateDialog,
             variant: 'default',
             icon: <Plus />,
           },
@@ -332,7 +506,7 @@ export default function ContactTypePage() {
             title={t('noResults')}
             description={t('emptyStateDescription')}
             actionLabel={t('emptyStateAction')}
-            onAction={() => setIsDialogOpen(true)}
+            onAction={openCreateDialog}
           />
         </div>
       )}
@@ -346,7 +520,15 @@ export default function ContactTypePage() {
         pageSizeOptions={[10, 20, 30, 40, 50]}
       />
 
-      <Sheet open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <Sheet
+        open={isDialogOpen}
+        onOpenChange={(open) => {
+          setIsDialogOpen(open);
+          if (!open) {
+            form.reset();
+          }
+        }}
+      >
         <SheetContent className="w-full sm:max-w-md">
           <SheetHeader>
             <SheetTitle>{t('dialogNewTitle')}</SheetTitle>
@@ -392,6 +574,12 @@ export default function ContactTypePage() {
                 )}
               />
 
+              {createDraftStatusContent ? (
+                <p className="text-xs text-muted-foreground">
+                  {createDraftStatusContent}
+                </p>
+              ) : null}
+
               <SheetFooter className="px-0">
                 <Button type="submit">{t('buttonCreate')}</Button>
               </SheetFooter>
@@ -455,6 +643,12 @@ export default function ContactTypePage() {
                 )}
               />
 
+              {editDraftStatusContent ? (
+                <p className="text-xs text-muted-foreground">
+                  {editDraftStatusContent}
+                </p>
+              ) : null}
+
               <SheetFooter className="px-0">
                 <Button type="submit">{t('buttonUpdate')}</Button>
               </SheetFooter>