Fix list filter default values and error state

This commit is contained in:
Infinite
2020-03-01 18:28:38 +01:00
parent 429df84479
commit 85936edb9c
4 changed files with 37 additions and 44 deletions

View File

@@ -75,14 +75,13 @@ export const AddFilter: React.FC<IAddFilterProps> = (
} }
function onAddFilter() { function onAddFilter() {
if (!Array.isArray(criterion.value) && defaultValue.current) { if (!Array.isArray(criterion.value) && defaultValue.current !== undefined) {
const value = defaultValue.current; const value = defaultValue.current;
if ( if (
criterion.options && criterion.options &&
!Array.isArray(criterion.options) &&
(value === undefined || value === "" || typeof value === "number") (value === undefined || value === "" || typeof value === "number")
) { ) {
criterion.value = criterion.options[0]; criterion.value = criterion.options[0].toString();
} else if (typeof value === "number" && value === undefined) { } else if (typeof value === "number" && value === undefined) {
criterion.value = 0; criterion.value = 0;
} else if (value === undefined) { } else if (value === undefined) {
@@ -191,7 +190,7 @@ export const AddFilter: React.FC<IAddFilterProps> = (
type={criterion.inputType} type={criterion.inputType}
onChange={onChangedInput} onChange={onChangedInput}
onBlur={onBlurInput} onBlur={onBlurInput}
value={criterion.value.toString()} defaultValue={criterion.value ? criterion.value.toString() : ''}
/> />
); );
} }

View File

@@ -342,42 +342,37 @@ const useList = <QueryResult extends IQueryResult, QueryData extends IDataItem>(
}) })
: undefined; : undefined;
let template; const template = (
if (result.loading || !forageInitialised) { <div>
template = <LoadingIndicator />; <ListFilter
} else if (result.error) { onChangePageSize={onChangePageSize}
template = <h1>{result.error.message}</h1>; onChangeQuery={onChangeQuery}
} else { onChangeSortDirection={onChangeSortDirection}
template = ( onChangeSortBy={onChangeSortBy}
<div> onChangeDisplayMode={onChangeDisplayMode}
<ListFilter onAddCriterion={onAddCriterion}
onChangePageSize={onChangePageSize} onRemoveCriterion={onRemoveCriterion}
onChangeQuery={onChangeQuery} onSelectAll={onSelectAll}
onChangeSortDirection={onChangeSortDirection} onSelectNone={onSelectNone}
onChangeSortBy={onChangeSortBy} zoomIndex={options.zoomable ? zoomIndex : undefined}
onChangeDisplayMode={onChangeDisplayMode} onChangeZoom={options.zoomable ? onChangeZoom : undefined}
onAddCriterion={onAddCriterion} otherOperations={otherOperations}
onRemoveCriterion={onRemoveCriterion} filter={filter}
onSelectAll={onSelectAll} />
onSelectNone={onSelectNone} {options.renderSelectedOptions && selectedIds.size > 0
zoomIndex={options.zoomable ? zoomIndex : undefined} ? options.renderSelectedOptions(result, selectedIds)
onChangeZoom={options.zoomable ? onChangeZoom : undefined} : undefined}
otherOperations={otherOperations} {options.renderContent(result, filter, selectedIds, zoomIndex)}
filter={filter} { (result.loading || !forageInitialised) && <LoadingIndicator /> }
/> { result.error && <h1>{result.error.message}</h1> }
{options.renderSelectedOptions && selectedIds.size > 0 <Pagination
? options.renderSelectedOptions(result, selectedIds) itemsPerPage={filter.itemsPerPage}
: undefined} currentPage={filter.currentPage}
{options.renderContent(result, filter, selectedIds, zoomIndex)} totalItems={totalCount}
<Pagination onChangePage={onChangePage}
itemsPerPage={filter.itemsPerPage} />
currentPage={filter.currentPage} </div>
totalItems={totalCount} );
onChangePage={onChangePage}
/>
</div>
);
}
return { filter, template, onSelectChange }; return { filter, template, onSelectChange };
}; };

View File

@@ -35,7 +35,7 @@ code {
.table-list td, .table-list td,
.table-list th { .table-list th {
border-left: 1px solid rgba(255, 255, 255, .15); border-left: 1px solid #414c53;
font-size: 1rem; font-size: 1rem;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;

View File

@@ -110,8 +110,7 @@ hr {
thead { thead {
th { th {
border-bottom: 1px solid rgba(255, 255, 255, .15); border-bottom: 1px solid #414c53;
border-color: rgba(255, 255, 255, .15);
border-right: none; border-right: none;
border-top: none; border-top: none;
} }
@@ -119,7 +118,7 @@ hr {
td { td {
border: none; border: none;
border-color: rgba(255, 255, 255, .15); border-color: #414c53;
padding: .25rem .75rem; padding: .25rem .75rem;
&:first-child { &:first-child {