Formatting

2026-08-03 07:48:34 +02:00 · 2026-01-12 12:22:52 +02:00
parent 254de35f0e
commit 884ae64fc5
5 changed files with 118 additions and 125 deletions
@@ -24,7 +24,7 @@ import {
  DoubleArrowRightIcon,
 } from '@radix-ui/react-icons'
 import { Button } from '@/components/ui/button'
-import { Input } from "@/components/ui/input";
+import { Input } from "@/components/ui/input"
 import {
  Select,
  SelectContent,
@@ -34,15 +34,15 @@ import {
 } from '@/components/ui/select'
 import { useTranslation } from 'react-i18next'
 import { showNumbers } from '@/lib/utils'
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'

 interface PaginationProps {
  totalItems: number
-  pageIndex: number,
-  pageSize: number,
-  hasNextPage: () => boolean,
-  setPageIndex: (pageIndex: number) => void,
-  setPageSize: (pageSize: number) => void,
+  pageIndex: number
+  pageSize: number
+  hasNextPage: () => boolean
+  setPageIndex: (pageIndex: number) => void
+  setPageSize: (pageSize: number) => void
 }

 export function EnvelopeListPagination({
@@ -54,7 +54,7 @@ export function EnvelopeListPagination({
  setPageSize,
 }: PaginationProps) {
  const { t } = useTranslation()
-  const [pageInput, setPageInput] = useState(pageIndex + 1);
+  const [pageInput, setPageInput] = useState(pageIndex + 1)
  const pageCount = Math.ceil(totalItems / pageSize)

  useEffect(() => {
@@ -76,7 +76,7 @@ export function EnvelopeListPagination({
    setPageIndex(newPageIndex)
  }

-  const currentPage = pageIndex + 1;
+  const currentPage = pageIndex + 1
  const pageNumbers = showNumbers(currentPage, pageCount)

  return (
@@ -106,9 +106,9 @@ export function EnvelopeListPagination({
        <div className='flex items-center justify-center text-sm font-medium'>
          {t("table.page")}
          <Input type="number" value={pageInput} onBlur={() => {
-            if (Number.isNaN(pageInput)) return;
-            if (pageInput > 0) setPageIndex(pageInput - 1);
-            else setPageIndex(0);
+            if (Number.isNaN(pageInput)) return
+            if (pageInput > 0) setPageIndex(pageInput - 1)
+            else setPageIndex(0)
          }}
          onChange={(e) => setPageInput(Number(e.target.value))}
          className='mx-2 w-20'
@@ -170,4 +170,4 @@ export function EnvelopeListPagination({
      </div>
    </div>
  )
-}
+}
@@ -17,13 +17,13 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.

 import { useTranslation } from 'react-i18next'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { SquarePen } from 'lucide-react'
 import { Button } from '@/components/button'
 import { Checkbox } from '@/components/ui/checkbox'
 import { useState } from 'react'
-import { useSearchContext } from './context';
-import { Label } from '@/components/ui/label';
+import { useSearchContext } from './context'
+import { Label } from '@/components/ui/label'

 interface Props {
  open: boolean
@@ -71,19 +71,19 @@ export function ColumnsDialog({ open, onOpenChange }: Props) {
  const columns = defaultColumns(t)

  const [selected, setSelected] = useState(() => {
-    const _columns = localStorage.getItem("searchTableColumns") 
+    const _columns = localStorage.getItem("searchTableColumns")
      ? JSON.parse(localStorage.getItem("searchTableColumns") as string) as Record<string, boolean>
-      : undefined;
+      : undefined

-      if (_columns) return new Map(Object.entries(_columns).map(([key, value]) => [key, value]));
+      if (_columns) return new Map(Object.entries(_columns).map(([key, value]) => [key, value]))
      return new Map(columns.map((col) => [col.value, true]))
  })

  const handleSave = () => {
-    const _selected = Object.fromEntries(selected);
+    const _selected = Object.fromEntries(selected)
    setColumnVisibility(_selected)
-    localStorage.setItem("searchTableColumns", JSON.stringify(_selected));
-    onOpenChange(false);
+    localStorage.setItem("searchTableColumns", JSON.stringify(_selected))
+    onOpenChange(false)
  }

  const toggleSelected = (column: string) => {
@@ -96,49 +96,48 @@ export function ColumnsDialog({ open, onOpenChange }: Props) {
        value.set(column, true)
      }

-      return value;
-    });
+      return value
+    })
  }

-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-md">
-                <DialogHeader>
-                    <DialogTitle className="flex items-center gap-2">
-                        <SquarePen className="h-5 w-5" />
-                        {t('common.columns')}
-                    </DialogTitle>
-                </DialogHeader>
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <SquarePen className="h-5 w-5" />
+              {t('common.columns')}
+          </DialogTitle>
+        </DialogHeader>

-                <div className="space-y-5 py-4">
-                    <div className="flex flex-wrap flex-col gap-2">
-                        {columns.map(col => (
-                            <div key={col.value} className="flex flex-row gap-2 items-center">
-                                  <Checkbox
-                                    id={col.value}
-                                    checked={selected.get(col.value)}
-                                    onCheckedChange={() => toggleSelected(col.value)}
-                                  />
-                                  <Label htmlFor={col.value} className="cursor-pointer text-sm font-normal">
-                                    {col.label}
-                                  </Label>
-                            </div>
-                        ))}
-                    </div>
-                </div>
+        <div className="space-y-5 py-4">
+          <div className="flex flex-wrap flex-col gap-2">
+            {columns.map(col => (
+              <div key={col.value} className="flex flex-row gap-2 items-center">
+                <Checkbox
+                  id={col.value}
+                  checked={selected.get(col.value)}
+                  onCheckedChange={() => toggleSelected(col.value)}
+                />
+                <Label htmlFor={col.value} className="cursor-pointer text-sm font-normal">
+                  {col.label}
+                </Label>
+              </div>
+            ))}
+          </div>
+        </div>

-                <div className="flex justify-between items-center">
-                    &nbsp;
-                    <div className="flex gap-2">
-                        <Button variant="outline" onClick={() => onOpenChange(false)}>
-                            {t('search.addTags.cancel')}
-                        </Button>
-                        <Button onClick={handleSave}>
-                            {t('search.addTags.save')}
-                        </Button>
-                    </div>
-                </div>
-            </DialogContent>
-        </Dialog>
-    );
+        <div className="flex justify-end items-center">
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {t('search.addTags.cancel')}
+            </Button>
+            <Button onClick={handleSave}>
+              {t('search.addTags.save')}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
 }
@@ -32,7 +32,7 @@ import LongText from "@/components/long-text"
 import { DataTableColumnHeader } from "./table/data-table-column-header"
 import { SearchTable } from "./table/table"
 import { DataTableRowActions } from "./table/data-table-row-actions"
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'

 interface MailListProps {
    items: EmailEnvelope[]
@@ -51,7 +51,7 @@ export function MailListTable({
 }: MailListProps) {
    const { t, i18n } = useTranslation()

-    const locale = dateFnsLocaleMap[i18n.language.toLowerCase()] ?? enUS;
+    const locale = dateFnsLocaleMap[i18n.language.toLowerCase()] ?? enUS
    const { selected, setSelected } = useSearchContext()

    const columns: ColumnDef<EmailEnvelope>[] = [
@@ -141,8 +141,8 @@ export function MailListTable({
          <DataTableColumnHeader column={column} title={t('search.date')} />
        ),
        cell: ({ row }) => {
-          const date = new Date(row.original.date);
-          const title = format(date, 'yyyy-MM-dd HH:mm:ss');
+          const date = new Date(row.original.date)
+          const title = format(date, 'yyyy-MM-dd HH:mm:ss')
          return (
            <Tooltip>
              <TooltipTrigger asChild>
@@ -167,46 +167,43 @@ export function MailListTable({
    ]

    const handleToggleAll = () => {
-        const total = Array.from(selected.values())
-            .reduce((sum, set) => sum + set.size, 0);
+      const total = Array.from(selected.values()).reduce((sum, set) => sum + set.size, 0)

-        if (total === items.length && items.length > 0) {
-            setSelected(new Map());
-        } else {
-            setSelected(prev => {
-                const next = new Map(prev);
-                for (const item of items) {
-                    const set = new Set(next.get(item.account_id) || []);
-                    set.add(item.id);
-                    next.set(item.account_id, set);
-                }
-                return next;
-            });
-        }
+      if (total === items.length && items.length > 0) {
+        setSelected(new Map())
+      } else {
+        setSelected(prev => {
+          const next = new Map(prev)
+          for (const item of items) {
+            const set = new Set(next.get(item.account_id) || [])
+            set.add(item.id)
+            next.set(item.account_id, set)
+          }
+          return next
+        })
+      }
    }

    const toggleSelected = (accountId: number, mailId: number) => {
-        setSelected(prev => {
-            const next = new Map(prev);
-            const set = new Set(next.get(accountId) || []);
+      setSelected(prev => {
+        const next = new Map(prev)
+        const set = new Set(next.get(accountId) || [])

-            if (set.has(mailId)) {
-                set.delete(mailId);
-                if (set.size === 0) next.delete(accountId);
-                else next.set(accountId, set);
-            } else {
-                set.add(mailId);
-                next.set(accountId, set);
-            }
-
-            return next;
-        });
+        if (set.has(mailId)) {
+          set.delete(mailId)
+          if (set.size === 0) next.delete(accountId)
+          else next.set(accountId, set)
+        } else {
+          set.add(mailId)
+          next.set(accountId, set)
+        }
+        return next
+      })
    }

-    const totalSelected = Array.from(selected.values())
-        .reduce((sum, set) => sum + set.size, 0);
+    const totalSelected = Array.from(selected.values()).reduce((sum, set) => sum + set.size, 0)

-    const hasSelected = (accountId: number, mailId: number) => selected.get(accountId)?.has(mailId) ?? false;
+    const hasSelected = (accountId: number, mailId: number) => selected.get(accountId)?.has(mailId) ?? false

    if (isLoading) {
        return (
@@ -42,24 +42,23 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {

  const toggleToDelete = (accountId: number, mailId: number) => {
    setToDelete(prev => {
-      const next = new Map(prev);
-      const set = new Set(next.get(accountId) || []);
+      const next = new Map(prev)
+      const set = new Set(next.get(accountId) || [])

      if (set.has(mailId)) {
-        set.delete(mailId);
-        if (set.size === 0) next.delete(accountId);
-        else next.set(accountId, set);
+        set.delete(mailId)
+        if (set.size === 0) next.delete(accountId)
+        else next.set(accountId, set)
      } else {
-        set.add(mailId);
-        next.set(accountId, set);
+        set.add(mailId)
+        next.set(accountId, set)
      }
-
-      return next;
-    });
-  };
+      return next
+    })
+  }

  const handleDelete = (envelope: EmailEnvelope) => {
-    setToDelete(new Map());
+    setToDelete(new Map())
    toggleToDelete(envelope.account_id, envelope.id)
    setOpen("delete")
  }
@@ -79,9 +78,9 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
        <DropdownMenuContent align='end' className='w-[160px]'>
          <DropdownMenuItem
            onClick={(e) => {
-              e.stopPropagation();  
-              setCurrentEnvelope(row.original);
-              setOpen("edit-tags");
+              e.stopPropagation()
+              setCurrentEnvelope(row.original)
+              setOpen("edit-tags")
            }}
          >
            {t('search.editTag')}
@@ -92,9 +91,9 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onClick={(e) => {
-              e.stopPropagation();
-              setCurrentEnvelope(row.original);
-              setOpen("restore");
+              e.stopPropagation()
+              setCurrentEnvelope(row.original)
+              setOpen("restore")
            }}
          >
            {t('restore_message.restore_to_imap', 'Restore Mail')}
@@ -105,10 +104,8 @@ export function DataTableRowActions({ row }: DataTableRowActionsProps) {
          <DropdownMenuSeparator />
          <DropdownMenuItem
            onClick={(e) => {
-              e.stopPropagation();
-              handleDelete(row.original);
-              //setCurrentRow(row.original)
-              //setOpen('delete')
+              e.stopPropagation()
+              handleDelete(row.original)
            }}
            className='!text-red-500'
          >
@@ -54,7 +54,7 @@ declare module '@tanstack/react-table' {
 interface DataTableProps {
  columns: ColumnDef<EmailEnvelope>[]
  data: EmailEnvelope[]
-  onRowClick: (e: ReactMouseEvent<HTMLTableRowElement, MouseEvent>, row: Row<EmailEnvelope>) => void;
+  onRowClick: (e: ReactMouseEvent<HTMLTableRowElement, MouseEvent>, row: Row<EmailEnvelope>) => void
  setSortBy: (sortBy: "DATE" | "SIZE") => void
  setSortOrder: (value: "desc" | "asc") => void
 }
@@ -66,9 +66,9 @@ export function SearchTable({ columns, data, onRowClick, setSortBy, setSortOrder
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])

  useEffect(() => {
-    const [value] = sorting;
-    setSortBy(value.id.toUpperCase() as "DATE" | "SIZE");
-    setSortOrder(value.desc ? "desc" : "asc");
+    const [value] = sorting
+    setSortBy(value.id.toUpperCase() as "DATE" | "SIZE")
+    setSortOrder(value.desc ? "desc" : "asc")
  }, [sorting])

  const table = useReactTable({