fix: rename task form to project task form.

This commit is contained in:
elforjani13
2022-07-06 13:41:17 +02:00
parent 965a8966f6
commit bcf0ec25b8
13 changed files with 106 additions and 168 deletions

View File

@@ -7,8 +7,10 @@ const Schema = Yup.object().shape({
.label(intl.get('task.schema.label.task_name'))
.required(),
taskHouse: Yup.string().label(intl.get('task.schema.label.task_house')),
taskCharge: Yup.string().label(intl.get('task.schema.label.charge')).required(),
taskCharge: Yup.string()
.label(intl.get('task.schema.label.charge'))
.required(),
taskamount: Yup.number().label(intl.get('task.schema.label.amount')),
});
export const CreateTaskFormSchema = Schema;
export const CreateProjectTaskFormSchema = Schema;

View File

@@ -1,10 +1,10 @@
//@ts-nocheck
import React from 'react';
import { Formik } from 'formik';
import { CreateTaskFormSchema } from './TaskForm.schema';
import { useTaskFormContext } from './TaskFormProvider';
import { CreateProjectTaskFormSchema } from './ProjectTaskForm.schema';
import { useProjectTaskFormContext } from './ProjectTaskFormProvider';
import { AppToaster } from 'components';
import TaskFormContent from './TaskFormContent';
import ProjectTaskFormContent from './ProjectTaskFormContent';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
@@ -12,20 +12,20 @@ import { compose } from 'utils';
const defaultInitialValues = {
taskName: '',
taskHouse: '00:00',
taskCharge: 'Hourly rate',
taskCharge: 'hourly_rate',
taskamount: '',
};
/**
* Task form.
* Project task form.
* @returns
*/
function TaskForm({
function ProjectTaskForm({
// #withDialogActions
closeDialog,
}) {
// task form dialog context.
const { dialogName } = useTaskFormContext();
const { dialogName } = useProjectTaskFormContext();
// Initial form values
const initialValues = {
@@ -51,12 +51,12 @@ function TaskForm({
return (
<Formik
validationSchema={CreateTaskFormSchema}
validationSchema={CreateProjectTaskFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
component={TaskFormContent}
component={ProjectTaskFormContent}
/>
);
}
export default compose(withDialogActions)(TaskForm);
export default compose(withDialogActions)(ProjectTaskForm);

View File

@@ -0,0 +1,17 @@
import React from 'react';
import { Form } from 'formik';
import ProjectTaskFormFields from './ProjectTaskFormFields';
import ProjectTaskFormFloatingActions from './ProjectTaskFormFloatingActions';
/**
* Task form content.
* @returns
*/
export default function TaskFormContent() {
return (
<Form>
<ProjectTaskFormFields />
<ProjectTaskFormFloatingActions />
</Form>
);
}

View File

@@ -0,0 +1,18 @@
import React from 'react';
import { ProjectTaskFormProvider } from './ProjectTaskFormProvider';
import ProjectTaskForm from './ProjectTaskForm';
/**
* Project task form dialog content.
*/
export default function ProjectTaskFormDialogContent({
// #ownProps
dialogName,
task,
}) {
return (
<ProjectTaskFormProvider taskId={task} dialogName={dialogName}>
<ProjectTaskForm />
</ProjectTaskFormProvider>
);
}

View File

@@ -10,28 +10,28 @@ import {
Row,
FormattedMessage as T,
} from 'components';
import { taskChargeOptions } from 'common/modalChargeOptions';
import { ChargeSelect } from '../../components';
import { taskChargeOptions } from 'containers/Projects/containers/common/modalChargeOptions';
import { ChangeTypesSelect } from '../../components';
/**
* Task form fields.
* Project task form fields.
* @returns
*/
function TaskFormFields() {
function ProjectTaskFormFields() {
// Formik context.
const { values } = useFormikContext();
return (
<div className={Classes.DIALOG_BODY}>
{/*------------ Task Name -----------*/}
<FFormGroup label={<T id={'task.dialog.task_name'} />} name={'taskName'}>
<FFormGroup label={<T id={'project_task.dialog.task_name'} />} name={'taskName'}>
<FInputGroup name="taskName" />
</FFormGroup>
{/*------------ Estimated Hours -----------*/}
<Row>
<Col xs={4}>
<FFormGroup
label={<T id={'task.dialog.estimated_hours'} />}
label={<T id={'project_task.dialog.estimated_hours'} />}
name={'taskHouse'}
>
<FInputGroup name="taskHouse" />
@@ -42,10 +42,10 @@ function TaskFormFields() {
<FFormGroup
name={'taskCharge'}
className={'form-group--select-list'}
label={<T id={'task.dialog.charge'} />}
label={<T id={'project_task.dialog.charge'} />}
>
<ControlGroup>
<ChargeSelect
<ChangeTypesSelect
name="taskCharge"
items={taskChargeOptions}
popoverProps={{ minimal: true }}
@@ -62,7 +62,7 @@ function TaskFormFields() {
{/*------------ Estimated Amount -----------*/}
<EstimatedAmountBase>
<EstimatedAmountContent>
<T id={'task.dialog.estimated_amount'} />
<T id={'project_task.dialog.estimated_amount'} />
<EstimateAmount>0.00</EstimateAmount>
</EstimatedAmountContent>
</EstimatedAmountBase>
@@ -70,7 +70,7 @@ function TaskFormFields() {
);
}
export default TaskFormFields;
export default ProjectTaskFormFields;
const EstimatedAmountBase = styled.div`
display: flex;

View File

@@ -3,7 +3,7 @@ import React from 'react';
import { useFormikContext } from 'formik';
import { Intent, Button, Classes } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { useTaskFormContext } from './TaskFormProvider';
import { useProjectTaskFormContext } from './ProjectTaskFormProvider';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
@@ -11,7 +11,7 @@ import { compose } from 'utils';
* Task form floating actions.
* @returns
*/
function TaskFormFloatingActions({
function ProjectTaskFormFloatingActions({
// #withDialogActions
closeDialog,
}) {
@@ -19,7 +19,7 @@ function TaskFormFloatingActions({
const { isSubmitting } = useFormikContext();
// Task form dialog context.
const { dialogName } = useTaskFormContext();
const { dialogName } = useProjectTaskFormContext();
// Handle close button click.
const handleCancelBtnClick = () => {
@@ -45,4 +45,4 @@ function TaskFormFloatingActions({
);
}
export default compose(withDialogActions)(TaskFormFloatingActions);
export default compose(withDialogActions)(ProjectTaskFormFloatingActions);

View File

@@ -0,0 +1,32 @@
//@ts-nocheck
import React from 'react';
import { DialogContent } from 'components';
const ProjectTaskFormContext = React.createContext();
/**
* Project task form provider.
* @returns
*/
function ProjectTaskFormProvider({
// #ownProps
dialogName,
taskId,
...props
}) {
// State provider.
const provider = {
dialogName,
};
return (
<DialogContent>
<ProjectTaskFormContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useProjectTaskFormContext = () =>
React.useContext(ProjectTaskFormContext);
export { ProjectTaskFormProvider, useProjectTaskFormContext };

View File

@@ -5,30 +5,32 @@ import { Dialog, DialogSuspense, FormattedMessage as T } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const TaskFormDialogContent = React.lazy(
() => import('./TaskFormDialogContent'),
const ProjectTaskFormDialogContent = React.lazy(
() => import('./ProjectTaskFormDialogContent'),
);
/**
* Task form dialog.
* Project task form dialog.
* @returns
*/
function TaskFormDialog({ dialogName, payload: { taskId = null }, isOpen }) {
function ProjectTaskFormDialog({
dialogName,
payload: { taskId = null },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={intl.get('task.dialog.new_task')}
title={intl.get('project_task.dialog.new_task')}
isOpen={isOpen}
autoFocus={true}
canEscapeKeyClose={true}
style={{ width: '500px' }}
>
<DialogSuspense>
<TaskFormDialogContent dialogName={dialogName} task={taskId} />
<ProjectTaskFormDialogContent dialogName={dialogName} task={taskId} />
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(TaskFormDialog);
const TaskFormDialogRoot = styled(Dialog)``;
export default compose(withDialogRedux())(ProjectTaskFormDialog);

View File

@@ -1,17 +0,0 @@
import React from 'react';
import { Form } from 'formik';
import TaskFormFields from './TaskFormFields';
import TaskFormFloatingActions from './TaskFormFloatingActions';
/**
* Task form content.
* @returns
*/
export default function TaskFormContent() {
return (
<Form>
<TaskFormFields />
<TaskFormFloatingActions />
</Form>
);
}

View File

@@ -1,18 +0,0 @@
import React from 'react';
import { TaskFormProvider } from './TaskFormProvider';
import TaskForm from './TaskForm';
/**
* Task form dialog content.
*/
export default function TaskFormDialogContent({
// #ownProps
dialogName,
task,
}) {
return (
<TaskFormProvider taskId={task} dialogName={dialogName}>
<TaskForm />
</TaskFormProvider>
);
}

View File

@@ -1,31 +0,0 @@
//@ts-nocheck
import React from 'react';
import { DialogContent } from 'components';
const TaskFormContext = React.createContext();
/**
* Task form provider.
* @returns
*/
function TaskFormProvider({
// #ownProps
dialogName,
taskId,
...props
}) {
// State provider.
const provider = {
dialogName,
};
return (
<DialogContent>
<TaskFormContext.Provider value={provider} {...props} />
</DialogContent>
);
}
const useTaskFormContext = () => React.useContext(TaskFormContext);
export { TaskFormProvider, useTaskFormContext };

View File

@@ -1,67 +0,0 @@
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;
}
`;