feat: add project time entry.

src/constants/sidebarMenu.tsx

@@ -566,6 +566,11 @@ export const SidebarMenu = [
             type: ISidebarMenuItemType.Dialog,
             dialogName: 'project-form',
           },
+          {
+            text: <T id={'projects.label.new_time_entry'} />,
+            type: ISidebarMenuItemType.Dialog,
+            dialogName: 'project-time-entry-form',
+          },
         ],
       },
     ],

src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.schema.tsx

@@ -6,12 +6,6 @@ const Schema = Yup.object().shape({
   date: Yup.date()
     .label(intl.get('project_time_entry.schema.label.date'))
     .required(),
-  // projectId: Yup.string()
-  //   .label(intl.get('project_time_entry.schema.label.project_name'))
-  //   .required(),
-  // taskId: Yup.string()
-  //   .label(intl.get('project_time_entry.schema.label.task_name'))
-  //   .required(),
   description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
   duration: Yup.string()
     .label(intl.get('project_time_entry.schema.label.duration'))

src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.tsx

@@ -14,7 +14,7 @@ import { compose } from '@/utils';
 
 const defaultInitialValues = {
   date: moment(new Date()).format('YYYY-MM-DD'),
-  // projectId: '',
+  projectId: '',
   taskId: '',
   description: '',
   duration: '',

src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx

@@ -5,6 +5,7 @@ import { Classes, Intent, Position } from '@blueprintjs/core';
 import { CLASSES } from '@/constants/classes';
 import classNames from 'classnames';
 import {
+  If,
   FFormGroup,
   FInputGroup,
   FDateInput,
@@ -15,6 +16,7 @@ import {
 import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider';
 import { TaskSelect, ProjectsSelect } from '../../components';
 import { momentFormatter } from '@/utils';
+import { useSetProjectToForm } from './utils';
 
 /**
  * Project time entry form fields.
@@ -22,23 +24,29 @@ import { momentFormatter } from '@/utils';
  */
 function ProjectTimeEntryFormFields() {
   // time entry form dialog context.
-  const { projectTasks } = useProjectTimeEntryFormContext();
+  const { projectTasks, projects, projectId } =
+    useProjectTimeEntryFormContext();
+
+  // Sets the project id.
+  useSetProjectToForm();
 
   return (
     <div className={Classes.DIALOG_BODY}>
       {/*------------ Project -----------*/}
-      <FFormGroup
+      <If condition={!projectId}>
-        name={'projectId'}
+        <FFormGroup
-        label={<T id={'project_time_entry.dialog.project'} />}
-        labelInfo={<FieldRequiredHint />}
-        className={classNames('form-group--select-list', Classes.FILL)}
-      >
-        <ProjectsSelect
           name={'projectId'}
-          projects={[]}
+          label={<T id={'project_time_entry.dialog.project'} />}
-          popoverProps={{ minimal: true }}
+          labelInfo={<FieldRequiredHint />}
-        />
+          className={classNames('form-group--select-list', Classes.FILL)}
-      </FFormGroup>
+        >
+          <ProjectsSelect
+            name={'projectId'}
+            projects={projects}
+            popoverProps={{ minimal: true }}
+          />
+        </FFormGroup>
+      </If>
       {/*------------ Task -----------*/}
       <FFormGroup
         name={'taskId'}

src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormProvider.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {
+  useProjects,
   useProjectTasks,
   useCreateProjectTimeEntry,
   useEditProjectTimeEntry,
@@ -18,6 +19,9 @@ function ProjectTimeEntryFormProvider({
   projectId,
   ...props
 }) {
+  // project payload.
+  const [project, setProjectPayload] = React.useState(projectId);
+
   // Create and edit project time entry mutations.
   const { mutateAsync: createProjectTimeEntryMutate } =
     useCreateProjectTimeEntry();
@@ -26,22 +30,34 @@ function ProjectTimeEntryFormProvider({
   // Handle fetch project tasks.
   const {
     data: { projectTasks },
-    isLoading: isProjectTasksLoading,
+  } = useProjectTasks(project, {
-  } = useProjectTasks(projectId, {
+    enabled: !!project,
-    enabled: !!projectId,
   });
 
+  // Fetch project list data table or list
+  const {
+    data: { projects },
+    isLoading: isProjectsLoading,
+    isSuccess: isProjectsSuccess,
+  } = useProjects();
+
   // provider payload.
   const provider = {
     dialogName,
+    projects,
     projectId,
     projectTasks,
+    setProjectPayload,
+    isProjectsSuccess,
     createProjectTimeEntryMutate,
     editProjectTimeEntryMutate,
   };
 
   return (
-    <DialogContent name={'project-time-entry-form'}>
+    <DialogContent
+      isLoading={isProjectsLoading}
+      name={'project-time-entry-form'}
+    >
       <ProjecctTimeEntryFormContext.Provider value={provider} {...props} />
     </DialogContent>
   );

src/containers/Projects/containers/ProjectTimeEntryFormDialog/utils.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider';
+
+export const useSetProjectToForm = () => {
+  const { values } = useFormikContext();
+  const { setProjectPayload, isProjectsSuccess } =
+    useProjectTimeEntryFormContext();
+
+  React.useEffect(() => {
+    if (isProjectsSuccess) {
+      setProjectPayload(values.projectId);
+    }
+  }, [values.projectId]);
+};

src/lang/en/index.json

@@ -2050,6 +2050,7 @@
   "projects.action.new_task": "New Task",
   "projects.action.delete_project": "Delete Project",
   "projects.label.new_project": "New Project",
+  "projects.label.new_time_entry":"New Time Entry",
   "projects.dialog.contact": "Contact",
   "projects.dialog.project_name": "Project Name",
   "projects.dialog.deadline": "Deadline",