Add upload list and fetch metadata for selected uploaded items

the-deep · Feb 26, 2024 · 4fec259 · 4fec259
1 parent 482dc9b
commit 4fec259
Show file tree

Hide file tree

Showing 10 changed files with 600 additions and 130 deletions.
diff --git a/app/components/GalleryFileUpload/index.tsx b/app/components/GalleryFileUpload/index.tsx
@@ -1,15 +1,18 @@
-import React, { useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { FileInput, useAlert } from '@the-deep/deep-ui';
 import { IoCloudUpload } from 'react-icons/io5';
 import { gql, useMutation } from '@apollo/client';
 import { removeNull } from '@togglecorp/toggle-form';
+import { _cs } from '@togglecorp/fujs';
 
 import {
     FileUploadMutation,
     FileUploadMutationVariables,
     GalleryFileType,
 } from '#generated/types';
 
+import styles from './styles.css';
+
 const UPLOAD_FILE = gql`
     mutation FileUpload(
         $data: FileUploadInputType!,
@@ -31,11 +34,12 @@ const UPLOAD_FILE = gql`
     }
 `;
 interface Props {
-    onSuccess: (file: NonNullable<GalleryFileType>) => void;
-    acceptFileType?: '.pdf' | 'image/*';
+    onSuccess: (file: NonNullable<GalleryFileType>, uploadedFile: File | undefined) => void;
+    acceptFileType?: '.pdf' | 'image/*' | '.xlsx' | '.csv';
     title?: string;
     disabled?: boolean;
     projectIds?: string[];
+    buttonOnly?: boolean;
 }
 
 function FileUpload(props: Props) {
@@ -45,8 +49,11 @@ function FileUpload(props: Props) {
         acceptFileType,
         disabled,
         projectIds,
+        buttonOnly,
     } = props;
+
     const alert = useAlert();
+    const [uploadedFile, setUploadedFile] = useState<File>();
 
     const [
         uploadFile,
@@ -76,6 +83,7 @@ function FileUpload(props: Props) {
                     const resultRemoveNull = removeNull(result);
                     onSuccess(
                         resultRemoveNull,
+                        uploadedFile,
                     );
                 }
             },
@@ -93,6 +101,7 @@ function FileUpload(props: Props) {
             if (!value) {
                 return;
             }
+            setUploadedFile(value);
 
             uploadFile({
                 variables: {
@@ -115,17 +124,23 @@ function FileUpload(props: Props) {
 
     return (
         <FileInput
+            className={_cs(
+                styles.galleryFileUpload,
+                buttonOnly && styles.buttonOnly,
+            )}
             name={undefined}
             value={null}
             onChange={handleFileInputChange}
             status={undefined}
             overrideStatus
-            title={title}
+            title={buttonOnly ? undefined : title}
+            label={buttonOnly ? undefined : title}
             maxFileSize={100}
             accept={acceptFileType}
             disabled={loading || disabled}
         >
             <IoCloudUpload />
+            {buttonOnly ? title : undefined}
         </FileInput>
     );
 }

diff --git a/app/components/GalleryFileUpload/styles.css b/app/components/GalleryFileUpload/styles.css
@@ -0,0 +1,5 @@
+.gallery-file-upload {
+    &.button-only {
+        --height-border: 0;
+    }
+}
diff --git a/app/components/report/ReportBuilder/DatasetsConfigureButton/DatasetItem/index.tsx b/app/components/report/ReportBuilder/DatasetsConfigureButton/DatasetItem/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { _cs } from '@togglecorp/fujs';
+import {
+    RawButton,
+} from '@the-deep/deep-ui';
+
+import styles from './styles.css';
+
+interface Props {
+    datasetId: string;
+    title: string;
+    active: boolean;
+    onClick: (datasetId: string) => void;
+}
+
+function DatasetItem(props: Props) {
+    const {
+        title,
+        datasetId,
+        onClick,
+        active,
+    } = props;
+
+    return (
+        <RawButton
+            name={datasetId}
+            onClick={onClick}
+            className={_cs(
+                styles.frameworkItem,
+                active && styles.selected,
+            )}
+        >
+            <div className={styles.title}>
+                {title}
+            </div>
+        </RawButton>
+    );
+}
+
+export default DatasetItem;
diff --git a/app/components/report/ReportBuilder/DatasetsConfigureButton/DatasetItem/styles.css b/app/components/report/ReportBuilder/DatasetsConfigureButton/DatasetItem/styles.css
@@ -0,0 +1,18 @@
+.framework-item {
+    display: flex;
+    flex-direction: column;
+    border-bottom: var(--dui-width-separator-thin) solid var(--dui-color-separator);
+    background-color: var(--dui-color-background-information);
+    padding: var(--dui-spacing-small) var(--dui-spacing-medium);
+    width: 100%;
+    text-align: left;
+    gap: var(--dui-spacing-small);
+
+    .title {
+        font-weight: var(--dui-font-weight-bold);
+    }
+
+    &.selected {
+        background-color: var(--dui-color-surface-information);
+    }
+}
diff --git a/app/components/report/ReportBuilder/DatasetsConfigureButton/SheetItem/VariableItem/index.tsx b/app/components/report/ReportBuilder/DatasetsConfigureButton/SheetItem/VariableItem/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-    ExpandableContainer,
+    Heading,
     TextOutput,
     SelectInput,
 } from '@the-deep/deep-ui';
@@ -59,13 +59,17 @@ interface Props {
         index: number,
     ) => void | undefined;
     index: number;
+    disabled?: boolean;
+    readOnly?: boolean;
 }
 
 function VariableItem(props: Props) {
     const {
         column,
         setVariableValue,
         index,
+        disabled,
+        readOnly,
     } = props;
 
     const setFieldValue = useFormObject(
@@ -83,30 +87,31 @@ function VariableItem(props: Props) {
         ?.enums?.AnalysisReportVariableSerializerType;
 
     return (
-        <ExpandableContainer
-            key={column.clientId}
-            heading={column.name}
-            headingClassName={styles.columnHeading}
-            className={styles.expandableContainer}
-            headerClassName={styles.columnHeader}
-            spacing="compact"
-            headingSize="extraSmall"
-            contentClassName={styles.columnContent}
-        >
+        <div className={styles.variableItem}>
+            <Heading
+                className={styles.heading}
+                size="extraSmall"
+            >
+                {column.name}
+            </Heading>
             <TextOutput
+                className={styles.heading}
                 label="Completeness"
                 value="90%"
             />
             <SelectInput
+                className={styles.heading}
                 name="type"
                 options={columnDataTypeOptions ?? undefined}
                 label="Column data type"
                 keySelector={enumKeySelector}
                 labelSelector={enumLabelSelector}
                 value={column.type}
                 onChange={setFieldValue}
+                disabled={disabled}
+                readOnly={readOnly}
             />
-        </ExpandableContainer>
+        </div>
     );
 }
 

diff --git a/...components/report/ReportBuilder/DatasetsConfigureButton/SheetItem/VariableItem/styles.css b/...components/report/ReportBuilder/DatasetsConfigureButton/SheetItem/VariableItem/styles.css
@@ -1,20 +1,15 @@
-.expandable-container {
-    border: none;
+.variable-item {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--dui-spacing-extra-small);
 
-    .header-description {
-        display: flex;
-        gap: var(--dui-spacing-small);
+    .heading {
+        width: 10rem;
     }
-}
-.column-header {
-    background-color: transparent;
-    color: var(--dui-color-text);
-
-    .column-heading {
-        color: var(--dui-color-text);
+    .completeness {
+        width: 10rem;
+    }
+    .type {
+        width: 20rem;
     }
-}
-.column-content {
-    display: flex;
-    gap: var(--dui-spacing-medium);
 }
diff --git a/app/components/report/ReportBuilder/DatasetsConfigureButton/SheetItem/index.tsx b/app/components/report/ReportBuilder/DatasetsConfigureButton/SheetItem/index.tsx
@@ -12,6 +12,10 @@ import {
     useFormObject,
     useFormArray,
 } from '@togglecorp/toggle-form';
+import {
+    utils,
+    type WorkSheet,
+} from 'xlsx';
 
 import VariableItem from './VariableItem';
 import { type SheetType, type VariableType } from '..';
@@ -26,6 +30,9 @@ interface Props {
         index: number
     ) => void;
     index: number;
+    workSheet: WorkSheet | undefined;
+    disabled?: boolean;
+    readOnly?: boolean;
 }
 
 const defaultSheetItem = (): SheetType => ({
@@ -36,7 +43,10 @@ function SheetItem(props: Props) {
     const {
         item,
         setSheetValue,
+        workSheet,
         index,
+        disabled,
+        readOnly,
     } = props;
 
     const setFieldValue = useFormObject(
@@ -45,6 +55,23 @@ function SheetItem(props: Props) {
         defaultSheetItem,
     );
 
+    const handleHeaderRowChange = useCallback((newHeaderRow: number | undefined) => {
+        setFieldValue(newHeaderRow, 'headerRow');
+        if (!workSheet || !newHeaderRow) {
+            return;
+        }
+        const rawData = utils.sheet_to_json(workSheet, { header: 1 });
+        const columns = (rawData[newHeaderRow - 1] as string[]).map((rawItem) => ({
+            clientId: randomString(),
+            name: rawItem,
+            type: 'TEXT' as const,
+        }));
+        setFieldValue(columns, 'variables');
+    }, [
+        setFieldValue,
+        workSheet,
+    ]);
+
     const {
         setValue: setVariableValue,
     } = useFormArray('variables', setFieldValue);
@@ -58,7 +85,11 @@ function SheetItem(props: Props) {
             column: datum,
             setVariableValue,
             index: variableIndex,
+            disabled,
+            readOnly,
         }), [
+            disabled,
+            readOnly,
             setVariableValue,
         ],
     );
@@ -78,12 +109,16 @@ function SheetItem(props: Props) {
                         label="Name"
                         value={item?.name}
                         onChange={setFieldValue}
+                        disabled={disabled}
+                        readOnly
                     />
                     <NumberInput
                         name="headerRow"
                         label="Header Row"
                         value={item.headerRow}
-                        onChange={setFieldValue}
+                        onChange={handleHeaderRowChange}
+                        disabled={disabled}
+                        readOnly={readOnly}
                     />
                 </>
             )}
@@ -97,6 +132,7 @@ function SheetItem(props: Props) {
                 filtered={false}
                 errored={false}
                 pending={false}
+                borderBetweenItem
             />
         </ExpandableContainer>
     );

diff --git a/app/components/report/ReportBuilder/DatasetsConfigureButton/SheetItem/styles.css b/app/components/report/ReportBuilder/DatasetsConfigureButton/SheetItem/styles.css
@@ -5,5 +5,6 @@
 .variables {
     display: flex;
     flex-direction: column;
-    gap: var(--dui-spacing-small);
+    flex-shrink: 0;
+    gap: var(--dui-spacing-extra-small);
 }