@nixxie-cms/core 1.0.0

package/src/fields/types/relationship/views/ContextualActions.tsx

@@ -0,0 +1,139 @@
+import { type Key, type PropsWithChildren, useMemo } from 'react'
+
+import { Icon } from '@keystar/ui/icon'
+import { arrowUpRightIcon } from '@keystar/ui/icon/icons/arrowUpRightIcon'
+import { plusIcon } from '@keystar/ui/icon/icons/plusIcon'
+import { Grid } from '@keystar/ui/layout'
+import { ActionMenu, Item } from '@keystar/ui/menu'
+import { Text } from '@keystar/ui/typography'
+
+import { useList } from '../../../../admin-ui/context'
+import type { FieldProps, ListMeta } from '../../../../types'
+import type { RelationshipController } from './types'
+import { ActionButton } from '@keystar/ui/button'
+import { Tooltip, TooltipTrigger } from '@keystar/ui/tooltip'
+
+type RelationshipProps = {
+  onAdd: () => void
+} & FieldProps<() => RelationshipController>
+
+export function ContextualActions(props: PropsWithChildren<RelationshipProps>) {
+  const { children, ...otherProps } = props
+  return (
+    <Grid gap="regular" alignItems="end" columns="minmax(0, 1fr) auto">
+      {children}
+      <ContextualActionsMenu {...otherProps} />
+    </Grid>
+  )
+}
+
+function ContextualActionsMenu(props: RelationshipProps) {
+  const { field, onAdd, onChange } = props
+
+  const foreignList = useList(field.refListKey)
+  const relatedItemHref = useRelatedItemHref(props)
+  const relatedItemLabel = useRelatedItemLabel(field)
+  const allowAdd = !field.hideCreate && !!onChange
+  const items = useMemo(() => {
+    const result = []
+    if (allowAdd) {
+      result.push({
+        icon: plusIcon,
+        key: 'add',
+        label: `Add ${foreignList.singular.toLocaleLowerCase()}`,
+      })
+    }
+
+    result.push({
+      key: 'view',
+      icon: arrowUpRightIcon,
+      href: relatedItemHref,
+      label: relatedItemLabel,
+    })
+
+    return result
+  }, [allowAdd, foreignList, relatedItemHref, relatedItemLabel])
+
+  const onAction = (key: Key) => {
+    switch (key) {
+      case 'add': {
+        onAdd()
+        break
+      }
+    }
+  }
+
+  // we don't want to change the presence or lack thereof of a selected value
+  // but since `allowAdd` is based on config, it's fairly static and showing
+  // a menu when the menu will only have one item is quite silly
+  if (!allowAdd) {
+    return (
+      <TooltipTrigger>
+        <ActionButton {...(relatedItemHref ? { href: relatedItemHref } : { isDisabled: true })}>
+          <Icon src={arrowUpRightIcon} />
+        </ActionButton>
+        <Tooltip>{relatedItemLabel}</Tooltip>
+      </TooltipTrigger>
+    )
+  }
+
+  return (
+    <ActionMenu
+      aria-label={`Actions for ${field.label}`}
+      direction="bottom"
+      align="end"
+      isDisabled={items.length === 0}
+      disabledKeys={relatedItemHref === null ? ['view'] : []}
+      items={items}
+      onAction={onAction}
+    >
+      {item => (
+        <Item key={item.key} href={item.href ?? undefined} textValue={item.label}>
+          <Icon src={item.icon} />
+          <Text>{item.label}</Text>
+        </Item>
+      )}
+    </ActionMenu>
+  )
+}
+
+export function useRelatedItemLabel(field: RelationshipController) {
+  const foreignList = useList(field.refListKey)
+  if (field.many) {
+    return `View related ${foreignList.plural.toLocaleLowerCase()}`
+  }
+  return `View ${foreignList.singular.toLocaleLowerCase()}`
+}
+
+export function useRelatedItemHref({
+  field,
+  value,
+}: Pick<FieldProps<() => RelationshipController>, 'field' | 'value'>) {
+  const foreignList = useList(field.refListKey)
+  if (value.kind === 'one') {
+    if (!value.value) return null
+    // the related item isn't actually created yet so we can't view it
+    if (value.value.built) return null
+
+    return `/${foreignList.path}/${value.value.id}`
+  }
+  let query: string | undefined
+  if (field.refFieldKey && value.id !== null) {
+    query = buildQueryForRelationshipFieldWithForeignField(foreignList, field.refFieldKey, value.id)
+  } else if (value.kind === 'many' && value.value.length > 0) {
+    query = `!id_in=${JSON.stringify(value.value.map(x => x.id))}`
+  }
+  if (query === undefined) return null
+
+  return `/${foreignList.path}?${query}`
+}
+
+export function buildQueryForRelationshipFieldWithForeignField(
+  foreignList: ListMeta,
+  refFieldKey: string,
+  localId: string
+) {
+  const foreignField = foreignList.fields[refFieldKey]
+  const foreignMany: boolean = (foreignField.fieldMeta as any).many
+  return `filter=${refFieldKey}_${foreignMany ? 'some' : 'is'}_${JSON.stringify(foreignMany ? [localId] : localId)}`
+}

