Preview Sheet

apps/client/src/common/api/ontimeApi.ts

@@ -256,3 +256,12 @@ export const getSheetsAuthUrl = async () => {
   const res = await axios.get(`${ontimeURL}/sheet-authurl`);
   return res.data;
 };
+
+export const postPreviewSheet = async (sheetId: string, worksheet: string, options?: ExcelImportMap) => {
+  const response = await axios.post(`${ontimeURL}/sheet-preview`, {
+    sheetid: sheetId,
+    worksheet: worksheet,
+    options: options,
+  });
+  return response.data.data;
+};

apps/client/src/features/modals/sheets-modal/SheetsModal.tsx

@@ -10,7 +10,21 @@ import {
   ModalHeader,
   ModalOverlay,
 } from '@chakra-ui/react';
-import { getSheetsAuthStatus, getSheetsAuthUrl, uploadSheetClientFile } from '../../../common/api/ontimeApi';
+import { useQueryClient } from '@tanstack/react-query';
+import {
+  getSheetsAuthStatus,
+  getSheetsAuthUrl,
+  postPreviewSheet,
+  uploadSheetClientFile,
+  patchData,
+} from '../../../common/api/ontimeApi';
+import { OntimeRundown, ProjectData, UserFields } from 'ontime-types';
+
+import PreviewExcel from '../upload-modal/preview/PreviewExcel';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
+import { userFieldsPlaceholder } from '../../../common/models/UserFields';
+import { PROJECT_DATA, RUNDOWN_TABLE, USERFIELDS } from '../../../common/api/apiConstants';
+import { maybeAxiosError } from '../../../common/api/apiUtils';
 
 interface SheetsModalProps {
   onClose: () => void;
@@ -23,6 +37,14 @@ export default function SheetsModal(props: SheetsModalProps) {
   const [file, setFile] = useState<File | null>(null);
   const [authState, setAuthState] = useState<boolean>(true);
 
+  const [rundown, setRundown] = useState<OntimeRundown | null>(null);
+  const [userFields, setUserFields] = useState<UserFields | null>(null);
+  const [project, setProject] = useState<ProjectData | null>(null);
+
+  const queryClient = useQueryClient();
+
+  const sheetid = useRef<HTMLInputElement>(null);
+  const worksheet = useRef<HTMLInputElement>(null);
   const handleClose = () => onClose();
   const handleClick = () => {
     fileInputRef.current?.click();
@@ -53,7 +75,38 @@ export default function SheetsModal(props: SheetsModalProps) {
       }
     });
   };
-  const handlePullData = () => {};
+  const handlePullData = () => {
+    postPreviewSheet(sheetid.current?.value ?? '', worksheet.current?.value ?? '').then((data) => {
+      setProject(data.project);
+      setRundown(data.rundown);
+      setUserFields(data.userFields);
+    });
+  };
+
+  const handleFinalise = async () => {
+    // this step is currently only used for excel files, after preview
+    if (rundown && userFields && project) {
+      let doClose = false;
+      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);
+        console.log(message);
+        // setErrors(`Failed applying changes ${message}`);
+      } finally {
+        if (doClose) {
+          handleClose();
+        }
+      }
+    }
+  };
 
   return (
     <Modal
@@ -71,31 +124,74 @@ export default function SheetsModal(props: SheetsModalProps) {
         <ModalHeader>Sheets!</ModalHeader>
         <ModalCloseButton />
         <ModalBody>
-          <Input
-            ref={fileInputRef}
-            style={{ display: 'none' }}
-            type='file'
-            onChange={handleFile}
-            accept='.json'
-            data-testid='file-input'
-          />
-          <div>Need to add some help here</div>
-          <div>
-            <Button onClick={handleClick}>Upload Client Secrect</Button>
-          </div>
-          {authState && <div>You are authenticated</div>}
-          {!authState && <div>You are not authenticated</div>}
-          <div>
-            <Button variant='ontime-filled' padding='0 2em' onClick={handlePullData}>
-              Pull data
-            </Button>
-          </div>
+          {rundown && (
+            <>
+              <PreviewExcel
+                rundown={rundown ?? []}
+                project={project ?? projectDataPlaceholder}
+                userFields={userFields ?? userFieldsPlaceholder}
+              />
+            </>
+          )}
+          {!rundown && (
+            <>
+              <Input
+                ref={fileInputRef}
+                style={{ display: 'none' }}
+                type='file'
+                onChange={handleFile}
+                accept='.json'
+                data-testid='file-input'
+              />
+              <div>Need to add some help here</div>
+              <div>
+                <Button onClick={handleClick}>Upload Client Secrect</Button>
+              </div>
+              {authState && <div>You are authenticated</div>}
+              {!authState && <div>You are not authenticated</div>}
+              <div>
+                <label htmlFor='sheetid'>Sheet ID </label>
+                <Input
+                  type='text'
+                  ref={sheetid}
+                  id='sheetid'
+                  width='440px'
+                  size='sm'
+                  textAlign='right'
+                  variant='ontime-filled-on-light'
+                />
+                <br />
+                <label htmlFor='worksheet'>Worksheet </label>
+                <Input
+                  type='text'
+                  ref={worksheet}
+                  id='worksheet'
+                  width='240px'
+                  size='sm'
+                  textAlign='right'
+                  variant='ontime-filled-on-light'
+                />
+              </div>
+              <div>
+                <Button variant='ontime-filled' padding='0 2em' onClick={handlePullData}>
+                  Pull data
+                </Button>
+              </div>
+            </>
+          )}
         </ModalBody>
         <ModalFooter>
           <Button variant='ontime-ghost-on-light'>Reset</Button>
-          <Button variant='ontime-filled' padding='0 2em' onClick={handleAuthenticate}>
-            Authenticate
-          </Button>
+          {!rundown && (
+            <Button variant='ontime-filled' padding='0 2em' onClick={handleAuthenticate}>
+              Authenticate
+            </Button>
+          )}
+          {rundown && (
+            <Button variant='ontime-filled' padding='0 2em' onClick={handleFinalise}>
+              Import
+            </Button>
+          )}
         </ModalFooter>
       </ModalContent>
     </Modal>