From 214c57e30be7449e112e46d0f1c9e4a51f53f733 Mon Sep 17 00:00:00 2001 From: Mike Wu Date: Wed, 24 May 2023 17:32:30 +0900 Subject: [PATCH 1/5] DeviceTable - add empty placeholder --- src/lib/ui/DeviceTable/DeviceTable.tsx | 38 ++++++++++++++++++++------ src/lib/ui/Table/EmptyPlaceholder.tsx | 9 ++++++ src/styles/_tables.scss | 12 ++++++++ 3 files changed, 50 insertions(+), 9 deletions(-) create mode 100644 src/lib/ui/Table/EmptyPlaceholder.tsx diff --git a/src/lib/ui/DeviceTable/DeviceTable.tsx b/src/lib/ui/DeviceTable/DeviceTable.tsx index e28a558c0..6f6d82d13 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,38 @@ export function DeviceTable({ - {devices.map((device) => ( - { - selectDevice(device.device_id) - }} - /> - ))} + ) } +function Body({ + devices, + selectDevice, +}: { + devices: Array + selectDevice: (id: string) => void +}) { + 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 +137,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..12ac1c01e --- /dev/null +++ b/src/lib/ui/Table/EmptyPlaceholder.tsx @@ -0,0 +1,9 @@ +import type { DivProps } from 'lib/ui/types.js' + +export function EmptyPlaceholder(props: DivProps): JSX.Element { + return ( +
+ {props.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; } From 2722e08343d8900c9242b42d1f4cedb937e41f82 Mon Sep 17 00:00:00 2001 From: Mike Wu Date: Wed, 24 May 2023 17:36:29 +0900 Subject: [PATCH 2/5] AccessCodeTable - show empty placeholder --- .../ui/AccessCodeTable/AccessCodeTable.tsx | 104 +++++++++++------- src/lib/ui/DeviceTable/DeviceTable.tsx | 7 +- 2 files changed, 66 insertions(+), 45 deletions(-) diff --git a/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx b/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx index e6e99cc62..97a8b4fbb 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,70 @@ export function AccessCodeTable( - {accessCodes.map((code) => ( - { - selectAccessCode(code) - }} - > - -
- -
- - - {code.name} - - - - - { - void copy(code.code ?? '') - }} - > -
- - {t.copyCode} - {code.code} - - -
- - - - - ))} + ) } +function Body(props: { + accessCodes: Array + selectAccessCode: (accessCode: AccessCode) => void +}) { + const { accessCodes, selectAccessCode } = props + + if (accessCodes.length === 0) { + return {t.noAccessCodesMessage} + } + + return ( + <> + {accessCodes.map((code) => ( + { + selectAccessCode(code) + }} + > + +
+ +
+ + + {code.name} + + + + + { + void copy(code.code ?? '') + }} + > +
+ + {t.copyCode} - {code.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 6f6d82d13..bc5cdb29a 100644 --- a/src/lib/ui/DeviceTable/DeviceTable.tsx +++ b/src/lib/ui/DeviceTable/DeviceTable.tsx @@ -76,13 +76,12 @@ export function DeviceTable({ ) } -function Body({ - devices, - selectDevice, -}: { +function Body(props: { devices: Array selectDevice: (id: string) => void }) { + const { devices, selectDevice } = props + if (devices.length === 0) { return {t.noDevicesMessage} } From 64856a9816e603cee23acbb9bd12a7d0d654ed24 Mon Sep 17 00:00:00 2001 From: Mike Wu Date: Thu, 25 May 2023 10:45:25 +0900 Subject: [PATCH 3/5] Update src/lib/ui/Table/EmptyPlaceholder.tsx Co-authored-by: Evan Sosenko --- src/lib/ui/Table/EmptyPlaceholder.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/ui/Table/EmptyPlaceholder.tsx b/src/lib/ui/Table/EmptyPlaceholder.tsx index 12ac1c01e..28a73664f 100644 --- a/src/lib/ui/Table/EmptyPlaceholder.tsx +++ b/src/lib/ui/Table/EmptyPlaceholder.tsx @@ -1,9 +1,9 @@ import type { DivProps } from 'lib/ui/types.js' -export function EmptyPlaceholder(props: DivProps): JSX.Element { +export function EmptyPlaceholder({ children, ...props }: DivProps): JSX.Element { return (
- {props.children} + {children}
) } From 5f025c2638a5f2143075fad8eae76f3db5d35fd3 Mon Sep 17 00:00:00 2001 From: Seam Bot Date: Thu, 25 May 2023 01:46:30 +0000 Subject: [PATCH 4/5] Run format --- src/lib/ui/Table/EmptyPlaceholder.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/lib/ui/Table/EmptyPlaceholder.tsx b/src/lib/ui/Table/EmptyPlaceholder.tsx index 28a73664f..0b40bfadf 100644 --- a/src/lib/ui/Table/EmptyPlaceholder.tsx +++ b/src/lib/ui/Table/EmptyPlaceholder.tsx @@ -1,6 +1,9 @@ import type { DivProps } from 'lib/ui/types.js' -export function EmptyPlaceholder({ children, ...props }: DivProps): JSX.Element { +export function EmptyPlaceholder({ + children, + ...props +}: DivProps): JSX.Element { return (
{children} From ba74c6ee34a621c898fd8141be2640cf46a9a373 Mon Sep 17 00:00:00 2001 From: Mike Wu Date: Thu, 25 May 2023 10:48:06 +0900 Subject: [PATCH 5/5] Add --- .../ui/AccessCodeTable/AccessCodeTable.tsx | 85 +++++++++++-------- 1 file changed, 48 insertions(+), 37 deletions(-) diff --git a/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx b/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx index 97a8b4fbb..c6a67a4fb 100644 --- a/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx +++ b/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx @@ -81,50 +81,61 @@ function Body(props: { return ( <> - {accessCodes.map((code) => ( - ( + { - selectAccessCode(code) + selectAccessCode(accessCode) }} - > - -
- -
- - - {code.name} - - - - - { - void copy(code.code ?? '') - }} - > -
- - {t.copyCode} - {code.code} - - -
- - - - + /> ))} ) } +function AccessCodeRow(props: { + accessCode: UseAccessCodesData[number] + onClick: () => void +}) { + const { onClick, accessCode } = props + return ( + + +
+ +
+ + + {accessCode.name} + + + + + { + void copy(accessCode.code ?? '') + }} + > +
+ + {t.copyCode} - {accessCode.code} + + +
+ + + + + ) +} + const t = { accessCodes: 'Access Codes', copyCode: 'Copy code',