package/src/fields/types/relationship/views/RelationshipTable.tsx

@@ -0,0 +1,190 @@
+import { useMemo, useState } from 'react'
+import type { SortDescriptor } from '@keystar/ui/table'
+import { Cell, Column, Row, TableBody, TableHeader, TableView } from '@keystar/ui/table'
+import { Field as KeystarField } from '@keystar/ui/field'
+import { useList } from '../../../../admin-ui/context'
+import type { controller } from '.'
+import { textSelectIcon } from '@keystar/ui/icon/icons/textSelectIcon'
+import { EmptyState } from '../../../../admin-ui/components/EmptyState'
+import { gql, type TypedDocumentNode, useQuery } from '../../../../admin-ui/apollo'
+import { Text } from '@keystar/ui/typography'
+import { GraphQLErrorNotice } from '../../../../admin-ui/components'
+import { PaginationControls } from '../../../../___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/PaginationControls'
+import type { CountRelationshipValue } from './types'
+import { useRelatedItemHref, useRelatedItemLabel } from './ContextualActions'
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { arrowUpRightIcon } from '@keystar/ui/icon/icons/arrowUpRightIcon'
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { ProgressCircle } from '@keystar/ui/progress'
+
+export function RelationshipTable({
+  field,
+  value,
+}: {
+  field: ReturnType<typeof controller>
+  value: CountRelationshipValue
+}) {
+  if (!field.refFieldKey) {
+    throw new Error('refFieldKey is required for displayMode: table')
+  }
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize, setPageSize] = useState(50)
+  const list = useList(field.refListKey)
+  const hasManyOnRefList: boolean = (list.fields[field.refFieldKey].controller as any).many
+
+  const selectedFields = field.columns ?? list.initialColumns
+  const columns = useMemo(() => {
+    return selectedFields.map(path => {
+      const field = list.fields[path]
+      return {
+        id: path,
+        label: field.label,
+        allowsSorting: field.isOrderable,
+      }
+    })
+  }, [selectedFields, list])
+
+  const [sort, setSort] = useState<SortDescriptor>(() => {
+    if (field.initialSort) {
+      return {
+        column: field.initialSort.field,
+        direction: field.initialSort.direction === 'ASC' ? 'ascending' : 'descending',
+      }
+    }
+    return { column: 'id', direction: 'ascending' }
+  })
+
+  const { data, error, loading } = useQuery(
+    useMemo(() => {
+      const selectedGqlFields = [...selectedFields]
+        .map(fieldPath => list.fields[fieldPath].controller.graphqlSelection)
+        .join('\n')
+
+      // TODO: FIXME: this is bad
+      return gql`
+          query (
+            $where: ${list.graphql.names.whereInputName},
+            $take: Int!,
+            $skip: Int!,
+            $orderBy: [${list.graphql.names.listOrderName}!]
+          ) {
+            items: ${list.graphql.names.listQueryName}(
+              where: $where,
+              take: $take,
+              skip: $skip,
+              orderBy: $orderBy
+            ) {
+              ${selectedFields.includes('id') ? '' : 'id'}
+              ${selectedGqlFields}
+            }
+          }
+        ` as TypedDocumentNode<
+        { items: Record<string, unknown>[] },
+        {
+          where: Record<string, any>
+          take: number
+          skip: number
+          orderBy: { [key: string]: 'asc' | 'desc' }[]
+        }
+      >
+    }, [list, selectedFields]),
+    {
+      fetchPolicy: 'cache-and-network',
+      errorPolicy: 'all',
+      variables: {
+        where: {
+          [field.refFieldKey]: hasManyOnRefList
+            ? { some: { id: { equals: value.id } } }
+            : { id: { equals: value.id } },
+        },
+        take: pageSize,
+        skip: (currentPage - 1) * pageSize,
+        orderBy: [
+          { [sort.column]: sort.direction === 'ascending' ? ('asc' as const) : ('desc' as const) },
+        ],
+      },
+    }
+  )
+  const relatedItemLabel = useRelatedItemLabel(field)
+  const relatedItemHref = useRelatedItemHref({ field, value })
+  const items: Record<string, unknown>[] = data?.items ?? []
+  return (
+    <KeystarField label={field.label} description={field.description}>
+      {inputProps => (
+        <>
+          <TableView
+            {...inputProps}
+            selectionMode="none"
+            onSortChange={sort => setSort(sort)}
+            sortDescriptor={sort}
+            density="compact"
+            UNSAFE_style={{ minHeight: 29 * 10, maxHeight: 29 * 10 }}
+            overflowMode="truncate"
+            renderEmptyState={() =>
+              loading ? (
+                <ProgressCircle isIndeterminate />
+              ) : error ? (
+                <GraphQLErrorNotice errors={[error]} />
+              ) : (
+                <EmptyState
+                  icon={textSelectIcon}
+                  title="Empty related items"
+                  message="There are no related items."
+                />
+              )
+            }
+            flex
+          >
+            <TableHeader columns={columns}>
+              {({ label, id, ...options }) => (
+                <Column key={id} isRowHeader {...options}>
+                  {label}
+                </Column>
+              )}
+            </TableHeader>
+            <TableBody items={items}>
+              {row => {
+                return (
+                  <Row href={`/${list.path}/${row?.id}`}>
+                    {key => {
+                      const field = list.fields[key]
+                      const value = row[key]
+                      const CellContent = field.views.Cell
+                      return (
+                        <Cell>
+                          {CellContent ? (
+                            <CellContent value={value} field={field.controller} item={row} />
+                          ) : (
+                            <Text>{value?.toString()}</Text>
+                          )}
+                        </Cell>
+                      )
+                    }}
+                  </Row>
+                )
+              }}
+            </TableBody>
+          </TableView>
+          <PaginationControls
+            currentPage={currentPage}
+            pageSize={pageSize}
+            plural={list.plural}
+            singular={list.singular}
+            total={value.count}
+            onChangePage={page => setCurrentPage(page)}
+            onChangePageSize={size => setPageSize(size)}
+            extraActions={
+              <TooltipTrigger>
+                <ActionButton href={relatedItemHref!}>
+                  <Icon src={arrowUpRightIcon} />
+                </ActionButton>
+                <Tooltip>{relatedItemLabel}</Tooltip>
+              </TooltipTrigger>
+            }
+          />
+        </>
+      )}
+    </KeystarField>
+  )
+}