feat: time entry dialog.

src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryForm.schema.tsx

@@ -0,0 +1,19 @@
+import * as Yup from 'yup';
+import intl from 'react-intl-universal';
+import { DATATYPES_LENGTH } from 'common/dataTypes';
+
+const Schema = Yup.object().shape({
+  date: Yup.date().label(intl.get('time_entry.schema.label.date')).required(),
+  projectId: Yup.string()
+    .label(intl.get('time_entry.schema.label.project_name'))
+    .required(),
+  taskId: Yup.string()
+    .label(intl.get('time_entry.schema.label.task_name'))
+    .required(),
+  description: Yup.string().nullable().max(DATATYPES_LENGTH.TEXT),
+  duration: Yup.string()
+    .label(intl.get('time_entry.schema.label.duration'))
+    .required(),
+});
+
+export const CreateTimeEntryFormSchema = Schema;

src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryForm.tsx

@@ -0,0 +1,69 @@
+// @ts-nocheck
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { Formik } from 'formik';
+import { AppToaster } from 'components';
+
+import TimeEntryFormContent from './TimeEntryFormContent';
+import { CreateTimeEntryFormSchema } from './TimeEntryForm.schema';
+import { useTimeEntryFormContext } from './TimeEntryFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { compose } from 'utils';
+
+const defaultInitialValues = {
+  date: moment(new Date()).format('YYYY-MM-DD'),
+  projectId: '',
+  taskId: '',
+  description: '',
+  duration: '',
+};
+
+/**
+ * Time entry form.
+ * @returns
+ */
+function TimeEntryForm({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // time entry form dialog context.
+  const { dialogName } = useTimeEntryFormContext();
+
+  // Initial form values
+  const initialValues = {
+    ...defaultInitialValues,
+  };
+
+  // Handles the form submit.
+  const handleFormSubmit = (values, { setSubmitting, setErrors }) => {
+    const form = {};
+
+    // Handle request response success.
+    const onSuccess = (response) => {
+      AppToaster.show({});
+      closeDialog(dialogName);
+    };
+
+    // Handle request response errors.
+    const onError = ({
+      response: {
+        data: { errors },
+      },
+    }) => {
+      setSubmitting(false);
+    };
+  };
+
+  return (
+    <Formik
+      validationSchema={CreateTimeEntryFormSchema}
+      initialValues={initialValues}
+      onSubmit={handleFormSubmit}
+      component={TimeEntryFormContent}
+    />
+  );
+}
+
+export default compose(withDialogActions)(TimeEntryForm);

src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormContent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Form } from 'formik';
+import TimeEntryFormFields from './TimeEntryFormFields';
+import TimeEntryFormFloatingActions from './TimeEntryFormFloatingActions';
+
+/**
+ * Time entry form content.
+ * @returns
+ */
+export default function TimeEntryFormContent() {
+  return (
+    <Form>
+      <TimeEntryFormFields />
+      <TimeEntryFormFloatingActions />
+    </Form>
+  );
+}

src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormDialogContent.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TimeEntryFormProvider } from './TimeEntryFormProvider';
+import TimeEntryForm from './TimeEntryForm';
+
+/**
+ * Time entry form dialog content.
+ * @returns {ReactNode}
+ */
+export default function TimeEntryFormDialogContent({
+  // #ownProps
+  dialogName,
+  project,
+  timeEntry,
+}) {
+  return (
+    <TimeEntryFormProvider
+      projectId={project}
+      timeEntryId={timeEntry}
+      dialogName={dialogName}
+    >
+      <TimeEntryForm />
+    </TimeEntryFormProvider>
+  );
+}

src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormFields.tsx

