mirror of
https://github.com/cpvalente/ontime.git
synced 2026-08-17 21:24:11 +00:00
refactor: project data (#523)
This commit is contained in:
@@ -16,12 +16,12 @@ import {
|
||||
ModalOverlay,
|
||||
Textarea,
|
||||
} from '@chakra-ui/react';
|
||||
import type { EventData } from 'ontime-types';
|
||||
import type { ProjectData } from 'ontime-types';
|
||||
|
||||
import { EVENT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
|
||||
import { PROJECT_DATA, RUNDOWN_TABLE } from '../../../common/api/apiConstants';
|
||||
import { postNew } from '../../../common/api/ontimeApi';
|
||||
import useEventData from '../../../common/hooks-query/useEventData';
|
||||
import { eventDataPlaceholder } from '../../../common/models/EventData';
|
||||
import useProjectData from '../../../common/hooks-query/useProjectData';
|
||||
import { projectDataPlaceholder } from '../../../common/models/ProjectData';
|
||||
import { ontimeQueryClient } from '../../../common/queryClient';
|
||||
|
||||
import styles from '../Modal.module.scss';
|
||||
@@ -32,7 +32,7 @@ interface QuickStartProps {
|
||||
}
|
||||
|
||||
export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
const { data, status } = useEventData();
|
||||
const { data, status } = useProjectData();
|
||||
const {
|
||||
handleSubmit,
|
||||
register,
|
||||
@@ -49,10 +49,10 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
if (data) reset(data);
|
||||
}, [data, reset]);
|
||||
|
||||
const onSubmit = async (data: Partial<EventData>) => {
|
||||
const onSubmit = async (data: Partial<ProjectData>) => {
|
||||
try {
|
||||
await postNew(data);
|
||||
await ontimeQueryClient.invalidateQueries(EVENT_DATA);
|
||||
await ontimeQueryClient.invalidateQueries(PROJECT_DATA);
|
||||
await ontimeQueryClient.invalidateQueries(RUNDOWN_TABLE);
|
||||
|
||||
onClose();
|
||||
@@ -61,7 +61,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
}
|
||||
};
|
||||
|
||||
const onReset = () => reset(eventDataPlaceholder);
|
||||
const onReset = () => reset(projectDataPlaceholder);
|
||||
|
||||
const disableButtons = status !== 'success' || isSubmitting;
|
||||
return (
|
||||
@@ -86,13 +86,13 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
<div className={styles.column}>
|
||||
<AlertTitle>Note</AlertTitle>
|
||||
<AlertDescription>
|
||||
On submit, application options will be kept but rundown and event data will be reset
|
||||
On submit, application options will be kept but rundown and project data will be reset
|
||||
</AlertDescription>
|
||||
</div>
|
||||
</Alert>
|
||||
<div className={styles.entryRow}>
|
||||
<label className={styles.sectionTitle}>
|
||||
Event title
|
||||
Project title
|
||||
<Input
|
||||
variant='ontime-filled-on-light'
|
||||
size='sm'
|
||||
@@ -104,7 +104,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
</div>
|
||||
<div className={styles.entryRow}>
|
||||
<label className={styles.sectionTitle}>
|
||||
Event description
|
||||
Project description
|
||||
<Input
|
||||
variant='ontime-filled-on-light'
|
||||
size='sm'
|
||||
@@ -116,7 +116,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
</div>
|
||||
<div className={styles.entryRow}>
|
||||
<label className={styles.sectionTitle}>
|
||||
Public Info
|
||||
Public info
|
||||
<Textarea
|
||||
variant='ontime-filled-on-light'
|
||||
size='sm'
|
||||
@@ -128,7 +128,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
</div>
|
||||
<div className={styles.entryRow}>
|
||||
<label className={styles.sectionTitle}>
|
||||
Public QR Code Url
|
||||
Public QR code Url
|
||||
<Input
|
||||
variant='ontime-filled-on-light'
|
||||
size='sm'
|
||||
@@ -139,7 +139,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
</div>
|
||||
<div className={styles.entryRow}>
|
||||
<label className={styles.sectionTitle}>
|
||||
Backstage Info
|
||||
Backstage info
|
||||
<Textarea
|
||||
variant='ontime-filled-on-light'
|
||||
size='sm'
|
||||
@@ -151,7 +151,7 @@ export default function QuickStart({ onClose, isOpen }: QuickStartProps) {
|
||||
</div>
|
||||
<div className={styles.entryRow}>
|
||||
<label className={styles.sectionTitle}>
|
||||
Backstage QR Code Url
|
||||
Backstage QR code Url
|
||||
<Input
|
||||
variant='ontime-filled-on-light'
|
||||
size='sm'
|
||||
|
||||
+15
-15
@@ -1,11 +1,11 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { Input, Textarea } from '@chakra-ui/react';
|
||||
import { EventData } from 'ontime-types';
|
||||
import { ProjectData } from 'ontime-types';
|
||||
|
||||
import { logAxiosError } from '../../../common/api/apiUtils';
|
||||
import { postEventData } from '../../../common/api/eventDataApi';
|
||||
import useEventData from '../../../common/hooks-query/useEventData';
|
||||
import { postProjectData } from '../../../common/api/projectDataApi';
|
||||
import useProjectData from '../../../common/hooks-query/useProjectData';
|
||||
import ModalLoader from '../modal-loader/ModalLoader';
|
||||
import { inputProps } from '../modalHelper';
|
||||
import ModalInput from '../ModalInput';
|
||||
@@ -13,14 +13,14 @@ import OntimeModalFooter from '../OntimeModalFooter';
|
||||
|
||||
import style from './SettingsModal.module.scss';
|
||||
|
||||
export default function EventDataForm() {
|
||||
const { data, status, isFetching, refetch } = useEventData();
|
||||
export default function ProjectDataForm() {
|
||||
const { data, status, isFetching, refetch } = useProjectData();
|
||||
const {
|
||||
handleSubmit,
|
||||
register,
|
||||
reset,
|
||||
formState: { errors, isSubmitting, isDirty, isValid },
|
||||
} = useForm<EventData>({
|
||||
} = useForm<ProjectData>({
|
||||
defaultValues: data,
|
||||
values: data,
|
||||
resetOptions: {
|
||||
@@ -34,11 +34,11 @@ export default function EventDataForm() {
|
||||
}
|
||||
}, [data, reset]);
|
||||
|
||||
const onSubmit = async (formData: EventData) => {
|
||||
const onSubmit = async (formData: ProjectData) => {
|
||||
try {
|
||||
await postEventData(formData);
|
||||
await postProjectData(formData);
|
||||
} catch (error) {
|
||||
logAxiosError('Error saving event settings', error);
|
||||
logAxiosError('Error saving project data', error);
|
||||
} finally {
|
||||
await refetch();
|
||||
}
|
||||
@@ -55,10 +55,10 @@ export default function EventDataForm() {
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onSubmit)} id='event-data' className={style.sectionContainer}>
|
||||
<form onSubmit={handleSubmit(onSubmit)} id='project-data' className={style.sectionContainer}>
|
||||
<ModalInput
|
||||
field='title'
|
||||
title='Event title'
|
||||
title='Project title'
|
||||
description='Shown in overview screens'
|
||||
error={errors.title?.message}
|
||||
>
|
||||
@@ -73,7 +73,7 @@ export default function EventDataForm() {
|
||||
</ModalInput>
|
||||
<ModalInput
|
||||
field='description'
|
||||
title='Event description'
|
||||
title='Project description'
|
||||
description='Free field, shown in editor'
|
||||
error={errors.description?.message}
|
||||
>
|
||||
@@ -87,7 +87,7 @@ export default function EventDataForm() {
|
||||
/>
|
||||
</ModalInput>
|
||||
<div style={{ height: '16px' }} />
|
||||
<ModalInput field='publicInfo' title='Public Info' description='Information shown in public screens'>
|
||||
<ModalInput field='publicInfo' title='Public info' description='Information shown in public screens'>
|
||||
<Textarea
|
||||
{...inputProps}
|
||||
variant='ontime-filled-on-light'
|
||||
@@ -107,7 +107,7 @@ export default function EventDataForm() {
|
||||
/>
|
||||
</ModalInput>
|
||||
<div style={{ height: '16px' }} />
|
||||
<ModalInput field='backstageInfo' title='Backstage Info' description='Information shown in public screens'>
|
||||
<ModalInput field='backstageInfo' title='Backstage info' description='Information shown in public screens'>
|
||||
<Textarea
|
||||
{...inputProps}
|
||||
variant='ontime-filled-on-light'
|
||||
@@ -128,7 +128,7 @@ export default function EventDataForm() {
|
||||
/>
|
||||
</ModalInput>
|
||||
<OntimeModalFooter
|
||||
formId='event-data'
|
||||
formId='project-data'
|
||||
handleRevert={onReset}
|
||||
isDirty={isDirty}
|
||||
isValid={isValid}
|
||||
@@ -6,7 +6,7 @@ import AliasesForm from './AliasesForm';
|
||||
import AppSettingsModal from './AppSettings';
|
||||
import CuesheetSettingsForm from './CuesheetSettingsForm';
|
||||
import EditorSettings from './EditorSettings';
|
||||
import EventDataForm from './EventDataForm';
|
||||
import ProjectDataForm from './ProjectDataForm';
|
||||
import ViewSettingsForm from './ViewSettingsForm';
|
||||
|
||||
interface ModalManagerProps {
|
||||
@@ -22,7 +22,7 @@ export default function SettingsModal(props: ModalManagerProps) {
|
||||
<Tabs variant='ontime' size='sm' isLazy>
|
||||
<TabList>
|
||||
<Tab>App</Tab>
|
||||
<Tab>Event Data</Tab>
|
||||
<Tab>Project Data</Tab>
|
||||
<Tab>Editor</Tab>
|
||||
<Tab>Cuesheet</Tab>
|
||||
<Tab>Views</Tab>
|
||||
@@ -33,7 +33,7 @@ export default function SettingsModal(props: ModalManagerProps) {
|
||||
<AppSettingsModal />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<EventDataForm />
|
||||
<ProjectDataForm />
|
||||
</TabPanel>
|
||||
<TabPanel>
|
||||
<EditorSettings />
|
||||
|
||||
Reference in New Issue
Block a user