diff --git a/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx b/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx index e6e99cc62..c6a67a4fb 100644 --- a/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx +++ b/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx @@ -4,12 +4,16 @@ import type { AccessCode } from 'seamapi' import { copy } from 'lib/copy.js' import { AccessCodeKeyIcon } from 'lib/icons/AccessCodeKey.js' import { CopyIcon } from 'lib/icons/Copy.js' -import { useAccessCodes } from 'lib/seam/access-codes/use-access-codes.js' +import { + useAccessCodes, + type UseAccessCodesData, +} from 'lib/seam/access-codes/use-access-codes.js' import { AccessCodeDetails } from 'lib/ui/AccessCodeDetails/AccessCodeDetails.js' import { CodeDetails } from 'lib/ui/AccessCodeTable/CodeDetails.js' import { ContentHeader } from 'lib/ui/layout/ContentHeader.js' import { MenuItem } from 'lib/ui/Menu/MenuItem.js' import { MoreActionsMenu } from 'lib/ui/Menu/MoreActionsMenu.js' +import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js' import { TableBody } from 'lib/ui/Table/TableBody.js' import { TableCell } from 'lib/ui/Table/TableCell.js' import { TableHeader } from 'lib/ui/Table/TableHeader.js' @@ -59,52 +63,81 @@ export function AccessCodeTable( - {accessCodes.map((code) => ( - + + + ) +} + +function Body(props: { + accessCodes: Array + selectAccessCode: (accessCode: AccessCode) => void +}) { + const { accessCodes, selectAccessCode } = props + + if (accessCodes.length === 0) { + return {t.noAccessCodesMessage} + } + + return ( + <> + {accessCodes.map((accessCode) => ( + { + selectAccessCode(accessCode) + }} + /> + ))} + + ) +} + +function AccessCodeRow(props: { + accessCode: UseAccessCodesData[number] + onClick: () => void +}) { + const { onClick, accessCode } = props + return ( + + +
+ +
+ + + {accessCode.name} + + + + + { - selectAccessCode(code) + void copy(accessCode.code ?? '') }} > - -
- -
- - - {code.name} - - - - - { - void copy(code.code ?? '') - }} - > -
- - {t.copyCode} - {code.code} - - -
- - - - - ))} - - +
+ + {t.copyCode} - {accessCode.code} + + +
+ + + + ) } const t = { accessCodes: 'Access Codes', copyCode: 'Copy code', + noAccessCodesMessage: 'Sorry, no access codes were found', } diff --git a/src/lib/ui/DeviceTable/DeviceTable.tsx b/src/lib/ui/DeviceTable/DeviceTable.tsx index e28a558c0..bc5cdb29a 100644 --- a/src/lib/ui/DeviceTable/DeviceTable.tsx +++ b/src/lib/ui/DeviceTable/DeviceTable.tsx @@ -13,6 +13,7 @@ import { OnlineStatus } from 'lib/ui/device/OnlineStatus.js' import { DeviceDetails } from 'lib/ui/DeviceDetails/DeviceDetails.js' import { getDeviceModel } from 'lib/ui/DeviceDetails/DeviceModel.js' import { ContentHeader } from 'lib/ui/layout/ContentHeader.js' +import { EmptyPlaceholder } from 'lib/ui/Table/EmptyPlaceholder.js' import { TableBody } from 'lib/ui/Table/TableBody.js' import { TableCell } from 'lib/ui/Table/TableCell.js' import { TableHeader } from 'lib/ui/Table/TableHeader.js' @@ -69,20 +70,37 @@ export function DeviceTable({ - {devices.map((device) => ( - { - selectDevice(device.device_id) - }} - /> - ))} + ) } +function Body(props: { + devices: Array + selectDevice: (id: string) => void +}) { + const { devices, selectDevice } = props + + if (devices.length === 0) { + return {t.noDevicesMessage} + } + + return ( + <> + {devices.map((device) => ( + { + selectDevice(device.device_id) + }} + /> + ))} + + ) +} + function DeviceRow(props: { device: UseDevicesData[number] onClick: () => void @@ -118,4 +136,5 @@ function DeviceRow(props: { const t = { devices: 'Devices', unknownLock: 'Unknown Lock', + noDevicesMessage: 'Sorry, no devices were found', } diff --git a/src/lib/ui/Table/EmptyPlaceholder.tsx b/src/lib/ui/Table/EmptyPlaceholder.tsx new file mode 100644 index 000000000..0b40bfadf --- /dev/null +++ b/src/lib/ui/Table/EmptyPlaceholder.tsx @@ -0,0 +1,12 @@ +import type { DivProps } from 'lib/ui/types.js' + +export function EmptyPlaceholder({ + children, + ...props +}: DivProps): JSX.Element { + return ( +
+ {children} +
+ ) +} diff --git a/src/styles/_tables.scss b/src/styles/_tables.scss index 546f91d48..08a7f7213 100644 --- a/src/styles/_tables.scss +++ b/src/styles/_tables.scss @@ -47,8 +47,20 @@ } } +@mixin empty-placeholder { + .seam-table-empty-placeholder { + height: 300px; + font-size: 18px; + line-height: 132%; + display: flex; + align-items: center; + justify-content: center; + } +} + @mixin all { @include header; @include row; @include cell; + @include empty-placeholder; }