@@ -0,0 +1,97 @@
+// @ts-nocheck
+import React from 'react';
+import intl from 'react-intl-universal';
+import styled from 'styled-components';
+import { Classes, Intent, Position } from '@blueprintjs/core';
+import { CLASSES } from 'common/classes';
+import classNames from 'classnames';
+import {
+  FFormGroup,
+  FInputGroup,
+  FDateInput,
+  FTextArea,
+  FEditableText,
+  FieldRequiredHint,
+  FormattedMessage as T,
+} from 'components';
+import { ProjectSelect, TaskSelect } from './components';
+import { momentFormatter } from 'utils';
+
+/**
+ * Time entry form fields.
+ * @returns
+ */
+function TimeEntryFormFields() {
+  return (
+    <div className={Classes.DIALOG_BODY}>
+      {/*------------ Project -----------*/}
+      <FFormGroup
+        name={'projectId'}
+        label={<T id={'time_entry.dialog.project'} />}
+        labelInfo={<FieldRequiredHint />}
+        className={classNames('form-group--select-list', Classes.FILL)}
+      >
+        <ProjectSelect
+          name={'tesc'}
+          projects={[]}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
+      {/*------------ Task -----------*/}
+      <FFormGroup
+        name={'taskId'}
+        label={<T id={'time_entry.dialog.task'} />}
+        labelInfo={<FieldRequiredHint />}
+        className={classNames('form-group--select-list', Classes.FILL)}
+      >
+        <TaskSelect
+          name={'taskId'}
+          tasks={[]}
+          popoverProps={{ minimal: true }}
+        />
+      </FFormGroup>
+
+      {/*------------ Duration -----------*/}
+      <FFormGroup
+        label={intl.get('time_entry.dialog.duration')}
+        name={'duration'}
+        labelInfo={<FieldRequiredHint />}
+      >
+        <FInputGroup name="duration" inputProps={{}} />
+      </FFormGroup>
+      {/*------------ Date -----------*/}
+      <FFormGroup
+        label={intl.get('time_entry.dialog.date')}
+        name={'date'}
+        className={classNames(CLASSES.FILL, 'form-group--date')}
+      >
+        <FDateInput
+          {...momentFormatter('YYYY/MM/DD')}
+          name="date"
+          formatDate={(date) => date.toLocaleString()}
+          popoverProps={{
+            position: Position.BOTTOM,
+            minimal: true,
+          }}
+        />
+      </FFormGroup>
+      {/*------------ Description -----------*/}
+      <FFormGroup
+        name={'description'}
+        label={intl.get('time_entry.dialog.description')}
+        className={'form-group--description'}
+      >
+        <FTextArea name={'description'} />
+        {/* <FEditableText
+          multiline={true}
+          // minLines={1.78}
+          // maxLines={1.78}
+          name={'description'}
+          placeholder=""
+        /> */}
+      </FFormGroup>
+    </div>
+  );
+}
+
+export default TimeEntryFormFields;

src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormFloatingActions.tsx

