From 49c3a512c04d5d49c0d71b279e73a43174f16d93 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Fri, 7 May 2021 15:14:23 -0700
Subject: [PATCH] IO-1044 Dynamic fields on time ticket modal

---
 .../time-ticket-modal.component.jsx           | 50 +++++++++++--------
 .../time-ticket-modal.container.jsx           |  7 ++-
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
index 577652485..2c6700669 100644
--- a/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.component.jsx
@@ -34,6 +34,7 @@ export function TimeTicketModalComponent({
   bodyshop,
   authLevel,
   employeeAutoCompleteOptions,
+  isEdit,
 }) {
   const { t } = useTranslation();
 
@@ -158,28 +159,33 @@ export function TimeTicketModalComponent({
         <Form.Item label={t("timetickets.fields.actualhrs")} name="actualhrs">
           <InputNumber min={0} precision={1} />
         </Form.Item>
-        <Form.Item label={t("timetickets.fields.clockon")} name="clockon">
-          <FormDateTimePicker
-            disabled={
-              !HasRbacAccess({
-                bodyshop,
-                authLevel,
-                action: "timetickets:shiftedit",
-              })
-            }
-          />
-        </Form.Item>
-        <Form.Item label={t("timetickets.fields.clockoff")} name="clockoff">
-          <FormDateTimePicker
-            disabled={
-              !HasRbacAccess({
-                bodyshop,
-                authLevel,
-                action: "timetickets:shiftedit",
-              })
-            }
-          />
-        </Form.Item>
+        {isEdit && (
+          <>
+            <Form.Item label={t("timetickets.fields.clockon")} name="clockon">
+              <FormDateTimePicker
+                disabled={
+                  !HasRbacAccess({
+                    bodyshop,
+                    authLevel,
+                    action: "timetickets:shiftedit",
+                  })
+                }
+              />
+            </Form.Item>
+            <Form.Item label={t("timetickets.fields.clockoff")} name="clockoff">
+              <FormDateTimePicker
+                disabled={
+                  !HasRbacAccess({
+                    bodyshop,
+                    authLevel,
+                    action: "timetickets:shiftedit",
+                  })
+                }
+              />
+            </Form.Item>
+          </>
+        )}
+
         <Form.Item label={t("timetickets.fields.memo")} name="memo">
           <MemoInput />
         </Form.Item>
diff --git a/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx b/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
index 62335e9d7..3942247c4 100644
--- a/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
+++ b/client/src/components/time-ticket-modal/time-ticket-modal.container.jsx
@@ -168,12 +168,13 @@ export function TimeTicketModalContainer({
       footer={
         <span>
           <Button onClick={handleCancel}>{t("general.actions.cancel")}</Button>
-          <Button onClick={() => form.submit()}>
+          <Button loading={loading} onClick={() => form.submit()}>
             {t("general.actions.save")}
           </Button>
           {timeTicketModal.context && timeTicketModal.context.id ? null : (
             <Button
               type="primary"
+              loading={loading}
               onClick={() => {
                 setEnterAgain(true);
               }}
@@ -214,12 +215,13 @@ export function TimeTicketModalContainer({
               <Button onClick={handleCancel}>
                 {t("general.actions.cancel")}
               </Button>
-              <Button onClick={() => form.submit()}>
+              <Button loading={loading} onClick={() => form.submit()}>
                 {t("general.actions.save")}
               </Button>
               {timeTicketModal.context && timeTicketModal.context.id ? null : (
                 <Button
                   type="primary"
+                  loading={loading}
                   onClick={() => {
                     setEnterAgain(true);
                   }}
@@ -231,6 +233,7 @@ export function TimeTicketModalContainer({
           }
         />
         <TimeTicketModalComponent
+          isEdit={timeTicketModal.context.id}
           form={form}
           employeeAutoCompleteOptions={
             EmployeeAutoCompleteData && EmployeeAutoCompleteData.employees