Fixed: fixed bug scrcpy and shell is disconnect when switch page

client-electron/src/pages/recipes/components/recipe-table-components/columns.tsx

@@ -0,0 +1,119 @@
+import { type ColumnDef } from '@tanstack/react-table'
+import { type RecipeDashboard } from '@/models/recipe/schema'
+import { Checkbox } from '@/components/ui/checkbox'
+import DataTableColumnHeader from './data-table-column-header'
+// import { Badge } from '@/components/ui/badge'
+import DataTableRowActions from './data-table-row-actions'
+import { CheckCircledIcon, CrossCircledIcon } from '@radix-ui/react-icons'
+import * as dateFormat from 'date-fns'
+import { DateRange } from 'react-day-picker'
+
+export const columns: ColumnDef<RecipeDashboard>[] = [
+  {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+        onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+        className="translate-y-[2px]"
+      />
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={value => row.toggleSelected(!!value)}
+        aria-label="Select row"
+        className="translate-y-[2px]"
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false
+  },
+  {
+    accessorKey: 'productCode',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="ProductCode" />,
+    cell: ({ row }) => <div>{row.getValue('productCode')}</div>,
+    enableHiding: false,
+    enableGlobalFilter: true,
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    }
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
+    cell: ({ row }) => {
+      //const label = { label: 'Test Label' } // labels.find(label => label.value === row.getValue('label'))
+
+      return (
+        <div className="flex space-x-2">
+          {/* {label && <Badge variant="outline">{label.label}</Badge>} */}
+          <span className="max-w-[500px] truncate font-medium">{row.getValue('name')}</span>
+        </div>
+      )
+    },
+    enableGlobalFilter: true,
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    }
+  },
+  {
+    accessorKey: 'nameEng',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Name ENG" />,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center">
+          <span>{row.getValue('nameEng')}</span>
+        </div>
+      )
+    },
+    enableGlobalFilter: true,
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    }
+  },
+  {
+    accessorKey: 'inUse',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Active" />,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center">
+          <span>
+            {row.getValue('inUse') ? (
+              <CheckCircledIcon className="h-6 w-6 text-green-700" />
+            ) : (
+              <CrossCircledIcon className="h-6 w-6 text-red-700" />
+            )}
+          </span>
+        </div>
+      )
+    },
+    filterFn: (row, id, value) => {
+      return value.includes(row.getValue(id))
+    }
+  },
+  {
+    accessorKey: 'lastUpdated',
+    header: ({ column }) => <DataTableColumnHeader column={column} title="Last Updated" isDate />,
+    cell: ({ row }) => {
+      return (
+        <div className="flex items-center">
+          <span>{dateFormat.format(row.getValue('lastUpdated'), 'dd-MM-yyyy HH:mm:ss')}</span>
+        </div>
+      )
+    },
+    filterFn: (_row, _id, _value) => {
+      const value = _value as DateRange
+      const rowValue = _row.getValue(_id) as Date
+      return (
+        dateFormat.isAfter(rowValue, value.from || dateFormat.add(rowValue, { days: 1 })) &&
+        dateFormat.isBefore(rowValue, value.to || dateFormat.sub(rowValue, { days: 1 }))
+      )
+    }
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => <DataTableRowActions row={row} />
+  }
+]