@@ -0,0 +1,48 @@
+// @ts-nocheck
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { Intent, Button, Classes } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'components';
+import { useTimeEntryFormContext } from './TimeEntryFormProvider';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import { compose } from 'utils';
+
+/**
+ * Time entry form floating actions.
+ * @returns
+ */
+function TimeEntryFormFloatingActions({
+  // #withDialogActions
+  closeDialog,
+}) {
+  // time entry form dialog context.
+  const { dialogName } = useTimeEntryFormContext();
+
+  // Formik context.
+  const { isSubmitting } = useFormikContext();
+
+  // Handle close button click.
+  const handleCancelBtnClick = () => {
+    closeDialog(dialogName);
+  };
+
+  return (
+    <div className={Classes.DIALOG_FOOTER}>
+      <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+        <Button onClick={handleCancelBtnClick} style={{ minWidth: '75px' }}>
+          <T id={'cancel'} />
+        </Button>
+        <Button
+          intent={Intent.PRIMARY}
+          loading={isSubmitting}
+          style={{ minWidth: '75px' }}
+          type="submit"
+        >
+          <T id={'time_entry.dialog.create'} />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default compose(withDialogActions)(TimeEntryFormFloatingActions);

src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormProvider.tsx

@@ -0,0 +1,31 @@
+//@ts-nocheck
+import React from 'react';
+import { DialogContent } from 'components';
+
+const TimeEntryFormContext = React.createContext();
+
+/**
+ * Time entry form provider.
+ * @returns
+ */
+function TimeEntryFormProvider({
+  // #ownProps
+  dialogName,
+  projectId,
+  timeEntryId,
+  ...props
+}) {
+  const provider = {
+    dialogName,
+  };
+
+  return (
+    <DialogContent>
+      <TimeEntryFormContext.Provider value={provider} {...props} />
+    </DialogContent>
+  );
+}
+
+const useTimeEntryFormContext = () => React.useContext(TimeEntryFormContext);
+
+export { TimeEntryFormProvider, useTimeEntryFormContext };

src/containers/Projects/containers/TimeEntryFormDialog/components/ProjectSelect.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '../../../../../components/Forms';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} project
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const projectItemPredicate = (query, project, _index, exactMatch) => {
+  const normalizedTitle = project.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${project.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} project
+ * @param {*} param1
+ * @returns
+ */
+const projectItemRenderer = (project, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={project.id}
+      onClick={handleClick}
+      text={project.name}
+    />
+  );
+};
+
+const projectSelectProps = {
+  // itemPredicate: projectItemPredicate,
+  itemRenderer: projectItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+export function ProjectSelect({ projects, ...rest }) {
+  return (
+    <FSelect
+      items={projects}
+      {...projectSelectProps}
+      {...rest}
+      input={ProjectSelectButton}
+    />
+  );
+}
+
+function ProjectSelectButton({ label }) {
+  return <Button text={label ? label : intl.get('find_or_choose_a_project')} />;
+}

src/containers/Projects/containers/TimeEntryFormDialog/components/TaskSelect.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+import { MenuItem, Button } from '@blueprintjs/core';
+import { FSelect } from '../../../../../components/Forms';
+
+/**
+ *
+ * @param {*} query
+ * @param {*} task
+ * @param {*} _index
+ * @param {*} exactMatch
+ * @returns
+ */
+const taskItemPredicate = (query, task, _index, exactMatch) => {
+  const normalizedTitle = task.name.toLowerCase();
+  const normalizedQuery = query.toLowerCase();
+
+  if (exactMatch) {
+    return normalizedTitle === normalizedQuery;
+  } else {
+    return `${task.name}. ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
+  }
+};
+
+/**
+ *
+ * @param {*} task
+ * @param {*} param1
+ * @returns
+ */
+const taskItemRenderer = (task, { handleClick, modifiers, query }) => {
+  return (
+    <MenuItem
+      active={modifiers.active}
+      disabled={modifiers.disabled}
+      key={task.id}
+      onClick={handleClick}
+      text={task.name}
+    />
+  );
+};
+
+const taskSelectProps = {
+  itemPredicate: taskItemPredicate,
+  itemRenderer: taskItemRenderer,
+  valueAccessor: 'id',
+  labelAccessor: 'name',
+};
+
+export function TaskSelect({ tasks, ...rest }) {
+  return (
+    <FSelect
+      items={tasks}
+      {...taskSelectProps}
+      {...rest}
+      input={TaskSelectButton}
+    />
+  );
+}
+
+function TaskSelectButton({ label }) {
+  return <Button text={label ? label : intl.get('choose_a_task')} />;
+}

src/containers/Projects/containers/TimeEntryFormDialog/components/index.ts

@@ -0,0 +1,2 @@
+export * from './ProjectSelect';
+export * from './TaskSelect';

src/containers/Projects/containers/TimeEntryFormDialog/index.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
+import withDialogRedux from 'components/DialogReduxConnect';
+import { compose } from 'utils';
+
+const TimeEntryFormDialogContent = React.lazy(
+  () => import('./TimeEntryFormDialogContent'),
+);
+
+/**
+ * Time entry form dialog.
+ * @returns
+ */
+function TimeEntryFormDialog({
+  dialogName,
+  isOpen,
+  payload: { projectId = null, timeEntryId = null },
+}) {
+  return (
+    <TimeEntryFormDialogRoot
+      name={dialogName}
+      title={<T id={'time_entry.dialog.label'} />}
+      isOpen={isOpen}
+      autoFocus={true}
+      canEscapeKeyClose={true}
+      style={{ width: '400px' }}
+    >
+      <DialogSuspense>
+        <TimeEntryFormDialogContent
+          dialogName={dialogName}
+          project={projectId}
+          timeEntry={timeEntryId}
+        />
+      </DialogSuspense>
+    </TimeEntryFormDialogRoot>
+  );
+}
+
+export default compose(withDialogRedux())(TimeEntryFormDialog);
+
+const TimeEntryFormDialogRoot = styled(Dialog)`
+  .bp3-dialog-body {
+    .bp3-form-group {
+      margin-bottom: 15px;
+
+      label.bp3-label {
+        margin-bottom: 3px;
+        font-size: 13px;
+      }
+    }
+    .form-group {
+      &--description {
+        .bp3-form-content {
+          textarea {
+            width: 100%;
+            min-width: 100%;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+  .bp3-dialog-footer {
+    padding-top: 10px;
+  }
+`;