@hed-hog/contact 0.0.186 → 0.0.191

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

@@ -0,0 +1,480 @@
+'use client';
+
+import {
+  PageHeader,
+  PaginationFooter,
+  SearchBar,
+} from '@/components/entity-list';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { formatDate } from '@/lib/format-date';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { MoreHorizontal, Pencil, Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+
+type PaginatedResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+type AddressType = {
+  address_type_id?: number;
+  id: number;
+  code: string;
+  name: string;
+  created_at: string;
+};
+
+export default function AddressTypePage() {
+  const t = useTranslations('contact.AddressType');
+
+  const addressTypeSchema = z.object({
+    code: z.string().min(2, t('errorCode')),
+    name: z.string().min(2, t('errorName')),
+  });
+  const { request, currentLocaleCode, getSettingValue } = useApp();
+
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+  const [editingAddressType, setEditingAddressType] =
+    useState<AddressType | null>(null);
+
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(12);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+
+  const {
+    data: paginate = { data: [], total: 0, page: 1, pageSize: 12 },
+    isLoading,
+    refetch,
+  } = useQuery<PaginatedResult<AddressType>>({
+    queryKey: ['address-types', page, pageSize, searchQuery, currentLocaleCode],
+    queryFn: async () => {
+      const params = new URLSearchParams();
+      params.set('page', String(page));
+      params.set('pageSize', String(pageSize));
+      if (searchQuery) params.set('search', searchQuery);
+
+      const response = await request<PaginatedResult<AddressType>>({
+        url: `/person-address-type?${params.toString()}`,
+        method: 'GET',
+      });
+
+      return response.data;
+    },
+  });
+
+  const form = useForm<z.infer<typeof addressTypeSchema>>({
+    resolver: zodResolver(addressTypeSchema),
+    defaultValues: {
+      code: '',
+      name: '',
+    },
+  });
+
+  const editForm = useForm<z.infer<typeof addressTypeSchema>>({
+    resolver: zodResolver(addressTypeSchema),
+  });
+
+  const onSubmit = async (values: z.infer<typeof addressTypeSchema>) => {
+    try {
+      const payload = {
+        code: values.code,
+        locale: {
+          [currentLocaleCode]: {
+            name: values.name,
+          },
+        },
+      };
+
+      await request({
+        url: '/person-address-type',
+        method: 'POST',
+        data: payload,
+      });
+
+      toast.success(t('successCreate'));
+      setIsDialogOpen(false);
+      form.reset();
+      refetch();
+    } catch (error: any) {
+      toast.error(error?.message || t('errorCreate'));
+    }
+  };
+
+  const onEditSubmit = async (values: z.infer<typeof addressTypeSchema>) => {
+    if (!editingAddressType) return;
+
+    try {
+      const payload = {
+        code: values.code,
+        locale: {
+          [currentLocaleCode]: {
+            name: values.name,
+          },
+        },
+      };
+
+      await request({
+        url: `/person-address-type/${editingAddressType.address_type_id || editingAddressType.id}`,
+        method: 'PATCH',
+        data: payload,
+      });
+
+      toast.success(t('successUpdate'));
+      setIsEditDialogOpen(false);
+      setEditingAddressType(null);
+      editForm.reset();
+      refetch();
+    } catch (error: any) {
+      toast.error(error?.message || t('errorUpdate'));
+    }
+  };
+
+  const handleDelete = async () => {
+    if (deletingId === null) return;
+    try {
+      await request({
+        url: '/person-address-type',
+        method: 'DELETE',
+        data: { ids: [deletingId] },
+      });
+      toast.success(t('successDelete'));
+      setDeleteDialogOpen(false);
+      setDeletingId(null);
+      refetch();
+    } catch (error: any) {
+      toast.error(error?.message || t('errorDelete'));
+    }
+  };
+
+  const handleEdit = (addressType: AddressType) => {
+    (async () => {
+      setEditingAddressType(addressType);
+      try {
+        const { data } = await request<any>({
+          url: `/person-address-type/${addressType.address_type_id || addressType.id}?locale=${currentLocaleCode}`,
+          method: 'GET',
+        });
+        editForm.reset({
+          code: data.code || addressType.code,
+          name: data.name || addressType.name || '',
+        });
+      } catch {
+        editForm.reset({
+          code: addressType.code,
+          name: addressType.name || '',
+        });
+      }
+      setIsEditDialogOpen(true);
+    })();
+  };
+
+  return (
+    <div className="flex flex-col h-screen px-4">
+      <PageHeader
+        breadcrumbs={[
+          { label: t('breadcrumbContact'), href: '/contact' },
+          { label: t('breadcrumbTitle') },
+        ]}
+        title={t('pageTitle')}
+        description={t('pageDescription')}
+        actions={[
+          {
+            label: t('buttonNewType'),
+            onClick: () => setIsDialogOpen(true),
+            variant: 'default',
+            icon: <Plus />,
+          },
+        ]}
+      />
+
+      <div className="mb-4">
+        <SearchBar
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          onSearch={() => refetch()}
+          placeholder={t('searchPlaceholder')}
+        />
+      </div>
+
+      <div className="rounded-md border mb-4">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('tableSlug')}</TableHead>
+              <TableHead>{t('tableName')}</TableHead>
+              <TableHead>{t('tableCreatedAt')}</TableHead>
+              <TableHead className="w-[70px]"></TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center">
+                  {t('loading')}
+                </TableCell>
+              </TableRow>
+            ) : paginate.data.length === 0 ? (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center">
+                  {t('noResults')}
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginate.data.map((addressType) => (
+                <TableRow
+                  key={addressType.id}
+                  onDoubleClick={() => handleEdit(addressType)}
+                  className="cursor-pointer"
+                >
+                  <TableCell className="font-medium">
+                    {addressType.code}
+                  </TableCell>
+                  <TableCell>{addressType.name}</TableCell>
+                  <TableCell>
+                    {addressType.created_at
+                      ? formatDate(
+                          addressType.created_at,
+                          getSettingValue,
+                          currentLocaleCode
+                        )
+                      : null}
+                  </TableCell>
+                  <TableCell>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" className="size-8 p-0">
+                          <span className="sr-only">{t('menuOpen')}</span>
+                          <MoreHorizontal className="size-4" />
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuLabel>
+                          {t('menuActions')}
+                        </DropdownMenuLabel>
+                        <DropdownMenuSeparator />
+                        <DropdownMenuItem
+                          onClick={() => handleEdit(addressType)}
+                        >
+                          <Pencil className="mr-2 size-4" />
+                          {t('menuEdit')}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            setDeletingId(
+                              addressType.address_type_id || addressType.id
+                            );
+                            setDeleteDialogOpen(true);
+                          }}
+                          className="text-red-600"
+                        >
+                          <Trash2 className="mr-2 size-4" />
+                          {t('menuDelete')}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <PaginationFooter
+        currentPage={page}
+        pageSize={pageSize}
+        totalItems={paginate.total}
+        onPageChange={setPage}
+        onPageSizeChange={setPageSize}
+        pageSizeOptions={[10, 20, 30, 40, 50]}
+      />
+
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('dialogNewTitle')}</DialogTitle>
+            <DialogDescription>{t('dialogNewDescription')}</DialogDescription>
+          </DialogHeader>
+
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+              <FormField
+                control={form.control}
+                name="code"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('formSlugLabel')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('formSlugPlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('formNameLabel')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('formNamePlaceholderNew')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsDialogOpen(false)}
+                >
+                  {t('buttonCancel')}
+                </Button>
+                <Button type="submit">{t('buttonCreate')}</Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('dialogEditTitle')}</DialogTitle>
+            <DialogDescription>{t('dialogEditDescription')}</DialogDescription>
+          </DialogHeader>
+
+          <Form {...editForm}>
+            <form
+              onSubmit={editForm.handleSubmit(onEditSubmit)}
+              className="space-y-4"
+            >
+              <FormField
+                control={editForm.control}
+                name="code"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('formSlugLabel')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('formSlugPlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={editForm.control}
+                name="name"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('formNameLabel')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('formNamePlaceholderEdit')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="flex justify-end gap-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setIsEditDialogOpen(false)}
+                >
+                  {t('buttonCancel')}
+                </Button>
+                <Button type="submit">{t('buttonUpdate')}</Button>
+              </div>
+            </form>
+          </Form>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle>{t('dialogDeleteTitle')}</DialogTitle>
+            <DialogDescription>
+              {t('dialogDeleteDescription')}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="flex justify-end gap-2 mt-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setDeleteDialogOpen(false);
+                setDeletingId(null);
+              }}
+            >
+              {t('buttonCancel')}
+            </Button>
+            <Button type="button" variant="destructive" onClick={handleDelete}>
+              {t('buttonDelete')}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}