Panel placeholders (#7405)

* PanelType.content is now required

* Make panel content non-optional

- Makes it easier to see which panels still need to be implemented

* Implement a panel
This commit is contained in:
Oliver 2024-06-08 10:17:12 +10:00 committed by GitHub
parent 6b11c940bb
commit 8f3a8b0f7e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 37 additions and 17 deletions

View File

@ -24,7 +24,6 @@ import { identifierString } from '../../functions/conversion';
import { navigateToLink } from '../../functions/navigation'; import { navigateToLink } from '../../functions/navigation';
import { useLocalState } from '../../states/LocalState'; import { useLocalState } from '../../states/LocalState';
import { Boundary } from '../Boundary'; import { Boundary } from '../Boundary';
import { PlaceholderPanel } from '../items/Placeholder';
import { StylishText } from '../items/StylishText'; import { StylishText } from '../items/StylishText';
/** /**
@ -34,7 +33,7 @@ export type PanelType = {
name: string; name: string;
label: string; label: string;
icon?: ReactNode; icon?: ReactNode;
content?: ReactNode; content: ReactNode;
hidden?: boolean; hidden?: boolean;
disabled?: boolean; disabled?: boolean;
showHeadline?: boolean; showHeadline?: boolean;
@ -190,7 +189,7 @@ function BasePanelGroup({
</> </>
)} )}
<Boundary label={`PanelContent-${panel.name}`}> <Boundary label={`PanelContent-${panel.name}`}>
{panel.content ?? <PlaceholderPanel />} {panel.content}
</Boundary> </Boundary>
</Stack> </Stack>
</Tabs.Panel> </Tabs.Panel>

View File

@ -19,6 +19,7 @@ import {
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { PlaceholderPanel } from '../../../components/items/Placeholder';
import { PanelGroup, PanelType } from '../../../components/nav/PanelGroup'; import { PanelGroup, PanelType } from '../../../components/nav/PanelGroup';
import { SettingsHeader } from '../../../components/nav/SettingsHeader'; import { SettingsHeader } from '../../../components/nav/SettingsHeader';
import { GlobalSettingList } from '../../../components/settings/SettingList'; import { GlobalSettingList } from '../../../components/settings/SettingList';
@ -98,7 +99,8 @@ export default function SystemSettings() {
{ {
name: 'notifications', name: 'notifications',
label: t`Notifications`, label: t`Notifications`,
icon: <IconBellCog /> icon: <IconBellCog />,
content: <PlaceholderPanel />
}, },
{ {
name: 'pricing', name: 'pricing',
@ -161,7 +163,8 @@ export default function SystemSettings() {
{ {
name: 'categories', name: 'categories',
label: t`Part Categories`, label: t`Part Categories`,
icon: <IconSitemap /> icon: <IconSitemap />,
content: <PlaceholderPanel />
}, },
{ {
name: 'parts', name: 'parts',
@ -223,7 +226,8 @@ export default function SystemSettings() {
{ {
name: 'stocktake', name: 'stocktake',
label: t`Stocktake`, label: t`Stocktake`,
icon: <IconClipboardCheck /> icon: <IconClipboardCheck />,
content: <PlaceholderPanel />
}, },
{ {
name: 'buildorders', name: 'buildorders',

View File

@ -11,6 +11,7 @@ import {
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import { useMemo } from 'react'; import { useMemo } from 'react';
import { PlaceholderPanel } from '../../../components/items/Placeholder';
import { PanelGroup, PanelType } from '../../../components/nav/PanelGroup'; import { PanelGroup, PanelType } from '../../../components/nav/PanelGroup';
import { SettingsHeader } from '../../../components/nav/SettingsHeader'; import { SettingsHeader } from '../../../components/nav/SettingsHeader';
import { UserSettingList } from '../../../components/settings/SettingList'; import { UserSettingList } from '../../../components/settings/SettingList';
@ -39,7 +40,8 @@ export default function UserSettings() {
{ {
name: 'dashboard', name: 'dashboard',
label: t`Dashboard`, label: t`Dashboard`,
icon: <IconDeviceDesktopAnalytics /> icon: <IconDeviceDesktopAnalytics />,
content: <PlaceholderPanel />
}, },
{ {
name: 'display', name: 'display',
@ -92,7 +94,8 @@ export default function UserSettings() {
{ {
name: 'notifications', name: 'notifications',
label: t`Notifications`, label: t`Notifications`,
icon: <IconBellCog /> icon: <IconBellCog />,
content: <UserSettingList keys={['NOTIFICATION_ERROR_REPORT']} />
}, },
{ {
name: 'reporting', name: 'reporting',

View File

@ -53,6 +53,7 @@ import {
UnlinkBarcodeAction, UnlinkBarcodeAction,
ViewBarcodeAction ViewBarcodeAction
} from '../../components/items/ActionDropdown'; } from '../../components/items/ActionDropdown';
import { PlaceholderPanel } from '../../components/items/Placeholder';
import NavigationTree from '../../components/nav/NavigationTree'; import NavigationTree from '../../components/nav/NavigationTree';
import { PageDetail } from '../../components/nav/PageDetail'; import { PageDetail } from '../../components/nav/PageDetail';
import { PanelGroup, PanelType } from '../../components/nav/PanelGroup'; import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
@ -513,7 +514,8 @@ export default function PartDetail() {
name: 'allocations', name: 'allocations',
label: t`Allocations`, label: t`Allocations`,
icon: <IconBookmarks />, icon: <IconBookmarks />,
hidden: !part.component && !part.salable hidden: !part.component && !part.salable,
content: <PlaceholderPanel />
}, },
{ {
name: 'bom', name: 'bom',
@ -572,7 +574,8 @@ export default function PartDetail() {
name: 'purchase_orders', name: 'purchase_orders',
label: t`Purchase Orders`, label: t`Purchase Orders`,
icon: <IconShoppingCart />, icon: <IconShoppingCart />,
hidden: !part.purchaseable hidden: !part.purchaseable,
content: <PlaceholderPanel />
}, },
{ {
name: 'sales_orders', name: 'sales_orders',
@ -584,12 +587,14 @@ export default function PartDetail() {
{ {
name: 'scheduling', name: 'scheduling',
label: t`Scheduling`, label: t`Scheduling`,
icon: <IconCalendarStats /> icon: <IconCalendarStats />,
content: <PlaceholderPanel />
}, },
{ {
name: 'stocktake', name: 'stocktake',
label: t`Stocktake`, label: t`Stocktake`,
icon: <IconClipboardList /> icon: <IconClipboardList />,
content: <PlaceholderPanel />
}, },
{ {
name: 'test_templates', name: 'test_templates',

View File

@ -22,6 +22,7 @@ import {
DuplicateItemAction, DuplicateItemAction,
EditItemAction EditItemAction
} from '../../components/items/ActionDropdown'; } from '../../components/items/ActionDropdown';
import { PlaceholderPanel } from '../../components/items/Placeholder';
import { PageDetail } from '../../components/nav/PageDetail'; import { PageDetail } from '../../components/nav/PageDetail';
import { PanelGroup, PanelType } from '../../components/nav/PanelGroup'; import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
import { StatusRenderer } from '../../components/render/StatusRenderer'; import { StatusRenderer } from '../../components/render/StatusRenderer';
@ -220,7 +221,8 @@ export default function ReturnOrderDetail() {
{ {
name: 'line-items', name: 'line-items',
label: t`Line Items`, label: t`Line Items`,
icon: <IconList /> icon: <IconList />,
content: <PlaceholderPanel />
}, },
{ {
name: 'attachments', name: 'attachments',

View File

@ -25,6 +25,7 @@ import {
DuplicateItemAction, DuplicateItemAction,
EditItemAction EditItemAction
} from '../../components/items/ActionDropdown'; } from '../../components/items/ActionDropdown';
import { PlaceholderPanel } from '../../components/items/Placeholder';
import { PageDetail } from '../../components/nav/PageDetail'; import { PageDetail } from '../../components/nav/PageDetail';
import { PanelGroup, PanelType } from '../../components/nav/PanelGroup'; import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
import { StatusRenderer } from '../../components/render/StatusRenderer'; import { StatusRenderer } from '../../components/render/StatusRenderer';
@ -248,17 +249,20 @@ export default function SalesOrderDetail() {
{ {
name: 'line-items', name: 'line-items',
label: t`Line Items`, label: t`Line Items`,
icon: <IconList /> icon: <IconList />,
content: <PlaceholderPanel />
}, },
{ {
name: 'pending-shipments', name: 'pending-shipments',
label: t`Pending Shipments`, label: t`Pending Shipments`,
icon: <IconTruckLoading /> icon: <IconTruckLoading />,
content: <PlaceholderPanel />
}, },
{ {
name: 'completed-shipments', name: 'completed-shipments',
label: t`Completed Shipments`, label: t`Completed Shipments`,
icon: <IconTruckDelivery /> icon: <IconTruckDelivery />,
content: <PlaceholderPanel />
}, },
{ {
name: 'build-orders', name: 'build-orders',

View File

@ -32,6 +32,7 @@ import {
UnlinkBarcodeAction, UnlinkBarcodeAction,
ViewBarcodeAction ViewBarcodeAction
} from '../../components/items/ActionDropdown'; } from '../../components/items/ActionDropdown';
import { PlaceholderPanel } from '../../components/items/Placeholder';
import NavigationTree from '../../components/nav/NavigationTree'; import NavigationTree from '../../components/nav/NavigationTree';
import { PageDetail } from '../../components/nav/PageDetail'; import { PageDetail } from '../../components/nav/PageDetail';
import { PanelGroup, PanelType } from '../../components/nav/PanelGroup'; import { PanelGroup, PanelType } from '../../components/nav/PanelGroup';
@ -283,7 +284,9 @@ export default function StockDetail() {
label: t`Allocations`, label: t`Allocations`,
icon: <IconBookmark />, icon: <IconBookmark />,
hidden: hidden:
!stockitem?.part_detail?.salable && !stockitem?.part_detail?.component !stockitem?.part_detail?.salable &&
!stockitem?.part_detail?.component,
content: <PlaceholderPanel />
}, },
{ {
name: 'testdata', name: 'testdata',