.

2024-08-20 13:44:04 +02:00 · 2024-08-20 13:44:04 +02:00 · fe816b73f8
commit fe816b73f8
parent 4853c4a0bb
5 changed files with 128 additions and 53 deletions
--- a/client/src/app/quotes/components/QuotePDFPreview.tsx
+++ b/client/src/app/quotes/components/QuotePDFPreview.tsx
@ -57,12 +57,8 @@ export const QuotePDFPreview = ({
    return (
      <Card className={cn("overflow-hidden flex flex-col", className)}>
        <CardHeader>
-          <CardTitle>
-            <Skeleton className='w-full h-8' />
-          </CardTitle>
-          <CardDescription>
-            <Skeleton className='w-full h-8' />
-          </CardDescription>
+          <Skeleton className='w-full h-8' />
+          <Skeleton className='w-full h-8' />
        </CardHeader>
        <CardContent className='py-4'>
          <Skeleton className='w-full aspect-[3/4] relative bg-white shadow flex-1' />
@ -85,7 +81,7 @@ export const QuotePDFPreview = ({
              onClick={(e) => {
                e.preventDefault();
                printJS({
-                  printable: file,
+                  printable: file?.data,
                  type: "pdf",
                  showModal: false,
                  modalMessage: "Cargando...",
--- a/client/src/app/quotes/components/QuotesDataTable.tsx
+++ b/client/src/app/quotes/components/QuotesDataTable.tsx
@ -1,17 +1,40 @@
 import { DataTable, DataTableSkeleton, ErrorOverlay, SimpleEmptyState } from "@/components";
 import { DataTableToolbar } from "@/components/DataTable/DataTableToolbar";
 import { useDataTable, useDataTableContext } from "@/lib/hooks";
-import { Badge, Button, Card, CardContent } from "@/ui";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/ui";
 import { IListQuotes_Response_DTO, MoneyValue, UTCDateValue } from "@shared/contexts";
 import { ColumnDef, Row } from "@tanstack/react-table";
 import { t } from "i18next";
+import { FilePenLineIcon, MoreVerticalIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { Trans } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useQuotes } from "../hooks";
 import { QuotePDFPreview } from "./QuotePDFPreview";

-export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
+export const QuotesDataTable = ({
+  status = "all",
+  preview = false,
+}: {
+  status?: string;
+  preview?: boolean;
+}) => {
  const navigate = useNavigate();
  const { pagination, globalFilter, isFiltered } = useDataTableContext();
  const [focusedQuote, setFocusedQuote] = useState<IListQuotes_Response_DTO | undefined>(undefined);
@ -34,17 +57,20 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
        header: () => <>{t("quotes.list.columns.date")}</>,
        cell: ({ row: { original } }) => {
          const quoteDate = UTCDateValue.create(original.date);
-          return quoteDate.isSuccess ? quoteDate.object.toLocaleDateString("es-ES") : "-";
+          return (
+            <div className='text-right text-ellipsis'>
+              {quoteDate.isSuccess ? quoteDate.object.toLocaleDateString("es-ES") : "-"}
+            </div>
+          );
        },
        enableResizing: false,
-        size: 10,
      },
      {
        id: "customer_information" as const,
        accessorKey: "customer_information",
        header: () => <>{t("quotes.list.columns.customer_information")}</>,
        cell: ({ row: { original } }) => (
-          <div className='text-ellipsis'>
+          <div className='text-left text-ellipsis'>
            {original.customer_information.split("\n").map((item, index) => {
              return (
                <span
@ -61,14 +87,16 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
          </div>
        ),
        enableResizing: false,
-        size: 10,
+        size: 640,
      },
      {
        id: "reference" as const,
        accessorKey: "reference",
        header: () => <>{t("quotes.list.columns.reference")}</>,
+        cell: ({ row: { original } }) => (
+          <div className='text-left text-ellipsis'>{original.reference}</div>
+        ),
        enableResizing: false,
-        size: 10,
      },
      {
        id: "status" as const,
@ -77,7 +105,6 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        cell: ({ renderValue }: { renderValue: () => any }) => <Badge>{renderValue()}</Badge>,
        enableResizing: false,
-        size: 10,
      },
      {
        id: "total_price" as const,
@ -90,25 +117,53 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
          );
        },
        enableResizing: false,
-        size: 20,
      },
      {
-        id: "edit-acion",
+        id: "row-actions",
        header: () => null,
        cell: ({ row }: { row: Row<IListQuotes_Response_DTO> }) => (
-          <Button
-            variant='secondary'
-            onClick={(e) => {
-              e.preventDefault();
-              navigate(`/quotes/edit/${row.original.id}`, { relative: "path" });
-            }}
-          >
-            <Trans i18nKey={"common.edit"} />
-            <span className='sr-only'>, {row.original.id}</span>
-          </Button>
+          <div className='flex items-center gap-1 ml-auto'>
+            <Tooltip>
+              <TooltipTrigger>
+                <Button
+                  size='sm'
+                  variant='outline'
+                  className='h-8 gap-1'
+                  onClick={(e) => {
+                    e.preventDefault();
+                    navigate(`/quotes/edit/${row.original.id}`, { relative: "path" });
+                  }}
+                >
+                  <FilePenLineIcon className='h-3.5 w-3.5' />
+                  <span className='lg:sr-only xl:not-sr-only xl:whitespace-nowrap'>
+                    <Trans i18nKey={"quotes.list.columns.actions.edit"} />
+                  </span>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>
+                  <Trans i18nKey={"quotes.list.columns.actions.edit"} />
+                </p>
+              </TooltipContent>
+            </Tooltip>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button size='icon' variant='outline' className='w-8 h-8'>
+                  <MoreVerticalIcon className='h-3.5 w-3.5' />
+                  <span className='sr-only'>More</span>
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align='end'>
+                <DropdownMenuItem>Edit</DropdownMenuItem>
+                <DropdownMenuItem>Export</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem>Trash</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
        ),
        enableResizing: false,
-        size: 20,
      },
    ],
    // eslint-disable-next-line react-hooks/exhaustive-deps
@ -159,17 +214,23 @@ export const QuotesDataTable = ({ status = "all" }: { status?: string }) => {
  }

  return (
-    <div className='grid items-stretch flex-1 gap-4 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3'>
-      <DataTable
-        table={table}
-        paginationOptions={{ visible: true }}
-        className='grid items-start gap-4 auto-rows-max md:gap-8 lg:col-span-2'
-        onRowClick={handleOnRowClick}
-      >
-        <DataTableToolbar table={table} />
-      </DataTable>
-
-      <QuotePDFPreview quote={focusedQuote} className='flex-1 ' />
-    </div>
+    <ResizablePanelGroup direction='horizontal' className='flex items-stretch flex-1 gap-4'>
+      <ResizablePanel defaultSize={75} className='flex items-stretch flex-1'>
+        <DataTable
+          table={table}
+          paginationOptions={{ visible: true }}
+          className='grid items-start flex-1 gap-4 auto-rows-max md:gap-8 lg:col-span-2'
+          onRowClick={handleOnRowClick}
+        >
+          <DataTableToolbar table={table} />
+        </DataTable>
+      </ResizablePanel>
+      {preview && <ResizableHandle withHandle />}
+      {preview && (
+        <ResizablePanel defaultSize={25} className='flex items-stretch flex-1'>
+          <QuotePDFPreview quote={focusedQuote} className='flex-1' />
+        </ResizablePanel>
+      )}
+    </ResizablePanelGroup>
  );
 };
--- a/client/src/app/quotes/list.tsx
+++ b/client/src/app/quotes/list.tsx
@ -2,12 +2,15 @@ import { DataTableProvider } from "@/lib/hooks";
 import { Trans } from "react-i18next";
 import { QuotesDataTable } from "./components";

-import { Button, Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui";
+import { Button, Tabs, TabsContent, TabsList, TabsTrigger, Toggle } from "@/ui";
+import { useToggle } from "@wojtekmaj/react-hooks";
 import { t } from "i18next";
+import { InfoIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";

 export const QuotesList = () => {
  const navigate = useNavigate();
+  const [enabledPreview, toggleEnabledPreview] = useToggle(false);

  return (
    <DataTableProvider>
@ -27,33 +30,45 @@ export const QuotesList = () => {

      <Tabs defaultValue='all'>
        <div className='flex items-center'>
+          <span className='mr-4 font-medium'>Status</span>
          <TabsList>
            <TabsTrigger value='all'>
              <Trans i18nKey='quotes.list.tabs.all' />
            </TabsTrigger>
-            <TabsTrigger value='emitted'>
-              <Trans i18nKey='quotes.list.tabs.emitted' />
-            </TabsTrigger>
            <TabsTrigger value='draft'>
              <Trans i18nKey='quotes.list.tabs.draft' />
            </TabsTrigger>
+            <TabsTrigger value='emitted'>
+              <Trans i18nKey='quotes.list.tabs.emitted' />
+            </TabsTrigger>
            <TabsTrigger value='archived' className='hidden sm:flex'>
              <Trans i18nKey='quotes.list.tabs.archived' />
            </TabsTrigger>
          </TabsList>
-          <div className='flex items-center gap-2 ml-auto'></div>
+          <div className='flex items-center gap-2 ml-auto'>
+            <Toggle
+              aria-label='Show quote preview'
+              variant={"outline"}
+              defaultPressed={false}
+              pressed={enabledPreview}
+              onPressedChange={toggleEnabledPreview}
+            >
+              <InfoIcon className='w-4 h-4 mr-2' />
+              Quote preview
+            </Toggle>
+          </div>
        </div>
        <TabsContent value='all'>
-          <QuotesDataTable status='all' />
+          <QuotesDataTable status='all' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='draft'>
-          <QuotesDataTable status='draft' />
+          <QuotesDataTable status='draft' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='archived'>
-          <QuotesDataTable status='archived' />
+          <QuotesDataTable status='archived' preview={enabledPreview} />
        </TabsContent>
        <TabsContent value='emitted'>
-          <QuotesDataTable status='emitted' />
+          <QuotesDataTable status='emitted' preview={enabledPreview} />
        </TabsContent>
      </Tabs>
    </DataTableProvider>
--- a/client/src/lib/hooks/useDataTable/useDataTable.tsx
+++ b/client/src/lib/hooks/useDataTable/useDataTable.tsx
@ -192,9 +192,9 @@ export function useDataTable<TData, TValue>({
    debugColumns: false,

    defaultColumn: {
-      size: 5, //starting column size
-      minSize: 0, //enforced during column resizing
-      maxSize: 96, //enforced during column resizing
+      size: 96, //starting column size
+      minSize: 96, //enforced during column resizing
+      maxSize: 500, //enforced during column resizing
    },
  });

--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@ -113,7 +113,10 @@
          "reference": "Reference",
          "status": "Status",
          "customer_information": "Customer",
-          "total_price": "Imp. total"
+          "total_price": "Imp. total",
+          "actions": {
+            "edit": "Edit quote"
+          }
        },
        "preview": {
          "quote": "Quote",