mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-20 22:49:18 +00:00
feat: excel import (#527)
* refactor: simplify excel import * chore: add external deepmerge utility * chore: create import map utilities * chore: increase size limits on uploads * style: small presentation tweaks * feat: resolve times on excel import, refs #508
This commit is contained in:
Carlos Valente
GitHub
@@ -1,7 +1,6 @@
|
||||
import { ChangeEvent, useCallback, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalCloseButton,
|
||||
@@ -9,23 +8,34 @@ import {
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Progress,
|
||||
Switch,
|
||||
} from '@chakra-ui/react';
|
||||
import { IoClose } from '@react-icons/all-files/io5/IoClose';
|
||||
import { IoDocumentTextOutline } from '@react-icons/all-files/io5/IoDocumentTextOutline';
|
||||
import { IoWarningOutline } from '@react-icons/all-files/io5/IoWarningOutline';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
|
||||
import { defaultExcelImportMap, ExcelImportMap } from 'ontime-utils';
|
||||
|
||||
import { RUNDOWN_TABLE } from '../../../common/api/apiConstants';
|
||||
import { uploadData } from '../../../common/api/ontimeApi';
|
||||
import { useEmitLog } from '../../../common/stores/logger';
|
||||
import ModalSplitInput from '../ModalSplitInput';
|
||||
import { PROJECT_DATA, RUNDOWN_TABLE, USERFIELDS } from '../../../common/api/apiConstants';
|
||||
import { invalidateAllCaches, maybeAxiosError } from '../../../common/api/apiUtils';
|
||||
import {
|
||||
patchData,
|
||||
postPreviewExcel,
|
||||
ProjectFileImportOptions,
|
||||
uploadProjectFile,
|
||||
} from '../../../common/api/ontimeApi';
|
||||
import { projectDataPlaceholder } from '../../../common/models/ProjectData';
|
||||
import { userFieldsPlaceholder } from '../../../common/models/UserFields';
|
||||
|
||||
import { validateFile } from './utils';
|
||||
import PreviewExcel from './preview/PreviewExcel';
|
||||
import ExcelFileOptions from './upload-options/ExcelFileOptions';
|
||||
import OntimeFileOptions from './upload-options/OntimeFileOptions';
|
||||
import UploadStepTracker from './upload-step/UploadStep';
|
||||
import UploadFile from './UploadFile';
|
||||
import { useUploadModalContextStore } from './uploadModalContext';
|
||||
import { getPersistedOptions, isExcelFile, isOntimeFile, persistOptions } from './uploadUtils';
|
||||
|
||||
import style from './UploadModal.module.scss';
|
||||
|
||||
export type UploadStep = 'import' | 'review';
|
||||
|
||||
interface UploadModalProps {
|
||||
onClose: () => void;
|
||||
isOpen: boolean;
|
||||
@@ -33,64 +43,152 @@ interface UploadModalProps {
|
||||
|
||||
export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const { emitError } = useEmitLog();
|
||||
const [errors, setErrors] = useState<string | undefined>();
|
||||
const [isSubmitting, setSubmitting] = useState(false);
|
||||
const [file, setFile] = useState<File | null>(null);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const overrideOptionRef = useRef<HTMLInputElement>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
const handleFile = useCallback((event: ChangeEvent<HTMLInputElement>) => {
|
||||
const fileUploaded = event?.target?.files?.[0];
|
||||
if (!fileUploaded) return;
|
||||
const { file, setProgress, clear } = useUploadModalContextStore();
|
||||
|
||||
const validate = validateFile(fileUploaded);
|
||||
setErrors(validate.errors?.[0]);
|
||||
const [uploadStep, setUploadStep] = useState<UploadStep>('import');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [rundown, setRundown] = useState<OntimeRundown | null>(null);
|
||||
const [userFields, setUserFields] = useState<UserFields | null>(null);
|
||||
const [project, setProject] = useState<ProjectData | null>(null);
|
||||
|
||||
if (validate.isValid) {
|
||||
setFile(fileUploaded);
|
||||
} else {
|
||||
setFile(null);
|
||||
const [errors, setErrors] = useState('');
|
||||
|
||||
const ontimeFileOptions = useRef<Partial<ProjectFileImportOptions>>({});
|
||||
const excelFileOptions = useRef<ExcelImportMap>(defaultExcelImportMap);
|
||||
|
||||
const updateOntimeFileOptions = <T extends keyof ProjectFileImportOptions>(
|
||||
field: T,
|
||||
value: ProjectFileImportOptions[T],
|
||||
) => {
|
||||
ontimeFileOptions.current = { ...ontimeFileOptions.current, [field]: value };
|
||||
};
|
||||
|
||||
const updateExcelFileOptions = <T extends keyof ExcelImportMap>(field: T, value: ExcelImportMap[T]) => {
|
||||
if (excelFileOptions.current[field] !== value) {
|
||||
excelFileOptions.current = { ...excelFileOptions.current, [field]: value };
|
||||
}
|
||||
};
|
||||
|
||||
// We want to populate the options with any previous options given by the user
|
||||
useEffect(() => {
|
||||
const excelOptions = getPersistedOptions('excel');
|
||||
if (excelOptions) {
|
||||
excelFileOptions.current = excelOptions;
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleSubmit = useCallback(async () => {
|
||||
setSubmitting(true);
|
||||
// if the modal re-opens, we want to restart all states
|
||||
useEffect(() => {
|
||||
clear();
|
||||
setUploadStep('import');
|
||||
setSubmitting(false);
|
||||
setRundown(null);
|
||||
setUserFields(null);
|
||||
setProject(null);
|
||||
setErrors('');
|
||||
}, [clear, isOpen]);
|
||||
|
||||
/* uploads file to backend
|
||||
* - in the case of excel, we get the preview
|
||||
* - in the case of project file, this is end of line
|
||||
**/
|
||||
const handleUpload = async () => {
|
||||
let doClose = false;
|
||||
if (file) {
|
||||
setSubmitting(true);
|
||||
setErrors('');
|
||||
try {
|
||||
const options = {
|
||||
onlyRundown: overrideOptionRef.current?.checked || false,
|
||||
};
|
||||
await uploadData(file, setProgress, options);
|
||||
if (isOntimeFile(file)) {
|
||||
// TODO: we would also like to have preview for ontime project files
|
||||
const options = ontimeFileOptions.current;
|
||||
await handleOntimeFile(file, options);
|
||||
await invalidateAllCaches();
|
||||
doClose = true;
|
||||
} else if (isExcelFile(file)) {
|
||||
const options = excelFileOptions.current;
|
||||
persistOptions({ optionType: 'excel', options });
|
||||
await handleExcelFile(file, options);
|
||||
}
|
||||
} catch (error) {
|
||||
emitError(`Failed uploading file: ${error}`);
|
||||
const message = maybeAxiosError(error);
|
||||
setErrors(`Failed uploading file ${message}`);
|
||||
} finally {
|
||||
await queryClient.invalidateQueries(RUNDOWN_TABLE);
|
||||
setSuccess(true);
|
||||
setSubmitting(false);
|
||||
if (doClose) {
|
||||
handleClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
setSubmitting(false);
|
||||
}, [emitError, file, queryClient]);
|
||||
|
||||
const handleClick = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const clearFile = () => {
|
||||
setFile(null);
|
||||
// when we upload excel, we populate state with preview data
|
||||
async function handleExcelFile(file: File, options: ExcelImportMap) {
|
||||
const response = await postPreviewExcel(file, setProgress, options);
|
||||
if (response.status === 200) {
|
||||
setRundown(response.data.rundown);
|
||||
setUserFields(response.data.userFields);
|
||||
setProject(response.data.project);
|
||||
// in excel imports we have an extra review step
|
||||
setUploadStep('review');
|
||||
}
|
||||
}
|
||||
|
||||
// when we upload project files, no extra operations are done
|
||||
async function handleOntimeFile(file: File, options: Partial<ProjectFileImportOptions>) {
|
||||
await uploadProjectFile(file, setProgress, options);
|
||||
}
|
||||
};
|
||||
|
||||
// before closing the modal, we clear data from mutations
|
||||
const handleClose = () => {
|
||||
clearFile();
|
||||
setSuccess(false);
|
||||
setErrors(undefined);
|
||||
setProgress(0);
|
||||
clear();
|
||||
setRundown([]);
|
||||
setUserFields(userFieldsPlaceholder);
|
||||
setProject(projectDataPlaceholder);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const disableSubmit = !file || isSubmitting;
|
||||
const handleFinalise = async () => {
|
||||
// this step is currently only used for excel files, after preview
|
||||
if (isExcel && rundown && userFields && project) {
|
||||
let doClose = false;
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await patchData({ rundown, userFields, project });
|
||||
queryClient.setQueryData(RUNDOWN_TABLE, rundown);
|
||||
queryClient.setQueryData(USERFIELDS, userFields);
|
||||
queryClient.setQueryData(PROJECT_DATA, project);
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: [...RUNDOWN_TABLE, ...USERFIELDS, ...PROJECT_DATA],
|
||||
});
|
||||
doClose = true;
|
||||
} catch (error) {
|
||||
const message = maybeAxiosError(error);
|
||||
setErrors(`Failed applying changes ${message}`);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
if (doClose) {
|
||||
handleClose();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const undoReview = () => {
|
||||
setUploadStep('import');
|
||||
setErrors('');
|
||||
};
|
||||
|
||||
const isImporting = uploadStep === 'import';
|
||||
const isReview = uploadStep === 'review';
|
||||
const isExcel = isExcelFile(file);
|
||||
const isOntime = isOntimeFile(file);
|
||||
|
||||
const handleGoBack = isImporting ? undefined : undoReview;
|
||||
const handleSubmit = isImporting ? handleUpload : handleFinalise;
|
||||
const disableSubmit = (isImporting && !file) || (isReview && rundown === null);
|
||||
const disableGoBack = isImporting;
|
||||
const submitText = isImporting ? 'Import' : 'Finish';
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@@ -101,66 +199,50 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
|
||||
size='xl'
|
||||
scrollBehavior='inside'
|
||||
preserveScrollBarGap
|
||||
variant='ontime-small'
|
||||
variant='ontime-upload'
|
||||
>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>File import</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody className={style.uploadBody}>
|
||||
<Input
|
||||
ref={fileInputRef}
|
||||
style={{ display: 'none' }}
|
||||
type='file'
|
||||
onChange={handleFile}
|
||||
accept='.json, .xlsx'
|
||||
data-testid='file-input'
|
||||
/>
|
||||
<div className={style.uploadArea} onClick={handleClick}>
|
||||
Click to upload Ontime project file
|
||||
</div>
|
||||
{file && (
|
||||
<div className={`${style.uploadedItem} ${success ? style.success : ''}`}>
|
||||
<IoClose className={style.cancelUpload} onClick={clearFile} />
|
||||
<IoDocumentTextOutline className={style.icon} />
|
||||
<span className={style.fileTitle}>{file.name}</span>
|
||||
<span className={style.fileInfo}>{`${(file.size / 1024).toFixed(2)}kb - ${file.type}`}</span>
|
||||
<Progress variant='ontime-on-light' className={style.fileProgress} value={progress} />
|
||||
</div>
|
||||
{isExcel && <UploadStepTracker uploadStep={uploadStep} />}
|
||||
{uploadStep === 'import' ? (
|
||||
<>
|
||||
<UploadFile />
|
||||
{isOntime && <OntimeFileOptions optionsRef={ontimeFileOptions} updateOptions={updateOntimeFileOptions} />}
|
||||
{isExcel && <ExcelFileOptions optionsRef={excelFileOptions} updateOptions={updateExcelFileOptions} />}
|
||||
</>
|
||||
) : (
|
||||
<PreviewExcel
|
||||
rundown={rundown ?? []}
|
||||
project={project ?? projectDataPlaceholder}
|
||||
userFields={userFields ?? userFieldsPlaceholder}
|
||||
/>
|
||||
)}
|
||||
{errors && (
|
||||
<div className={`${style.uploadedItem} ${style.error}`}>
|
||||
<IoWarningOutline className={style.icon} />
|
||||
<span className={style.fileTitle}>{errors}</span>
|
||||
<span className={style.fileInfo}>Please try again</span>
|
||||
<Progress className={style.fileProgress} value={progress} />
|
||||
</div>
|
||||
)}
|
||||
<div className={style.uploadOptions}>
|
||||
<span className={style.title}>Import options</span>
|
||||
<ModalSplitInput
|
||||
field=''
|
||||
title='Only import rundown'
|
||||
description='All other options, including application settings will be discarded'
|
||||
>
|
||||
<Switch variant='ontime-on-light' ref={overrideOptionRef} />
|
||||
</ModalSplitInput>
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter className={`${style.buttonSection} ${style.pad}`}>
|
||||
<Button onClick={handleClose} isDisabled={isSubmitting} variant='ontime-ghost-on-light' size='sm'>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
isLoading={isSubmitting}
|
||||
isDisabled={disableSubmit}
|
||||
variant='ontime-filled'
|
||||
padding='0 2em'
|
||||
size='sm'
|
||||
>
|
||||
Import
|
||||
</Button>
|
||||
<ModalFooter>
|
||||
<div className={style.feedbackSection}>{errors && <div className={style.error}>{errors}</div>}</div>
|
||||
<div className={`${style.buttonSection} ${style.pad}`}>
|
||||
<Button
|
||||
onClick={handleGoBack}
|
||||
isDisabled={disableGoBack || submitting}
|
||||
variant='ontime-ghost-on-light'
|
||||
size='sm'
|
||||
>
|
||||
Go Back
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
isLoading={submitting}
|
||||
isDisabled={disableSubmit}
|
||||
variant='ontime-filled'
|
||||
padding='0 2em'
|
||||
size='sm'
|
||||
>
|
||||
{submitText}
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
|
||||
Reference in New Issue
Block a user