fix(client): Remove duration in hours field for create activity

syukoGit · Dec 4, 2023 · 22d64f5 · 22d64f5
1 parent 3fa4347
commit 22d64f5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 29 deletions.
diff --git a/FirefighterStats/Client/src/components/indemnity-slips/NewActivityForm/index.tsx b/FirefighterStats/Client/src/components/indemnity-slips/NewActivityForm/index.tsx
@@ -15,7 +15,6 @@ const NewActivityForm = ({ defaultStartDateTime = new Date(), defaultEndDateTime
     const [newActivity, setNewActivity] = useState<NewActivity>({
         title: '',
         rate: 0,
-        durationInHours: 0,
         startDateTime: defaultStartDateTime,
         endDateTime: defaultEndDateTime,
         unitAmount: 7.92,
@@ -37,10 +36,12 @@ const NewActivityForm = ({ defaultStartDateTime = new Date(), defaultEndDateTime
         unitAmountError: undefined,
     });
 
-    const amount =
-        isNaN(newActivity.durationInHours) || isNaN(newActivity.rate)
+    const durationInHours =
+        isNaN(newActivity.startDateTime.getTime()) || isNaN(newActivity.endDateTime.getTime())
             ? 0
-            : Number((newActivity.durationInHours * newActivity.unitAmount * (newActivity.rate / 100)).toFixed(2));
+            : (newActivity.endDateTime.getTime() - newActivity.startDateTime.getTime()) / 3600000;
+
+    const amount = isNaN(newActivity.rate) ? 0 : Number((durationInHours * newActivity.unitAmount * (newActivity.rate / 100)).toFixed(2));
 
     const onSaveClick = () => {
         let hasError = false;
@@ -62,11 +63,6 @@ const NewActivityForm = ({ defaultStartDateTime = new Date(), defaultEndDateTime
             hasError = true;
         }
 
-        if (isNaN(newActivity.durationInHours)) {
-            durationInHoursError = 'Duration is required';
-            hasError = true;
-        }
-
         if (isNaN(newActivity.startDateTime.getTime())) {
             startDateError = 'Start Date is required';
             hasError = true;
@@ -155,14 +151,6 @@ const NewActivityForm = ({ defaultStartDateTime = new Date(), defaultEndDateTime
                     id='new-activity-form-end-date'
                     errorMessages={errors.endDateError ? [errors.endDateError] : undefined}
                 />
-                <NumberInput
-                    label='Duration in hour'
-                    value={newActivity.durationInHours}
-                    onChange={(e) => setNewActivity({ ...newActivity, durationInHours: e ?? NaN })}
-                    required
-                    id='new-activity-form-duration-in-hour'
-                    errorMessages={errors.durationInHoursError ? [errors.durationInHoursError] : undefined}
-                />
                 <NumberInput
                     label='Rate'
                     value={newActivity.rate}

diff --git a/FirefighterStats/Client/src/components/indemnity-slips/NewActivityForm/style.scss b/FirefighterStats/Client/src/components/indemnity-slips/NewActivityForm/style.scss
@@ -7,13 +7,13 @@
 
     &__inputs {
         display: grid;
-        grid-template-columns: repeat(6, 0.5fr);
+        grid-template-columns: repeat(4, 0.5fr);
         grid-row: repeat(4, auto);
         gap: 20px;
         width: 100%;
 
         > :nth-child(1) {
-            grid-area: 1 / 1 / 2 / 7;
+            grid-area: 1 / 1 / 2 / 5;
         }
 
         > :nth-child(2) {
@@ -25,15 +25,11 @@
         }
 
         > :nth-child(4) {
-            grid-area: 2 / 5 / 3 / 7;
+            grid-area: 3 / 1 / 4 / 3;
         }
 
         > :nth-child(5) {
-            grid-area: 3 / 1 / 4 / 4;
-        }
-
-        > :nth-child(6) {
-            grid-area: 3 / 4 / 4 / 7;
+            grid-area: 3 / 3 / 4 / 5;
         }
     }
-}
+}
diff --git a/FirefighterStats/Client/src/types/Activity.ts b/FirefighterStats/Client/src/types/Activity.ts
@@ -1,15 +1,15 @@
 type Activity = {
     amount: number;
-    durationInHours: number;
     endDateTime: Date;
+    durationInHours: number;
     id: string;
     rate: number;
     startDateTime: Date;
     title: string;
     unitAmount: number;
 };
 
-export type NewActivity = Omit<Activity, 'amount' | 'id'>;
+export type NewActivity = Omit<Activity, 'amount' | 'id' | 'durationInHours'>;
 
 export function isActivity(data: any): data is Activity {
     return (
@@ -25,9 +25,12 @@ export function isActivity(data: any): data is Activity {
 }
 
 export function getNewActivityPreview(newActivity: NewActivity): Activity {
+    const durationInHours = Math.abs(newActivity.endDateTime.getTime() - newActivity.startDateTime.getTime()) / 36e5;
+
     return {
         ...newActivity,
-        amount: Number((newActivity.durationInHours * newActivity.unitAmount * (newActivity.rate / 100)).toFixed(2)),
+        durationInHours,
+        amount: Number((durationInHours * newActivity.unitAmount * (newActivity.rate / 100)).toFixed(2)),
         id: `new-activity-${newActivity.title}-${newActivity.startDateTime}-${newActivity.endDateTime}-preview`,
     };
 }