mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-17 21:30:31 +00:00
fix: rename task form to project task form.
This commit is contained in:
@@ -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;
|
||||
@@ -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);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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);
|
||||
@@ -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 };
|
||||
@@ -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);
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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 };
|
||||
@@ -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;
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user