add initial menus in modals

xvvvyz · Jul 19, 2024 · fe86f1e · fe86f1e
1 parent 76dc2b6
commit fe86f1e
Show file tree

Hide file tree

Showing 20 changed files with 707 additions and 389 deletions.
diff --git a/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/[eventTypeId]/edit/page.tsx b/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/[eventTypeId]/edit/page.tsx
@@ -1,9 +1,9 @@
 import EventTypeForm from '@/_components/event-type-form';
-import PageModalHeader from '@/_components/page-modal-header';
 import getEventTypeWithInputs from '@/_queries/get-event-type-with-inputs';
 import getSubject from '@/_queries/get-subject';
 import listInputsBySubjectId from '@/_queries/list-inputs-by-subject-id';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
+import listTemplatesWithData from '@/_queries/list-templates-with-data';
 import formatTitle from '@/_utilities/format-title';
 
 interface PageProps {
@@ -23,27 +23,33 @@ const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
     { data: eventType },
     { data: availableInputs },
     { data: subjects },
+    { data: availableTemplates },
   ] = await Promise.all([
     getSubject(subjectId),
     getEventTypeWithInputs(eventTypeId),
     listInputsBySubjectId(subjectId),
     listSubjectsByTeamId(),
+    listTemplatesWithData(),
   ]);
 
-  if (!subject || !eventType || !availableInputs || !subjects) {
+  if (
+    !subject ||
+    !eventType ||
+    !availableInputs ||
+    !subjects ||
+    !availableTemplates
+  ) {
     return null;
   }
 
   return (
-    <>
-      <PageModalHeader title={eventType.name as string} />
-      <EventTypeForm
-        availableInputs={availableInputs}
-        eventType={eventType}
-        subjects={subjects}
-        subjectId={subjectId}
-      />
-    </>
+    <EventTypeForm
+      availableInputs={availableInputs}
+      availableTemplates={availableTemplates}
+      eventType={eventType}
+      subjectId={subjectId}
+      subjects={subjects}
+    />
   );
 };
 

diff --git a/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx b/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/[eventTypeId]/page.tsx
@@ -1,4 +1,5 @@
 import EventCard from '@/_components/event-card';
+import EventTypeMenu from '@/_components/event-type-menu';
 import PageModalHeader from '@/_components/page-modal-header';
 import getCurrentUser from '@/_queries/get-current-user';
 import getEventTypeWithInputsAndOptions from '@/_queries/get-event-type-with-inputs-and-options';
@@ -22,14 +23,26 @@ const Page = async ({ params: { eventTypeId, subjectId } }: PageProps) => {
   ]);
 
   if (!subject || !eventType) return null;
