From 4cb7a50a1ddcb94f55c73806f33063db1a522da3 Mon Sep 17 00:00:00 2001
From: elforjani13 <39470382+elforjani13@users.noreply.github.com>
Date: Sat, 6 Aug 2022 12:34:41 +0200
Subject: [PATCH] fix: edit project time entry.

---
 .../ProjectTimeEntryForm.tsx                  | 24 +++++++++++++------
 .../ProjectTimeEntryFormDialogContent.tsx     |  7 +++++-
 .../ProjectTimeEntryFormFields.tsx            |  8 +++----
 .../ProjectTimeEntryFormFloatingActions.tsx   |  4 ++--
 .../ProjectTimeEntryFormProvider.tsx          | 17 ++++++++++---
 .../ProjectTimeEntryFormDialog/index.tsx      | 11 +++++++--
 .../ProjectTimeEntryFormDialog/utils.ts       |  7 +++---
 7 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.tsx
index 726c008ca..2072eb5fa 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.tsx
@@ -10,12 +10,12 @@ import { CreateProjectTimeEntryFormSchema } from './ProjectTimeEntryForm.schema'
 import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider';
 import withDialogActions from '@/containers/Dialog/withDialogActions';
 
-import { compose } from '@/utils';
+import { compose, transformToForm } from '@/utils';
 
 const defaultInitialValues = {
   date: moment(new Date()).format('YYYY-MM-DD'),
-  projectId: '',
-  taskId: '',
+  task_id: '',
+  project_id: '',
   description: '',
   duration: '',
 };
