refactor!: rename eventData > project

2026-08-16 21:03:29 +00:00 · 2023-09-02 14:52:44 +02:00
parent 8d427a6bbe
commit 8c6ef9bfc3
41 changed files with 191 additions and 185 deletions
@@ -0,0 +1,139 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Input, Textarea } from '@chakra-ui/react';
+import { ProjectData } from 'ontime-types';
+
+import { logAxiosError } from '../../../common/api/apiUtils';
+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';
+import OntimeModalFooter from '../OntimeModalFooter';
+
+import style from './SettingsModal.module.scss';
+
+export default function ProjectDataForm() {
+  const { data, status, isFetching, refetch } = useProjectData();
+  const {
+    handleSubmit,
+    register,
+    reset,
+    formState: { errors, isSubmitting, isDirty, isValid },
+  } = useForm<ProjectData>({
+    defaultValues: data,
+    values: data,
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset(data);
+    }
+  }, [data, reset]);
+
+  const onSubmit = async (formData: ProjectData) => {
+    try {
+      await postProjectData(formData);
+    } catch (error) {
+      logAxiosError('Error saving project data', error);
+    } finally {
+      await refetch();
+    }
+  };
+
+  const onReset = () => {
+    reset(data);
+  };
+
+  const disableInputs = status === 'loading';
+
+  if (isFetching) {
+    return <ModalLoader />;
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} id='project-data' className={style.sectionContainer}>
+      <ModalInput
+        field='title'
+        title='Project title'
+        description='Shown in overview screens'
+        error={errors.title?.message}
+      >
+        <Input
+          {...inputProps}
+          variant='ontime-filled-on-light'
+          maxLength={50}
+          placeholder='Eurovision song contest'
+          isDisabled={disableInputs}
+          {...register('title')}
+        />
+      </ModalInput>
+      <ModalInput
+        field='description'
+        title='Project description'
+        description='Free field, shown in editor'
+        error={errors.description?.message}
+      >
+        <Input
+          {...inputProps}
+          variant='ontime-filled-on-light'
+          maxLength={100}
+          placeholder='Euro Love, Malmö 2024'
+          isDisabled={disableInputs}
+          {...register('description')}
+        />
+      </ModalInput>
+      <div style={{ height: '16px' }} />
+      <ModalInput field='publicInfo' title='Public info' description='Information shown in public screens'>
+        <Textarea
+          {...inputProps}
+          variant='ontime-filled-on-light'
+          maxLength={150}
+          placeholder='Shows always start ontime'
+          isDisabled={disableInputs}
+          {...register('publicInfo')}
+        />
+      </ModalInput>
+      <ModalInput field='publicUrl' title='Public URL' description='QR code to be shown on public screens'>
+        <Input
+          {...inputProps}
+          variant='ontime-filled-on-light'
+          placeholder='www.getontime.no'
+          isDisabled={disableInputs}
+          {...register('publicUrl')}
+        />
+      </ModalInput>
+      <div style={{ height: '16px' }} />
+      <ModalInput field='backstageInfo' title='Backstage info' description='Information shown in public screens'>
+        <Textarea
+          {...inputProps}
+          variant='ontime-filled-on-light'
+          maxLength={150}
+          placeholder='Wi-Fi password: 1234'
+          isDisabled={disableInputs}
+          {...register('backstageInfo')}
+        />
+      </ModalInput>
+      <ModalInput field='backstageUrl' title='Backstage URL' description='QR code to be shown on public screens'>
+        <Input
+          {...inputProps}
+          variant='ontime-filled-on-light'
+          size='sm'
+          placeholder='www.ontime.gitbook.io'
+          isDisabled={disableInputs}
+          {...register('backstageUrl')}
+        />
+      </ModalInput>
+      <OntimeModalFooter
+        formId='project-data'
+        handleRevert={onReset}
+        isDirty={isDirty}
+        isValid={isValid}
+        isSubmitting={isSubmitting}
+      />
+    </form>
+  );
+}