+  const isTeamMember = !!user && subject.team_id === user.id;
 
   return (
     <>
-      <PageModalHeader title={eventType.name as string} />
+      <PageModalHeader
+        menu={
+          isTeamMember && (
+            <EventTypeMenu
+              eventTypeId={eventType.id}
+              isView
+              subjectId={subjectId}
+            />
+          )
+        }
+        title={eventType.name as string}
+      />
       <EventCard
         eventType={eventType}
         isArchived={subject.archived}
-        isTeamMember={!!user && subject.team_id === user.id}
+        isTeamMember={isTeamMember}
         subjectId={subjectId}
         user={user}
       />

diff --git a/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/create/page.tsx b/app/(pages)/@modal/(md)/subjects/[subjectId]/event-types/create/page.tsx
@@ -1,5 +1,4 @@
 import EventTypeForm from '@/_components/event-type-form';
-import PageModalHeader from '@/_components/page-modal-header';
 import getSubject from '@/_queries/get-subject';
 import listInputsBySubjectId from '@/_queries/list-inputs-by-subject-id';
 import listSubjectsByTeamId from '@/_queries/list-subjects-by-team-id';
@@ -20,28 +19,26 @@ const Page = async ({ params: { subjectId } }: PageProps) => {
   const [
     { data: subject },
     { data: availableInputs },
-    { data: availableTemplates },
     { data: subjects },
+    { data: availableTemplates },
   ] = await Promise.all([
     getSubject(subjectId),
     listInputsBySubjectId(subjectId),
-    listTemplatesWithData(),
     listSubjectsByTeamId(),
+    listTemplatesWithData(),
   ]);
 
-  if (!subject || !availableInputs || !availableTemplates || !subjects) {
+  if (!subject || !availableInputs || !subjects || !availableTemplates) {
     return null;
   }
 
   return (
-    <>
-      <PageModalHeader title="New event type" />
-      <EventTypeForm
-        availableInputs={availableInputs}
-        subjects={subjects}
-        subjectId={subjectId}
-      />
-    </>
+    <EventTypeForm
+      availableInputs={availableInputs}
+      availableTemplates={availableTemplates}
+      subjects={subjects}
+      subjectId={subjectId}
+    />
   );
 };
 

diff --git a/...l/(md)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/edit/page.tsx b/...l/(md)/subjects/[subjectId]/training-plans/[missionId]/sessions/[sessionId]/edit/page.tsx
@@ -1,7 +1,4 @@
-import BackButton from '@/_components/back-button';
-import PageModalHeader from '@/_components/page-modal-header';
 import SessionForm from '@/_components/session-form';
-import SessionLayout from '@/_components/session-layout';
 import getCurrentUser from '@/_queries/get-current-user';
 import getSession from '@/_queries/get-session';
 import getSubject from '@/_queries/get-subject';
@@ -59,29 +56,14 @@ const Page = async ({
   }
 
   return (
-    <>
-      <PageModalHeader title={mission.name} />
-      <SessionLayout
-        isEdit
-        isTeamMember
-        missionId={missionId}
-        sessionId={sessionId}
-        sessions={mission.sessions}
-        subjectId={subjectId}
-      >
-        <SessionForm
-          availableInputs={availableInputs}
-          availableTemplates={availableTemplates}
-          mission={mission}
-          session={session}
-          subjects={subjects}
-          subjectId={subjectId}
-        />
-      </SessionLayout>
-      <BackButton className="m-0 block w-full py-6 text-center" variant="link">
-        Close
-      </BackButton>
-    </>
+    <SessionForm
+      availableInputs={availableInputs}
+      availableTemplates={availableTemplates}
+      mission={mission}
+      session={session}
+      subjects={subjects}
+      subjectId={subjectId}
+    />
   );
 };
 

diff --git a/...tId]/training-plans/[missionId]/sessions/create/[order]/from-session/[sessionId]/page.tsx b/...tId]/training-plans/[missionId]/sessions/create/[order]/from-session/[sessionId]/page.tsx
@@ -1,7 +1,5 @@
 import BackButton from '@/_components/back-button';
-import PageModalHeader from '@/_components/page-modal-header';
 import SessionForm from '@/_components/session-form';
-import SessionLayout from '@/_components/session-layout';
 import getCurrentUser from '@/_queries/get-current-user';
 import getSession from '@/_queries/get-session';
 import getSubject from '@/_queries/get-subject';
