Skip to content

Commit

Permalink
msv editing modal simplified to loading bar.
Browse files Browse the repository at this point in the history
  • Loading branch information
@siddheshraze
siddheshraze committed Jan 29, 2025
1 parent c88d3ed commit b6cc59e
Showing 1 changed file with 31 additions and 137 deletions.
168 changes: 31 additions & 137 deletions frontend/components/datagrids/applications/msveditingmodal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,7 @@

import { GridRowModel } from '@mui/x-data-grid';
import React, { useEffect, useState } from 'react';
import {
Button,
DialogActions,
DialogContent,
DialogTitle,
Modal,
ModalDialog,
Step,
stepClasses,
StepIndicator,
stepIndicatorClasses,
Stepper,
Typography
} from '@mui/joy';
import { Button, DialogActions, DialogContent, DialogTitle, LinearProgress, Modal, ModalDialog } from '@mui/joy';
import { getUpdatedValues } from '@/config/utils';
import MapperFactory from '@/config/datamapper';
import { useSiteContext } from '@/app/contexts/userselectionprovider';
Expand Down Expand Up @@ -43,8 +30,6 @@ export default function MSVEditingModal(props: MSVEditingProps) {
species: ['speciesName', 'subspeciesName', 'speciesCode']
};
type UploadStatus = 'idle' | 'in-progress' | 'completed' | 'error';
const [beginUpload, setBeginUpload] = useState(false);
const [isConfirmStep, setIsConfirmStep] = useState(false);
const [uploadStatus, setUploadStatus] = useState<{
[Key in keyof typeof fieldGroups]: UploadStatus;
}>({
Expand All @@ -54,6 +39,7 @@ export default function MSVEditingModal(props: MSVEditingProps) {
stems: 'idle',
species: 'idle'
});
const [loadingProgress, setLoadingProgress] = useState(0);
const stepIcons = [<PrecisionManufacturing key={v4()} />, <GridView key={v4()} />, <Forest key={v4()} />, <Grass key={v4()} />, <Diversity2 key={v4()} />];

const handleUpdate = async (groupName: keyof typeof fieldGroups, tableName: string, idColumn: string, idValue: any) => {
Expand All @@ -72,8 +58,6 @@ export default function MSVEditingModal(props: MSVEditingProps) {
{} as Partial<typeof updatedFields>
);

console.log(`matching fields for group name ${groupName}: `, matchingFields);

if (Object.keys(matchingFields).length > 0) {
console.log('match found: ');
if (groupName === 'stems') {
Expand Down Expand Up @@ -117,144 +101,54 @@ export default function MSVEditingModal(props: MSVEditingProps) {
};

const handleBeginUpload = async () => {
setLoadingProgress(0);
await handleUpdate('coremeasurements', 'coremeasurements', 'CoreMeasurementID', coreMeasurementID);
await new Promise(resolve => setTimeout(resolve, 1000));
await new Promise(resolve => setTimeout(resolve, 250));
await handleUpdate('quadrats', 'quadrats', 'QuadratID', quadratID);
await new Promise(resolve => setTimeout(resolve, 1000));
await new Promise(resolve => setTimeout(resolve, 250));
await handleUpdate('trees', 'trees', 'TreeID', treeID);
await new Promise(resolve => setTimeout(resolve, 1000));
await new Promise(resolve => setTimeout(resolve, 250));
await handleUpdate('stems', 'stems', 'StemID', stemID);
await new Promise(resolve => setTimeout(resolve, 1000));
await new Promise(resolve => setTimeout(resolve, 250));
await handleUpdate('species', 'species', 'SpeciesID', speciesID);
await new Promise(resolve => setTimeout(resolve, 250));
setLoadingProgress(100);
};

const handleFinalConfirm = () => {
handleSave(newRow);
};

useEffect(() => {
if (beginUpload) handleBeginUpload();
}, [beginUpload]);

useEffect(() => {
console.log('use effect upload status: ', uploadStatus);
if (Object.values(uploadStatus).every(value => value === 'completed')) setIsConfirmStep(true);
}, [uploadStatus]);
handleBeginUpload();
}, []);

// pulled from JoyUI doc example
function IconStepper() {
const steps = Object.keys(uploadStatus);
return (
<Stepper
size="lg"
return (
<Modal open onClose={handleClose}>
<ModalDialog
variant="outlined"
sx={{
display: 'flex',
flexDirection: 'column',
width: '100%',
'--StepIndicator-size': '3rem',
'--Step-connectorInset': '0px',
[`& .${stepIndicatorClasses.root}`]: {
borderWidth: 4
},
[`& .${stepClasses.root}::after`]: {
height: 4
},
[`& .${stepClasses.completed}`]: {
[`& .${stepIndicatorClasses.root}`]: {
borderColor: 'primary.300',
color: 'primary.300'
},
'&::after': {
bgcolor: 'primary.300'
}
},
[`& .${stepClasses.active}`]: {
[`& .${stepIndicatorClasses.root}`]: {
borderColor: 'currentColor'
}
},
[`& .${stepClasses.disabled} *`]: {
color: 'neutral.outlinedDisabledColor'
}
maxWidth: '90vw',
minWidth: '40vw',
overflow: 'hidden'
}}
>
{steps.map((stepKey, index) => {
const status = uploadStatus[stepKey as keyof typeof uploadStatus];

// Determine the step's state
const isCompleted = status === 'completed';
const isActive = status === 'in-progress';
const isDisabled = status === 'idle';

return (
<Step
key={stepKey}
completed={isCompleted}
active={isActive}
disabled={isDisabled}
orientation="vertical"
indicator={
<StepIndicator variant={isActive ? 'solid' : 'outlined'} color={isCompleted ? 'primary' : isActive ? 'primary' : 'neutral'}>
{stepIcons[index]}
</StepIndicator>
}
>
<Typography
sx={{
textTransform: 'uppercase',
fontWeight: 'lg',
fontSize: '0.75rem',
letterSpacing: '0.5px'
}}
>
{stepKey === 'coremeasurements' ? 'CoreMeasurements' : stepKey.charAt(0).toUpperCase() + stepKey.slice(1)}
</Typography>
</Step>
);
})}
</Stepper>
);
}

return (
<Modal open onClose={handleClose}>
<ModalDialog variant="outlined" sx={{ maxWidth: '90vw', overflow: 'auto' }}>
<DialogTitle>Data Editing</DialogTitle>
<DialogContent>
<Typography level={'title-lg'}>In order to make changes to this data set, cascading changes must be made across the schema. </Typography>
{!beginUpload && !isConfirmStep && (
<Typography level={'title-md'}>Press the Begin button to begin this process, or Cancel to revert your changes. </Typography>
)}
{beginUpload && !isConfirmStep && (
<>
<Typography level={'title-md'} sx={{ marginBottom: '2em' }}>
Beginning upload...
</Typography>
{IconStepper()}
</>
)}
<DialogTitle>Saving Changes...</DialogTitle>
<DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<LinearProgress determinate value={loadingProgress} title={'Processing changes. Please wait... '} size={'lg'} sx={{ width: '100%' }} />
</DialogContent>
<DialogActions>
{!beginUpload && !isConfirmStep && (
<>
<Button variant={'soft'} color={'danger'} onClick={handleClose}>
Cancel
</Button>
<Button variant={'soft'} color={'success'} onClick={() => setBeginUpload(true)}>
Begin Upload
</Button>
</>
)}
{isConfirmStep && (
<>
<Button
variant={'soft'}
color={'primary'}
onClick={handleFinalConfirm}
disabled={Object.values(uploadStatus).some(value => value !== 'completed')}
>
Confirm Changes
</Button>
</>
)}
<Button
variant={'soft'}
color={'primary'}
onClick={handleFinalConfirm}
disabled={Object.values(uploadStatus).some(value => value !== 'completed') || loadingProgress < 100}
>
Finish
</Button>
</DialogActions>
</ModalDialog>
</Modal>
Expand Down

0 comments on commit b6cc59e

Please sign in to comment.