feat: time entry dialog.

This commit is contained in:
elforjani13
2022-06-23 00:14:49 +02:00
parent 50522af72d
commit 7be568b8ac
13 changed files with 41 additions and 29 deletions

View File

@@ -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.

View File

@@ -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>
); );

View File

@@ -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>
); );
} }

View File

@@ -11,6 +11,7 @@ const TimeEntryFormContext = React.createContext();
function TimeEntryFormProvider({ function TimeEntryFormProvider({
// #ownProps // #ownProps
dialogName, dialogName,
projectId,
timeEntryId, timeEntryId,
...props ...props
}) { }) {

View File

@@ -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',

View File

@@ -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';
/** /**
* *

View File

@@ -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 {