diff --git a/src/modules/admin/view/style/antd.less b/src/modules/admin/view/style/antd.less index f9e4a16..3505504 100644 --- a/src/modules/admin/view/style/antd.less +++ b/src/modules/admin/view/style/antd.less @@ -15,7 +15,7 @@ @notification-bg: transparent; @layout-body-background: transparent; -@btn-default-bg: #263238; +@btn-default-bg: #25272b; .ant-notification > div { @apply bg-midnight-800; diff --git a/src/modules/content/component/grid.component.tsx b/src/modules/content/component/grid.component.tsx index ef93ca0..dd5793b 100644 --- a/src/modules/content/component/grid.component.tsx +++ b/src/modules/content/component/grid.component.tsx @@ -62,8 +62,8 @@ export default function GridComponent({ setTriggerShowCreate, }: Props) { // Global state - const httpClient = useHttpClientSimple(); - const [browserParams, setBrowserParams] = useSearchParams(); + const client = useHttpClientSimple(); + const [searchParams, setSearchParams] = useSearchParams(); const [schemas, setSchemas] = useRecoilState(schemasAtom); const [apiUrl, setApiUrl] = useState(null); @@ -82,11 +82,11 @@ export default function GridComponent({ // Grid content state const [rows, setRows] = useState([]); const [sorters, setSorters] = useState<[string, 'asc' | 'desc'][]>([]); - const [loading, setLoading] = useState(true); + const [isLoading, setIsLoading] = useState(true); const [refetch, doRefetch] = useState(() => Date.now()); const [fields, setFields] = useState([]); const [selected, setSelected] = useState([]); - const [selectedKey, setSelectedKey] = useState([]); + const [selectedRowKeys, setSelectedRowKeys] = useState([]); const [filter, setFilter] = useState(null); // Auto refresh @@ -103,10 +103,10 @@ export default function GridComponent({ }, [triggerShowCreate]); useEffect(() => { - if (browserParams.has('page')) { - setPageCurr(parseInt(browserParams.get('page'), 10)); + if (searchParams.has('page')) { + setPageCurr(parseInt(searchParams.get('page'), 10)); } - }, [browserParams]); + }, [searchParams]); useEffect(() => { if (refreshTimer) { @@ -128,24 +128,17 @@ export default function GridComponent({ // Reset states useEffect(() => { + setFields(cloneDeep(schema).fields.sort(GridTools.sortFields)); setFilter(null); setShowFilter(false); setSorters([]); setSelected([]); + setRows([]); setFieldWidth(schema.fields.map(f => [f.reference, 280])); - - return () => { - setFilter(null); - setShowFilter(false); - setSorters([]); - setSelected([]); - }; }, [schema]); useEffect(() => { - const _fields = cloneDeep(schema).fields; - let apiUrl = toRestRoute(schema, qb => { // Pagination limit qb.top(pageSize); @@ -154,14 +147,14 @@ export default function GridComponent({ qb.skip(pageCurr * pageSize - pageSize); // Sync with the pagination param - browserParams.set('page', pageCurr.toString()); + searchParams.set('page', pageCurr.toString()); } if (sorters) { const orderBy = sorters // Remove the hidden fields from sorting .filter( - s => !_fields.find(FieldTool.fReference(s[0])).meta.grid.hidden, + s => !fields.find(FieldTool.fReference(s[0])).meta.grid.hidden, ) .map(s => s.join(' ')) .join(', '); @@ -172,7 +165,7 @@ export default function GridComponent({ } qb.select( - _fields + fields .filter(f => FieldTool.isPrimary(f) || !f.meta.grid.hidden) .map(f => { let fieldRef = f.reference; @@ -185,8 +178,6 @@ export default function GridComponent({ // Query the replacement with the field value too. if (relation) { fieldRef = `${fieldRef},${relation.name}/${f.meta.grid.replace}`; - } else { - console.error('Missing relation?!', f); } } @@ -202,21 +193,19 @@ export default function GridComponent({ apiUrl += `&${filter.substring(1)}`; } - setBrowserParams(browserParams); - - setFields(_fields.sort(GridTools.sortFields)); + setSearchParams(searchParams); setApiUrl(apiUrl + `&--artgen-no-cache=${refetch}`); - }, [pageCurr, pageSize, sorters, schema, refetch, filter]); + }, [pageCurr, pageSize, sorters, fields, refetch, filter]); useEffect(() => { if (apiUrl) { - setLoading(true); + setIsLoading(true); const pks = schema.fields .filter(FieldTool.isPrimary) .map(f => f.reference); - httpClient + client .get(apiUrl) .then(reply => { setRows( @@ -232,15 +221,15 @@ export default function GridComponent({ message.error('Invalid request!'); }) .finally(() => { - setLoading(false); + setIsLoading(false); }); } }, [apiUrl]); const doUpdate = record => { - setLoading(true); + setIsLoading(true); - httpClient + client .patch(toRestRecordRoute(schema, record), record) .then(() => { doRefetch(Date.now()); @@ -250,7 +239,7 @@ export default function GridComponent({ return ( <> -
+
-
- -
-