Merge pull request #165 from cabcookie:improve-person-mention

Detailseite für Aktivität optimiert

components/activities/activity.tsx

@@ -1,11 +1,11 @@
-import { useProjectsContext } from "@/api/ContextProjects";
 import useActivity from "@/api/useActivity";
 import useMeeting from "@/api/useMeeting";
 import { ExternalLink, LinkIcon } from "lucide-react";
 import Link from "next/link";
 import { FC, useEffect, useState } from "react";
-import TaskBadge from "../task/TaskBadge";
-import DefaultAccordionItem from "../ui-elements/accordion/DefaultAccordionItem";
+import ApiLoadingError from "../layouts/ApiLoadingError";
+import MeetingAccordionItem from "../meetings/MeetingAccordionItem";
+import LoadingAccordionItem from "../ui-elements/accordion/LoadingAccordionItem";
 import ProjectNotesForm from "../ui-elements/project-notes-form/project-notes-form";
 import SavedState from "../ui-elements/project-notes-form/saved-state";
 import DateSelector from "../ui-elements/selectors/date-selector";
@@ -41,9 +41,14 @@ const ActivityComponent: FC<ActivityComponentProps> = ({
   notesNotInAccordion,
   readOnly,
 }) => {
-  const { activity, updateNotes, updateDate, addProjectToActivity } =
-    useActivity(activityId);
-  const { getProjectNamesByIds } = useProjectsContext();
+  const {
+    activity,
+    updateNotes,
+    updateDate,
+    addProjectToActivity,
+    isLoadingActivity,
+    errorActivity,
+  } = useActivity(activityId);
   const { meeting, deleteMeetingActivity } = useMeeting(activity?.meetingId);
   const [dateSaved, setDateSaved] = useState(true);
   const [date, setDate] = useState(activity?.finishedOn || new Date());
@@ -81,6 +86,8 @@ const ActivityComponent: FC<ActivityComponentProps> = ({
 
   return !notesNotInAccordion ? (
     <div className="pb-8 space-y-4">
+      <ApiLoadingError title="Loading activity failed" error={errorActivity} />
+
       {showDates && (
         <div className="flex flex-row gap-2">
           <DateSelector
@@ -130,25 +137,33 @@ const ActivityComponent: FC<ActivityComponentProps> = ({
       </Accordion>
     </div>
   ) : (
-    <DefaultAccordionItem
-      value={activityId}
-      triggerTitle="Meeting notes"
-      badge={
-        <TaskBadge
-          hasOpenTasks={activity?.hasOpenTasks}
-          hasClosedTasks={!!activity?.closedTasks?.length}
+    <div className="space-y-6">
+      {showMeeting && activity?.meetingId && (
+        <div className="space-y-0">
+          <h3 className="font-semibold">From meeting:</h3>
+          <Accordion type="single" collapsible>
+            {isLoadingActivity ||
+              (!meeting && (
+                <LoadingAccordionItem
+                  value="loading-meeting"
+                  sizeTitle="3xl"
+                  sizeSubtitle="xl"
+                />
+              ))}
+            {meeting && <MeetingAccordionItem meeting={meeting} />}
+          </Accordion>
+        </div>
+      )}
+
+      <div className="space-y-0">
+        {showMeeting && <h3 className="font-semibold">Projects:</h3>}
+        <ProjectNotesForm
+          activityId={activityId}
+          deleteActivity={() => deleteMeetingActivity(activityId)}
+          readOnly={readOnly}
         />
-      }
-      triggerSubTitle={`Projects: ${getProjectNamesByIds(
-        activity?.projectIds
-      )}`}
-    >
-      <ProjectNotesForm
-        activityId={activityId}
-        deleteActivity={() => deleteMeetingActivity(activityId)}
-        readOnly={readOnly}
-      />
-    </DefaultAccordionItem>
+      </div>
+    </div>
   );
 };
 

components/meetings/meeting-activity-list.tsx

@@ -1,25 +1,43 @@
+import { useProjectsContext } from "@/api/ContextProjects";
 import { Meeting } from "@/api/useMeetings";
 import { FC } from "react";
 import ActivityComponent from "../activities/activity";
+import TaskBadge from "../task/TaskBadge";
+import DefaultAccordionItem from "../ui-elements/accordion/DefaultAccordionItem";
 
 type MeetingActivityListProps = {
   meeting: Meeting;
 };
 
-const MeetingActivityList: FC<MeetingActivityListProps> = ({ meeting }) =>
-  meeting.activities.length === 0 ? (
+const MeetingActivityList: FC<MeetingActivityListProps> = ({ meeting }) => {
+  const { getProjectNamesByIds } = useProjectsContext();
+
+  return meeting.activities.length === 0 ? (
     <div className="mx-2 md:mx-4 mt-8 font-semibold text-sm text-muted-foreground md:text-center">
       Select a project to start taking notes!
     </div>
   ) : (
     meeting.activities.map((a) => (
-      <ActivityComponent
+      <DefaultAccordionItem
+        value={a.id}
         key={a.id}
-        activityId={a.id}
-        showMeeting={false}
-        notesNotInAccordion
-      />
+        triggerTitle="Meeting notes"
+        badge={
+          <TaskBadge
+            hasOpenTasks={a.hasOpenTasks}
+            hasClosedTasks={!!a.closedTasks?.length}
+          />
+        }
+        triggerSubTitle={`Projects: ${getProjectNamesByIds(a.projectIds)}`}
+      >
+        <ActivityComponent
+          activityId={a.id}
+          showMeeting={false}
+          notesNotInAccordion
+        />
+      </DefaultAccordionItem>
     ))
   );
+};
 
 export default MeetingActivityList;

components/ui-elements/accordion/LoadingAccordionItem.tsx

@@ -9,51 +9,56 @@ import { cn } from "@/lib/utils";
 import { AccordionItemProps } from "@radix-ui/react-accordion";
 import { FC } from "react";
 
-type Sizes = "xl" | "lg" | "base" | "sm" | "xs";
+type Sizes = "3xl" | "2xl" | "xl" | "lg" | "base" | "sm" | "xs";
 
 interface LoadingAccordionItemProps extends AccordionItemProps {
   value: string;
   sizeTitle: Sizes;
   sizeSubtitle?: Sizes;
+  visible?: boolean;
 }
 
 const LoadingAccordionItem: FC<LoadingAccordionItemProps> = ({
   value,
   sizeTitle,
   sizeSubtitle,
-}) => (
-  <AccordionItem value={value} disabled>
-    <AccordionTrigger>
-      <AccordionTriggerTitle>
-        <div>
-          <Skeleton
-            className={cn(
-              "h-5",
-              sizeTitle === "xl" && "w-32",
-              sizeTitle === "lg" && "w-28",
-              sizeTitle === "base" && "w-24",
-              sizeTitle === "sm" && "w-20",
-              sizeTitle === "xs" && "w-16"
-            )}
-          />
-        </div>
-      </AccordionTriggerTitle>
-      {sizeSubtitle && (
-        <AccordionTriggerSubTitle>
-          <Skeleton
-            className={cn(
-              "mt-2 h-4",
-              sizeTitle === "xl" && "w-[32rem]",
-              sizeTitle === "lg" && "w-[28rem]",
-              sizeTitle === "base" && "w-[24rem]",
-              sizeTitle === "sm" && "w-[20rem]",
-              sizeTitle === "xs" && "w-[16rem]"
-            )}
-          />
-        </AccordionTriggerSubTitle>
-      )}
-    </AccordionTrigger>
-  </AccordionItem>
-);
+  visible = true,
+}) =>
+  visible && (
+    <AccordionItem value={value} disabled>
+      <AccordionTrigger>
+        <AccordionTriggerTitle>
+          <div>
+            <Skeleton
+              className={cn(
+                "h-5",
+                sizeTitle === "3xl" && "w-72",
+                sizeTitle === "2xl" && "w-52",
+                sizeTitle === "xl" && "w-32",
+                sizeTitle === "lg" && "w-28",
+                sizeTitle === "base" && "w-24",
+                sizeTitle === "sm" && "w-20",
+                sizeTitle === "xs" && "w-16"
+              )}
+            />
+          </div>
+        </AccordionTriggerTitle>
+        {sizeSubtitle && (
+          <AccordionTriggerSubTitle>
+            <Skeleton
+              className={cn(
+                "mt-2 h-4",
+                sizeSubtitle === "xl" && "w-[32rem]",
+                sizeSubtitle === "lg" && "w-[28rem]",
+                sizeSubtitle === "base" && "w-[24rem]",
+                sizeSubtitle === "sm" && "w-[20rem]",
+                sizeSubtitle === "xs" && "w-[16rem]"
+              )}
+            />
+          </AccordionTriggerSubTitle>
+        )}
+      </AccordionTrigger>
+    </AccordionItem>
+  );
 
 export default LoadingAccordionItem;

components/ui-elements/project-notes-form/project-notes-form.tsx

@@ -1,6 +1,7 @@
 import { useOpenTasksContext } from "@/api/ContextOpenTasks";
 import { useProjectsContext } from "@/api/ContextProjects";
 import useActivity from "@/api/useActivity";
+import ApiLoadingError from "@/components/layouts/ApiLoadingError";
 import ProjectAccordionItem from "@/components/projects/ProjectAccordionItem";
 import { Accordion } from "@/components/ui/accordion";
 import { Alert, AlertTitle } from "@/components/ui/alert";
@@ -35,8 +36,13 @@ const ProjectNotesForm: FC<ProjectNotesFormProps> = ({
 }) => {
   const { getProjectById } = useProjectsContext();
   const { mutateOpenTasks } = useOpenTasksContext();
-  const { activity, updateNotes, isLoadingActivity, deleteProjectActivity } =
-    useActivity(activityId);
+  const {
+    activity,
+    updateNotes,
+    isLoadingActivity,
+    errorActivity,
+    deleteProjectActivity,
+  } = useActivity(activityId);
   const [openDeleteActivityConfirmation, setOpenDeleteActivityConfirmation] =
     useState(false);
 
@@ -52,6 +58,8 @@ const ProjectNotesForm: FC<ProjectNotesFormProps> = ({
 
   return (
     <div className={className}>
+      <ApiLoadingError title="Loading activity failed" error={errorActivity} />
+
       {deleteActivity && (
         <DeleteWarning
           open={openDeleteActivityConfirmation}

docs/releases/next.md

@@ -1,3 +1,3 @@
-# Crash in Hauptmenü behoben (Version :VERSION)
+# Detailseite für Aktivität optimiert (Version :VERSION)
 
-- Wenn man im Hauptmenü zunächst einen Suchbegriff eingegeben und diesen dann gelöscht hatte, ist die Applikation abgestürzt. Das passiert nun nicht mehr.
+- Die Notizen aus der Aktivität werden nun direkt angezeigt, ohne dass erst ein Accordion geöffnet werden muss.

pages/activities/[id].tsx

@@ -20,17 +20,16 @@ const AccountDetailPage = () => {
       }`}
       sectionName="Activities"
     >
-      {!activity ? (
-        "Loading activity..."
-      ) : (
-        <ActivityComponent
-          activityId={activity.id}
-          showDates
-          showMeeting
-          showProjects
-          allowAddingProjects
-        />
-      )}
+      <div className="space-y-6">
+        {activityId && (
+          <ActivityComponent
+            activityId={activityId}
+            notesNotInAccordion
+            showMeeting
+            allowAddingProjects
+          />
+        )}
+      </div>
     </MainLayout>
   );
 };