Project Manager: Quick Start (#762)

apps/client/src/features/app-settings/panel/project-panel/ProjectCreateForm.tsx

@@ -0,0 +1,136 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { Button, Input, Textarea } from '@chakra-ui/react';
+
+import style from './ProjectPanel.module.scss';
+
+export type ProjectCreateFormValues = {
+  title?: string;
+  description?: string;
+  publicInfo?: string;
+  publicUrl?: string;
+  backstageInfo?: string;
+  backstageUrl?: string;
+};
+
+interface ProjectCreateFormProps {
+  onCancel: () => void;
+  onSubmit: (values: ProjectCreateFormValues) => Promise<void>;
+  submitError: string | null;
+}
+
+export default function ProjectCreateForm({ onSubmit, onCancel, submitError }: ProjectCreateFormProps) {
+  const {
+    handleSubmit,
+    register,
+    formState: { isSubmitting, isValid },
+    setFocus,
+  } = useForm<ProjectCreateFormValues>({
+    defaultValues: { title: '' },
+    values: { title: '' },
+    resetOptions: {
+      keepDirtyValues: true,
+    },
+  });
+
+  useEffect(() => {
+    setFocus('title');
+  }, [setFocus]);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className={style.createFormInputField}>
+        <label>
+          Project title
+          <Input
+            variant='ontime-filled'
+            size='sm'
+            maxLength={50}
+            placeholder='Your project name'
+            autoComplete='off'
+            {...register('title')}
+          />
+        </label>
+      </div>
+      <div className={style.createFormInputField}>
+        <label>
+          Project description
+          <Input
+            variant='ontime-filled'
+            size='sm'
+            maxLength={100}
+            placeholder='Euro Love, Malmö 2024'
+            autoComplete='off'
+            {...register('description')}
+          />
+        </label>
+      </div>
+      <div className={style.createFormInputField}>
+        <label>
+          Public info
+          <Textarea
+            variant='ontime-filled'
+            size='sm'
+            maxLength={150}
+            placeholder='Shows always start ontime'
+            autoComplete='off'
+            {...register('publicInfo')}
+          />
+        </label>
+      </div>
+      <div className={style.createFormInputField}>
+        <label>
+          Public QR code Url
+          <Input
+            variant='ontime-filled'
+            size='sm'
+            placeholder='www.getontime.no'
+            autoComplete='off'
+            {...register('publicUrl')}
+          />
+        </label>
+      </div>
+      <div className={style.createFormInputField}>
+        <label>
+          Backstage info
+          <Textarea
+            variant='ontime-filled'
+            size='sm'
+            maxLength={150}
+            placeholder='Wi-Fi password: 1234'
+            autoComplete='off'
+            {...register('backstageInfo')}
+          />
+        </label>
+      </div>
+      <div className={style.createFormInputField}>
+        <label>
+          Backstage QR code Url
+          <Input
+            variant='ontime-filled'
+            size='sm'
+            placeholder='www.ontime.gitbook.io'
+            autoComplete='off'
+            {...register('backstageUrl')}
+          />
+        </label>
+      </div>
+      <div className={style.createActionButtons}>
+        <Button onClick={onCancel} variant='ontime-ghosted' size='sm'>
+          Cancel
+        </Button>
+        <Button
+          isDisabled={!isValid}
+          type='submit'
+          isLoading={isSubmitting}
+          variant='ontime-filled'
+          padding='0 2em'
+          size='sm'
+        >
+          Create
+        </Button>
+      </div>
+      {submitError && <span className={style.error}>{submitError}</span>}
+    </form>
+  );
+}

apps/client/src/features/app-settings/panel/project-panel/ProjectForm.tsx

@@ -9,7 +9,7 @@ export type ProjectFormValues = {
 };
 
 interface ProjectFormProps {
-  action: 'duplicate' | 'rename' | 'create';
+  action: 'duplicate' | 'rename';
   filename: string;
   onCancel: () => void;
   onSubmit: (values: ProjectFormValues) => Promise<void>;

apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx

@@ -5,7 +5,7 @@ import { createProject } from '../../../../common/api/ontimeApi';
 import { useProjectList } from '../../../../common/hooks-query/useProjectList';
 import * as Panel from '../PanelUtils';
 
-import ProjectForm, { ProjectFormValues } from './ProjectForm';
+import ProjectCreateForm, { ProjectCreateFormValues } from './ProjectCreateForm';
 import ProjectListItem, { EditMode } from './ProjectListItem';
 
 import style from './ProjectPanel.module.scss';
@@ -28,15 +28,15 @@ export default function ProjectList({ isCreatingProject, onToggleCreate }: Proje
     setSubmitError(null);
   };
 
-  const handleSubmitCreate = async (values: ProjectFormValues) => {
+  const handleSubmitCreate = async (values: ProjectCreateFormValues) => {
     try {
       setSubmitError(null);
-      const filename = values.filename.trim();
-      if (!filename) {
-        setSubmitError('Project name cannot be empty');
-        return;
-      }
-      await createProject(filename);
+      const filename = values.title?.trim();
+
+      await createProject({
+        ...values,
+        filename,
+      });
       await refetch();
       handleToggleCreateMode();
     } catch (error) {
@@ -82,13 +82,7 @@ export default function ProjectList({ isCreatingProject, onToggleCreate }: Proje
         {isCreatingProject ? (
           <tr className={style.createContainer}>
             <td colSpan={99}>
-              <ProjectForm
-                action='create'
-                filename=''
-                onSubmit={handleSubmitCreate}
-                onCancel={handleToggleCreateMode}
-                submitError=''
-              />
+              <ProjectCreateForm onSubmit={handleSubmitCreate} onCancel={handleToggleCreateMode} submitError='' />
               {submitError && <span className={style.createSubmitError}>{submitError}</span>}
             </td>
           </tr>

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss

@@ -19,6 +19,10 @@
   flex: 2;
 }
 
+.createFormInputField {
+  padding-bottom: 0.5rem;
+}
+
 .actionButtons {
   display: flex;
   align-items: center;
@@ -26,6 +30,14 @@
   margin-left: 1rem;
 }
 
+.createActionButtons {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 1rem;
+  justify-content: flex-end;
+}
+
 .error {
   color: $red-500;
 }