@plumile/backoffice-react 0.1.72 → 0.1.73

package/lib/esm/BackofficeEntityListPage-BxgqdFpL.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeEntityListPage-BxgqdFpL.js","names":[],"sources":["../../src/components/backoffice/list/RowFlagsCell.css.ts","../../src/components/backoffice/list/RowFlagsCell.tsx","../../src/pages/backofficeEntityListPage.css.ts","../../src/pages/BackofficeEntityListPage.tsx"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nexport const rowFlagsColumnCell = style({\n  justifyContent: 'center',\n  padding: '0 4px',\n});\n\nexport const container = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  gap: 6,\n  width: '100%',\n});\n\nexport const flag = style({\n  display: 'grid',\n  placeItems: 'center',\n  width: 24,\n  height: 24,\n});\n","import { useMemo, type JSX, type ReactNode } from 'react';\nimport type { TFunction } from 'i18next';\n\nimport type { BackofficeRowFlagSpec } from '@plumile/backoffice-core/types.js';\n\nimport * as styles from './RowFlagsCell.css.js';\n\nexport type RowFlagsCellProps<Row> = {\n  row: Row;\n  flags: readonly BackofficeRowFlagSpec<Row>[];\n  tApp: TFunction;\n};\n\n/**\n * Renders row-level flags (icons) in a dedicated compact column.\n */\nexport const RowFlagsCell = <Row,>({\n  row,\n  flags,\n  tApp,\n}: RowFlagsCellProps<Row>): JSX.Element => {\n  const resolved = useMemo(() => {\n    const out: { id: string; node: ReactNode; label: string }[] = [];\n    for (const flag of flags) {\n      const node = flag.render(row) as ReactNode;\n      if (node != null && node !== '' && node !== false) {\n        out.push({ id: flag.id, node, label: flag.label(row)(tApp) });\n      }\n    }\n    return out;\n  }, [flags, row, tApp]);\n\n  const ariaLabel = resolved\n    .map((entry) => {\n      return entry.label.trim();\n    })\n    .filter((label) => {\n      return label !== '';\n    })\n    .join(', ');\n\n  let ariaLabelProp: string | undefined;\n  if (ariaLabel !== '') {\n    ariaLabelProp = ariaLabel;\n  }\n\n  return (\n    <div className={styles.container} aria-label={ariaLabelProp}>\n      {resolved.map((entry) => {\n        return (\n          <span\n            key={entry.id}\n            className={styles.flag}\n            title={entry.label}\n            role=\"img\"\n            aria-label={entry.label}\n          >\n            {entry.node}\n          </span>\n        );\n      })}\n    </div>\n  );\n};\n","import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const headerActions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n});\n\nexport const actionsColumnCell = style({\n  justifyContent: 'flex-end',\n});\n\nexport const actionTrigger = style({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: '2rem',\n  height: '2rem',\n  flexShrink: 0,\n});\n","/* eslint-disable react-hooks/rules-of-hooks */\nimport {\n  type ComponentProps,\n  type JSX,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { TFunction } from 'i18next';\nimport { useTranslation } from 'react-i18next';\nimport {\n  useFragment,\n  usePaginationFragment,\n  usePreloadedQuery,\n  useRelayEnvironment,\n} from 'react-relay';\nimport { fetchQuery } from 'relay-runtime';\nimport {\n  BACKOFFICE_LIST_DEFAULTS,\n  BACKOFFICE_LIST_REFETCH_POLICY,\n} from '@plumile/backoffice-core/constants.js';\nimport { stableListVariablesKey } from '@plumile/backoffice-core/state/stableKey.js';\nimport type {\n  BackofficeEntityManifestItem,\n  BackofficeEntityFormMutationActionSpec,\n  BackofficeEntityRouteActionSpec,\n  BackofficeListActionSpec,\n  BackofficePreparedListRoute,\n  BackofficeRecordListConfig,\n  BackofficeResolvedListFacetConfig,\n  BackofficeRowFlagSpec,\n  I18nLabel,\n} from '@plumile/backoffice-core/types.js';\nimport {\n  Button,\n  LinkButton,\n  type DataTableColumn,\n  EyeSvg,\n  type GetRowId,\n  TableCell,\n} from '@plumile/ui';\nimport { BackofficeEntityListScaffold } from '../components/backoffice/scaffolds/BackofficeEntityListScaffold.js';\nimport { LazyBackofficeEntityActionFormDialog } from '../components/backoffice/actions/LazyBackofficeEntityActionFormDialog.js';\nimport {\n  buildDataTableColumns,\n  type BackofficeSizedDataTableColumn,\n} from '../components/backoffice/columns/buildDataTableColumns.js';\nimport { RowFlagsCell } from '../components/backoffice/list/RowFlagsCell.js';\nimport { useBackofficeListUrlState } from '../hooks/useBackofficeListUrlState.js';\nimport { useBackofficeLoadMore } from '../hooks/useBackofficeLoadMore.js';\nimport { useBackofficeListRefetch } from '../hooks/useBackofficeListRefetch.js';\nimport { useBackofficeReactTranslation } from '../i18n/useBackofficeReactTranslation.js';\nimport { useBackofficeConfig } from '../provider/BackofficeConfigContext.js';\nimport * as pageStyles from './backofficeEntityListPage.css.js';\nimport { rowFlagsColumnCell } from '../components/backoffice/list/RowFlagsCell.css.js';\nimport { BackofficeRightPageLayout } from '../components/backoffice/layout/breadcrumb/BackofficeRightPageLayout.js';\nimport { buildEntityListBreadcrumb } from '../components/backoffice/layout/breadcrumb/buildBreadcrumbs.js';\n\nexport type BackofficeEntityListPageProps = {\n  entityManifest: BackofficeEntityManifestItem;\n  config: BackofficeResolvedListFacetConfig;\n  prepared: BackofficePreparedListRoute;\n};\n\ntype RecordListConfig = BackofficeResolvedListFacetConfig & {\n  list: BackofficeRecordListConfig<\n    Record<string, unknown>,\n    string,\n    unknown,\n    unknown,\n    unknown,\n    unknown,\n    Record<string, unknown>\n  >;\n};\n\nconst isRecordListConfig = (\n  config: BackofficeResolvedListFacetConfig,\n): config is RecordListConfig => {\n  return config.list.kind === 'records';\n};\n\ntype RecordFetchMode = 'append' | 'reset';\ntype ButtonVariant = ComponentProps<typeof Button>['variant'];\n\ntype RecordFetchInput = {\n  where: Record<string, unknown> | null;\n  sort: string | null;\n  count: number;\n  cursor: string | null;\n  mode: RecordFetchMode;\n};\n\nconst RECORD_FETCH_POLICY = 'store-or-network' as const;\n\nconst resolveLabel = (label: I18nLabel, tApp: TFunction): string => {\n  return label(tApp);\n};\n\nconst ROW_FLAGS_SLOT_PX = 24;\nconst ROW_FLAGS_GAP_PX = 6;\nconst ROW_FLAGS_PADDING_X_PX = 4;\n\n// Match the actual icon button footprint (32px) plus dense table cell padding.\nconst ACTIONS_SLOT_PX = 32;\nconst ACTIONS_GAP_PX = 8;\nconst ACTIONS_PADDING_X_PX = 12;\nconst ACTIONS_SAFETY_PX = 4;\n\nconst computeRowFlagsColumnWidthPx = (flagCount: number): number => {\n  if (flagCount <= 0) {\n    return 0;\n  }\n  return (\n    ROW_FLAGS_PADDING_X_PX * 2 +\n    ROW_FLAGS_SLOT_PX * flagCount +\n    ROW_FLAGS_GAP_PX * Math.max(0, flagCount - 1)\n  );\n};\n\nconst computeActionsColumnWidthPx = (actionCount: number): number => {\n  if (actionCount <= 0) {\n    return 0;\n  }\n  return (\n    ACTIONS_SAFETY_PX +\n    ACTIONS_PADDING_X_PX * 2 +\n    ACTIONS_SLOT_PX * actionCount +\n    ACTIONS_GAP_PX * Math.max(0, actionCount - 1)\n  );\n};\n\nconst listColumnTrackBySize: Record<\n  BackofficeSizedDataTableColumn<unknown>['size'],\n  string\n> = {\n  xs: 'minmax(56px, 76px)',\n  s: 'minmax(88px, 120px)',\n  m: 'minmax(120px, 168px)',\n  l: 'minmax(160px, 220px)',\n  xl: 'minmax(220px, 300px)',\n  // \"fluid\" columns share the available remainder equally.\n  fluid: 'minmax(0, 1fr)',\n};\n\nconst resolveTrackBySize = (\n  column: DataTableColumn<unknown>,\n  fallback: string,\n): string => {\n  if ('size' in column && typeof column.size === 'string') {\n    return listColumnTrackBySize[\n      column.size as BackofficeSizedDataTableColumn<unknown>['size']\n    ];\n  }\n  return fallback;\n};\n\nconst applyListEdgeColumns = <Row,>(\n  inputColumns: readonly DataTableColumn<Row>[],\n  rowFlags: readonly BackofficeRowFlagSpec<Row>[] | undefined,\n  actionCount: number,\n  tApp: TFunction,\n): {\n  columns: readonly DataTableColumn<Row>[];\n  gridTemplateColumns?: string;\n} => {\n  const hasFlags = rowFlags != null && rowFlags.length > 0;\n\n  let columns = inputColumns;\n  if (hasFlags) {\n    const flagsColumn: DataTableColumn<Row> = {\n      id: '__rowFlags',\n      header: '',\n      className: rowFlagsColumnCell,\n      cell: (row) => {\n        return <RowFlagsCell row={row} flags={rowFlags} tApp={tApp} />;\n      },\n    };\n\n    // Ensure we never pick the flags column as \"primary\".\n    const withFlags = [flagsColumn, ...inputColumns];\n    const hasPrimary = withFlags.some((col) => {\n      return col.isPrimary === true;\n    });\n\n    columns = withFlags;\n    if (!hasPrimary) {\n      columns = withFlags.map((col, index) => {\n        if (index === 1) {\n          return { ...col, isPrimary: true };\n        }\n        return col;\n      });\n    }\n  }\n\n  let flagCount = 0;\n  if (hasFlags) {\n    flagCount = rowFlags.length;\n  }\n  const flagsWidthPx = computeRowFlagsColumnWidthPx(flagCount);\n  const actionsWidthPx = computeActionsColumnWidthPx(actionCount);\n\n  // We always include the right-side \"actions\" column in list pages.\n  let leftColumnCount = 0;\n  if (hasFlags) {\n    leftColumnCount = 1;\n  }\n  const middleCount = columns.length - leftColumnCount - 1;\n\n  const middleTracks = columns\n    .slice(leftColumnCount, leftColumnCount + Math.max(0, middleCount))\n    .map((column) => {\n      return resolveTrackBySize(column as DataTableColumn<unknown>, '1fr');\n    })\n    .join(' ');\n\n  let gridTemplateColumns = '';\n  if (hasFlags) {\n    gridTemplateColumns = `${flagsWidthPx}px ${middleTracks} ${actionsWidthPx}px`;\n  } else {\n    gridTemplateColumns = `${middleTracks} ${actionsWidthPx}px`;\n  }\n\n  return { columns, gridTemplateColumns };\n};\n\nconst isRouteAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeEntityRouteActionSpec<null> => {\n  return action.kind === 'route';\n};\n\nconst isFormMutationAction = (\n  action: BackofficeListActionSpec,\n): action is BackofficeEntityFormMutationActionSpec<null> => {\n  return action.kind === 'formMutation';\n};\n\nconst resolveActionVariant = (\n  actionVariant: ButtonVariant | undefined,\n  index: number,\n): Exclude<ButtonVariant, undefined> => {\n  if (actionVariant != null) {\n    return actionVariant;\n  }\n  if (index === 0) {\n    return 'primary';\n  }\n  return 'secondary';\n};\n\nconst resolveRowId = (row: unknown): string | null => {\n  if (row == null || typeof row !== 'object') {\n    return null;\n  }\n  if (!('id' in row)) {\n    return null;\n  }\n  const value = (row as { id?: unknown }).id;\n  if (typeof value !== 'string') {\n    return null;\n  }\n  const trimmed = value.trim();\n  if (trimmed === '') {\n    return null;\n  }\n  return trimmed;\n};\n\nconst buildActionsColumn = (options: {\n  ariaLabel: string;\n  fallback: string;\n  resolveDetailHref: (id: string) => string | null;\n}): DataTableColumn<unknown> => {\n  const { ariaLabel, fallback, resolveDetailHref } = options;\n\n  return {\n    id: 'actions',\n    header: '',\n    className: pageStyles.actionsColumnCell,\n    cell: (row) => {\n      const id = resolveRowId(row);\n      if (id == null) {\n        return fallback;\n      }\n      const href = resolveDetailHref(id);\n      if (href == null) {\n        return fallback;\n      }\n      return (\n        <TableCell.Actions>\n          <span className={pageStyles.actionTrigger} title={ariaLabel}>\n            <LinkButton\n              to={href}\n              variant=\"icon\"\n              size=\"small\"\n              aria-label={ariaLabel}\n            >\n              <EyeSvg width={16} height={16} />\n            </LinkButton>\n          </span>\n        </TableCell.Actions>\n      );\n    },\n  };\n};\n\nconst BackofficeEntityRecordListPage = ({\n  config,\n  prepared,\n}: BackofficeEntityListPageProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const { t } = useBackofficeReactTranslation();\n  const { entities } = useBackofficeConfig();\n  const [activeFormActionId, setActiveFormActionId] = useState<string | null>(\n    null,\n  );\n  const environment = useRelayEnvironment();\n\n  if (!isRecordListConfig(config)) {\n    return null;\n  }\n\n  const listConfig = config.list;\n  const listDefaults = config.listDefaults ??\n    listConfig.defaultState ?? { where: null, sort: null };\n  const queryData = usePreloadedQuery(listConfig.query, prepared.query);\n  const fragmentData = useFragment(listConfig.fragment, queryData as never);\n\n  const initialRows = useMemo(() => {\n    return listConfig.getRows(fragmentData).map((row) => {\n      return listConfig.toRow(row);\n    });\n  }, [fragmentData, listConfig]);\n\n  const initialCursor = useMemo(() => {\n    return listConfig.getNextCursor?.(queryData as never) ?? null;\n  }, [listConfig, queryData]);\n\n  const [rows, setRows] = useState(initialRows);\n  const [nextCursor, setNextCursor] = useState<string | null>(initialCursor);\n  const [isLoadingMore, setIsLoadingMore] = useState(false);\n  const [isRefreshing, setIsRefreshing] = useState(false);\n\n  useEffect(() => {\n    setRows(initialRows);\n    setNextCursor(initialCursor);\n  }, [initialCursor, initialRows]);\n\n  const { columns, gridTemplateColumns } = useMemo((): {\n    columns: readonly DataTableColumn<unknown>[];\n    gridTemplateColumns?: string;\n  } => {\n    const baseColumns = buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n      resolveEntityHref: (entityId, refId) => {\n        const entityManifest = entities[entityId];\n        if (entityManifest == null) {\n          return null;\n        }\n        return entityManifest.routes.detail(refId);\n      },\n    });\n    const actionsColumn = buildActionsColumn({\n      ariaLabel: t('actions.view'),\n      fallback: t('common.notAvailable'),\n      resolveDetailHref: (id) => {\n        return config.routes.detail(id);\n      },\n    });\n    const allColumns = [...baseColumns, actionsColumn];\n    return applyListEdgeColumns(allColumns, listConfig.rowFlags, 1, tApp);\n  }, [\n    config.routes,\n    listConfig.columns,\n    listConfig.rowFlags,\n    entities,\n    t,\n    tApp,\n  ]);\n\n  const getRowId = useCallback<GetRowId<unknown>>(\n    (row) => {\n      return listConfig.getRowId(row);\n    },\n    [listConfig],\n  );\n\n  const { state, pushState } = useBackofficeListUrlState(config);\n  const resolvedSort = state.sort ?? listDefaults.sort;\n  const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n\n  const buildVariables = useCallback(\n    (input: {\n      where: Record<string, unknown> | null;\n      sort: string | null;\n      count: number;\n      cursor: string | null;\n    }) => {\n      if (listConfig.buildVariables != null) {\n        return listConfig.buildVariables(input as never);\n      }\n      return input;\n    },\n    [listConfig],\n  );\n\n  const requestIdRef = useRef(0);\n  const lastRefetchKeyRef = useRef(\n    stableListVariablesKey({\n      where: listDefaults.where,\n      sort: listDefaults.sort,\n      count: pageSize,\n    }),\n  );\n\n  const runFetch = useCallback(\n    async (input: RecordFetchInput) => {\n      const requestId = requestIdRef.current + 1;\n      requestIdRef.current = requestId;\n\n      if (input.mode === 'append') {\n        setIsLoadingMore(true);\n      } else {\n        setIsRefreshing(true);\n      }\n\n      try {\n        const variables = buildVariables({\n          where: input.where,\n          sort: input.sort,\n          count: input.count,\n          cursor: input.cursor,\n        });\n\n        const response = await fetchQuery(\n          environment,\n          listConfig.query,\n          variables as never,\n          { fetchPolicy: RECORD_FETCH_POLICY },\n        ).toPromise();\n\n        if (response == null || requestIdRef.current !== requestId) {\n          return;\n        }\n\n        const nextRows = listConfig.getRows(response as never).map((row) => {\n          return listConfig.toRow(row);\n        });\n        setRows((prev) => {\n          if (input.mode === 'append') {\n            return [...prev, ...nextRows];\n          }\n          return nextRows;\n        });\n        const cursor = listConfig.getNextCursor?.(response as never) ?? null;\n        setNextCursor(cursor);\n      } finally {\n        if (input.mode === 'append') {\n          setIsLoadingMore(false);\n        } else {\n          setIsRefreshing(false);\n        }\n      }\n    },\n    [buildVariables, environment, listConfig],\n  );\n\n  useEffect(() => {\n    const key = stableListVariablesKey({\n      where: state.where,\n      sort: resolvedSort,\n      count: pageSize,\n    });\n    if (lastRefetchKeyRef.current === key) {\n      return;\n    }\n    lastRefetchKeyRef.current = key;\n    runFetch({\n      where: state.where,\n      sort: resolvedSort,\n      count: pageSize,\n      cursor: null,\n      mode: 'reset',\n    }).catch(() => {});\n  }, [pageSize, resolvedSort, runFetch, state.where]);\n\n  const handleRefresh = useCallback(() => {\n    if (isRefreshing) {\n      return;\n    }\n    runFetch({\n      where: state.where,\n      sort: resolvedSort,\n      count: pageSize,\n      cursor: null,\n      mode: 'reset',\n    }).catch(() => {});\n  }, [isRefreshing, pageSize, resolvedSort, runFetch, state.where]);\n\n  const handleLoadMore = useBackofficeLoadMore({\n    hasNext: nextCursor != null,\n    isLoadingNext: isLoadingMore,\n    loadNext: (count) => {\n      if (nextCursor == null) {\n        return;\n      }\n      runFetch({\n        where: state.where,\n        sort: resolvedSort,\n        count,\n        cursor: nextCursor,\n        mode: 'append',\n      }).catch(() => {});\n    },\n    count: pageSize,\n  });\n\n  const listActions = useMemo(() => {\n    return config.listActions ?? [];\n  }, [config.listActions]);\n  const visibleActions = useMemo(() => {\n    return listActions.filter((action) => {\n      if (action.isVisible == null) {\n        return true;\n      }\n      return action.isVisible(null);\n    });\n  }, [listActions]);\n\n  const headerActions = useMemo(() => {\n    if (visibleActions.length === 0) {\n      return undefined;\n    }\n    return (\n      <div className={pageStyles.headerActions}>\n        {visibleActions.map((action, index) => {\n          const { variant: actionVariant } = action;\n          const label = resolveLabel(action.label, tApp);\n          let ariaLabel = label;\n          if (action.ariaLabel != null) {\n            ariaLabel = resolveLabel(action.ariaLabel, tApp);\n          }\n          const variant = resolveActionVariant(actionVariant, index);\n          const size = action.size ?? 'small';\n          const isDisabled = action.isDisabled?.(null) === true;\n\n          if (isRouteAction(action)) {\n            const href = action.to(null);\n            return (\n              <LinkButton\n                key={action.id}\n                to={href}\n                variant={variant}\n                size={size}\n                isDisabled={isDisabled}\n                aria-label={ariaLabel}\n              >\n                {label}\n              </LinkButton>\n            );\n          }\n\n          if (isFormMutationAction(action)) {\n            return (\n              <Button\n                key={action.id}\n                type=\"button\"\n                variant={variant}\n                size={size}\n                disabled={isDisabled}\n                onClick={() => {\n                  setActiveFormActionId(action.id);\n                }}\n                aria-label={ariaLabel}\n              >\n                {label}\n              </Button>\n            );\n          }\n\n          return null;\n        })}\n      </div>\n    );\n  }, [tApp, visibleActions]);\n\n  const activeFormAction = listActions.find((action) => {\n    return action.id === activeFormActionId;\n  });\n\n  return (\n    <>\n      <BackofficeEntityListScaffold\n        config={config}\n        state={state}\n        pushState={pushState}\n        headerActions={headerActions}\n        rows={rows}\n        columns={columns}\n        gridTemplateColumns={gridTemplateColumns}\n        getRowId={getRowId}\n        hasNextPage={nextCursor != null}\n        isLoadingMore={isLoadingMore}\n        onLoadMore={handleLoadMore}\n        onRefresh={handleRefresh}\n        totalCount={null}\n      />\n      {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n        <LazyBackofficeEntityActionFormDialog\n          isOpen\n          action={activeFormAction}\n          node={null}\n          onClose={() => {\n            setActiveFormActionId(null);\n          }}\n          onSuccess={handleRefresh}\n        />\n      )}\n    </>\n  );\n};\n\nexport const BackofficeEntityListPage = ({\n  entityManifest,\n  config,\n  prepared,\n}: BackofficeEntityListPageProps): JSX.Element | null => {\n  const { t: tApp } = useTranslation();\n  const breadcrumb = buildEntityListBreadcrumb(config, tApp);\n\n  if (isRecordListConfig(config)) {\n    return (\n      <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n        <BackofficeEntityRecordListPage\n          entityManifest={entityManifest}\n          config={config}\n          prepared={prepared}\n        />\n      </BackofficeRightPageLayout>\n    );\n  }\n  const listConfig = config.list;\n  if (listConfig.kind === 'records') {\n    return null;\n  }\n\n  const { t } = useBackofficeReactTranslation();\n  const { entities } = useBackofficeConfig();\n  const [activeFormActionId, setActiveFormActionId] = useState<string | null>(\n    null,\n  );\n\n  const queryData = usePreloadedQuery(listConfig.query, prepared.query);\n  const {\n    data: fragmentData,\n    loadNext,\n    hasNext,\n    isLoadingNext,\n    refetch,\n  } = usePaginationFragment(listConfig.fragment, queryData as never);\n\n  const connection = listConfig.getConnection(fragmentData);\n\n  const rows = useMemo(() => {\n    return connection.edges.map((edge) => {\n      return listConfig.toRow(edge.node);\n    });\n  }, [connection.edges, listConfig]);\n\n  const { columns, gridTemplateColumns } = useMemo((): {\n    columns: readonly DataTableColumn<unknown>[];\n    gridTemplateColumns?: string;\n  } => {\n    const baseColumns = buildDataTableColumns(listConfig.columns, {\n      tApp,\n      t,\n      resolveEntityHref: (entityId, refId) => {\n        const entityManifest = entities[entityId];\n        if (entityManifest == null) {\n          return null;\n        }\n        return entityManifest.routes.detail(refId);\n      },\n    });\n    const actionsColumn = buildActionsColumn({\n      ariaLabel: t('actions.view'),\n      fallback: t('common.notAvailable'),\n      resolveDetailHref: (id) => {\n        return config.routes.detail(id);\n      },\n    });\n    const allColumns = [...baseColumns, actionsColumn];\n    return applyListEdgeColumns(allColumns, listConfig.rowFlags, 1, tApp);\n  }, [\n    config.routes,\n    listConfig.columns,\n    listConfig.rowFlags,\n    entities,\n    t,\n    tApp,\n  ]);\n\n  const getRowId = useCallback<GetRowId<unknown>>(\n    (row) => {\n      return listConfig.getRowId(row as never);\n    },\n    [listConfig],\n  );\n\n  const { state, pushState } = useBackofficeListUrlState(config);\n  const listDefaults = config.listDefaults ??\n    listConfig.defaultState ?? { where: null, sort: null };\n  const resolvedSort = state.sort ?? listDefaults.sort;\n  const { pageSize } = BACKOFFICE_LIST_DEFAULTS;\n\n  const baseVariables = useMemo(() => {\n    return {\n      where: state.where,\n      sort: resolvedSort,\n      count: pageSize,\n      cursor: null,\n    };\n  }, [pageSize, resolvedSort, state.where]);\n\n  const { onRefresh } = useBackofficeListRefetch({\n    refetch: refetch as never,\n    variables: baseVariables,\n    defaults: {\n      where: listDefaults.where,\n      sort: listDefaults.sort,\n      count: pageSize,\n      cursor: null,\n    },\n    fetchPolicy: BACKOFFICE_LIST_REFETCH_POLICY,\n    buildVariables: listConfig.buildVariables,\n  });\n\n  const handleLoadMore = useBackofficeLoadMore({\n    hasNext,\n    isLoadingNext,\n    loadNext,\n    count: pageSize,\n  });\n\n  const listActions = useMemo(() => {\n    return config.listActions ?? [];\n  }, [config.listActions]);\n  const visibleActions = useMemo(() => {\n    return listActions.filter((action) => {\n      if (action.isVisible == null) {\n        return true;\n      }\n      return action.isVisible(null);\n    });\n  }, [listActions]);\n\n  const headerActions = useMemo(() => {\n    if (visibleActions.length === 0) {\n      return undefined;\n    }\n    return (\n      <div className={pageStyles.headerActions}>\n        {visibleActions.map((action, index) => {\n          const { variant: actionVariant } = action;\n          const label = resolveLabel(action.label, tApp);\n          let ariaLabel = label;\n          if (action.ariaLabel != null) {\n            ariaLabel = resolveLabel(action.ariaLabel, tApp);\n          }\n          const variant = resolveActionVariant(actionVariant, index);\n          const size = action.size ?? 'small';\n          const isDisabled = action.isDisabled?.(null) === true;\n\n          if (isRouteAction(action)) {\n            const href = action.to(null);\n            return (\n              <LinkButton\n                key={action.id}\n                to={href}\n                variant={variant}\n                size={size}\n                isDisabled={isDisabled}\n                aria-label={ariaLabel}\n              >\n                {label}\n              </LinkButton>\n            );\n          }\n\n          if (isFormMutationAction(action)) {\n            return (\n              <Button\n                key={action.id}\n                type=\"button\"\n                variant={variant}\n                size={size}\n                disabled={isDisabled}\n                onClick={() => {\n                  setActiveFormActionId(action.id);\n                }}\n                aria-label={ariaLabel}\n              >\n                {label}\n              </Button>\n            );\n          }\n\n          return null;\n        })}\n      </div>\n    );\n  }, [tApp, visibleActions]);\n\n  const activeFormAction = listActions.find((action) => {\n    return action.id === activeFormActionId;\n  });\n\n  return (\n    <BackofficeRightPageLayout breadcrumb={breadcrumb}>\n      <BackofficeEntityListScaffold\n        config={config}\n        state={state}\n        pushState={pushState}\n        headerActions={headerActions}\n        rows={rows}\n        columns={columns}\n        gridTemplateColumns={gridTemplateColumns}\n        getRowId={getRowId}\n        hasNextPage={hasNext}\n        isLoadingMore={isLoadingNext}\n        onLoadMore={handleLoadMore}\n        onRefresh={onRefresh}\n        totalCount={connection.totalCount ?? null}\n      />\n      {activeFormAction != null && isFormMutationAction(activeFormAction) && (\n        <LazyBackofficeEntityActionFormDialog\n          isOpen\n          action={activeFormAction}\n          node={null}\n          onClose={() => {\n            setActiveFormActionId(null);\n          }}\n          onSuccess={onRefresh}\n        />\n      )}\n    </BackofficeRightPageLayout>\n  );\n};\n\nexport default BackofficeEntityListPage;\n"],"mappings":"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"}

