feat: progress bar in my sites

app/src/gui/components/notebook/record_table.tsx

@@ -42,14 +42,21 @@
 import {
   ProjectID,
   ProjectUIViewsets,
+  Record,
   RecordMetadata,
+  getFullRecordData,
   getMetadataForAllRecords,
   getRecordsWithRegex,
 } from '@faims3/data-model';
 import {NotebookDataGridToolbar} from './datagrid_toolbar';
 import RecordDelete from './delete';
 import getLocalDate from '../../fields/LocalDate';
 import {logError} from '../../../logging';
+import ProgressBar from '../progress-bar';
+import {percentComplete, requiredFields} from '../../../lib/form-utils';
+import {getUiSpecForProject} from '../../../uiSpecification';
+import {useQuery} from '@tanstack/react-query';
+import {useGetUISpec} from '../../../lib/queries';
 
 type RecordsTableProps = {
   project_id: ProjectID;
@@ -72,6 +79,8 @@
 function RecordsTable(props: RecordsTableProps) {
   const {project_id, maxRows, rows, loading} = props;
 
+  const {data: uiSpec} = useGetUISpec(project_id);
+
   // default for mobileView is on (collapsed table)
   const [mobileViewSwitchValue, setMobileViewSwitchValue] =
     React.useState(true);
@@ -292,6 +301,16 @@
                 {params.row.conflicts === true && (
                   <Alert severity={'warning'}>Record has conflicts</Alert>
                 )}
+                <ProgressBar
+                  percentage={
+                    uiSpec && params.row.record
+                      ? percentComplete(
+                          requiredFields(uiSpec.fields),
+                          params.row.record.data
+                        )
+                      : 0
+                  }
+                />
               </Box>
             );
           },
@@ -431,29 +450,45 @@
   );
 }
 
+interface RecordMetaDataExtended extends RecordMetadata {
+  record: Record;
+}
+
 export function RecordsBrowseTable(props: RecordsBrowseTableProps) {
   const [query, setQuery] = React.useState('');
-  const [pouchData, setPouchData] = React.useState(
-    undefined as RecordMetadata[] | undefined
-  );
+  const [pouchData, setPouchData] = React.useState<
+    RecordMetaDataExtended[] | undefined
+  >(undefined);
 
   useEffect(() => {
     const getData = async () => {
       try {
-        if (query.length === 0) {
-          const ma = await getMetadataForAllRecords(
-            props.project_id,
-            props.filter_deleted
-          );
-          setPouchData(ma);
-        } else {
-          const ra = await getRecordsWithRegex(
-            props.project_id,
-            query,
-            props.filter_deleted
+        const records = (
+          query.length === 0
+            ? await getMetadataForAllRecords(
+                props.project_id,
+                props.filter_deleted
+              )
+            : await getRecordsWithRegex(
+                props.project_id,
+                query,
+                props.filter_deleted
+              )
+        ) as RecordMetaDataExtended[];
+
+        for (const record of records) {
+          const data = await getFullRecordData(
+            record.project_id,
+            record.record_id,
+            record.revision_id
           );
-          setPouchData(ra);
+
+          if (!data) continue;
+
+          record.record = data;
         }
+
+        setPouchData(records);
       } catch (err) {
         logError(err); // unable to load records
         setPouchData(undefined);

app/src/lib/form-utils.ts

@@ -1,12 +1,12 @@
-import {ProjectUIModel} from '@faims3/data-model/build/src/types';
+import {ProjectUIFields} from '@faims3/data-model/build/src/types';
 
 /**
  * Retrieves the keys of fields that are marked as required from the given project UI model.
  *
- * @param {ProjectUIModel} fields - An object representing the project's UI model fields, where each field contains component parameters.
+ * @param {ProjectUIFields} fields - An object representing the project's UI model fields, where each field contains component parameters.
  * @returns {string[]} An array of keys representing the fields that are marked as required.
  */
-export const requiredFields = (fields: ProjectUIModel): string[] =>
+export const requiredFields = (fields: ProjectUIFields): string[] =>
   Object.entries(fields)
     .filter(([, value]) => value['component-parameters'].required)
     .map(([key]) => key);

app/src/lib/queries.ts

@@ -0,0 +1,9 @@
+import {useQuery} from '@tanstack/react-query';
+import {getUiSpecForProject} from '../uiSpecification';
+
+export const useGetUISpec = (project_id: string) => {
+  return useQuery({
+    queryKey: ['uiSpec', project_id],
+    queryFn: () => getUiSpecForProject(project_id),
+  });
+};