SIMSBIOHUB-223

app/src/AppRouter.tsx

@@ -5,6 +5,7 @@ import {
 } from 'components/security/RouteGuards';
 import { SYSTEM_ROLE } from 'constants/roles';
 import { CodesContextProvider } from 'contexts/codesContext';
+import { ObservationsContextProvider } from 'contexts/observationsContext';
 import AdminUsersRouter from 'features/admin/AdminUsersRouter';
 import FundingSourcesRouter from 'features/funding-sources/FundingSourcesRouter';
 import ProjectsRouter from 'features/projects/ProjectsRouter';
@@ -117,7 +118,9 @@ const AppRouter: React.FC = () => {
       </RouteWithTitle>
 
       <RouteWithTitle title="prototype" path="/prototype">
-        <PrototypePage />
+        <ObservationsContextProvider>
+          <PrototypePage />
+        </ObservationsContextProvider>
       </RouteWithTitle>
 
       <Route path="/login">

app/src/contexts/observationsContext.tsx

@@ -0,0 +1,128 @@
+import { GridRowModes, GridRowModesModel } from '@mui/x-data-grid';
+import useDataLoader from 'hooks/useDataLoader';
+import { createContext, Dispatch, PropsWithChildren, SetStateAction, useEffect, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface IObservationRecord {
+  observation_id: number;
+  speciesName: string;
+  samplingSite: string;
+  samplingMethod: string;
+  samplingPeriod: string;
+  count?: number;
+  date?: string;
+  time?: string;
+  lat?: number;
+  long?: number;
+}
+
+export interface IObservationTableRow extends Omit<IObservationRecord, 'observation_id'> {
+  id: string;
+  observation_id: number | null;
+  _isModified: boolean;
+}
+
+export const fetchObservationDemoRows = async (): Promise<IObservationRecord[]> => {
+  await setTimeout(() => {}, 100 * (Math.random() + 1));
+  return [
+    {
+      observation_id: 1,
+      speciesName: 'Moose (Alces Americanus)',
+      samplingSite: 'Site 1',
+      samplingMethod: 'Method 1',
+      samplingPeriod: '',
+    },
+    {
+      observation_id: 2,
+      speciesName: 'Moose (Alces Americanus)',
+      samplingSite: 'Site 1',
+      samplingMethod: 'Method 1',
+      samplingPeriod: '',
+    },
+    {
+      observation_id: 3,
+      speciesName: 'Moose (Alces Americanus)',
+      samplingSite: 'Site 1',
+      samplingMethod: 'Method 1',
+      samplingPeriod: '',
+    }
+  ]
+}
+
+/**
+ * Context object that stores information about survey observations
+ *
+ * @export
+ * @interface IObservationsContext
+ */
+export type IObservationsContext = {
+  createNewRecord: () => void;
+  _rows: IObservationTableRow[]
+  _rowModesModel: GridRowModesModel;
+  _setRows: Dispatch<SetStateAction<IObservationTableRow[]>> // (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void;
+  _setRowModesModel: Dispatch<SetStateAction<GridRowModesModel>>
+}
+
+export const ObservationsContext = createContext<IObservationsContext>({
+  _rows: [],
+  _rowModesModel: {},
+  _setRows: () => {},
+  _setRowModesModel: () => {},
+  createNewRecord: () => {},
+
+});
+
+export const ObservationsContextProvider = (props: PropsWithChildren<Record<never, any>>) => {
+  const [_rows, _setRows] = useState<IObservationTableRow[]>([]);
+  const [_rowModesModel, _setRowModesModel] = useState<GridRowModesModel>({});
+
+  const observationsDataLoader = useDataLoader(fetchObservationDemoRows);
+  observationsDataLoader.load()
+
+  useEffect(() => {
+    if (observationsDataLoader.data) {
+      const rows: IObservationTableRow[] = observationsDataLoader.data.map((row) => ({
+        ...row,
+        id: String(row.observation_id),
+        _isModified: false
+      }));
+      _setRows(rows);
+    }
+  }, [observationsDataLoader.data])
+
+  const createNewRecord = () => {
+    const id = uuidv4();
+
+    _setRows((oldRows) => [
+      ...oldRows,
+      {
+        id,
+        _isModified: true,
+        observation_id: null,
+        speciesName: '',
+        samplingSite: '',
+        samplingMethod: '',
+        samplingPeriod: '',
+      }
+    ]);
+
+    _setRowModesModel((oldModel) => ({
+      ...oldModel,
+      [id]: { mode: GridRowModes.Edit, fieldToFocus: 'speciesName' },
+    }));
+  };
+
+  const observationsContext: IObservationsContext = {
+    createNewRecord,
+    _rows,
+    _rowModesModel,
+    _setRows,
+    _setRowModesModel
+  };
+
+  return (
+    <ObservationsContext.Provider value={observationsContext}>
+      {props.children}
+    </ObservationsContext.Provider>
+    );
+};

app/src/pages/prototype/ObservationsTable.tsx

@@ -0,0 +1,200 @@
+import { mdiDotsVertical } from "@mdi/js";
+import Icon from "@mdi/react";
+import { Theme } from "@mui/material";
+import IconButton from '@mui/material/IconButton';
+import { makeStyles } from "@mui/styles";
+import { DataGrid, GridColDef, GridEventListener } from '@mui/x-data-grid';
+import { IObservationTableRow, ObservationsContext } from "contexts/observationsContext";
+import { useContext } from "react";
+// import { useEffect, useState } from "react";
+import { pluralize as p } from "utils/Utils";
+
+export type IObservationsTableProps = Record<never, any>;
+
+const useStyles = makeStyles((theme: Theme) => ({
+  modifiedRow: {} // { background: 'rgba(65, 168, 3, 0.16)' }
+}));
+
+export const observationColumns: GridColDef<IObservationTableRow>[] = [
+  {
+    field: 'speciesName',
+    headerName: 'Species',
+    editable: true,
+    flex: 1,
+    minWidth: 250,
+    disableColumnMenu: true
+  },
+  {
+    field: 'samplingSite',
+    headerName: 'Sampling Site',
+    editable: true,
+    type: 'singleSelect',
+    valueOptions: ['Site 1', 'Site 2', 'Site 3', 'Site 4'],
+    flex: 1,
+    minWidth: 200,
+    disableColumnMenu: true
+  },
+  {
+    field: 'samplingMethod',
+    headerName: 'Sampling Method',
+    editable: true,
+    type: 'singleSelect',
+    valueOptions: ['Method 1', 'Method 2', 'Method 3', 'Method 4'],
+    flex: 1,
+    minWidth: 200,
+    disableColumnMenu: true
+  },
+  {
+    field: 'samplingPeriod',
+    headerName: 'Sampling Period',
+    editable: true,
+    type: 'singleSelect',
+    valueOptions: ['Period 1', 'Period 2', 'Period 3', 'Period 4', 'Undefined'],
+    flex: 1,
+    minWidth: 200,
+    disableColumnMenu: true
+  },
+  {
+    field: 'count',
+    headerName: 'Count',
+    editable: true,
+    type: 'number',
+    minWidth: 100,
+    disableColumnMenu: true,
+  },
+  {
+    field: 'date',
+    headerName: 'Date',
+    editable: true,
+    type: 'date',
+    minWidth: 150,
+    disableColumnMenu: true,
+  },
+  {
+    field: 'time',
+    headerName: 'Time',
+    editable: true,
+    type: 'time',
+    width: 150,
+    disableColumnMenu: true
+  },
+  {
+    field: 'lat',
+    headerName: 'Lat',
+    type: 'number',
+    editable: true,
+    width: 150,
+    disableColumnMenu: true
+  },
+  {
+    field: 'long',
+    headerName: 'Long',
+    type: 'number',
+    editable: true,
+    width: 150,
+    disableColumnMenu: true
+  },
+  {
+    field: 'actions',
+    headerName: '',
+    type: 'actions',
+    width: 80,
+    disableColumnMenu: true,
+    resizable: false,
+    cellClassName: 'test',
+    getActions: () => [
+      <IconButton>
+        <Icon path={mdiDotsVertical} size={1} />
+      </IconButton>
+    ],
+  }
+];
+
+const ObservationsTable = (props: IObservationsTableProps) => {
+  const classes = useStyles();
+
+  const { _rows, _setRows, _setRowModesModel, _rowModesModel } = useContext(ObservationsContext);
+  console.log('rowModesModel:', _rowModesModel);
+
+  const handleRowEditStart: GridEventListener<'rowEditStart'> = (params, event) => {
+    console.log({ params })
+  }
+
+  const handleRowEditStop: GridEventListener<'rowEditStop'> = (params, event) => {
+    event.defaultMuiPrevented = true;
+    //if (params.reason === GridRowEditStopReasons.rowFocusOut) {
+    // }
+  };
+
+  const handleProcessRowUpdate = (newRow: IObservationTableRow) => {
+    const updatedRow: IObservationTableRow = { ...newRow, _isModified: true };
+
+    _setRows(_rows.map((row) => (row.id === newRow.id ? updatedRow : row)));
+    return updatedRow;
+  };
+
+  const numModified = _rows.filter((row) => row._isModified).length;
+
+  return (
+    <DataGrid
+      editMode="row"
+      onRowEditStart={handleRowEditStart}
+      onRowEditStop={handleRowEditStop}
+      processRowUpdate={handleProcessRowUpdate}
+      columns={observationColumns}
+      rows={_rows}
+      rowModesModel={_rowModesModel}
+      disableRowSelectionOnClick
+      onRowModesModelChange={_setRowModesModel}
+      localeText={{
+        noRowsLabel: "No Records",
+        footerRowSelected: (numSelected: number) => {
+          return [
+            numSelected > 0 && `${numSelected} ${p(numSelected, 'row')} selected`,
+            numModified > 0 && `${numModified} unsaved ${p(numModified, 'row')}`
+          ].filter(Boolean).join(', ')
+        }
+      }}
+      getRowClassName={(params) => {
+        if (params.row._isModified || _rowModesModel) {
+          return classes.modifiedRow;
+        }
+
+        return '';
+      }}
+      sx={{
+        background: '#fff',
+        border: 'none',
+        '& .MuiDataGrid-pinnedColumns, .MuiDataGrid-pinnedColumnHeaders': {
+          background: '#fff'
+        },
+        '& .MuiDataGrid-columnHeaderTitle': {
+          fontWeight: 700,
+          textTransform: 'uppercase',
+          color: '#999'
+        },
+        '& .test': {
+          position: 'sticky',
+          right: 0,
+          top: 0,
+          borderLeft: '1px solid #ccc',
+          background: '#fff'
+        },
+        '& .MuiDataGrid-columnHeaders': {
+          position: 'relative'
+        },
+        '& .MuiDataGrid-columnHeaders:after': {
+          content: "''",
+          position: 'absolute',
+          right: 0,
+          width: '79px',
+          height: '80px',
+          borderLeft: '1px solid #ccc',
+          background: '#fff'
+        }
+      }}
+    />
+  )
+}
+
+export default ObservationsTable;