diff --git a/packages/react-sdk-components/src/components/infra/View/View.tsx b/packages/react-sdk-components/src/components/infra/View/View.tsx index d89f5773..9b66a6ef 100644 --- a/packages/react-sdk-components/src/components/infra/View/View.tsx +++ b/packages/react-sdk-components/src/components/infra/View/View.tsx @@ -38,7 +38,8 @@ const NO_HEADER_TEMPLATES = [ 'WideNarrowDetails', 'Confirmation', 'DynamicTabs', - 'DetailsSubTabs' + 'DetailsSubTabs', + 'ListView' ]; export default function View(props: PropsWithChildren) { diff --git a/packages/react-sdk-components/src/components/template/ListView/ListView.tsx b/packages/react-sdk-components/src/components/template/ListView/ListView.tsx index fcef3739..5a606bd0 100644 --- a/packages/react-sdk-components/src/components/template/ListView/ListView.tsx +++ b/packages/react-sdk-components/src/components/template/ListView/ListView.tsx @@ -157,10 +157,9 @@ export default function ListView(props: ListViewProps) { width: '100%', marginTop: theme.spacing(2), marginBottom: theme.spacing(2), - display: 'grid' - }, - search: { - padding: '5px 5px' + display: 'grid', + borderRadius: 16, + padding: 20 }, table: { minWidth: 750 @@ -189,10 +188,6 @@ export default function ListView(props: ListViewProps) { position: 'absolute', top: 20, width: 1 - }, - title: { - marginTop: theme.spacing(1), - marginLeft: theme.spacing(1) } }) ); @@ -1065,162 +1060,162 @@ export default function ListView(props: ListViewProps) { <> {arColumns && arColumns.length > 0 && ( - - {_listTitle()} - - {globalSearch && ( - - - - - - + + + {_listTitle()} + + {globalSearch && ( + + + + + + + - - )} - <> - {!bInForm ? ( - - - - - {arColumns.map(column => { + )} + + {!bInForm ? ( + +
+ + + {arColumns.map(column => { + return ( + + + {column.label} + {_showFilteredIcon(column.id) && } + {orderBy === column.id ? ( + {order === 'desc' ? 'sorted descending' : 'sorted ascending'} + ) : null} + + { + _menuClick(event, column.id, column.type, column.label); + }} + /> + + ); + })} + + + + {arRows && + stableSort(arRows, getComparator(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map(row => { return ( - - - {column.label} - {_showFilteredIcon(column.id) && } - {orderBy === column.id ? ( - {order === 'desc' ? 'sorted descending' : 'sorted ascending'} - ) : null} - - { - _menuClick(event, column.id, column.type, column.label); - }} - /> - + + {arColumns.map(column => { + const value = row[column.id]; + return ( + + {_showButton(column.id, row) || column.displayAsLink ? ( + { + _listViewClick(row, column); + }} + underline='hover' + > + {column.format && typeof value === 'number' ? column.format(value) : value} + + ) : ( + <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'} + )} + + ); + })} + ); })} - - - - {arRows && - stableSort(arRows, getComparator(order, orderBy)) - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map(row => { - return ( - - {arColumns.map(column => { - const value = row[column.id]; - return ( - - {_showButton(column.id, row) || column.displayAsLink ? ( - { - _listViewClick(row, column); - }} - underline='hover' - > - {column.format && typeof value === 'number' ? column.format(value) : value} - - ) : ( - <>{column.format && typeof value === 'number' ? column.format(value) : value || '---'} - )} - - ); - })} - - ); - })} - -
-
- ) : ( - - - - - {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && } - {arColumns.map(column => { + +
+
+ ) : ( + + + + + {(selectionMode === SELECTION_MODE.SINGLE || selectionMode === SELECTION_MODE.MULTI) && } + {arColumns.map(column => { + return ( + + + {column.label} + {orderBy === column.id ? ( + {order === 'desc' ? 'sorted descending' : 'sorted ascending'} + ) : null} + + + ); + })} + + + + {arRows && + arRows.length > 0 && + stableSort(arRows, getComparator(order, orderBy)) + .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) + .map(row => { return ( - - - {column.label} - {orderBy === column.id ? ( - {order === 'desc' ? 'sorted descending' : 'sorted ascending'} - ) : null} - - + + {selectionMode === SELECTION_MODE.SINGLE && ( + + + + )} + {selectionMode === SELECTION_MODE.MULTI && ( + + selectedValue[rowID] === row[rowID])} + value={row[rowID]} + /> + + )} + {arColumns.map(column => { + const value = row[column.id]; + return ( + + {processColumnValue(column, value)} + + ); + })} + ); })} - - - - {arRows && - arRows.length > 0 && - stableSort(arRows, getComparator(order, orderBy)) - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map(row => { - return ( - - {selectionMode === SELECTION_MODE.SINGLE && ( - - - - )} - {selectionMode === SELECTION_MODE.MULTI && ( - - selectedValue[rowID] === row[rowID])} - value={row[rowID]} - /> - - )} - {arColumns.map(column => { - const value = row[column.id]; - return ( - - {processColumnValue(column, value)} - - ); - })} - - ); - })} - -
- {(!arRows || arRows.length === 0) && ( -
{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}
- )} -
- )} - + + + {(!arRows || arRows.length === 0) && ( +
{getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.')}
+ )} + + )} {arRows && arRows.length > 0 && ( ({ marginBottom: theme.spacing(1), paddingBottom: theme.spacing(1), borderLeft: '6px solid', - borderLeftColor: theme.palette.primary.light + borderLeftColor: theme.palette.primary.light, + borderRadius: 16 }, avatar: { backgroundColor: theme.palette.primary.light,