.

2024-08-28 12:19:33 +02:00 · 2024-08-28 12:19:33 +02:00 · 9011e99a31
commit 9011e99a31
parent 3bc8d10f56
7 changed files with 58 additions and 42 deletions
--- a/client/src/app/quotes/components/QuoteResume.tsx
+++ b/client/src/app/quotes/components/QuoteResume.tsx
@ -29,6 +29,9 @@ import {
  TabsContent,
  TabsList,
  TabsTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from "@/ui";
 import { useToast } from "@/ui/use-toast";
 import { t } from "i18next";
@ -39,8 +42,8 @@ import { DownloadQuoteDialog } from "./DownloadQuoteDialog";
 import { QuoteStatusEditor } from "./editors";

 type QuoteResumeProps = {
-  quoteId: string;
-  className: string;
+  quoteId?: string;
+  className?: string;
 };

 export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
@ -52,7 +55,7 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
  const { mutate: setStatusMutation } = useSetStatus(quoteId);
  const { download, ...downloadProps } = useDownloader();

-  const handleOnChangeStatus = (quoteId: string, newStatus: string) => {
+  const handleOnChangeStatus = (_: string, newStatus: string) => {
    setStatusMutation(
      { newStatus },

@ -104,6 +107,7 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
              {`${t("quotes.list.preview.quote")} #${data.reference}`}
            </CardTitle>
            <CardDescription className='flex items-center gap-1 mr-auto text-foreground'>
+              <QuoteStatusEditor quote={data} onChangeStatus={handleOnChangeStatus} />
              <Button
                size='sm'
                variant='outline'
@ -118,23 +122,38 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
                  {t("quotes.list.columns.actions.edit")}
                </span>
              </Button>
-              <QuoteStatusEditor quote={data} onChangeStatus={handleOnChangeStatus} />

-              <Button size='sm' variant='outline' className='h-8 gap-1' onClick={handleDownload}>
-                <DownloadIcon className='h-3.5 w-3.5' />
-                <span className='sr-only lg:not-sr-only lg:whitespace-nowrap'>
-                  {t("quotes.list.preview.download_quote")}
-                </span>
-              </Button>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button size='icon' variant='outline' className='w-8 h-8'>
-                    <MoreVertical className='h-3.5 w-3.5' />
-                    <span className='sr-only'>More</span>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    size='sm'
+                    variant='outline'
+                    className='h-8 gap-1'
+                    onClick={handleDownload}
+                  >
+                    <DownloadIcon className='h-3.5 w-3.5 ' />
+                    <span className='sr-only'>{t("quotes.list.preview.download_quote")}</span>
                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("quotes.list.preview.download_quote")}</TooltipContent>
+              </Tooltip>
+              <DropdownMenu>
+                <DropdownMenuTrigger>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button size='icon' variant='outline' className='w-8 h-8'>
+                        <MoreVertical className='h-3.5 w-3.5' />
+                        <span className='sr-only'>{t("common.more")}</span>
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>{t("common.more")}</TooltipContent>
+                  </Tooltip>
                </DropdownMenuTrigger>
                <DropdownMenuContent align='end'>
-                  <DropdownMenuItem>Edit</DropdownMenuItem>
+                  <DropdownMenuItem className='not-sr-only 2xl:sr-only'>
+                    <DownloadIcon className='h-3.5 w-3.5 mr-2' />
+                    <span>{t("quotes.list.preview.download_quote")}</span>
+                  </DropdownMenuItem>
                  <DropdownMenuItem>Export</DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem>Trash</DropdownMenuItem>
--- a/client/src/app/quotes/components/QuotesDataTable.tsx
+++ b/client/src/app/quotes/components/QuotesDataTable.tsx
@ -17,9 +17,6 @@ import {
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
  Tooltip,
  TooltipContent,
  TooltipTrigger,
@ -271,13 +268,8 @@ export const QuotesDataTable = ({

  return (
    <>
-      <ResizablePanelGroup direction='horizontal' className='flex items-stretch flex-1 gap-4'>
-        <ResizablePanel
-          id={tableId}
-          order={0}
-          defaultSize={preview ? 65 : 100}
-          className='flex items-stretch flex-1'
-        >
+      <div className='flex flex-col items-stretch flex-1 gap-4 xl:flex-row'>
+        <div id={tableId} className='flex items-stretch flex-1'>
          <DataTable
            table={table}
            paginationOptions={{ visible: true }}
@ -287,20 +279,15 @@ export const QuotesDataTable = ({
          >
            <DataTableToolbar table={table} />
          </DataTable>
-        </ResizablePanel>
-        {preview && <ResizableHandle withHandle />}
+        </div>
+
        {preview && (
-          <ResizablePanel
-            id={previewId}
-            order={1}
-            defaultSize={35}
-            className='flex items-stretch flex-1'
-          >
+          <div id={previewId} className='flex items-stretch'>
            <QuoteResume quoteId={activeRow?.original.id} />
            {/*<QuotePDFPreview quote={activeRow?.original} className='flex-1' />*/}
-          </ResizablePanel>
+          </div>
        )}
-      </ResizablePanelGroup>
+      </div>
      <DownloadQuoteDialog {...downloadProps} onFinishDownload={handleFinishDownload} />
    </>
  );
--- a/client/src/app/quotes/components/editors/QuoteStatusEditor.tsx
+++ b/client/src/app/quotes/components/editors/QuoteStatusEditor.tsx
@ -59,7 +59,9 @@ export const QuoteStatusEditor = ({
      <DialogTrigger asChild>
        <Button size='sm' variant='outline' className='h-8 gap-1'>
          <RefreshCwIcon className='h-3.5 w-3.5' />
-          <span className='sr-only md:not-sr-only md:whitespace-nowrap'>Cambiar estado</span>
+          <span className='sr-only md:not-sr-only md:whitespace-nowrap'>
+            {t("quotes.quote_status_editor.trigger_button")}
+          </span>
        </Button>
      </DialogTrigger>
      <DialogContent>
--- a/client/src/app/quotes/hooks/useQuotes.tsx
+++ b/client/src/app/quotes/hooks/useQuotes.tsx
@ -151,7 +151,7 @@ export const useQuotes = () => {
      });
    },

-    useSetStatus: (id: string) => {
+    useSetStatus: (id?: string) => {
      const queryClient = useQueryClient();

      return useMutation<void, TDataSourceError, ISetStatusQuote_Request_DTO>({
--- a/client/src/components/DataTable/DataTableToolbar/DataTableToolbar.tsx
+++ b/client/src/components/DataTable/DataTableToolbar/DataTableToolbar.tsx
@ -38,13 +38,17 @@ export function DataTableToolbar<TData>({
          placeholder={t("common.filter_placeholder")}
          value={globalFilter}
          onChange={(event) => setGlobalFilter(String(event.target.value))}
-          className={cn("h-8", fullWidthFilter ? "w-full" : "w-3/12 lg:w-6/12")}
+          className={cn("h-8 w-full transition-all")}
        />

        {isFiltered && (
-          <Button variant='ghost' onClick={() => resetGlobalFilter()} className='h-8 px-2 lg:px-3'>
+          <Button
+            variant='outline'
+            onClick={() => resetGlobalFilter()}
+            className='h-8 px-2 transition-all lg:px-3'
+          >
+            <XIcon className='w-4 h-4 mr-2' />
            {t("common.reset_filter")}
-            <XIcon className='w-4 h-4 ml-2' />
          </Button>
        )}
      </div>
--- a/client/src/locales/en.json
+++ b/client/src/locales/en.json
@ -14,6 +14,7 @@
      "upload": "Upload",
      "continue": "Continue",
      "close": "Close",
+      "more": "More",
      "add": "Add",
      "sort_asc": "Asc",
      "sort_asc_description": "In ascending order. Click to sort descending order.",
@ -29,7 +30,7 @@
      "go_to_next_page": "Go to next page",
      "go_to_last_page": "Go to last page",
      "filter_placeholder": "Type here to filter...",
-      "reset_filter": "Remove the results filter",
+      "reset_filter": "Reset filter",
      "error": "Error",
      "actions": "Actions",
      "open_menu": "Open menu",
@ -198,6 +199,7 @@
        "toast_article_added": "Catalog item added:"
      },
      "quote_status_editor": {
+        "remove the res": "Change quote status",
        "title": "Change quote status",
        "status": {
          "draft": {
--- a/client/src/locales/es.json
+++ b/client/src/locales/es.json
@ -14,6 +14,7 @@
      "upload": "Cargar",
      "continue": "Continuar",
      "close": "Cerrar",
+      "more": "More",
      "add": "Añadir",
      "sort_asc": "Asc",
      "sort_asc_description": "En order ascendente. Click para ordenar descendentemente.",
@ -194,6 +195,7 @@
        "toast_article_added": "Artículo del catálogo añadido:"
      },
      "quote_status_editor": {
+        "trigger_button": "Cambiar el estado",
        "title": "Cambiar el estado de la cotización",
        "status": {
          "draft": {