QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 13:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add customize templates button to edit forms

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2024-10-13 21:14:18 +02:00
parent 5b5ab9fe1e
commit 2c735d7edf
9 changed files with 176 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/webapp/src/containers/Sales/CreditNotes/CreditNoteForm/CreditNoteFloatingActions.tsx
View File

@@ -26,12 +26,16 @@ import {
BrandingThemeSelectButton,
} from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
import { useCreditNoteFormBrandingTemplatesOptions } from './utils';
import { MoreIcon } from '@/icons/More';
import { useDrawerActions } from '@/hooks/state';
import { DRAWERS } from '@/constants/drawers';
/**
* Credit note floating actions.
*/
export default function CreditNoteFloatingActions() {
const history = useHistory();
const { openDrawer } = useDrawerActions();
// Formik context.
const { resetForm, submitForm, isSubmitting } = useFormikContext();
@@ -84,6 +88,11 @@ export default function CreditNoteFloatingActions() {
resetForm();
};
// Handles the credit note customize button click.
const handleCustomizeBtnClick = () => {
openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'CreditNote' });
};
const brandingTemplatesOptions = useCreditNoteFormBrandingTemplatesOptions();
return (
@@ -202,7 +211,7 @@ export default function CreditNoteFloatingActions() {
/>
</Group>
<Group>
<Group spacing={0}>
{/* ----------- Branding Template Select ----------- */}
<BrandingThemeFormGroup
name={'pdf_template_id'}
@@ -221,6 +230,26 @@ export default function CreditNoteFloatingActions() {
popoverProps={{ minimal: true }}
/>
</BrandingThemeFormGroup>
{/* ----------- Setting Select ----------- */}
<Popover
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.TOP_RIGHT}
modifiers={{
offset: { offset: '0, 4' },
}}
content={
<Menu>
<MenuItem
text={'Customize Templates'}
onClick={handleCustomizeBtnClick}
/>
</Menu>
}
>
<Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
</Popover>
</Group>
</PageForm.FooterActions>
);

31
packages/webapp/src/containers/Sales/Estimates/EstimateForm/EstimateFloatingActions.tsx
View File

@@ -15,17 +15,21 @@ import { useHistory } from 'react-router-dom';
import { useFormikContext } from 'formik';
import { useEstimateFormContext } from './EstimateFormProvider';
import { useEstimateFormBrandingTemplatesOptions } from './utils';
import { useDrawerActions } from '@/hooks/state';
import {
BrandingThemeFormGroup,
BrandingThemeSelectButton,
} from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
import { PageForm } from '@/components/PageForm';
import { MoreIcon } from '@/icons/More';
import { DRAWERS } from '@/constants/drawers';
/**
* Estimate floating actions bar.
*/
export default function EstimateFloatingActions() {
const history = useHistory();
const { openDrawer } = useDrawerActions();
const { resetForm, submitForm, isSubmitting } = useFormikContext();
// Estimate form context.
@@ -77,6 +81,11 @@ export default function EstimateFloatingActions() {
resetForm();
};
// Handles the invoice customize button click.
const handleCustomizeBtnClick = () => {
openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleEstimate' });
};
const brandingTemplatesOptions = useEstimateFormBrandingTemplatesOptions();
return (
@@ -199,7 +208,7 @@ export default function EstimateFloatingActions() {
/>
</Group>
<Group>
<Group spacing={0}>
{/* ----------- Branding Template Select ----------- */}
<BrandingThemeFormGroup
name={'pdf_template_id'}
@@ -218,6 +227,26 @@ export default function EstimateFloatingActions() {
popoverProps={{ minimal: true }}
/>
</BrandingThemeFormGroup>
{/* ----------- More Select ----------- */}
<Popover
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.TOP_RIGHT}
modifiers={{
offset: { offset: '0, 4' },
}}
content={
<Menu>
<MenuItem
text={'Customize Templates'}
onClick={handleCustomizeBtnClick}
/>
</Menu>
}
>
<Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
</Popover>
</Group>
</PageForm.FooterActions>
);

32
packages/webapp/src/containers/Sales/Invoices/InvoiceForm/InvoiceFloatingActions.tsx
View File

@@ -15,17 +15,21 @@ import { useFormikContext } from 'formik';
import { If, Icon, FormattedMessage as T, Group, FSelect } from '@/components';
import { useInvoiceFormContext } from './InvoiceFormProvider';
import { useInvoiceFormBrandingTemplatesOptions } from './utils';
import { useDrawerActions } from '@/hooks/state';
import {
BrandingThemeFormGroup,
BrandingThemeSelectButton,
} from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
import { PageForm } from '@/components/PageForm';
import { MoreIcon } from '@/icons/More';
import { DRAWERS } from '@/constants/drawers';
/**
* Invoice floating actions bar.
*/
export default function InvoiceFloatingActions() {
const history = useHistory();
const { openDrawer } = useDrawerActions();
// Formik context.
const { resetForm, submitForm, isSubmitting } = useFormikContext();
@@ -79,6 +83,11 @@ export default function InvoiceFloatingActions() {
resetForm();
};
// Handles the invoice customize button click.
const handleCustomizeBtnClick = () => {
openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleInvoice' });
};
const brandingTemplatesOptions = useInvoiceFormBrandingTemplatesOptions();
return (
@@ -200,7 +209,7 @@ export default function InvoiceFloatingActions() {
/>
</Group>
<Group spacing={10}>
<Group spacing={0}>
{/* ----------- Branding Template Select ----------- */}
<BrandingThemeFormGroup
name={'pdf_template_id'}
@@ -213,12 +222,31 @@ export default function InvoiceFloatingActions() {
name={'pdf_template_id'}
items={brandingTemplatesOptions}
input={({ activeItem, text, label, value }) => (
<BrandingThemeSelectButton text={text || 'Brand Theme'} minimal />
<BrandingThemeSelectButton text={text || 'Brand Theme'} />
)}
filterable={false}
popoverProps={{ minimal: true }}
/>
</BrandingThemeFormGroup>
<Popover
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.TOP_RIGHT}
modifiers={{
offset: { offset: '0, 4' },
}}
content={
<Menu>
<MenuItem
text={'Customize Templates'}
onClick={handleCustomizeBtnClick}
/>
</Menu>
}
>
<Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
</Popover>
</Group>
</PageForm.FooterActions>
);

34
packages/webapp/src/containers/Sales/PaymentsReceived/PaymentReceiveForm/PaymentReceiveFloatingActions.tsx
View File

@@ -11,8 +11,9 @@ import {
MenuItem,
} from '@blueprintjs/core';
import { useHistory } from 'react-router-dom';
import { FSelect, Group, Icon, FormattedMessage as T } from '@/components';
import { useFormikContext } from 'formik';
import { FSelect, Group, Icon, FormattedMessage as T } from '@/components';
import { useDrawerActions } from '@/hooks/state';
import { usePaymentReceiveFormContext } from './PaymentReceiveFormProvider';
import {
BrandingThemeFormGroup,
@@ -20,6 +21,8 @@ import {
} from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
import { usePaymentReceivedFormBrandingTemplatesOptions } from './utils';
import { PageForm } from '@/components/PageForm';
import { MoreIcon } from '@/icons/More';
import { DRAWERS } from '@/constants/drawers';
/**
* Payment receive floating actions bar.
@@ -34,6 +37,8 @@ export default function PaymentReceiveFormFloatingActions() {
// History context.
const history = useHistory();
const { openDrawer } = useDrawerActions();
// Handle submit button click.
const handleSubmitBtnClick = (event) => {
setSubmitPayload({ redirect: true });
@@ -57,6 +62,11 @@ export default function PaymentReceiveFormFloatingActions() {
submitForm();
};
// Handles the invoice customize button click.
const handleCustomizeBtnClick = () => {
openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'PaymentReceive' });
};
const brandingTemplatesOpts =
usePaymentReceivedFormBrandingTemplatesOptions();
@@ -115,7 +125,7 @@ export default function PaymentReceiveFormFloatingActions() {
/>
</Group>
<Group>
<Group spacing={0}>
{/* ----------- Branding Template Select ----------- */}
<BrandingThemeFormGroup
name={'pdf_template_id'}
@@ -134,6 +144,26 @@ export default function PaymentReceiveFormFloatingActions() {
popoverProps={{ minimal: true }}
/>
</BrandingThemeFormGroup>
{/* ----------- Setting Select ----------- */}
<Popover
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.TOP_RIGHT}
modifiers={{
offset: { offset: '0, 4' },
}}
content={
<Menu>
<MenuItem
text={'Customize Templates'}
onClick={handleCustomizeBtnClick}
/>
</Menu>
}
>
<Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
</Popover>
</Group>
</PageForm.FooterActions>
);

32
packages/webapp/src/containers/Sales/Receipts/ReceiptForm/ReceiptFormFloatingActions.tsx
View File

@@ -16,11 +16,14 @@ import { useHistory } from 'react-router-dom';
import { If, Icon } from '@/components';
import { useReceiptFormContext } from './ReceiptFormProvider';
import { useReceiptFormBrandingTemplatesOptions } from './utils';
import { useDrawerActions } from '@/hooks/state';
import {
BrandingThemeFormGroup,
BrandingThemeSelectButton,
} from '@/containers/BrandingTemplates/BrandingTemplatesSelectFields';
import { PageForm } from '@/components/PageForm';
import { MoreIcon } from '@/icons/More';
import { DRAWERS } from '@/constants/drawers';
/**
* Receipt floating actions bar.
@@ -29,6 +32,8 @@ export default function ReceiptFormFloatingActions() {
// History context.
const history = useHistory();
const { openDrawer } = useDrawerActions();
// Formik context.
const { resetForm, submitForm, isSubmitting } = useFormikContext();
@@ -80,6 +85,11 @@ export default function ReceiptFormFloatingActions() {
resetForm();
};
// Handles the invoice customize button click.
const handleCustomizeBtnClick = () => {
openDrawer(DRAWERS.BRANDING_TEMPLATES, { resource: 'SaleReceipt' });
};
const brandingTemplatesOptions = useReceiptFormBrandingTemplatesOptions();
return (
@@ -199,7 +209,7 @@ export default function ReceiptFormFloatingActions() {
/>
</Group>
<Group spacing={20}>
<Group spacing={0}>
{/* ----------- Branding Template Select ----------- */}
<BrandingThemeFormGroup
name={'pdf_template_id'}
@@ -218,6 +228,26 @@ export default function ReceiptFormFloatingActions() {
popoverProps={{ minimal: true }}
/>
</BrandingThemeFormGroup>
{/* ----------- Setting Select ----------- */}
<Popover
minimal={true}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.TOP_RIGHT}
modifiers={{
offset: { offset: '0, 4' },
}}
content={
<Menu>
<MenuItem
text={'Customize Templates'}
onClick={handleCustomizeBtnClick}
/>
</Menu>
}
>
<Button minimal icon={<MoreIcon height={'14px'} width={'14px'} />} />
</Popover>
</Group>
</PageForm.FooterActions>
);