QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-22 15:50:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add Box, Group and Stack layout components.

Browse Source
This commit is contained in:
a.bouhuolia
2022-10-04 00:29:48 +02:00
parent 41db96d958
commit f9a7021f55
17 changed files with 204 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/containers/Projects/containers/EstimatedExpenseFormDialog/EstimatedExpenseFormFields.tsx
View File

@@ -8,7 +8,6 @@ import {
FFormGroup,
FInputGroup,
FormattedMessage as T,
FieldRequiredHint,
} from '@/components';
import {
ExpenseSelect,
@@ -100,7 +99,6 @@ const MetaLineLabel = styled.div`
font-weight: 500;
margin-bottom: 8px;
`;
const EstimatedAmountWrap = styled.div`
display: block;
text-align: right;

2
src/containers/Projects/containers/ProjectBillableEntries/ProjectBillableEntriesProvider.tsx
View File

@@ -1,6 +1,6 @@
// @ts-nocheck
import React, { useState } from 'react';
import React from 'react';
import { useProjectBillableEntries } from '../../hooks';
import { DialogContent } from '@/components';

150
src/containers/Projects/containers/ProjectFormDialog/ProjectFormFields.tsx
View File

@@ -17,13 +17,9 @@ import {
FormattedMessage as T,
FieldRequiredHint,
CustomerSelectField,
Stack,
} from '@/components';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from '@/utils';
import { inputIntent, momentFormatter } from '@/utils';
import { useProjectFormContext } from './ProjectFormProvider';
/**
@@ -39,76 +35,80 @@ function ProjectFormFields() {
return (
<div className={Classes.DIALOG_BODY}>
{/*------------ Contact -----------*/}
<FastField name={'contact_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={intl.get('projects.dialog.contact')}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--select-list', Classes.FILL)}
intent={inputIntent({ error, touched })}
>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={'Select Contact Account'}
onContactSelected={(customer) => {
form.setFieldValue('contact_id', customer.id);
}}
allowCreate={true}
popoverFill={true}
/>
</FormGroup>
)}
</FastField>
{/*------------ Project Name -----------*/}
<FFormGroup
label={intl.get('projects.dialog.project_name')}
name={'name'}
labelInfo={<FieldRequiredHint />}
>
<FInputGroup name="name" />
</FFormGroup>
{/*------------ DeadLine -----------*/}
<FFormGroup
label={intl.get('projects.dialog.deadline')}
name={'deadline'}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<FDateInput
{...momentFormatter('YYYY/MM/DD')}
name="deadline"
formatDate={(date) => date.toLocaleString()}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
/>
</FFormGroup>
<Stack spacing={25}>
{/*------------ Contact -----------*/}
<FastField name={'contact_id'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={intl.get('projects.dialog.contact')}
className={classNames('form-group--select-list', Classes.FILL)}
intent={inputIntent({ error, touched })}
>
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={'Find or create a customer'}
onContactSelected={(customer) => {
form.setFieldValue('contact_id', customer.id);
}}
allowCreate={true}
popoverFill={true}
/>
</FormGroup>
)}
</FastField>
{/*------------ CheckBox -----------*/}
<FFormGroup name={'published'}>
<FCheckbox
name="published"
label={intl.get('projects.dialog.calculator_expenses')}
/>
</FFormGroup>
{/*------------ Cost Estimate -----------*/}
<FFormGroup
name={'cost_estimate'}
label={intl.get('projects.dialog.cost_estimate')}
labelInfo={<FieldRequiredHint />}
>
<ControlGroup>
<InputPrependText text={'USD'} />
<FMoneyInputGroup
disabled={values.published}
name={'cost_estimate'}
allowDecimals={true}
allowNegativeValue={true}
/>
</ControlGroup>
</FFormGroup>
{/*------------ Project Name -----------*/}
<FFormGroup
label={intl.get('projects.dialog.project_name')}
name={'name'}
>
<FInputGroup name="name" />
</FFormGroup>
<Stack spacing={15}>
{/*------------ DeadLine -----------*/}
<FFormGroup
label={intl.get('projects.dialog.deadline')}
name={'deadline'}
className={classNames(CLASSES.FILL, 'form-group--date')}
>
<FDateInput
{...momentFormatter('YYYY/MM/DD')}
name="deadline"
formatDate={(date) => date.toLocaleString()}
popoverProps={{
position: Position.BOTTOM,
minimal: true,
}}
/>
</FFormGroup>
{/*------------ CheckBox -----------*/}
<FFormGroup name={'published'}>
<FCheckbox
name="published"
label={intl.get('projects.dialog.calculator_expenses')}
/>
</FFormGroup>
</Stack>
{/*------------ Cost Estimate -----------*/}
<FFormGroup
name={'cost_estimate'}
label={intl.get('projects.dialog.cost_estimate')}
>
<ControlGroup>
<FMoneyInputGroup
disabled={values.published}
name={'cost_estimate'}
allowDecimals={true}
allowNegativeValue={true}
/>
<InputPrependText text={'USD'} />
</ControlGroup>
</FFormGroup>
</Stack>
</div>
);
}

13
src/containers/Projects/containers/ProjectFormDialog/ProjectFormFloatingActions.tsx
View File

@@ -18,24 +18,13 @@ function ProjectFormFloatingActions({
// Formik context.
const { isSubmitting } = useFormikContext();
// project form dialog context.
const { dialogName } = useProjectFormContext();
// Handle close button click.
const handleCancelBtnClick = () => {
closeDialog(dialogName);
};
return (
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancelBtnClick} style={{ minWidth: '85px' }}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
loading={isSubmitting}
style={{ minWidth: '75px' }}
style={{ minWidth: '100px' }}
type="submit"
>
<T id={'projects.label.create'} />

3
src/containers/Projects/containers/ProjectFormDialog/index.tsx
View File

@@ -45,8 +45,7 @@ export default compose(withDialogRedux())(ProjectFormDialog);
const ProjectFormDialogRoot = styled(Dialog)`
.bp3-dialog-body {
.bp3-form-group {
margin-bottom: 15px;
margin-top: 15px;
margin-bottom: 0;
label.bp3-label {
margin-bottom: 3px;

3
src/containers/Projects/containers/ProjectsLanding/ProjectsActionsBar.tsx
View File

@@ -24,6 +24,7 @@ import withSettingsActions from '@/containers/Settings/withSettingsActions';
import withDialogActions from '@/containers/Dialog/withDialogActions';
import { compose } from '@/utils';
import { DialogsName } from '@/constants/dialogs';
/**
* Projects actions bar.
@@ -62,7 +63,7 @@ function ProjectsActionsBar({
// Handle new project button click.
const handleNewProjectBtnClick = () => {
openDialog('project-form');
openDialog(DialogsName.ProjectForm);
};
return (

15
src/containers/Projects/containers/ProjectsLanding/ProjectsDataTable.tsx
View File

@@ -39,18 +39,23 @@ function ProjectsDataTable({
const { projects, isEmptyStatus, isProjectsLoading, isProjectsFetching } =
useProjectsListContext();
// Retrieve projects table columns.
const columns = useProjectsListColumns();
// Local storage memorizing columns widths.
const [initialColumnsWidths, , handleColumnResizing] =
useMemorizedColumnsWidths(TABLES.PROJECTS);
// Handle delete project.
const handleDeleteProject = ({ id }) => {
openAlert('project-delete', { projectId: id });
};
// Handle project's status button click.
const handleProjectStatus = ({ id, status_formatted }) => {
openAlert('project-status', { projectId: id, status: status_formatted });
};
// Retrieve projects table columns.
const columns = useProjectsListColumns();
// Handle cell click.
const handleCellClick = ({ row: { original } }) => {
return history.push(`/projects/${original?.id}/details`, {
@@ -72,10 +77,6 @@ function ProjectsDataTable({
projectId: project.id,
});
};
// Local storage memorizing columns widths.
const [initialColumnsWidths, , handleColumnResizing] =
useMemorizedColumnsWidths(TABLES.PROJECTS);
// Handle view detail project.
const handleViewDetailProject = (project) => {
return history.push(`/projects/${project.id}/details`, {