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 ( +
+ Title + {project.title} + Description + {project.description} + Public URL + {project.publicUrl} + Public info + {project.publicInfo} + Backstage URL + {project.backstageUrl} + Backstage info + {project.backstageInfo} +
+ ); +} 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 ( +
+ user0 + {userFields.user0} + user1 + {userFields.user1} + user2 + {userFields.user2} + user3 + {userFields.user3} + user4 + {userFields.user4} + user5 + {userFields.user5} + user6 + {userFields.user6} + user7 + {userFields.user7} + user8 + {userFields.user8} + user9 + {userFields.user9} +
+ ); +} 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) { + +