diff --git a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/builders.tsx b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/builders.tsx index ead1e62..d03a5db 100644 --- a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/builders.tsx +++ b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/builders.tsx @@ -1,4 +1,4 @@ -import { usePaymentValue } from './hooks'; +import { usePaymentSum, usePaymentValue } from './hooks'; import { useRowStatus } from '@/stores/tables/payments/hooks'; import { observer } from 'mobx-react-lite'; import type { ComponentType } from 'react'; @@ -11,3 +11,12 @@ export function buildValueComponent(index: number, Component: ComponentType; }); } + +export function buildSumComponent(index: number, Component: ComponentType) { + return observer((props: T) => { + const [value, setValue] = usePaymentSum(index); + const status = useRowStatus(index); + + return ; + }); +} diff --git a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/config.tsx b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/config.tsx index 9664aa3..17b9761 100644 --- a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/config.tsx +++ b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/config.tsx @@ -1,14 +1,22 @@ /* eslint-disable canonical/sort-keys */ -import { buildValueComponent } from './builders'; +import { buildSumComponent, buildValueComponent } from './builders'; import type { ColumnsType } from 'antd/lib/table'; +import { parser } from 'tools/number'; import { InputNumber } from 'ui/elements'; +import { createFormatter } from 'ui/elements/InputNumber'; type Payment = { key: number; num: number; paymentRelation: number; + paymentSum: number; }; +const formatter = createFormatter({ + minimumFractionDigits: 2, + maximumFractionDigits: 2, +}); + export const columns: ColumnsType = [ { key: 'num', @@ -27,4 +35,14 @@ export const columns: ColumnsType = [ return ; }, }, + { + key: 'paymentSum', + dataIndex: 'paymentSum', + title: 'Сумма', + render: (_value, payment) => { + const Component = buildSumComponent(payment.num, InputNumber); + + return ; + }, + }, ]; diff --git a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/hooks.js b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/hooks.js index 0d7f308..e2f0e2c 100644 --- a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/hooks.js +++ b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/hooks.js @@ -1,4 +1,4 @@ -import { useRowValue } from '@/stores/tables/payments/hooks'; +import { useRowSum, useRowValue } from '@/stores/tables/payments/hooks'; import { useEffect, useState } from 'react'; import { useDebouncedCallback } from 'use-debounce'; @@ -20,3 +20,22 @@ export function usePaymentValue(index) { return [value, setValue]; } + +export function usePaymentSum(index) { + const [storeValue, setStoreValue] = useRowSum(index); + const [value, setValue] = useState(storeValue); + + const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, 350, { maxWait: 1000 }); + + useEffect(() => { + if (storeValue !== value) { + debouncedSetStoreValue(value); + } + }, [value]); + + useEffect(() => { + setValue(storeValue); + }, [storeValue]); + + return [value, setValue]; +} diff --git a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx index 863f52e..418fe6e 100644 --- a/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx +++ b/apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx @@ -3,9 +3,12 @@ import { useStore } from '@/stores/hooks'; import { min } from '@/styles/mq'; import { computed } from 'mobx'; import { observer } from 'mobx-react-lite'; +import { createContext, useContext, useMemo, useState } from 'react'; import styled from 'styled-components'; +import { Segmented } from 'ui/antd'; import { Alert, Table } from 'ui/elements'; import { Box, Flex } from 'ui/grid'; +import { useDebouncedCallback } from 'use-debounce'; const Grid = styled(Flex)` flex-direction: column; @@ -47,6 +50,8 @@ const Validation = observer(() => { return null; }); +export const ModeContext = createContext('paymentRelation'); + const SPLIT_NUMBER = 12; function TablePart({ num }) { @@ -55,16 +60,25 @@ function TablePart({ num }) { const values = payments.values.slice(num * SPLIT_NUMBER, num * SPLIT_NUMBER + SPLIT_NUMBER); - const dataSource = values.map((value, index) => ({ + const dataSource = values.map((_, index) => ({ key: index + num * SPLIT_NUMBER, num: index + num * SPLIT_NUMBER, - paymentRelation: value, })); - return ( - - - + const mode = useContext(ModeContext); + + return useMemo( + () => ( + +
['num', mode].includes(x.key))} + dataSource={dataSource} + pagination={false} + /> + + ), + [dataSource, mode] ); } @@ -84,11 +98,36 @@ const TablesGroup = observer(() => { return {tables}; }); +function Mode({ setMode }) { + const { $process } = useStore(); + + if (!$process.has('Unlimited')) { + return false; + } + + return ( + setMode(value)} + /> + ); +} + export default function TablePayments() { + const [mode, setMode] = useState('paymentRelation'); + const debouncedSetMode = useDebouncedCallback(setMode, 300); + return ( - - + + + + + ); } diff --git a/apps/web/stores/tables/payments/hooks.js b/apps/web/stores/tables/payments/hooks.js index 0e9c8f7..1186c9f 100644 --- a/apps/web/stores/tables/payments/hooks.js +++ b/apps/web/stores/tables/payments/hooks.js @@ -13,6 +13,18 @@ export function useRowValue(index) { return [storeValue, setStoreValue]; } +export function useRowSum(index) { + const { $tables } = useStore(); + + const storeValue = computed(() => $tables.payments.getSum(index)).get(); + + function setStoreValue(value) { + $tables.payments.setSum(index, value); + } + + return [storeValue, setStoreValue]; +} + export function useRowStatus(index) { const { $tables } = useStore(); diff --git a/apps/web/stores/tables/payments/index.ts b/apps/web/stores/tables/payments/index.ts index 5688f33..10ab103 100644 --- a/apps/web/stores/tables/payments/index.ts +++ b/apps/web/stores/tables/payments/index.ts @@ -10,6 +10,7 @@ export default class PaymentsTable { private root: RootStore; public validation: Validation; public values: IObservableArray; + public sums: IObservableArray; private statuses: IObservableArray; private overridedStatus: IObservableValue; @@ -23,6 +24,7 @@ export default class PaymentsTable { ); this.values = observable([]); + this.sums = observable([]); this.statuses = observable([]); this.overridedStatus = observable.box(undefined); @@ -36,6 +38,7 @@ export default class PaymentsTable { () => this.values.length, (length) => { this.statuses.length = length; + this.sums.length = length; } ); } @@ -52,6 +55,14 @@ export default class PaymentsTable { this.values[index] = value; }; + public getSum(index: number) { + return this.sums[index]; + } + + public setSum = (index: number, sum: number) => { + this.sums[index] = sum; + }; + public setValues = (values: number[]) => { this.values.replace(values); }; diff --git a/packages/ui/antd/index.ts b/packages/ui/antd/index.ts new file mode 100644 index 0000000..a13a8f1 --- /dev/null +++ b/packages/ui/antd/index.ts @@ -0,0 +1 @@ +export * from 'antd';