mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-20 14:50:32 +00:00
feat: time entry dialog.
This commit is contained in:
@@ -42,7 +42,7 @@ import CustomerOpeningBalanceDialog from '../containers/Dialogs/CustomerOpeningB
|
|||||||
import VendorOpeningBalanceDialog from '../containers/Dialogs/VendorOpeningBalanceDialog';
|
import VendorOpeningBalanceDialog from '../containers/Dialogs/VendorOpeningBalanceDialog';
|
||||||
import ProjectFormDialog from '../containers/Projects/containers/ProjectFormDialog';
|
import ProjectFormDialog from '../containers/Projects/containers/ProjectFormDialog';
|
||||||
import TaskFormDialog from '../containers/Projects/containers/TaskFormDialog';
|
import TaskFormDialog from '../containers/Projects/containers/TaskFormDialog';
|
||||||
import TimeEntryFormDialog from '../containers/Timesheets/containers/TimeEntryFormDialog';
|
import TimeEntryFormDialog from '../containers/Projects/containers/TimeEntryFormDialog';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dialogs container.
|
* Dialogs container.
|
||||||
|
|||||||
@@ -9,10 +9,15 @@ import TimeEntryForm from './TimeEntryForm';
|
|||||||
export default function TimeEntryFormDialogContent({
|
export default function TimeEntryFormDialogContent({
|
||||||
// #ownProps
|
// #ownProps
|
||||||
dialogName,
|
dialogName,
|
||||||
|
project,
|
||||||
timeEntry,
|
timeEntry,
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<TimeEntryFormProvider timeEntryId={timeEntry} dialogName={dialogName}>
|
<TimeEntryFormProvider
|
||||||
|
projectId={project}
|
||||||
|
timeEntryId={timeEntry}
|
||||||
|
dialogName={dialogName}
|
||||||
|
>
|
||||||
<TimeEntryForm />
|
<TimeEntryForm />
|
||||||
</TimeEntryFormProvider>
|
</TimeEntryFormProvider>
|
||||||
);
|
);
|
||||||
@@ -1,7 +1,8 @@
|
|||||||
// @ts-nocheck
|
// @ts-nocheck
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import intl from 'react-intl-universal';
|
import intl from 'react-intl-universal';
|
||||||
import { Classes, Position } from '@blueprintjs/core';
|
import styled from 'styled-components';
|
||||||
|
import { Classes, Intent, Position } from '@blueprintjs/core';
|
||||||
import { CLASSES } from 'common/classes';
|
import { CLASSES } from 'common/classes';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {
|
import {
|
||||||
@@ -9,10 +10,11 @@ import {
|
|||||||
FInputGroup,
|
FInputGroup,
|
||||||
FDateInput,
|
FDateInput,
|
||||||
FTextArea,
|
FTextArea,
|
||||||
|
FEditableText,
|
||||||
FieldRequiredHint,
|
FieldRequiredHint,
|
||||||
FormattedMessage as T,
|
FormattedMessage as T,
|
||||||
} from 'components';
|
} from 'components';
|
||||||
import { ProjectSelect, TaskSelect } from '../../components';
|
import { ProjectSelect, TaskSelect } from './components';
|
||||||
import { momentFormatter } from 'utils';
|
import { momentFormatter } from 'utils';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -30,11 +32,8 @@ function TimeEntryFormFields() {
|
|||||||
className={classNames('form-group--select-list', Classes.FILL)}
|
className={classNames('form-group--select-list', Classes.FILL)}
|
||||||
>
|
>
|
||||||
<ProjectSelect
|
<ProjectSelect
|
||||||
name={'projectId'}
|
name={'tesc'}
|
||||||
projects={[
|
projects={[]}
|
||||||
{ id: '1', name: 'Project 1' },
|
|
||||||
{ id: '2', name: 'Project 2' },
|
|
||||||
]}
|
|
||||||
popoverProps={{ minimal: true }}
|
popoverProps={{ minimal: true }}
|
||||||
/>
|
/>
|
||||||
</FFormGroup>
|
</FFormGroup>
|
||||||
@@ -47,34 +46,23 @@ function TimeEntryFormFields() {
|
|||||||
>
|
>
|
||||||
<TaskSelect
|
<TaskSelect
|
||||||
name={'taskId'}
|
name={'taskId'}
|
||||||
tasks={[
|
tasks={[]}
|
||||||
{ id: '1', name: 'Task 1' },
|
|
||||||
{ id: '2', name: 'Task 2' },
|
|
||||||
]}
|
|
||||||
popoverProps={{ minimal: true }}
|
popoverProps={{ minimal: true }}
|
||||||
/>
|
/>
|
||||||
</FFormGroup>
|
</FFormGroup>
|
||||||
{/*------------ Description -----------*/}
|
|
||||||
<FFormGroup
|
|
||||||
name={'description'}
|
|
||||||
label={intl.get('time_entry.dialog.description')}
|
|
||||||
className={'form-group--description'}
|
|
||||||
>
|
|
||||||
<FTextArea name={'description'} />
|
|
||||||
</FFormGroup>
|
|
||||||
{/*------------ Duration -----------*/}
|
{/*------------ Duration -----------*/}
|
||||||
<FFormGroup
|
<FFormGroup
|
||||||
label={intl.get('time_entry.dialog.duration')}
|
label={intl.get('time_entry.dialog.duration')}
|
||||||
name={'duration'}
|
name={'duration'}
|
||||||
labelInfo={<FieldRequiredHint />}
|
labelInfo={<FieldRequiredHint />}
|
||||||
>
|
>
|
||||||
<FInputGroup name="duration" />
|
<FInputGroup name="duration" inputProps={{}} />
|
||||||
</FFormGroup>
|
</FFormGroup>
|
||||||
{/*------------ Date -----------*/}
|
{/*------------ Date -----------*/}
|
||||||
<FFormGroup
|
<FFormGroup
|
||||||
label={intl.get('time_entry.dialog.date')}
|
label={intl.get('time_entry.dialog.date')}
|
||||||
name={'date'}
|
name={'date'}
|
||||||
labelInfo={<FieldRequiredHint />}
|
|
||||||
className={classNames(CLASSES.FILL, 'form-group--date')}
|
className={classNames(CLASSES.FILL, 'form-group--date')}
|
||||||
>
|
>
|
||||||
<FDateInput
|
<FDateInput
|
||||||
@@ -87,6 +75,21 @@ function TimeEntryFormFields() {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</FFormGroup>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -11,6 +11,7 @@ const TimeEntryFormContext = React.createContext();
|
|||||||
function TimeEntryFormProvider({
|
function TimeEntryFormProvider({
|
||||||
// #ownProps
|
// #ownProps
|
||||||
dialogName,
|
dialogName,
|
||||||
|
projectId,
|
||||||
timeEntryId,
|
timeEntryId,
|
||||||
...props
|
...props
|
||||||
}) {
|
}) {
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import intl from 'react-intl-universal';
|
import intl from 'react-intl-universal';
|
||||||
import { MenuItem, Button } from '@blueprintjs/core';
|
import { MenuItem, Button } from '@blueprintjs/core';
|
||||||
import { FSelect } from '../../../components/Forms';
|
import { FSelect } from '../../../../../components/Forms';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@@ -41,7 +41,7 @@ const projectItemRenderer = (project, { handleClick, modifiers, query }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const projectSelectProps = {
|
const projectSelectProps = {
|
||||||
itemPredicate: projectItemPredicate,
|
// itemPredicate: projectItemPredicate,
|
||||||
itemRenderer: projectItemRenderer,
|
itemRenderer: projectItemRenderer,
|
||||||
valueAccessor: 'id',
|
valueAccessor: 'id',
|
||||||
labelAccessor: 'name',
|
labelAccessor: 'name',
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import intl from 'react-intl-universal';
|
import intl from 'react-intl-universal';
|
||||||
import { MenuItem, Button } from '@blueprintjs/core';
|
import { MenuItem, Button } from '@blueprintjs/core';
|
||||||
import { FSelect } from '../../../components/Forms';
|
import { FSelect } from '../../../../../components/Forms';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
@@ -12,7 +12,11 @@ const TimeEntryFormDialogContent = React.lazy(
|
|||||||
* Time entry form dialog.
|
* Time entry form dialog.
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
function TimeEntryFormDialog({ dialogName, isOpen, payload: { timeEntryId } }) {
|
function TimeEntryFormDialog({
|
||||||
|
dialogName,
|
||||||
|
isOpen,
|
||||||
|
payload: { projectId = null, timeEntryId = null },
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<TimeEntryFormDialogRoot
|
<TimeEntryFormDialogRoot
|
||||||
name={dialogName}
|
name={dialogName}
|
||||||
@@ -25,6 +29,7 @@ function TimeEntryFormDialog({ dialogName, isOpen, payload: { timeEntryId } }) {
|
|||||||
<DialogSuspense>
|
<DialogSuspense>
|
||||||
<TimeEntryFormDialogContent
|
<TimeEntryFormDialogContent
|
||||||
dialogName={dialogName}
|
dialogName={dialogName}
|
||||||
|
project={projectId}
|
||||||
timeEntry={timeEntryId}
|
timeEntry={timeEntryId}
|
||||||
/>
|
/>
|
||||||
</DialogSuspense>
|
</DialogSuspense>
|
||||||
@@ -38,14 +43,12 @@ const TimeEntryFormDialogRoot = styled(Dialog)`
|
|||||||
.bp3-dialog-body {
|
.bp3-dialog-body {
|
||||||
.bp3-form-group {
|
.bp3-form-group {
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
margin-top: 15px;
|
|
||||||
|
|
||||||
label.bp3-label {
|
label.bp3-label {
|
||||||
margin-bottom: 3px;
|
margin-bottom: 3px;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-group {
|
.form-group {
|
||||||
&--description {
|
&--description {
|
||||||
.bp3-form-content {
|
.bp3-form-content {
|
||||||
Reference in New Issue
Block a user