From 49c44a831c693282607e8c20d89b4d2010ff566a Mon Sep 17 00:00:00 2001
From: cv <34649812+cpvalente@users.noreply.github.com>
Date: Sat, 2 Sep 2023 15:46:16 +0200
Subject: [PATCH] wip: create preview components

---
 .../import-preview/PreviewColumn.module.scss  | 23 +++++++++++++
 .../import-preview/PreviewProjectData.tsx     | 26 ++++++++++++++
 .../import-preview/PreviewUserFields.tsx      | 34 +++++++++++++++++++
 .../modals/upload-modal/UploadModal.tsx       |  7 ++++
 4 files changed, 90 insertions(+)
 create mode 100644 apps/client/src/common/components/import-preview/PreviewColumn.module.scss
 create mode 100644 apps/client/src/common/components/import-preview/PreviewProjectData.tsx
 create mode 100644 apps/client/src/common/components/import-preview/PreviewUserFields.tsx

diff --git a/apps/client/src/common/components/import-preview/PreviewColumn.module.scss b/apps/client/src/common/components/import-preview/PreviewColumn.module.scss
new file mode 100644
index 000000000..7fa0f6da7
--- /dev/null
+++ b/apps/client/src/common/components/import-preview/PreviewColumn.module.scss
@@ -0,0 +1,23 @@
+@use "../../../theme/_ontimeColours" as *;
+
+@mixin pad-item {
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+.previewTable {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(6, auto);
+  gap: 1px;
+}
+
+.field {
+  @include pad-item;
+  background-color: $gray-100;
+}
+
+.value {
+  @include pad-item;
+  background-color: $gray-50;
+}
diff --git a/apps/client/src/common/components/import-preview/PreviewProjectData.tsx b/apps/client/src/common/components/import-preview/PreviewProjectData.tsx
new file mode 100644
index 000000000..46eb00d47
--- /dev/null
+++ b/apps/client/src/common/components/import-preview/PreviewProjectData.tsx
@@ -0,0 +1,26 @@
+import { ProjectData } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewProjectDataProps {
+  project: ProjectData;
+}
+
+export default function PreviewProjectData({ project }: PreviewProjectDataProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>Title</span>
+      <span className={style.value}>{project.title}</span>
+      <span className={style.field}>Description</span>
+      <span className={style.value}>{project.description}</span>
+      <span className={style.field}>Public URL</span>
+      <span className={style.value}>{project.publicUrl}</span>
+      <span className={style.field}>Public info</span>
+      <span className={style.value}>{project.publicInfo}</span>
+      <span className={style.field}>Backstage URL</span>
+      <span className={style.value}>{project.backstageUrl}</span>
+      <span className={style.field}>Backstage info</span>
+      <span className={style.value}>{project.backstageInfo}</span>
+    </div>
+  );
+}
diff --git a/apps/client/src/common/components/import-preview/PreviewUserFields.tsx b/apps/client/src/common/components/import-preview/PreviewUserFields.tsx
new file mode 100644
index 000000000..119de7d65
--- /dev/null
+++ b/apps/client/src/common/components/import-preview/PreviewUserFields.tsx
@@ -0,0 +1,34 @@
+import { UserFields } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewUserFieldProps {
+  userFields: UserFields;
+}
+
+export default function PreviewUserField({ userFields }: PreviewUserFieldProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>user0</span>
+      <span className={style.value}>{userFields.user0}</span>
+      <span className={style.field}>user1</span>
+      <span className={style.value}>{userFields.user1}</span>
+      <span className={style.field}>user2</span>
+      <span className={style.value}>{userFields.user2}</span>
+      <span className={style.field}>user3</span>
+      <span className={style.value}>{userFields.user3}</span>
+      <span className={style.field}>user4</span>
+      <span className={style.value}>{userFields.user4}</span>
+      <span className={style.field}>user5</span>
+      <span className={style.value}>{userFields.user5}</span>
+      <span className={style.field}>user6</span>
+      <span className={style.value}>{userFields.user6}</span>
+      <span className={style.field}>user7</span>
+      <span className={style.value}>{userFields.user7}</span>
+      <span className={style.field}>user8</span>
+      <span className={style.value}>{userFields.user8}</span>
+      <span className={style.field}>user9</span>
+      <span className={style.value}>{userFields.user9}</span>
+    </div>
+  );
+}
diff --git a/apps/client/src/features/modals/upload-modal/UploadModal.tsx b/apps/client/src/features/modals/upload-modal/UploadModal.tsx
index 0afd26382..f9ed44440 100644
--- a/apps/client/src/features/modals/upload-modal/UploadModal.tsx
+++ b/apps/client/src/features/modals/upload-modal/UploadModal.tsx
@@ -25,6 +25,11 @@ import ModalSplitInput from '../ModalSplitInput';
 import { validateFile } from './utils';
 
 import style from './UploadModal.module.scss';
+import PreviewProjectData from '../../../common/components/import-preview/PreviewProjectData';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
+import CollapsableInfo from '../../info/CollapsableInfo';
+import PreviewUserField from '../../../common/components/import-preview/PreviewUserFields';
+import { userFieldsPlaceholder } from '../../../common/models/UserFields';
 
 interface UploadModalProps {
   onClose: () => void;
@@ -154,6 +159,8 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
               <Switch variant='ontime-on-light' ref={overrideOptionRef} />
             </ModalSplitInput>
           </div>
+          <PreviewProjectData project={projectDataPlaceholder} />
+          <PreviewUserField userFields={userFieldsPlaceholder} />
         </ModalBody>
         <ModalFooter className={`${style.buttonSection} ${style.pad}`}>
           <Button onClick={handleClose} isDisabled={isSubmitting} variant='ontime-ghost-on-light' size='sm'>