add addon to selectProduct
This commit is contained in:
parent
ddfc4053eb
commit
502dd919f5
@ -5,7 +5,6 @@ export const title = 'Лизинг';
|
||||
|
||||
export const rows: FormTabRows = [
|
||||
[['selectProduct'], { gridTemplateColumns: '1fr' }],
|
||||
[['cbxPartialVAT', 'cbxFloatingRate']],
|
||||
[['tbxLeaseObjectPrice', 'tbxVATInLeaseObjectPrice', 'tbxLeaseObjectPriceWthtVAT']],
|
||||
[['selectSupplierCurrency', 'tbxSupplierDiscountRub', 'tbxSupplierDiscountPerc']],
|
||||
[['tbxFirstPaymentPerc', 'tbxFirstPaymentRub']],
|
||||
|
||||
48
apps/web/Components/Calculation/addons/product-addon.tsx
Normal file
48
apps/web/Components/Calculation/addons/product-addon.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
/* eslint-disable react/forbid-component-props */
|
||||
import titles from '../config/elements-titles';
|
||||
import { useStore } from '@/stores/hooks';
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import { pick } from 'radash';
|
||||
import { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Tag } from 'ui/elements';
|
||||
|
||||
const Container = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5px;
|
||||
`;
|
||||
|
||||
const tagsData = pick(titles, ['cbxPartialVAT', 'cbxFloatingRate']);
|
||||
|
||||
const { CheckableTag } = Tag;
|
||||
|
||||
export const ProductAddon = observer(() => {
|
||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||
const { $calculation } = useStore();
|
||||
|
||||
function handleChange(elementName: keyof typeof tagsData, checked: boolean) {
|
||||
if (checked) {
|
||||
setSelectedTags([...selectedTags, elementName]);
|
||||
$calculation.element(elementName).setValue(true);
|
||||
} else {
|
||||
setSelectedTags(selectedTags.filter((x) => x !== elementName));
|
||||
$calculation.element(elementName).setValue(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Container>
|
||||
{(Object.keys(tagsData) as Array<keyof typeof tagsData>).map((elementName) => (
|
||||
<CheckableTag
|
||||
checked={selectedTags.includes(elementName)}
|
||||
onChange={(checked) => handleChange(elementName, checked)}
|
||||
key={elementName}
|
||||
style={{ marginInlineEnd: 0 }}
|
||||
>
|
||||
{tagsData[elementName]}
|
||||
</CheckableTag>
|
||||
))}
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
@ -1,3 +1,4 @@
|
||||
import { ProductAddon } from '../../addons/product-addon';
|
||||
import { buildLink } from '../../builders';
|
||||
import components from '../elements-components';
|
||||
import elementsProps from '../elements-props';
|
||||
@ -221,6 +222,29 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
|
||||
},
|
||||
},
|
||||
|
||||
selectProduct: {
|
||||
render: () => {
|
||||
const elementName = 'selectProduct';
|
||||
const title = titles.selectProduct;
|
||||
const valueName = map.selectProduct;
|
||||
const Component = components.selectProduct;
|
||||
const props = elementsProps.selectProduct;
|
||||
const { builder } = types.selectProduct();
|
||||
|
||||
const Element = builder(Component, {
|
||||
elementName,
|
||||
valueName,
|
||||
});
|
||||
|
||||
return (
|
||||
<Container key={elementName}>
|
||||
<Head addon={<ProductAddon />} htmlFor={elementName} title={title} />
|
||||
<Element {...props} id={elementName} />
|
||||
</Container>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
selectQuote: {
|
||||
render: () => {
|
||||
const elementName = 'selectQuote';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user