cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-12 10:53:51 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

wip: create preview components

Browse Source
This commit is contained in:
cv
2023-09-02 15:46:16 +02:00
parent b51f3c966d
commit 49c44a831c
4 changed files with 90 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/common/components/import-preview/PreviewColumn.module.scss
+23
View File
@@ -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;
}
apps/client/src/common/components/import-preview/PreviewProjectData.tsx
+26
View File
@@ -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>
);
}
apps/client/src/common/components/import-preview/PreviewUserFields.tsx
+34
View File
@@ -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>
);
}
apps/client/src/features/modals/upload-modal/UploadModal.tsx
+7
View File
@@ -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'>