@@ -60,26 +58,16 @@ const Page = async ({
 
   return (
     <>
-      <PageModalHeader title={mission.name} />
-      <SessionLayout
-        isCreate
-        isTeamMember
-        missionId={missionId}
+      <SessionForm
+        availableInputs={availableInputs}
+        availableTemplates={availableTemplates}
+        isDuplicate
+        mission={mission}
         order={order}
-        sessions={mission.sessions}
+        session={session}
+        subjects={subjects}
         subjectId={subjectId}
-      >
-        <SessionForm
-          availableInputs={availableInputs}
-          availableTemplates={availableTemplates}
-          isDuplicate
-          mission={mission}
-          order={Number(order)}
-          session={session}
-          subjects={subjects}
-          subjectId={subjectId}
-        />
-      </SessionLayout>
+      />
       <BackButton className="m-0 block w-full py-6 text-center" variant="link">
         Close
       </BackButton>

diff --git a/...dal/(md)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/page.tsx b/...dal/(md)/subjects/[subjectId]/training-plans/[missionId]/sessions/create/[order]/page.tsx
@@ -1,7 +1,5 @@
 import BackButton from '@/_components/back-button';
-import PageModalHeader from '@/_components/page-modal-header';
 import SessionForm from '@/_components/session-form';
-import SessionLayout from '@/_components/session-layout';
 import getCurrentUser from '@/_queries/get-current-user';
 import getSubject from '@/_queries/get-subject';
 import getTrainingPlanWithSessions from '@/_queries/get-training-plan-with-sessions';
@@ -53,24 +51,14 @@ const Page = async ({ params: { missionId, order, subjectId } }: PageProps) => {
 
   return (
     <>
-      <PageModalHeader title={mission.name} />
-      <SessionLayout
-        isCreate
-        isTeamMember
-        missionId={missionId}
+      <SessionForm
+        availableInputs={availableInputs}
+        availableTemplates={availableTemplates}
+        mission={mission}
         order={order}
-        sessions={mission.sessions}
+        subjects={subjects}
         subjectId={subjectId}
-      >
-        <SessionForm
-          availableInputs={availableInputs}
-          availableTemplates={availableTemplates}
-          mission={mission}
-          order={Number(order)}
-          subjects={subjects}
-          subjectId={subjectId}
-        />
-      </SessionLayout>
+      />
       <BackButton className="m-0 block w-full py-6 text-center" variant="link">
         Close
       </BackButton>

diff --git a/app/_components/event-type-form.tsx b/app/_components/event-type-form.tsx
@@ -2,6 +2,7 @@
 
 import BackButton from '@/_components/back-button';
 import Button from '@/_components/button';
+import EventTypeMenu from '@/_components/event-type-menu';
 import Input from '@/_components/input';
 import InputForm from '@/_components/input-form';
 import PageModalHeader from '@/_components/page-modal-header';
@@ -14,6 +15,7 @@ import { GetEventTypeWithInputsData } from '@/_queries/get-event-type-with-input
 import { GetInputData } from '@/_queries/get-input';
 import { ListInputsBySubjectIdData } from '@/_queries/list-inputs-by-subject-id';
 import { ListSubjectsByTeamIdData } from '@/_queries/list-subjects-by-team-id';
+import { ListTemplatesWithDataData } from '@/_queries/list-templates-with-data';
 import getFormCacheKey from '@/_utilities/get-form-cache-key';
 import { Dialog, DialogPanel } from '@headlessui/react';
 import { useRouter } from 'next/navigation';
@@ -22,9 +24,10 @@ import { Controller, useFieldArray } from 'react-hook-form';
 
 interface EventTypeFormProps {
   availableInputs: NonNullable<ListInputsBySubjectIdData>;
+  availableTemplates?: NonNullable<ListTemplatesWithDataData>;
   eventType?: NonNullable<GetEventTypeWithInputsData>;
-  subjects: NonNullable<ListSubjectsByTeamIdData>;
   subjectId: string;
+  subjects: NonNullable<ListSubjectsByTeamIdData>;
 }
 
 type EventTypeFormValues = {
@@ -35,9 +38,10 @@ type EventTypeFormValues = {
 
 const EventTypeForm = ({
   availableInputs,
+  availableTemplates,
   eventType,
-  subjects,
   subjectId,
+  subjects,
 }: EventTypeFormProps) => {
   const [createInputModal, setCreateInputModal] =
     useState<Partial<GetInputData>>(null);
@@ -60,6 +64,19 @@ const EventTypeForm = ({
 
   return (
     <>
+      <PageModalHeader
+        menu={
+          <EventTypeMenu<EventTypeFormValues>
+            availableInputs={availableInputs}
+            availableTemplates={availableTemplates}
+            eventTypeId={eventType?.id}
+            form={form}
+            subjectId={subjectId}
+            subjects={subjects}
+          />
+        }
+        title={(eventType?.name as string) ?? 'New event type'}
+      />
       <form
         className="flex flex-col gap-8 px-4 pb-8 pt-6 sm:px-8"
         onSubmit={form.handleSubmit((values) =>