mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-21 15:09:10 +00:00
refactor(settings): polish settings UI
This commit is contained in:
Carlos Valente
committed by
Carlos Valente
Carlos Valente
parent
f0c284b708
commit
24be49ef66
@@ -7,13 +7,15 @@ import { getDb, patchData } from '../../../../common/api/db';
|
||||
import { maybeAxiosError } from '../../../../common/api/utils';
|
||||
import Button from '../../../../common/components/buttons/Button';
|
||||
import Info from '../../../../common/components/info/Info';
|
||||
import Modal from '../../../../common/components/modal/Modal';
|
||||
import Switch from '../../../../common/components/switch/Switch';
|
||||
import { cx } from '../../../../common/utils/styleUtils';
|
||||
import * as Panel from '../../panel-utils/PanelUtils';
|
||||
import { makeProjectPatch } from './project.utils';
|
||||
|
||||
import style from './ProjectPanel.module.scss';
|
||||
|
||||
const formId = 'project-merge-form';
|
||||
|
||||
interface ProjectMergeFromProps {
|
||||
onClose: () => void;
|
||||
fileName: string;
|
||||
@@ -77,68 +79,122 @@ export default function ProjectMergeForm({ onClose, fileName }: ProjectMergeFrom
|
||||
};
|
||||
|
||||
return (
|
||||
<Panel.Section as='form' onSubmit={handleSubmit(handleSubmitCreate)}>
|
||||
<Panel.Title>
|
||||
Partial project merge
|
||||
<Panel.InlineElements>
|
||||
<Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type='submit' disabled={!isValid || !isDirty} loading={isSubmitting} variant='primary'>
|
||||
Merge
|
||||
</Button>
|
||||
</Panel.InlineElements>
|
||||
</Panel.Title>
|
||||
{error && <Panel.Error>{error}</Panel.Error>}
|
||||
<Panel.Section className={cx([style.innerColumn, style.inlineLabels])}>
|
||||
<Panel.Description>
|
||||
Select data from <i>{`"${fileName}"`}</i> to merge into the current project.
|
||||
</Panel.Description>
|
||||
<Info type='warning'>
|
||||
This process is irreversible and can result in data loss. <br />
|
||||
You may want to create a duplicate backup beforehand.
|
||||
</Info>
|
||||
<label>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('project')}
|
||||
onCheckedChange={(value: boolean) => setValue('project', value, { shouldDirty: true })}
|
||||
/>
|
||||
Project data
|
||||
</label>
|
||||
<label>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('rundowns')}
|
||||
onCheckedChange={(value: boolean) => setValue('rundowns', value, { shouldDirty: true })}
|
||||
/>
|
||||
Rundown + Custom Fields
|
||||
</label>
|
||||
<label>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('viewSettings')}
|
||||
onCheckedChange={(value: boolean) => setValue('viewSettings', value, { shouldDirty: true })}
|
||||
/>
|
||||
View Settings
|
||||
</label>
|
||||
<label>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('urlPresets')}
|
||||
onCheckedChange={(value: boolean) => setValue('urlPresets', value, { shouldDirty: true })}
|
||||
/>
|
||||
URL Presets
|
||||
</label>
|
||||
<label>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('automation')}
|
||||
onCheckedChange={(value: boolean) => setValue('automation', value, { shouldDirty: true })}
|
||||
/>
|
||||
Automation Settings
|
||||
</label>
|
||||
</Panel.Section>
|
||||
</Panel.Section>
|
||||
<Modal
|
||||
isOpen
|
||||
onClose={onClose}
|
||||
showBackdrop
|
||||
showCloseButton
|
||||
size='compact'
|
||||
title='Partial project merge'
|
||||
bodyElements={
|
||||
<form id={formId} onSubmit={handleSubmit(handleSubmitCreate)}>
|
||||
<Panel.Section className={style.mergeBody}>
|
||||
<div className={style.mergeIntro}>
|
||||
<Panel.Description>
|
||||
Select the sections from <span className={style.sourceFile}>{`"${fileName}"`}</span> that you want to
|
||||
merge into the current project.
|
||||
</Panel.Description>
|
||||
<div className={style.mergeSummary}>
|
||||
Only the enabled sections are copied. Existing data stays intact.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Info type='warning' className={style.mergeWarningInfo}>
|
||||
<Info.Title>Back up before merging</Info.Title>
|
||||
<Info.Body>
|
||||
This action can overwrite project data. Create a duplicate project first if you want a recovery point.
|
||||
</Info.Body>
|
||||
</Info>
|
||||
|
||||
<Panel.ListGroup className={style.optionList}>
|
||||
<Panel.ListItem>
|
||||
<label className={style.optionRow}>
|
||||
<div className={style.optionCopy}>
|
||||
<span className={style.optionTitle}>Project data</span>
|
||||
<span className={style.optionBody}>Core project metadata and settings.</span>
|
||||
</div>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('project')}
|
||||
onCheckedChange={(value: boolean) => setValue('project', value, { shouldDirty: true })}
|
||||
/>
|
||||
</label>
|
||||
</Panel.ListItem>
|
||||
<Panel.ListItem>
|
||||
<label className={style.optionRow}>
|
||||
<div className={style.optionCopy}>
|
||||
<span className={style.optionTitle}>Rundown + Custom Fields</span>
|
||||
<span className={style.optionBody}>Copies all rundowns and any associated custom fields.</span>
|
||||
</div>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('rundowns')}
|
||||
onCheckedChange={(value: boolean) => setValue('rundowns', value, { shouldDirty: true })}
|
||||
/>
|
||||
</label>
|
||||
</Panel.ListItem>
|
||||
<Panel.ListItem>
|
||||
<label className={style.optionRow}>
|
||||
<div className={style.optionCopy}>
|
||||
<span className={style.optionTitle}>View Settings</span>
|
||||
<span className={style.optionBody}>View configuration, and display preferences.</span>
|
||||
</div>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('viewSettings')}
|
||||
onCheckedChange={(value: boolean) => setValue('viewSettings', value, { shouldDirty: true })}
|
||||
/>
|
||||
</label>
|
||||
</Panel.ListItem>
|
||||
<Panel.ListItem>
|
||||
<label className={style.optionRow}>
|
||||
<div className={style.optionCopy}>
|
||||
<span className={style.optionTitle}>URL Presets</span>
|
||||
<span className={style.optionBody}>Saved links and preset launch parameters.</span>
|
||||
</div>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('urlPresets')}
|
||||
onCheckedChange={(value: boolean) => setValue('urlPresets', value, { shouldDirty: true })}
|
||||
/>
|
||||
</label>
|
||||
</Panel.ListItem>
|
||||
<Panel.ListItem>
|
||||
<label className={style.optionRow}>
|
||||
<div className={style.optionCopy}>
|
||||
<span className={style.optionTitle}>Automation Settings</span>
|
||||
<span className={style.optionBody}>Triggers and automation configuration.</span>
|
||||
</div>
|
||||
<Switch
|
||||
size='large'
|
||||
checked={watch('automation')}
|
||||
onCheckedChange={(value: boolean) => setValue('automation', value, { shouldDirty: true })}
|
||||
/>
|
||||
</label>
|
||||
</Panel.ListItem>
|
||||
</Panel.ListGroup>
|
||||
</Panel.Section>
|
||||
</form>
|
||||
}
|
||||
footerElements={
|
||||
<div className={style.footerContent}>
|
||||
{error && <Panel.Error>{error}</Panel.Error>}
|
||||
<div className={style.footerActions}>
|
||||
<Button onClick={onClose} variant='ghosted' disabled={isSubmitting}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type='submit'
|
||||
form={formId}
|
||||
disabled={!isValid || !isDirty}
|
||||
loading={isSubmitting}
|
||||
variant='primary'
|
||||
>
|
||||
Merge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user