package/lib/esm/BackofficeLayoutPage-k9OkLfXb.js

@@ -0,0 +1,485 @@
+import { i as e } from "./environment-BJeJTbIN.js";
+import { t } from "./useRelayEnvironment-vQ86aW-n.js";
+import { n } from "./sprinkles.css.ts.vanilla-n-NK_DwW.js";
+import { a as r, i, n as a, r as o, t as s } from "./sidebarUtils-CuwJ_3mD.js";
+import { n as c, t as l } from "./useBackofficeReactTranslation-WfXU8kCf.js";
+import { t as u } from "./BackofficeTopbarPortalContext-iD7dm4_h.js";
+import { t as d } from "./backofficeAuthPaths-BiJvoI5Q.js";
+import { Suspense as f, useCallback as p, useContext as m, useEffect as h, useMemo as g, useState as _ } from "react";
+import { useTranslation as v } from "react-i18next";
+import { RoutingContext as y, useLocation as b } from "@plumile/router";
+import { AdminShellLayout as x, BackofficeSidebarProfileMenu as S, Button as C, EnvironmentBadge as ee, GlobalSearchInput as w, GripDotsSvg as T, InlineBanner as E, PinFilledSvg as D, PinSvg as O, SidebarHomeSvg as k, SidebarTasksSvg as A, Skeleton as j, ToastProvider as M } from "@plumile/ui";
+import { commitMutation as te, usePreloadedQuery as N } from "react-relay";
+import { jsx as P, jsxs as F } from "react/jsx-runtime";
+//#region src/hooks/useBackofficeSidebarPins.ts
+var I = "backoffice.sidebar.pins.v1", L = (e) => {
+	if (typeof window > "u") return [];
+	try {
+		let t = window.localStorage.getItem(e);
+		if (t == null) return [];
+		let n = JSON.parse(t);
+		return Array.isArray(n) ? n.filter((e) => typeof e == "string") : [];
+	} catch {
+		return [];
+	}
+}, R = (e, t) => {
+	let n = [], r = /* @__PURE__ */ new Set();
+	return e.forEach((e) => {
+		t.has(e) && (r.has(e) || (r.add(e), n.push(e)));
+	}), n;
+}, ne = (e) => {
+	let { storageKey: t = I, visibleEntityIds: n } = e, r = g(() => new Set(n), [n]), [i, a] = _(() => R(L(t), r));
+	h(() => {
+		a((e) => {
+			let t = R(e, r);
+			if (t.length === e.length) {
+				let n = !0;
+				for (let r = 0; r < t.length; r += 1) if (t[r] !== e[r]) {
+					n = !1;
+					break;
+				}
+				if (n) return e;
+			}
+			return t;
+		});
+	}, [r]), h(() => {
+		a(R(L(t), r));
+	}, [t, r]), h(() => {
+		if (!(typeof window > "u")) try {
+			window.localStorage.setItem(t, JSON.stringify(i));
+		} catch {}
+	}, [i, t]);
+	let o = g(() => new Set(i), [i]), s = p((e) => {
+		r.has(e) && a((t) => t.includes(e) ? t : [...t, e]);
+	}, [r]), c = p((e) => {
+		a((t) => t.filter((t) => t !== e));
+	}, []), l = p((e) => {
+		o.has(e) ? c(e) : s(e);
+	}, [
+		s,
+		o,
+		c
+	]), u = p((e, t) => {
+		e !== t && a((n) => {
+			let r = n.indexOf(e), i = n.indexOf(t);
+			if (r === -1 || i === -1 || r === i) return n;
+			let a = [...n];
+			return a.splice(r, 1), a.splice(i, 0, e), a;
+		});
+	}, []);
+	return {
+		pins: i,
+		isPinned: p((e) => o.has(e), [o]),
+		pin: s,
+		unpin: c,
+		toggle: l,
+		reorder: u
+	};
+}, z = (e, t) => {
+	let n = {};
+	return e.forEach((e) => {
+		n[e] = !0;
+	}), t != null && e.includes(t) && (n[t] = !1), n;
+}, re = (e) => {
+	let { groupIds: t, activeGroupId: n } = e, r = g(() => [...t], [t]), [i, a] = _(() => z(r, n));
+	return h(() => {
+		a((e) => {
+			let t = {};
+			return r.forEach((n) => {
+				t[n] = e[n] ?? !0;
+			}), n != null && r.includes(n) && (t[n] = !1), t;
+		});
+	}, [n, r]), h(() => {
+		n != null && a((e) => e[n] === !1 ? e : {
+			...e,
+			[n]: !1
+		});
+	}, [n]), {
+		collapsedByGroupId: i,
+		setCollapsed: p((e, t) => {
+			a((n) => n[e] === t ? n : {
+				...n,
+				[e]: t
+			});
+		}, [])
+	};
+}, B = "_1xws1b01 _1xws1b00 vncd899jf vncd89co vncd89dnx vncd89two vncd89c66 vncd891rf vncd8912f vncd891px vncd89l9f vncd89uzj vncd89v8r vncd89v vncd8978 vncd896x vncd897k", V = (e, t) => e == null ? t ?? null : /* @__PURE__ */ P(e, {
+	width: 18,
+	height: 18,
+	"aria-hidden": "true"
+});
+function ie(e) {
+	let { basePath: t, pathname: n, entities: r, sidebar: c, permissions: l, searchQuery: u, tApp: d, t: f, pinnedEntityIds: p = [], onTogglePin: m, onReorderPin: h, collapsedByGroupId: g, onGroupCollapsedChange: _ } = e, v = i(r, c), y = Object.entries(v), b = new Set(p), x = f("sidebar.actions.pin"), S = f("sidebar.actions.unpin"), C = f("sidebar.actions.reorder"), ee = s(v), w = u?.trim().toLowerCase() ?? "", E = (e) => {
+		if (m == null) return null;
+		let t = b.has(e), n = x, r = O;
+		return t && (n = S, r = D), /* @__PURE__ */ P("button", {
+			type: "button",
+			className: B,
+			"aria-pressed": t,
+			"aria-label": n,
+			title: n,
+			onClick: (t) => {
+				t.preventDefault(), t.stopPropagation(), m(e);
+			},
+			children: /* @__PURE__ */ P(r, {
+				width: 14,
+				height: 14,
+				"aria-hidden": "true"
+			})
+		});
+	}, j = (e) => {
+		let { entityId: t, groupId: i, groupIcon: s, enableReorder: u } = e, f = r[t];
+		if (f == null) return null;
+		let p = {
+			kind: "entity",
+			id: t
+		};
+		if (f.kind === "tool" && (p = {
+			kind: "tool",
+			id: t
+		}), c?.isItemVisible?.(p, l) === !1) return null;
+		if (f.kind === "tool") {
+			let e = o(f.label, d);
+			return w !== "" && !e.toLowerCase().includes(w) ? null : {
+				id: `tool-${t}`,
+				data: {
+					kind: "tool",
+					id: t,
+					groupId: i
+				},
+				label: e,
+				href: f.routes.list,
+				icon: V(s, /* @__PURE__ */ P(A, {
+					width: 18,
+					height: 18,
+					"aria-hidden": "true"
+				})),
+				isActive: a(n, f.routes.list),
+				ariaLabel: e,
+				actionSlot: E(t)
+			};
+		}
+		if (!f.hasList) return null;
+		let m = o(f.label, d);
+		if (w !== "" && !m.toLowerCase().includes(w)) return null;
+		let g, _, v, y, b = !1;
+		u === !0 && h != null && (b = !0, g = /* @__PURE__ */ P(T, {
+			width: 14,
+			height: 14,
+			"aria-hidden": "true"
+		}), _ = (e) => {
+			let { dataTransfer: n } = e;
+			n.effectAllowed = "move", n.setData("text/plain", t);
+		}, v = (e) => {
+			e.preventDefault();
+			let { dataTransfer: t } = e;
+			t.dropEffect = "move";
+		}, y = (e) => {
+			e.preventDefault();
+			let n = e.dataTransfer.getData("text/plain");
+			n === "" || n === t || h(n, t);
+		});
+		let x;
+		return g != null && (x = C), {
+			id: t,
+			data: {
+				kind: "entity",
+				id: t,
+				groupId: i
+			},
+			label: m,
+			href: f.routes.list,
+			icon: V(s, /* @__PURE__ */ P(A, {
+				width: 18,
+				height: 18,
+				"aria-hidden": "true"
+			})),
+			isActive: a(n, f.routes.list),
+			ariaLabel: m,
+			actionSlot: E(t),
+			dragHandleSlot: g,
+			dragHandleLabel: x,
+			draggable: b,
+			onDragStart: _,
+			onDragOver: v,
+			onDrop: y
+		};
+	}, M = [];
+	if (p.length > 0) {
+		let e = p.map((e) => {
+			let t = ee.get(e);
+			return j({
+				entityId: e,
+				groupId: t?.groupId,
+				groupIcon: t?.icon,
+				enableReorder: !0
+			});
+		}).filter((e) => e != null);
+		e.length > 0 && M.push({
+			id: "pinned",
+			title: f("sidebar.sections.pinned"),
+			items: e,
+			collapsible: !1
+		});
+	}
+	return y.forEach(([e, r], i) => {
+		if (r.isVisible != null && !r.isVisible(l)) return;
+		let s = [];
+		if (i === 0 && c?.isItemVisible?.({
+			kind: "dashboard",
+			id: "dashboard"
+		}, l) !== !1) {
+			let r = f("sidebar.items.dashboard");
+			if (w !== "" && !r.toLowerCase().includes(w)) return;
+			s.push({
+				id: "dashboard",
+				data: {
+					kind: "dashboard",
+					id: "dashboard",
+					groupId: e
+				},
+				label: r,
+				href: t,
+				icon: V(void 0, /* @__PURE__ */ P(k, {
+					width: 18,
+					height: 18,
+					"aria-hidden": "true"
+				})),
+				isActive: a(n, t),
+				ariaLabel: f("sidebar.items.dashboard")
+			});
+		}
+		if (r.entities != null && r.entities.forEach((t) => {
+			let n = j({
+				entityId: t,
+				groupId: e,
+				groupIcon: r.icon
+			});
+			n != null && s.push(n);
+		}), s.length === 0) return;
+		let u;
+		r.title != null && (u = o(r.title, d));
+		let p = g?.[e], m;
+		_ != null && (m = (t) => {
+			_(e, t);
+		}), M.push({
+			id: e,
+			title: u,
+			items: s,
+			collapsible: !0,
+			defaultCollapsed: !0,
+			isCollapsed: p,
+			onCollapsedChange: m
+		});
+	}), M;
+}
+//#endregion
+//#region src/components/backoffice/routing/backofficeContentError.css.ts
+var H = "_1xfx8p60 vncd899io vncd89ai6 vncd89u6f", U = "_1xfx8p61 vncd89wx", W = (e) => {
+	if (e instanceof Error) {
+		let t = e.message.trim();
+		return t.length > 0 ? t : null;
+	}
+	if (typeof e == "string") {
+		let t = e.trim();
+		return t.length > 0 ? t : null;
+	}
+	return null;
+}, G = ({ error: e, onRetry: t }) => {
+	let { t: n } = l(), r = W(e);
+	return /* @__PURE__ */ P("div", {
+		className: H,
+		role: "alert",
+		children: /* @__PURE__ */ P(E, {
+			tone: "danger",
+			className: U,
+			actions: /* @__PURE__ */ P(C, {
+				type: "button",
+				variant: "secondary",
+				size: "small",
+				onClick: t,
+				children: n("common.actions.retry")
+			}),
+			children: r
+		})
+	});
+}, K = "_1f7vqmu0 vncd899io vncd89ai6 vncd89aoo vncd89u6f vncd89jr6", q = "_1f7vqmu1 vncd89jef", J = "_1f7vqmu2 vncd899ix vncd89aoo vncd89c0o", Y = "_1f7vqmu3 vncd899io vncd89ai6 vncd89aof vncd89laf vncd89jmx vncd891rx vncd891co vncd891qf vncd89wo vncd89v2v", X = () => /* @__PURE__ */ F("div", {
+	className: K,
+	role: "status",
+	"aria-live": "polite",
+	"aria-busy": "true",
+	children: [
+		/* @__PURE__ */ P(j, {
+			variant: "text",
+			width: "38%",
+			className: q
+		}),
+		/* @__PURE__ */ P(j, {
+			variant: "text",
+			width: "62%"
+		}),
+		/* @__PURE__ */ P("div", {
+			className: J,
+			children: Array.from({ length: 4 }, (e, t) => /* @__PURE__ */ F("div", {
+				className: Y,
+				children: [
+					/* @__PURE__ */ P(j, {
+						variant: "text",
+						width: "46%"
+					}),
+					/* @__PURE__ */ P(j, {
+						variant: "text",
+						width: "82%",
+						lines: 2
+					}),
+					/* @__PURE__ */ P(j, {
+						variant: "block",
+						width: "100%",
+						height: 120
+					})
+				]
+			}, `content-skeleton-${t}`))
+		})
+	]
+}), Z = "_2w9m800 vncd899io vncd89ai6 vncd89jr6 vncd89u6f vncd89k4x", ae = ({ children: e }) => /* @__PURE__ */ P("div", {
+	className: Z,
+	children: /* @__PURE__ */ P(c, {
+		fallback: ({ error: e, reset: t }) => /* @__PURE__ */ P(G, {
+			error: e,
+			onRetry: t
+		}),
+		children: /* @__PURE__ */ P(f, {
+			fallback: /* @__PURE__ */ P(X, {}),
+			children: e
+		})
+	})
+}), Q = (e) => e?.trim() ?? "", oe = ({ viewer: e, unknownUserLabel: t }) => {
+	let n = [Q(e?.firstName), Q(e?.lastName)].filter((e) => e !== "").join(" ").trim();
+	n === "" && (n = t);
+	let r = Q(e?.email), i = Q(e?.initials);
+	i === "" && (i = "?");
+	let a = [n];
+	return r !== "" && a.push(r), {
+		displayName: n,
+		email: r,
+		initials: i,
+		ariaLabel: a.join(" - ")
+	};
+}, $ = ({ children: a, permissions: o, authStatus: s, activeGroupId: c }) => {
+	let { t: f } = v(), { t: h } = l(), { pathname: C } = b(), T = m(y), E = t(), { auth: D, basePath: O, entities: k, sidebar: A } = n(), [j, N] = _(""), [F, I] = _(!1), [L, R] = _(!1), [z, B] = _(null), V = g(() => i(k, A), [k, A]), H = g(() => Object.keys(V), [V]), { pins: U, toggle: W, reorder: G } = ne({ visibleEntityIds: g(() => r(V, k, A, o), [
+		k,
+		V,
+		o,
+		A
+	]) }), { collapsedByGroupId: K, setCollapsed: q } = re({
+		groupIds: H,
+		activeGroupId: c
+	}), J = g(() => ie({
+		basePath: O,
+		pathname: C,
+		entities: k,
+		sidebar: A,
+		permissions: o,
+		searchQuery: j,
+		tApp: f,
+		t: h,
+		pinnedEntityIds: U,
+		onTogglePin: W,
+		onReorderPin: G,
+		collapsedByGroupId: K,
+		onGroupCollapsedChange: q
+	}), [
+		O,
+		K,
+		k,
+		C,
+		o,
+		U,
+		G,
+		q,
+		A,
+		j,
+		h,
+		f,
+		W
+	]), Y = g(() => import.meta.env?.DEV === !0 ? "dev" : "prod", []), X = p(() => {
+		L || (R(!0), (async () => {
+			try {
+				let t = await D.logout.load();
+				await new Promise((e, n) => {
+					te(E, {
+						mutation: t.logoutMutation,
+						variables: {},
+						onCompleted: () => {
+							e();
+						},
+						onError: (e) => {
+							n(e);
+						}
+					});
+				}), localStorage.removeItem("auth_token"), localStorage.removeItem("remember_me"), e(), T?.history.push({ pathname: d(O) });
+			} finally {
+				R(!1);
+			}
+		})().catch(() => {}));
+	}, [
+		D.logout,
+		O,
+		L,
+		E,
+		T
+	]), Z = s?.me ?? null, Q = /* @__PURE__ */ P(S, {
+		collapsed: F,
+		viewer: g(() => oe({
+			viewer: Z,
+			unknownUserLabel: h("sidebar.profile.unknownUser")
+		}), [h, Z]),
+		labels: {
+			sectionTitle: h("sidebar.profile.title"),
+			menuAriaLabel: h("sidebar.profile.menuAriaLabel"),
+			signOut: h("sidebar.profile.actions.signOut")
+		},
+		onSignOut: X,
+		isSigningOut: L
+	}), $ = null;
+	return z != null && ($ = /* @__PURE__ */ P(ae, { children: a })), /* @__PURE__ */ P(M, { children: /* @__PURE__ */ P(x, {
+		sidebar: {
+			sections: J,
+			header: /* @__PURE__ */ P(ee, { environment: Y }),
+			search: /* @__PURE__ */ P(w, {
+				value: j,
+				onChange: N,
+				placeholder: h("sidebar.search.placeholder"),
+				ariaLabel: h("sidebar.search.placeholder")
+			}),
+			footer: Q,
+			isCollapsed: F,
+			onCollapsedChange: I
+		},
+		topbar: { breadcrumb: /* @__PURE__ */ P("div", { ref: B }) },
+		children: /* @__PURE__ */ P(u, {
+			value: { target: z },
+			children: $
+		})
+	}) });
+}, se = ({ children: e, permissionsQuery: t, prepared: n, authStatus: r, activeGroupId: i }) => /* @__PURE__ */ P($, {
+	permissions: N(t, n),
+	authStatus: r,
+	activeGroupId: i,
+	children: e
+}), ce = ({ children: e, permissionsQuery: t, prepared: n, authStatus: r, activeGroupId: i }) => t != null && n != null ? /* @__PURE__ */ P(se, {
+	permissionsQuery: t,
+	prepared: n,
+	authStatus: r,
+	activeGroupId: i,
+	children: e
+}) : /* @__PURE__ */ P($, {
+	permissions: null,
+	authStatus: r,
+	activeGroupId: i,
+	children: e
+});
+//#endregion
+export { ce as BackofficeLayoutPage, ce as default };
+
+//# sourceMappingURL=BackofficeLayoutPage-k9OkLfXb.js.map