diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryForm.schema.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.schema.tsx similarity index 50% rename from src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryForm.schema.tsx rename to src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.schema.tsx index 92ae4ebac..3660ad278 100644 --- a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryForm.schema.tsx +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.schema.tsx @@ -3,17 +3,19 @@ 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(), + date: Yup.date() + .label(intl.get('project_time_entry.schema.label.date')) + .required(), projectId: Yup.string() - .label(intl.get('time_entry.schema.label.project_name')) + .label(intl.get('project_time_entry.schema.label.project_name')) .required(), taskId: Yup.string() - .label(intl.get('time_entry.schema.label.task_name')) + .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('time_entry.schema.label.duration')) + .label(intl.get('project_time_entry.schema.label.duration')) .required(), }); -export const CreateTimeEntryFormSchema = Schema; +export const CreateProjectTimeEntryFormSchema = Schema; diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryForm.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.tsx similarity index 69% rename from src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryForm.tsx rename to src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.tsx index b8f399725..82f1b0996 100644 --- a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryForm.tsx +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryForm.tsx @@ -5,9 +5,9 @@ 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 ProjectTimeEntryFormContent from './ProjectTimeEntryFormContent'; +import { CreateProjectTimeEntryFormSchema } from './ProjectTimeEntryForm.schema'; +import { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider'; import withDialogActions from 'containers/Dialog/withDialogActions'; import { compose } from 'utils'; @@ -21,15 +21,15 @@ const defaultInitialValues = { }; /** - * Time entry form. + * Project Time entry form. * @returns */ -function TimeEntryForm({ +function ProjectTimeEntryForm({ // #withDialogActions closeDialog, }) { // time entry form dialog context. - const { dialogName } = useTimeEntryFormContext(); + const { dialogName } = useProjectTimeEntryFormContext(); // Initial form values const initialValues = { @@ -58,12 +58,12 @@ function TimeEntryForm({ return ( ); } -export default compose(withDialogActions)(TimeEntryForm); +export default compose(withDialogActions)(ProjectTimeEntryForm); diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormContent.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormContent.tsx new file mode 100644 index 000000000..de6ff58eb --- /dev/null +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormContent.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { Form } from 'formik'; +import ProjectTimeEntryFormFields from './ProjectTimeEntryFormFields'; +import ProjectTimeEntryFormFloatingActions from './ProjectTimeEntryFormFloatingActions'; + +/** + * Time entry form content. + * @returns + */ +export default function TimeEntryFormContent() { + return ( +
+ + + + ); +} diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormDialogContent.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormDialogContent.tsx new file mode 100644 index 000000000..1b48e95d8 --- /dev/null +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormDialogContent.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { ProjectTimeEntryFormProvider } from './ProjectTimeEntryFormProvider'; +import ProjectTimeEntryForm from './ProjectTimeEntryForm'; + +/** + * Project time entry form dialog content. + * @returns {ReactNode} + */ +export default function ProjectTimeEntryFormDialogContent({ + // #ownProps + dialogName, + project, + timeEntry, +}) { + return ( + + + + ); +} diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormFields.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx similarity index 79% rename from src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormFields.tsx rename to src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx index f1c3c337d..fda2a01f1 100644 --- a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormFields.tsx +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFields.tsx @@ -18,16 +18,16 @@ import { ProjectSelect, TaskSelect } from './components'; import { momentFormatter } from 'utils'; /** - * Time entry form fields. + * Project time entry form fields. * @returns */ -function TimeEntryFormFields() { +function ProjectTimeEntryFormFields() { return (
{/*------------ Project -----------*/} } + label={} labelInfo={} className={classNames('form-group--select-list', Classes.FILL)} > @@ -40,7 +40,7 @@ function TimeEntryFormFields() { {/*------------ Task -----------*/} } + label={} labelInfo={} className={classNames('form-group--select-list', Classes.FILL)} > @@ -53,7 +53,7 @@ function TimeEntryFormFields() { {/*------------ Duration -----------*/} } > @@ -61,7 +61,7 @@ function TimeEntryFormFields() { {/*------------ Date -----------*/} @@ -78,20 +78,13 @@ function TimeEntryFormFields() { {/*------------ Description -----------*/} - {/* */}
); } -export default TimeEntryFormFields; +export default ProjectTimeEntryFormFields; diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormFloatingActions.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx similarity index 77% rename from src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormFloatingActions.tsx rename to src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx index 9933b5eae..fd43b51da 100644 --- a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormFloatingActions.tsx +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormFloatingActions.tsx @@ -3,20 +3,20 @@ 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 { useProjectTimeEntryFormContext } from './ProjectTimeEntryFormProvider'; import withDialogActions from 'containers/Dialog/withDialogActions'; import { compose } from 'utils'; /** - * Time entry form floating actions. + * Projcet time entry form floating actions. * @returns */ -function TimeEntryFormFloatingActions({ +function ProjectTimeEntryFormFloatingActions({ // #withDialogActions closeDialog, }) { // time entry form dialog context. - const { dialogName } = useTimeEntryFormContext(); + const { dialogName } = useProjectTimeEntryFormContext(); // Formik context. const { isSubmitting } = useFormikContext(); @@ -45,4 +45,4 @@ function TimeEntryFormFloatingActions({ ); } -export default compose(withDialogActions)(TimeEntryFormFloatingActions); +export default compose(withDialogActions)(ProjectTimeEntryFormFloatingActions); diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormProvider.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormProvider.tsx new file mode 100644 index 000000000..776fdefca --- /dev/null +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/ProjectTimeEntryFormProvider.tsx @@ -0,0 +1,32 @@ +//@ts-nocheck +import React from 'react'; +import { DialogContent } from 'components'; + +const ProjecctTimeEntryFormContext = React.createContext(); + +/** + * Project time entry form provider. + * @returns + */ +function ProjectTimeEntryFormProvider({ + // #ownProps + dialogName, + projectId, + timeEntryId, + ...props +}) { + const provider = { + dialogName, + }; + + return ( + + + + ); +} + +const useProjectTimeEntryFormContext = () => + React.useContext(ProjecctTimeEntryFormContext); + +export { ProjectTimeEntryFormProvider, useProjectTimeEntryFormContext }; diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/components/index.ts b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/index.ts similarity index 100% rename from src/containers/Projects/containers/TimeEntryFormDialog/components/index.ts rename to src/containers/Projects/containers/ProjectTimeEntryFormDialog/components/index.ts diff --git a/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/index.tsx new file mode 100644 index 000000000..16ef72023 --- /dev/null +++ b/src/containers/Projects/containers/ProjectTimeEntryFormDialog/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 ProjectTimeEntryFormDialogContent = React.lazy( + () => import('./ProjectTimeEntryFormDialogContent'), +); + +/** + * Project time entry form dialog. + * @returns + */ +function ProjectTimeEntryFormDialog({ + dialogName, + isOpen, + payload: { projectId = null, timeEntryId = null }, +}) { + return ( + } + isOpen={isOpen} + autoFocus={true} + canEscapeKeyClose={true} + style={{ width: '400px' }} + > + + + + + ); +} + +export default compose(withDialogRedux())(ProjectTimeEntryFormDialog); + +const ProjectTimeEntryFormDialogRoot = 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; + } +`; diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormContent.tsx b/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormContent.tsx deleted file mode 100644 index dc45632f5..000000000 --- a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormContent.tsx +++ /dev/null @@ -1,17 +0,0 @@ -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 ( -
- - - - ); -} diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormDialogContent.tsx b/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormDialogContent.tsx deleted file mode 100644 index 138914eb4..000000000 --- a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormDialogContent.tsx +++ /dev/null @@ -1,24 +0,0 @@ -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 ( - - - - ); -} diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormProvider.tsx b/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormProvider.tsx deleted file mode 100644 index 56c8aeb47..000000000 --- a/src/containers/Projects/containers/TimeEntryFormDialog/TimeEntryFormProvider.tsx +++ /dev/null @@ -1,31 +0,0 @@ -//@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 ( - - - - ); -} - -const useTimeEntryFormContext = () => React.useContext(TimeEntryFormContext); - -export { TimeEntryFormProvider, useTimeEntryFormContext }; diff --git a/src/containers/Projects/containers/TimeEntryFormDialog/components/ProjectSelect.tsx b/src/containers/Projects/containers/TimeEntryFormDialog/components/ProjectSelect.tsx deleted file mode 100644 index 901dce75f..000000000 --- a/src/containers/Projects/containers/TimeEntryFormDialog/components/ProjectSelect.tsx +++ /dev/null @@ -1,63 +0,0 @@ -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 ( - - ); -}; - -const projectSelectProps = { - // itemPredicate: projectItemPredicate, - itemRenderer: projectItemRenderer, - valueAccessor: 'id', - labelAccessor: 'name', -}; - -export function ProjectSelect({ projects, ...rest }) { - return ( - - ); -} - -function ProjectSelectButton({ label }) { - return