-
-
+ = memo(({ adb }) => {
- const logcatRef = useRef(null)
const scrcpyScreenRef = useRef(null)
- const [process, setProcess] = useState()
- const [client, setClient] = useState()
- const [decoder, setDecoder] = useState()
-
- console.log('rendering scrcpy tab')
+ const { scrcpyClient, decoder, connectScrcpy, onHomeClick, onBackClick, disconnectScrcpy } = useScrcpy(
+ useShallow(state => ({
+ scrcpyClient: state.scrcpyClient,
+ decoder: state.decoder,
+ connectScrcpy: state.connectScrcpy,
+ onHomeClick: state.onHomeClick,
+ onBackClick: state.onBackClick,
+ disconnectScrcpy: state.disconnectScrcpy
+ }))
+ )
useEffect(() => {
- const startTerminal = async () => {
- if (logcatRef.current && adb) {
- const terminal: Terminal = new Terminal()
- const fitAddon = new FitAddon()
- terminal.loadAddon(fitAddon)
-
- const process: AdbSubprocessProtocol = await adb.subprocess.shell('logcat')
- process.stdout.pipeTo(
- new WritableStream({
- write(chunk) {
- terminal.write(chunk)
- }
- })
- )
-
- terminal.options.disableStdin = true
- terminal.options.theme = {
- background: '#1e1e1e',
- foreground: '#d4d4d4'
- }
-
- terminal.open(logcatRef.current)
- fitAddon.fit()
- setProcess(process)
- }
+ if (decoder) {
+ scrcpyScreenRef.current?.appendChild(decoder.renderer)
+ decoder.renderer.style.width = '100%'
+ decoder.renderer.style.height = '100%'
+ } else {
+ if (scrcpyScreenRef.current) scrcpyScreenRef.current.innerHTML = ''
}
-
- startTerminal()
-
- return () => {
- console.log('cleaning up logcat')
-
- for (const child of logcatRef.current?.children || []) {
- logcatRef.current?.removeChild(child)
- }
-
- process?.stderr.cancel()
- process?.stdout.cancel()
- process?.kill()
- }
- }, [adb])
-
- const connectScrcpy = useCallback(async () => {
- if (!adb) {
- toast({
- title: 'No ADB connection',
- description: 'Please connect to a device first',
- duration: 3000,
- variant: 'destructive'
- })
- return
- }
-
- // clean up the scrcpy screen
- if (scrcpyScreenRef.current && scrcpyScreenRef.current.children.length > 0) {
- while (scrcpyScreenRef.current.firstChild) {
- scrcpyScreenRef.current.removeChild(scrcpyScreenRef.current.firstChild)
- }
- }
-
- // fetch the scrcpy server binary
- // TODO: should load from real server instead of local file. Fix this later
- const server: ArrayBuffer = await fetch(new URL('../../../scrcpy/scrcpy_server_v1.25', import.meta.url)).then(res =>
- res.arrayBuffer()
- )
-
- // push the server binary to the device
- const sync = await adb.sync()
- try {
- await sync.write({
- filename: '/data/local/tmp/scrcpy-server.jar',
- file: new ReadableStream({
- start(controller) {
- controller.enqueue(new Consumable(new Uint8Array(server)))
- controller.close()
- }
- })
- })
- } finally {
- await sync.dispose()
- }
-
- // start the scrcpy server
- const res = await adb.subprocess.spawn(
- 'CLASSPATH=/data/local/tmp/scrcpy-server.jar app_process / com.genymobile.scrcpy.Server 1.25'
- )
-
- // pipe the server output to the console
- res.stdout.pipeThrough(new DecodeUtf8Stream()).pipeTo(
- new WritableStream({
- write(chunk) {
- console.log(chunk)
- }
- })
- )
-
- const scrcpyOption = new ScrcpyOptions1_25({
- maxFps: 60,
- bitRate: 4000000,
- stayAwake: true,
- control: true,
- logLevel: ScrcpyLogLevel1_18.Debug
- })
-
- // start the scrcpy client
- const _client = await AdbScrcpyClient.start(
- adb,
- '/data/local/tmp/scrcpy-server.jar',
- '1.25',
- new AdbScrcpyOptions1_22(scrcpyOption)
- )
-
- // get the video stream
- const videoStream = await _client?.videoStream
-
- // create a decoder
- const _decoder = new WebCodecsDecoder(ScrcpyVideoCodecId.H264)
- scrcpyScreenRef.current?.appendChild(_decoder.renderer)
- _decoder.renderer.style.width = '100%'
- _decoder.renderer.style.height = '100%'
-
- // pipe the video stream to the decoder
- videoStream?.stream.pipeTo(_decoder.writable)
-
- // if client has controlMessageWriter, Inject mouse and button events
- if (_client.controlMessageWriter) {
- _decoder.renderer.addEventListener('mousedown', e => {
- // client width and height 450 x 800
- const react = _decoder.renderer.getBoundingClientRect()
-
- // normalize to _decoder.renderer.width and height 1080 x 1920
- const x = ((e.clientX - react.left) * _decoder.renderer.width) / react.width
- const y = ((e.clientY - react.top) * _decoder.renderer.height) / react.height
-
- //console.log('mouse down at ' + x + ' ' + y)
- _client.controlMessageWriter?.injectTouch({
- action: AndroidMotionEventAction.Down,
- pointerId: ScrcpyPointerId.Mouse | ScrcpyPointerId.Finger,
- pointerX: x,
- pointerY: y,
- pressure: 1,
- screenWidth: _decoder.renderer.width,
- screenHeight: _decoder.renderer.height,
- buttons: 0,
- actionButton: 0
- })
- })
-
- _decoder.renderer.addEventListener('mouseup', e => {
- // client width and height 450 x 800
- const react = _decoder.renderer.getBoundingClientRect()
-
- // normalize to _decoder.renderer.width and height 1080 x 1920
- const x = ((e.clientX - react.left) * _decoder.renderer.width) / react.width
- const y = ((e.clientY - react.top) * _decoder.renderer.height) / react.height
-
- //console.log('mouse up at ' + x + ' ' + y)
- _client.controlMessageWriter?.injectTouch({
- action: AndroidMotionEventAction.Up,
- pointerId: ScrcpyPointerId.Mouse,
- pointerX: x,
- pointerY: y,
- pressure: 1,
- screenWidth: _decoder.renderer.width,
- screenHeight: _decoder.renderer.height,
- buttons: 0,
- actionButton: 0
- })
- })
-
- _decoder.renderer.addEventListener('mousemove', e => {
- // client width and height 450 x 800
- const react = _decoder.renderer.getBoundingClientRect()
-
- // normalize to _decoder.renderer.width and height 1080 x 1920
- const x = ((e.clientX - react.left) * _decoder.renderer.width) / react.width
- const y = ((e.clientY - react.top) * _decoder.renderer.height) / react.height
-
- //console.log('mouse move at ' + x + ' ' + y)
- _client.controlMessageWriter?.injectTouch({
- action: AndroidMotionEventAction.Move,
- pointerId: ScrcpyPointerId.Mouse,
- pointerX: x,
- pointerY: y,
- pressure: 1,
- screenWidth: _decoder.renderer.width,
- screenHeight: _decoder.renderer.height,
- buttons: 0,
- actionButton: 0
- })
- })
- }
-
- setDecoder(_decoder)
- setClient(_client)
- }, [adb, scrcpyScreenRef])
-
- function onHomeClickHandler() {
- client?.controlMessageWriter?.injectKeyCode({
- action: AndroidKeyEventAction.Up,
- keyCode: AndroidKeyCode.AndroidHome,
- metaState: 0,
- repeat: 0
- })
- }
-
- function onBackClickHandler() {
- client?.controlMessageWriter?.injectKeyCode({
- action: AndroidKeyEventAction.Up,
- keyCode: AndroidKeyCode.AndroidBack,
- metaState: 0,
- repeat: 0
- })
- }
-
- function disconnectScrcpy() {
- // clean ref
- if (scrcpyScreenRef.current && scrcpyScreenRef.current.children.length > 0) {
- while (scrcpyScreenRef.current.firstChild) {
- scrcpyScreenRef.current.removeChild(scrcpyScreenRef.current.firstChild)
- }
- }
-
- decoder?.dispose()
- client?.close()
-
- setClient(undefined)
- setDecoder(undefined)
- }
+ }, [decoder])
return (
@@ -271,54 +40,44 @@ export const ScrcpyTab: React.FC = memo(({ adb }) => {
Scrcpy
Stream and control your Android device from your computer
-
+
+
diff --git a/client-electron/src/pages/android/components/scrcpy-tab.tsx b/client-electron/src/pages/android/components/scrcpy-tab.tsx
index 5c49323..9120d0e 100644
--- a/client-electron/src/pages/android/components/scrcpy-tab.tsx
+++ b/client-electron/src/pages/android/components/scrcpy-tab.tsx
@@ -1,269 +1,38 @@
import { Button } from '@/components/ui/button'
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
-import { toast } from '@/components/ui/use-toast'
-import { type Adb, type AdbSubprocessProtocol } from '@yume-chan/adb'
-import { AdbScrcpyClient, AdbScrcpyOptions1_22 } from '@yume-chan/adb-scrcpy'
-import {
- AndroidKeyCode,
- AndroidKeyEventAction,
- AndroidMotionEventAction,
- ScrcpyLogLevel1_18,
- ScrcpyOptions1_25,
- ScrcpyPointerId,
- ScrcpyVideoCodecId
-} from '@yume-chan/scrcpy'
-import { WebCodecsDecoder } from '@yume-chan/scrcpy-decoder-webcodecs'
-import { Consumable, WritableStream, ReadableStream, DecodeUtf8Stream } from '@yume-chan/stream-extra'
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
-import { Terminal } from 'xterm'
-import { FitAddon } from 'xterm-addon-fit'
-
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
+import useScrcpy from '@/hooks/scrcpy-android'
+import { type Adb } from '@yume-chan/adb'
+import { memo, useEffect, useRef } from 'react'
import 'xterm/css/xterm.css'
+import { useShallow } from 'zustand/react/shallow'
interface ScrcpyTabProps {
adb: Adb | undefined
}
export const ScrcpyTab: React.FC
+
-
+ setPath(e.target.value)} />
+
+
+
+ setPushPath(e.target.value)} />
+ setPushFile(e.target.files?.item(0))} />
+
+
- setPath(e.target.value)} />
-
-
- {files &&
+ {files &&
-
-
-
-
+
Control
-
-
-
-
)
})
diff --git a/client-electron/src/pages/android/components/shell-tab.tsx b/client-electron/src/pages/android/components/shell-tab.tsx
index e2c961a..099d545 100644
--- a/client-electron/src/pages/android/components/shell-tab.tsx
+++ b/client-electron/src/pages/android/components/shell-tab.tsx
@@ -1,84 +1,27 @@
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { encodeUtf8, type AdbSubprocessProtocol, type Adb } from '@yume-chan/adb'
-import { Consumable, WritableStream } from '@yume-chan/stream-extra'
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import useShellAndroid from '@/hooks/shell-android'
+import { type Adb } from '@yume-chan/adb'
+import { memo, useEffect, useRef } from 'react'
+import { type Terminal } from 'xterm'
-import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
import 'xterm/css/xterm.css'
+import { useShallow } from 'zustand/react/shallow'
interface ShellTabProps {
adb: Adb | undefined
}
export const ShellTab: React.FC = memo(({ adb }) => {
- const [process, setProcess] = useState()
- const [terminal, setTerminal] = useState()
-
- const [reader, setReader] = useState | undefined>()
-
- useEffect(() => {
- if (adb) {
- console.log('adb is connected')
-
- console.log('creating terminal')
- const terminal: Terminal = new Terminal()
- terminal.options.cursorBlink = true
- terminal.options.theme = {
- background: '#1e1e1e',
- foreground: '#d4d4d4'
- }
-
- console.log('creating process')
-
- const _reader = new WritableStream({
- write(chunk) {
- terminal.write(chunk)
- }
- })
-
- adb.subprocess.shell('/data/data/com.termux/files/usr/bin/telnet localhost 45515').then(_process => {
- _process.stdout.pipeTo(_reader)
-
- const writer = _process.stdin.getWriter()
- terminal.onData(data => {
- const buffer = encodeUtf8(data)
- const consumable = new Consumable(buffer)
- writer.write(consumable)
- })
-
- setReader(_reader)
- setProcess(_process)
- setTerminal(terminal)
- })
- } else {
- console.log('adb is not connected')
- if (process) {
- process?.stdout.cancel()
- process?.stderr.cancel()
- process?.stdin.close()
- process?.kill()
- }
-
- setProcess(undefined)
- setTerminal(undefined)
- }
- }, [adb])
-
- const killProcess = useCallback(() => {
- console.log('killing shell')
- console.log(process)
- if (process && terminal) {
- terminal.write('exit\n')
- reader?.close()
- process.stderr.cancel()
- process.stdin.close()
- process.stdout.cancel()
- process.kill()
- }
- }, [process])
+ const { terminal, startTerminal, killTerminal } = useShellAndroid(
+ useShallow(state => ({
+ terminal: state.terminal,
+ startTerminal: state.startTerminal,
+ killTerminal: state.killTerminal
+ }))
+ )
return (
@@ -88,10 +31,16 @@ export const ShellTab: React.FC = memo(({ adb }) => {
)
diff --git a/client-electron/src/pages/recipes/components/columns.tsx b/client-electron/src/pages/recipes/components/columns.tsx
deleted file mode 100644
index 4eef8ab..0000000
--- a/client-electron/src/pages/recipes/components/columns.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { type ColumnDef } from '@tanstack/react-table'
-import { type RecipeOverview } 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 { type RecipeStatus, getRecipeStatusIcon } from '@/constants/recipe'
-
-export const columns: ColumnDef[] = [
- {
- id: 'select',
- header: ({ table }) => (
- table.toggleAllPageRowsSelected(!!value)}
- aria-label="Select all"
- className="translate-y-[2px]"
- />
- ),
- cell: ({ row }) => (
- row.toggleSelected(!!value)}
- aria-label="Select row"
- className="translate-y-[2px]"
- />
- ),
- enableSorting: false,
- enableHiding: false
- },
- {
- accessorKey: 'productCode',
- header: ({ column }) => [] = [
+ {
+ id: 'select',
+ header: ({ table }) => (
+ table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ className="translate-y-[2px]"
+ />
+ ),
+ cell: ({ row }) => (
+ row.toggleSelected(!!value)}
+ aria-label="Select row"
+ className="translate-y-[2px]"
+ />
+ ),
+ enableSorting: false,
+ enableHiding: false
+ },
+ {
+ accessorKey: 'productCode',
+ header: ({ column }) => extends React.HTMLAttributes {
column: Column
title: string
+ isDate?: boolean
}
const DataTableColumnHeader = ({
column,
title,
+ isDate,
className
}: DataTableColumnHeaderProps) => {
- if (!column.getCanSort()) {
+ if (!column.getCanSort() && !isDate) {
return
-
column.toggleSorting(false)}>
-
column.toggleSorting(true)}>
-
column.toggleVisibility(false)}>
-
diff --git a/client-electron/src/pages/recipes/components/data-table-faceted-filter.tsx b/client-electron/src/pages/recipes/components/recipe-table-components/data-table-faceted-filter.tsx
similarity index 88%
rename from client-electron/src/pages/recipes/components/data-table-faceted-filter.tsx
rename to client-electron/src/pages/recipes/components/recipe-table-components/data-table-faceted-filter.tsx
index 6a733d4..f7efb65 100644
--- a/client-electron/src/pages/recipes/components/data-table-faceted-filter.tsx
+++ b/client-electron/src/pages/recipes/components/recipe-table-components/data-table-faceted-filter.tsx
@@ -15,21 +15,19 @@ import {
CommandSeparator
} from '@/components/ui/command'
-interface DataTableFacetedFilterProps {
+interface DataTableFacetedFilterProps {
column?: Column
title?: string
- options: {
- label: string
- value: string
- icon?: React.ComponentType<{ className?: string }>
- }[]
+ options: TOption extends { value: string; label: string; icon?: React.ComponentType<{ className?: string }> }
+ ? TOption[]
+ : never
}
-const DataTableFacetedFilter = ({
+const DataTableFacetedFilter = ({
column,
title,
options
-}: DataTableFacetedFilterProps) => {
+}: DataTableFacetedFilterProps) => {
const facets = column?.getFacetedUniqueValues()
const selectedValues = new Set(column?.getFilterValue() as string[])
@@ -87,13 +85,13 @@ const DataTableFacetedFilter = ({
>
{
}
const DataTableRowActions = ({ row }: DataTableRowActionsProps) => {
- const task = taskSchema.parse(row.original)
+ const task = recipeDashboardSchema.parse(row.original)
return (
@@ -35,7 +35,6 @@ const DataTableRowActions = ({ row }: DataTableRowActionsProps) =
Edit
Make a copy
- Favorite
Labels
diff --git a/client-electron/src/pages/recipes/components/data-table-toolbar.tsx b/client-electron/src/pages/recipes/components/recipe-table-components/data-table-toolbar.tsx
similarity index 52%
rename from client-electron/src/pages/recipes/components/data-table-toolbar.tsx
rename to client-electron/src/pages/recipes/components/recipe-table-components/data-table-toolbar.tsx
index cc3e2d4..ac8c77c 100644
--- a/client-electron/src/pages/recipes/components/data-table-toolbar.tsx
+++ b/client-electron/src/pages/recipes/components/recipe-table-components/data-table-toolbar.tsx
@@ -1,35 +1,62 @@
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { type Table } from '@tanstack/react-table'
-import { statuses, priorities } from '@/models/data'
+// import { statuses, priorities } from '@/models/data'
import DataTableFacetedFilter from './data-table-faceted-filter'
import DataTableViewOptions from './data-table-view-options'
-import { Cross2Icon } from '@radix-ui/react-icons'
+import { Cross2Icon, ReloadIcon } from '@radix-ui/react-icons'
+import useRecipeDashboard from '@/hooks/recipe-dashboard'
+import { useQuery } from '@tanstack/react-query'
interface DataTableToolbarProps {
table: Table
+ globalFilter: string
+ setGlobalFilter: (value: string) => void
}
-const DataTableToolbar = ({ table }: DataTableToolbarProps) => {
+const DataTableToolbar = ({ table, globalFilter, setGlobalFilter }: DataTableToolbarProps) => {
const isFiltered = table.getState().columnFilters.length > 0
+ const getMaterial = useRecipeDashboard(state => state.getMaterials)
+
+ const {
+ data: materials,
+ isLoading,
+ isError
+ } = useQuery({
+ queryKey: ['materials'],
+ queryFn: () => getMaterial()
+ })
+
return (
- {client ? (
+
-
- Logcat
-
-
-
-
+ {scrcpyClient ? (
) : (
-
-
- {/* logcat card */}
-
-
-
-
- = ({ terminal }) => {
const shellRef = useRef(null)
useEffect(() => {
- console.log(shellRef.current)
// check if shellRef is have child remove all
if (shellRef.current && shellRef.current.children.length > 0) {
for (const child of shellRef.current.children) {
diff --git a/client-electron/src/pages/android/components/tool-bar.tsx b/client-electron/src/pages/android/components/tool-bar.tsx
index ec5c6a9..e81628c 100644
--- a/client-electron/src/pages/android/components/tool-bar.tsx
+++ b/client-electron/src/pages/android/components/tool-bar.tsx
@@ -13,7 +13,7 @@ import { Adb, AdbDaemonTransport } from '@yume-chan/adb'
import AdbWebCredentialStore from '@yume-chan/adb-credential-web'
import {
ADB_DEFAULT_DEVICE_FILTER,
- type AdbDaemonWebUsbDevice,
+ AdbDaemonWebUsbDevice,
type AdbDaemonWebUsbDeviceManager
} from '@yume-chan/adb-daemon-webusb'
import { useState } from 'react'
@@ -32,9 +32,11 @@ export const ToolBar: React.FC = ({ manager, adb, device, setAdb,
const [version, setVersion] = useState('')
async function createNewConnection() {
- let selectedDevice
-
+ console.log(device)
+ let selectedDevice: AdbDaemonWebUsbDevice | undefined = undefined
if (!device) {
+ console.log('no device')
+
selectedDevice = await manager?.requestDevice({
filters: [
{
@@ -53,9 +55,13 @@ export const ToolBar: React.FC = ({ manager, adb, device, setAdb,
selectedDevice = device
}
+ // create transport and connect to device
+ let adb: Adb | null = null
let connection
try {
- connection = await selectedDevice.connect()
+ if (selectedDevice instanceof AdbDaemonWebUsbDevice) {
+ connection = await selectedDevice.connect()
+ }
} catch (e) {
toast({
duration: 5000,
@@ -66,24 +72,46 @@ export const ToolBar: React.FC = ({ manager, adb, device, setAdb,
return
}
- const credentialStore: AdbWebCredentialStore = new AdbWebCredentialStore()
+ if (connection) {
+ const credentialStore: AdbWebCredentialStore = new AdbWebCredentialStore()
- const transport = await AdbDaemonTransport.authenticate({
- serial: selectedDevice.serial,
- connection: connection,
- credentialStore: credentialStore
- })
+ const transport = await AdbDaemonTransport.authenticate({
+ serial: selectedDevice.serial,
+ connection: connection,
+ credentialStore: credentialStore
+ })
- const adb: Adb = new Adb(transport)
+ adb = new Adb(transport)
+ }
- const name = await adb.getProp('ro.product.model')
- const version = await adb.getProp('ro.build.version.release')
+ if (adb) {
+ const name = await adb.getProp('ro.product.model')
+ const version = await adb.getProp('ro.build.version.release')
- setName(name)
- setResolution(resolution)
- setVersion(version)
+ setName(name)
+ setResolution(resolution)
+ setVersion(version)
- setAdb(adb)
+ setAdb(adb)
+ }
+ }
+
+ async function connectAdbDaemon() {
+ if (!window.electronRuntime) {
+ toast({
+ duration: 5000,
+ variant: 'destructive',
+ title: 'Failed to connect to adb daemon',
+ description: 'This feature is only available in the desktop app'
+ })
+ return
+ }
+
+ // create connection
+ await window.ipcRenderer.invoke('adb')
+
+ const result = await window.ipcRenderer.invoke('adb:shell', 'ls')
+ console.log(result)
}
function onDisconnect() {
@@ -121,6 +149,10 @@ export const ToolBar: React.FC = ({ manager, adb, device, setAdb,
Connect
)}
+
+
-
+
{terminal ? (
@@ -114,7 +63,6 @@ const ShellTerminal: React.FC
+ {terminal ? (
+
+ ) : (
+
+ )}
{row.getValue('productCode')}
,
- enableSorting: false,
- enableHiding: false
- },
- {
- accessorKey: 'name',
- header: ({ column }) =>
- {label && {label.label} }
- {row.getValue('name')}
-
- )
- }
- },
- {
- accessorKey: 'status',
- header: ({ column }) =>
- {
- )
- },
- filterFn: (row, id, value) => {
- return value.includes(row.getValue(id))
- }
- },
- {
- accessorKey: 'lastUpdated',
- header: ({ column }) =>
- {row.getValue('lastUpdated')}
-
- )
- },
- filterFn: (row, id, value) => {
- return value.includes(row.getValue(id))
- }
- },
- {
- id: 'actions',
- cell: ({ row }) =>
+
+ )
+}
+
+export default RecipeForm
diff --git a/client-electron/src/pages/recipes/components/recipe-table-components/columns.tsx b/client-electron/src/pages/recipes/components/recipe-table-components/columns.tsx
new file mode 100644
index 0000000..0371790
--- /dev/null
+++ b/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: ColumnDefRecipe Form
+{row.getValue('productCode')}
,
+ enableHiding: false,
+ enableGlobalFilter: true,
+ filterFn: (row, id, value) => {
+ return value.includes(row.getValue(id))
+ }
+ },
+ {
+ accessorKey: 'name',
+ header: ({ column }) =>
+ {/* {label && {label.label} } */}
+ {row.getValue('name')}
+
+ )
+ },
+ enableGlobalFilter: true,
+ filterFn: (row, id, value) => {
+ return value.includes(row.getValue(id))
+ }
+ },
+ {
+ accessorKey: 'nameEng',
+ header: ({ column }) =>
+ {row.getValue('nameEng')}
+
+ )
+ },
+ enableGlobalFilter: true,
+ filterFn: (row, id, value) => {
+ return value.includes(row.getValue(id))
+ }
+ },
+ {
+ accessorKey: 'inUse',
+ header: ({ column }) =>
+
+ {row.getValue('inUse') ? (
+
+ )
+ },
+ filterFn: (row, id, value) => {
+ return value.includes(row.getValue(id))
+ }
+ },
+ {
+ accessorKey: 'lastUpdated',
+ header: ({ column }) =>
+ {dateFormat.format(row.getValue('lastUpdated'), 'dd-MM-yyyy HH:mm:ss')}
+
+ )
+ },
+ 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 }) => {title}
}
+ if (isDate) {
+ return (
+
+
+
+
+
+
+ column.setFilterValue(date)}
+ numberOfMonths={2}
+ disabled={date => date > new Date() || date < new Date('1900-01-01')}
+ initialFocus
+ />
+
+
+
+ )
+ }
+
return (
table.getColumn('title')?.setFilterValue(event.target.value)}
+ placeholder="Filter recipe..."
+ value={globalFilter}
+ onChange={event => setGlobalFilter(event.target.value)}
className="h-8 w-[150px] lg:w-[250px]"
/>
- {table.getColumn('status') && (
+ {!isLoading && !isError ? (
+ }[]
+ }
+ />
+ ) : !isError ? (
+