gcg/static-cms
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: use field label in table view if possible

Browse Source
This commit is contained in:
Daniel Lautzenheiser 2023-04-12 20:04:41 -04:00
parent 8be6117861
commit 1849729bab
2 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/core/src/components/collections/entries/EntryListing.tsx
View File

@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
import { Waypoint } from 'react-waypoint';
import { selectFields, selectInferredField } from '@staticcms/core/lib/util/collection.util';
import { toTitleCaseFromKey } from '@staticcms/core/lib/util/string.util';
import Table from '../../common/table/Table';
import EntryCard from './EntryCard';
@ -122,18 +123,27 @@ const EntryListing = ({
const summaryFieldHeaders = useMemo(() => {
if ('collection' in otherProps) {
return selectFields(otherProps.collection).map(f => f.label ?? f.name);
const collectionFields = selectFields(otherProps.collection).reduce((acc, f) => {
acc[f.name] = f;
return acc;
}, {} as Record<string, Field>);
return summaryFields.map(summaryField => {
const field = collectionFields[summaryField];
return !field
? toTitleCaseFromKey(summaryField)
: field.label ?? toTitleCaseFromKey(field.name);
});
}
return [];
}, [otherProps]);
}, [otherProps, summaryFields]);
if (viewStyle === 'VIEW_STYLE_LIST') {
return (
<>
<Table
columns={
!isSingleCollectionInList ? ['Collection', ...summaryFieldHeaders] : summaryFields
!isSingleCollectionInList ? ['Collection', ...summaryFieldHeaders] : summaryFieldHeaders
}
>
{renderedCards}

2
packages/core/src/components/common/table/Table.tsx
View File

@ -13,7 +13,7 @@ const TableCell = ({ columns, children }: TableCellProps) => {
return (
<div className="relative overflow-x-auto shadow-md sm:rounded-lg border border-slate-200 dark:border-gray-700">
<table className="w-full text-sm text-left text-gray-500 dark:text-gray-300 ">
<thead className="text-xs text-gray-700 uppercase bg-slate-50 dark:bg-slate-700 dark:text-gray-300">
<thead className="text-xs text-gray-700 bg-slate-50 dark:bg-slate-700 dark:text-gray-300">
<tr>
{columns.map((column, index) => (
<TableHeaderCell key={index}>{column}</TableHeaderCell>