add addon to selectProduct

This commit is contained in:
vchikalkin 2024-01-19 14:42:43 +03:00
parent ddfc4053eb
commit 502dd919f5
3 changed files with 72 additions and 1 deletions

View File

@ -5,7 +5,6 @@ export const title = 'Лизинг';
export const rows: FormTabRows = [
[['selectProduct'], { gridTemplateColumns: '1fr' }],
[['cbxPartialVAT', 'cbxFloatingRate']],
[['tbxLeaseObjectPrice', 'tbxVATInLeaseObjectPrice', 'tbxLeaseObjectPriceWthtVAT']],
[['selectSupplierCurrency', 'tbxSupplierDiscountRub', 'tbxSupplierDiscountPerc']],
[['tbxFirstPaymentPerc', 'tbxFirstPaymentRub']],

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

View File

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