@@ -31,6 +31,9 @@ function ProjectTimeEntryForm({
   // time entry form dialog context.
   const {
     dialogName,
+    isNewMode,
+    timesheetId,
+    projectTimeEntry,
     createProjectTimeEntryMutate,
     editProjectTimeEntryMutate,
   } = useProjectTimeEntryFormContext();
@@ -38,6 +41,7 @@ function ProjectTimeEntryForm({
   // Initial form values
   const initialValues = {
     ...defaultInitialValues,
+    ...transformToForm(projectTimeEntry, defaultInitialValues),
   };
 
   // Handles the form submit.
@@ -50,7 +54,7 @@ function ProjectTimeEntryForm({
     const onSuccess = (response) => {
       AppToaster.show({
         message: intl.get(
-          true
+          isNewMode
             ? 'project_time_entry.success_message'
             : 'project_time_entry.dialog.edit_success_message',
         ),
@@ -68,9 +72,15 @@ function ProjectTimeEntryForm({
     }) => {
       setSubmitting(false);
     };
-    createProjectTimeEntryMutate([values.taskId, form])
-      .then(onSuccess)
-      .catch(onError);
+    if (isNewMode) {
+      createProjectTimeEntryMutate([values.taskId, form])
+        .then(onSuccess)
+        .catch(onError);
+    } else {
+      editProjectTimeEntryMutate([timesheetId, form])
+        .then(onSuccess)
+        .catch(onError);
+    }
   };
 
   return (
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormDialogContent.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormDialogContent.tsx
index 262932d00..99462de37 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormDialogContent.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormDialogContent.tsx
@@ -9,10 +9,15 @@ import ProjectTimeEntryForm from './ProjectTimeEntryForm';
 export default function ProjectTimeEntryFormDialogContent({
   // #ownProps
   dialogName,
+  timeEntry,
   project,
 }) {
   return (
-    <ProjectTimeEntryFormProvider projectId={project} dialogName={dialogName}>
+    <ProjectTimeEntryFormProvider
+      timesheetId={timeEntry}
+      projectId={project}
+      dialogName={dialogName}
+    >
       <ProjectTimeEntryForm />
     </ProjectTimeEntryFormProvider>
   );
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
index 979130b3e..5ca57e055 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx
@@ -35,13 +35,13 @@ function ProjectTimeEntryFormFields() {
       {/*------------ Project -----------*/}
       <If condition={!projectId}>
         <FFormGroup
-          name={'projectId'}
+          name={'project_id'}
           label={<T id={'project_time_entry.dialog.project'} />}
           labelInfo={<FieldRequiredHint />}
           className={classNames('form-group--select-list', Classes.FILL)}
         >
           <ProjectsSelect
-            name={'projectId'}
+            name={'project_id'}
             projects={projects}
             popoverProps={{ minimal: true }}
           />
@@ -49,13 +49,13 @@ function ProjectTimeEntryFormFields() {
       </If>
       {/*------------ Task -----------*/}
       <FFormGroup
-        name={'taskId'}
+        name={'task_id'}
         label={<T id={'project_time_entry.dialog.task'} />}
         labelInfo={<FieldRequiredHint />}
         className={classNames('form-group--select-list', Classes.FILL)}
       >
         <TaskSelect
-          name={'taskId'}
+          name={'task_id'}
           tasks={projectTasks}
           popoverProps={{ minimal: true }}
         />
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx
index 8c305d30d..1c211eb56 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx
@@ -18,7 +18,7 @@ function ProjectTimeEntryFormFloatingActions({
   const { dialogName } = useProjectTimeEntryFormContext();
 
   // Formik context.
-  const { isSubmitting, values, errors } = useFormikContext();
+  const { isSubmitting } = useFormikContext();
 
   // Handle close button click.
   const handleCancelBtnClick = () => {
@@ -37,7 +37,7 @@ function ProjectTimeEntryFormFloatingActions({
           style={{ minWidth: '75px' }}
           type="submit"
         >
-          <T id={'time_entry.dialog.create'} />
+          <T id={'project_time_entry.dialog.create'} />
         </Button>
       </div>
     </div>
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormProvider.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormProvider.tsx
index a36af5ebe..14b3c9bb7 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormProvider.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormProvider.tsx
@@ -4,6 +4,7 @@ import {
   useProjectTasks,
   useCreateProjectTimeEntry,
   useEditProjectTimeEntry,
+  useProjectTimeEntry,
 } from '../../hooks';
 import { DialogContent } from '@/components';
 
@@ -17,6 +18,7 @@ function ProjectTimeEntryFormProvider({
   // #ownProps
   dialogName,
   projectId,
+  timesheetId,
   ...props
 }) {
   // project payload.
@@ -34,28 +36,37 @@ function ProjectTimeEntryFormProvider({
     enabled: !!project,
   });
 
+  // Handle fetch project time entry detail.
+  const { data: projectTimeEntry, isLoading: isProjectTimeEntryLoading } =
+    useProjectTimeEntry(timesheetId, {
+      enabled: !!timesheetId,
+    });
+
   // Fetch project list data table or list
   const {
     data: { projects },
     isLoading: isProjectsLoading,
-    isSuccess: isProjectsSuccess,
   } = useProjects();
 
+  const isNewMode = !timesheetId;
+
   // provider payload.
   const provider = {
     dialogName,
     projects,
     projectId,
+    timesheetId,
     projectTasks,
+    isNewMode,
     setProjectPayload,
-    isProjectsSuccess,
+    projectTimeEntry,
     createProjectTimeEntryMutate,
     editProjectTimeEntryMutate,
   };
 
   return (
     <DialogContent
-      isLoading={isProjectsLoading}
+      isLoading={isProjectsLoading || isProjectTimeEntryLoading}
       name={'project-time-entry-form'}
     >
       <ProjecctTimeEntryFormContext.Provider value={provider} {...props} />
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
index 094ef8e0e..e72ef1b74 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx
@@ -15,12 +15,18 @@ const ProjectTimeEntryFormDialogContent = React.lazy(
 function ProjectTimeEntryFormDialog({
   dialogName,
   isOpen,
-  payload: { projectId },
+  payload: { timesheetId = null, projectId = null, action },
 }) {
   return (
     <ProjectTimeEntryFormDialogRoot
       name={dialogName}
-      title={<T id={'project_time_entry.dialog.label'} />}
+      title={
+        action === 'edit' ? (
+          <T id={'project_time_entry.dialog.edit_time_entry'} />
+        ) : (
+          <T id={'project_time_entry.dialog.new_time_entry'} />
+        )
+      }
       isOpen={isOpen}
       autoFocus={true}
       canEscapeKeyClose={true}
@@ -29,6 +35,7 @@ function ProjectTimeEntryFormDialog({
       <DialogSuspense>
         <ProjectTimeEntryFormDialogContent
           dialogName={dialogName}
+          timeEntry={timesheetId}
           project={projectId}
         />
       </DialogSuspense>
diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/utils.ts b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/utils.ts
index ed78d8140..cc3248c48 100644
--- a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/utils.ts
+++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/utils.ts
@@ -4,12 +4,11 @@ import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider';
 
 export const useSetProjectToForm = () => {
   const { values } = useFormikContext();
-  const { setProjectPayload, isProjectsSuccess } =
-    useProjectTimeEntryFormContext();
+  const { setProjectPayload } = useProjectTimeEntryFormContext();
 
   React.useEffect(() => {
-    if (isProjectsSuccess) {
-      setProjectPayload(values.projectId);
+    if (values.project_id) {
+      setProjectPayload(values.project_id);
     }
   }, [values.projectId]);
 };