feat: display day and time of shift in dialog

hackerspace-ntnu · Oct 29, 2024 · 8e4944d · 8e4944d
1 parent fb846a8
commit 8e4944d
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 19 deletions.
diff --git a/messages/en.json b/messages/en.json
@@ -151,7 +151,6 @@
         "onShift": "{count, plural, =0 {Closed} =1 {1 person on shift} other {# people on shift}}"
       },
       "scheduleCellDialog": {
-        "onShift": "On shift",
         "empty": "No-one on shift",
         "registerSection": {
           "recurring": "Recurring",

diff --git a/messages/no.json b/messages/no.json
@@ -151,7 +151,6 @@
         "onShift": "{count, plural, =0 {Stengt} =1 {1 person på vakt} other {# personer på vakt}}"
       },
       "scheduleCellDialog": {
-        "onShift": "På vakt",
         "empty": "Ingen på vakt",
         "registerSection": {
           "recurring": "Gjentagende",

diff --git a/src/components/shift-schedule/ScheduleCell.tsx b/src/components/shift-schedule/ScheduleCell.tsx
@@ -1,17 +1,26 @@
 import { ScheduleCellContent } from '@/components/shift-schedule/ScheduleCellContent';
 import { ScheduleCellDialog } from '@/components/shift-schedule/ScheduleCellDialog';
-import type { ScheduleCellProps } from '@/components/shift-schedule/ScheduleTable';
 import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/Dialog';
 import React from 'react';
 
-function ScheduleCell({ members }: ScheduleCellProps) {
+type ScheduleCellProps = {
+  messages: {
+    day: string;
+    time: string;
+  };
+  members: {
+    name: string;
+  }[];
+};
+
+function ScheduleCell({ messages, members }: ScheduleCellProps) {
   return (
     <Dialog>
       <DialogTrigger asChild>
         <ScheduleCellContent members={members} />
       </DialogTrigger>
       <DialogContent className='w-1/3 min-w-80 p-3'>
-        <ScheduleCellDialog members={members} />
+        <ScheduleCellDialog messages={messages} members={members} />
       </DialogContent>
     </Dialog>
   );

diff --git a/src/components/shift-schedule/ScheduleCellContent.tsx b/src/components/shift-schedule/ScheduleCellContent.tsx
@@ -1,11 +1,16 @@
-import type { ScheduleCellProps } from '@/components/shift-schedule/ScheduleTable';
 import { TableCell } from '@/components/ui/Table';
 import { cx } from '@/lib/utils';
 import { UserIcon, UsersIcon } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import type React from 'react';
 
-function ScheduleCellContent({ members }: ScheduleCellProps) {
+type ScheduleCellContentProps = {
+  members: {
+    name: string;
+  }[];
+};
+
+function ScheduleCellContent({ members }: ScheduleCellContentProps) {
   const t = useTranslations('shiftSchedule.scheduleTable.scheduleCellContent');
 
   const colorStyle =
@@ -26,7 +31,7 @@ function ScheduleCellContent({ members }: ScheduleCellProps) {
   let memberCountIcon: React.ReactNode;
   if (members.length === 1) {
     memberCountIcon = <UserIcon className={memberCountIconStyle} />;
-  } else if (members.length >= 1) {
+  } else if (members.length > 1) {
     memberCountIcon = <UsersIcon className={memberCountIconStyle} />;
   }
 

diff --git a/src/components/shift-schedule/ScheduleCellDialog.tsx b/src/components/shift-schedule/ScheduleCellDialog.tsx
@@ -1,9 +1,18 @@
 import { RegisterSection } from '@/components/shift-schedule/RegisterSection';
-import type { ScheduleCellProps } from '@/components/shift-schedule/ScheduleTable';
 import { DialogHeader, DialogTitle } from '@/components/ui/Dialog';
 import { useTranslations } from 'next-intl';
 
-function ScheduleCellDialog({ members }: ScheduleCellProps) {
+type ScheduleCellDialogProps = {
+  messages: {
+    day: string;
+    time: string;
+  };
+  members: {
+    name: string;
+  }[];
+};
+
+function ScheduleCellDialog({ messages, members }: ScheduleCellDialogProps) {
   const t = useTranslations('shiftSchedule.scheduleTable.scheduleCellDialog');
 
   let membersDisplay: React.ReactNode;
@@ -26,8 +35,9 @@ function ScheduleCellDialog({ members }: ScheduleCellProps) {
   return (
     <>
       <DialogHeader>
-        <DialogTitle className='font-semibold text-3xl'>
-          {t('onShift')}
+        <DialogTitle className='space-x-5'>
+          <span className='font-semibold text-3xl'>{messages.day}</span>
+          <span className='font-semibold text-lg'>{messages.time}</span>
         </DialogTitle>
       </DialogHeader>
       <section className='flex justify-between gap-8 px-1.5 pb-1.5'>

diff --git a/src/components/shift-schedule/ScheduleTable.tsx b/src/components/shift-schedule/ScheduleTable.tsx
@@ -10,17 +10,17 @@ import {
 } from '@/components/ui/Table';
 import { useTranslations } from 'next-intl';
 
-export type ScheduleCellProps = {
+export type ScheduleEntryProps = {
   members: {
     name: string;
   }[];
 };
 
 type ScheduleDayProps = {
-  '10:15 - 12:07': ScheduleCellProps;
-  '12:07 - 14:07': ScheduleCellProps;
-  '14:07 - 16:07': ScheduleCellProps;
-  '16:07 - 18:00': ScheduleCellProps;
+  '10:15 - 12:07': ScheduleEntryProps;
+  '12:07 - 14:07': ScheduleEntryProps;
+  '14:07 - 16:07': ScheduleEntryProps;
+  '16:07 - 18:00': ScheduleEntryProps;
 };
 
 type ScheduleTableProps = {
@@ -66,7 +66,13 @@ function ScheduleTable({ week }: ScheduleTableProps) {
               {times.map((time) => (
                 <TableRow key={time}>
                   <TableCell className='border-y'>{time}</TableCell>
-                  <ScheduleCell members={week[day][time].members} />
+                  <ScheduleCell
+                    messages={{
+                      day: t(day),
+                      time: time,
+                    }}
+                    members={week[day][time].members}
+                  />
                 </TableRow>
               ))}
             </TableBody>
@@ -94,7 +100,14 @@ function ScheduleTable({ week }: ScheduleTableProps) {
             <TableRow key={time}>
               <TableCell className='min-w-32 border-y'>{time}</TableCell>
               {days.map((day) => (
-                <ScheduleCell key={day} members={week[day][time].members} />
+                <ScheduleCell
+                  key={day}
+                  messages={{
+                    day: t(day),
+                    time: time,
+                  }}
+                  members={week[day][time].members}
+                />
               ))}
             </TableRow>
           ))}