diff --git a/src/client/Containers/Calculation/Sections/list.js b/src/client/Containers/Calculation/Sections/list.js index 83342f5..c82a906 100644 --- a/src/client/Containers/Calculation/Sections/list.js +++ b/src/client/Containers/Calculation/Sections/list.js @@ -1364,7 +1364,7 @@ export default [ { name: 'fruit', title: 'Fruit', - Component: Input, + Component: Select, }, { name: 'number', diff --git a/src/client/Elements/Table.jsx b/src/client/Elements/Table.jsx index c3e6262..ec9a5b5 100644 --- a/src/client/Elements/Table.jsx +++ b/src/client/Elements/Table.jsx @@ -48,6 +48,9 @@ const TableWrapper = styled(Box)` `; const Table = ({ name: tableName, columns, values }) => { + if (!values) { + values = []; + } return ( diff --git a/src/client/hocs/withStore.js b/src/client/hocs/withStore.js index e697e26..90fbc6c 100644 --- a/src/client/hocs/withStore.js +++ b/src/client/hocs/withStore.js @@ -2,7 +2,7 @@ import { useOptions } from 'client/hooks/useOptions'; import { useStatus, useTableStatus } from 'client/hooks/useStatus'; import { useStoreValue, useTableValue } from 'client/hooks/useValue'; import { useValidation } from 'client/hooks/useValidation'; -import { observer } from 'mobx-react'; +import { observer, useObserver } from 'mobx-react'; import React from 'react'; import { useStores } from 'client/hooks/useStores'; import { useTableOptions } from 'client/hooks/useOptions'; @@ -48,13 +48,12 @@ export const withStoreValue = Component => ({ export const withTableData = Table => props => { const { name: tableName } = props; - const ObservedTable = observer(Table); - const TableWithStore = () => { + const TableWithStore = useObserver(() => { const { calculationStore } = useStores(); const tableData = calculationStore.tables[tableName]; - return ; - }; - return TableWithStore; + return
; + }); + return () => TableWithStore; }; export const withTableValue = Component => ({ diff --git a/src/client/hooks/useOptions.js b/src/client/hooks/useOptions.js index da01fe7..26cceca 100644 --- a/src/client/hooks/useOptions.js +++ b/src/client/hooks/useOptions.js @@ -15,13 +15,15 @@ export const useTableOptions = ({ tableName, rowIndex, propName }) => { const { calculationStore } = useStores(); const options = calculationStore.tables[tableName].options && - calculationStore.tables[tableName].options[rowIndex] - ? calculationStore.tables[tableName].options[rowIndex][propName] - : undefined; + calculationStore.tables[tableName].options && + calculationStore.tables[tableName].options[propName] + ? calculationStore.tables[tableName].options[propName] + : []; const filter = - calculationStore.tables[tableName].filter && - calculationStore.tables[tableName].filter[rowIndex] - ? calculationStore.tables[tableName].filter[rowIndex][propName] - : undefined; + calculationStore.tables[tableName].filters && + calculationStore.tables[tableName].filters[rowIndex] && + calculationStore.tables[tableName].filters[rowIndex][propName] + ? calculationStore.tables[tableName].filters[rowIndex][propName] + : []; return { options, filter }; }; diff --git a/src/client/hooks/useStatus.js b/src/client/hooks/useStatus.js index f97c4ca..3f1ec6b 100644 --- a/src/client/hooks/useStatus.js +++ b/src/client/hooks/useStatus.js @@ -10,9 +10,9 @@ export const useStatus = elementName => { export const useTableStatus = ({ tableName, rowIndex, propName }) => { const { calculationStore } = useStores(); const status = - calculationStore.tables[tableName].status && - calculationStore.tables[tableName].status[rowIndex] - ? calculationStore.tables[tableName].status[rowIndex][propName] + calculationStore.tables[tableName].statuses && + calculationStore.tables[tableName].statuses[rowIndex] + ? calculationStore.tables[tableName].statuses[rowIndex][propName] : undefined; return { status }; }; diff --git a/src/client/hooks/useValue.js b/src/client/hooks/useValue.js index 69ff6b3..289f751 100644 --- a/src/client/hooks/useValue.js +++ b/src/client/hooks/useValue.js @@ -52,7 +52,7 @@ export const useTableValue = ({ tableName, rowIndex, propName }) => { useEffect(() => { calculationStore.setTableRow( { - target: 'values', + targetName: 'values', tableName, rowIndex, }, diff --git a/src/client/stores/CalculationStore/Data/tables.js b/src/client/stores/CalculationStore/Data/tables.js index 4a543e8..41f932e 100644 --- a/src/client/stores/CalculationStore/Data/tables.js +++ b/src/client/stores/CalculationStore/Data/tables.js @@ -1,4 +1,3 @@ -import { cloneObject } from 'client/tools/clone'; import initialTables from 'core/config/initialTables'; const tablesData = { @@ -6,27 +5,50 @@ const tablesData = { }; const tablesActions = { - setTableRow({ tableName, rowIndex, target }, values) { - if (this.tables[tableName][target][rowIndex]) { - if (values && Object.keys(values).length > 0) { - for (let prop in values) { - this.tables[tableName][target][rowIndex][prop] = values[prop]; - } + setTableRow({ tableName, rowIndex }, { values, statuses, filters }) { + if (!this.tables[tableName]) { + throw new Error(`Table ${tableName} doesn't exist in store`); + } + if (rowIndex === undefined) { + rowIndex = this.tables[tableName].values.length; + } + + const applyParams = (targetName, values) => { + if (!this.tables[tableName][targetName]) { + this.tables[tableName][targetName] = []; } + this.tables[tableName][targetName][rowIndex] = Object.assign( + this.tables[tableName][targetName][rowIndex] ?? {}, + values, + ); + }; + + if (values && Object.keys(values).length > 0) { + applyParams('values', values); + } + if (statuses && Object.keys(statuses).length > 0) { + applyParams('statuses', statuses); + } + if (values && Object.keys(filters).length > 0) { + applyParams('filters', filters); } }, - insertTableRow({ tableName, rowIndex, row }) { - const targetTable = this.tables[tableName]; - if (!rowIndex) { - rowIndex = targetTable.values.length; + setRowOptions({ tableName }, options) { + if (!this.tables[tableName]) { + throw new Error(`Table ${tableName} doesn't exist in store`); } - targetTable.values.splice(rowIndex, 0, row); + if (!this.tables[tableName].options) { + this.tables[tableName].options = []; + } + this.tables[tableName].options = options; + }, - const params = cloneObject(row, undefined); - if (targetTable.options) targetTable.options.splice(rowIndex, 0, params); - if (targetTable.filters) targetTable.filters.splice(rowIndex, 0, params); - if (targetTable.statuses) targetTable.statuses.splice(rowIndex, 0, params); + setTable({ tableName }, values) { + if (!this.tables[tableName]) { + this.tables[tableName] = {}; + } + this.tables[tableName].values = values; }, deleteTableRow(tableName, rowIndex) { @@ -36,6 +58,10 @@ const tablesActions = { targetTable.filters.splice(rowIndex, 1); targetTable.statuses.splice(rowIndex, 1); }, + + cleanTable(tableName) { + this.tables[tableName] = {}; + }, }; export { tablesData, tablesActions }; diff --git a/src/client/tools/clone.js b/src/client/tools/clone.js deleted file mode 100644 index 5dee719..0000000 --- a/src/client/tools/clone.js +++ /dev/null @@ -1,7 +0,0 @@ -export function cloneObject(targetObj, replaceValue) { - let res = Object.assign({}, targetObj); - for (let prop in targetObj) { - res[prop] = replaceValue; - } - return res; -} diff --git a/src/core/config/initialTables.ts b/src/core/config/initialTables.ts index fb69148..6ef14f5 100644 --- a/src/core/config/initialTables.ts +++ b/src/core/config/initialTables.ts @@ -1,27 +1,20 @@ import { IStoreTable } from './../types/tables'; const initialTables: IStoreTable = { - fruitTable: { - values: [ - { - fruit: 'apple', - number: '5', - }, - { - fruit: 'orange', - number: '10', - }, - ], - statuses: [ - { - fruit: undefined, - number: undefined, - }, - { - fruit: undefined, - number: undefined, - }, - ], - }, + // fruitTable: { + // values: [ + // { + // fruit: 'apple', + // number: '5', + // }, + // { + // fruit: 'orange', + // number: '10', + // }, + // ], + // options: { + // fruit: [{ name: 'Apple', value: 'apple' }], + // }, + // }, }; export default initialTables; diff --git a/src/core/types/stores.ts b/src/core/types/stores.ts index 6874d35..91853db 100644 --- a/src/core/types/stores.ts +++ b/src/core/types/stores.ts @@ -26,21 +26,26 @@ export interface ICalculationStore { tables: IStoreTable; setTableRow: ( + { tableName, rowIndex }: { tableName: TableNames; rowIndex?: number }, { - tableName, - rowIndex, - target, - }: { tableName: TableNames; rowIndex: number; target: TableTargets }, - values: { [prop in TableValuesNames]?: any }, + values, + statuses, + filters, + }: { + values?: { [prop in TableValuesNames]?: any }; + statuses?: { [prop in TableValuesNames]?: any }; + filters?: { [prop in TableValuesNames]?: any }; + }, ) => void; - insertTableRow: ({ - tableName: TableNames, - rowIndex, - row, - }: { - tableName: TableNames; - rowIndex?: number; - row: { [prop in TableValuesNames]?: any }; - }) => void; + setRowOptions: ( + { tableName }: { tableName: TableNames }, + options: { [prop in TableValuesNames]?: any }, + ) => void; + setTable: ( + { tableName }: { tableName: TableNames }, + values: { [prop in TableValuesNames]?: any }[], + ) => void; + deleteTableRow: (tableName: string, rowIndex: number) => void; + cleanTable: (tableName: TableNames) => void; } diff --git a/src/core/types/tables.ts b/src/core/types/tables.ts index ddc96cd..0d92e9f 100644 --- a/src/core/types/tables.ts +++ b/src/core/types/tables.ts @@ -8,9 +8,9 @@ export type TTableValues = { }; export type IStoreTable = { - [tableName in TableNames]: { - values: TTableValues[]; - options?: TTableValues[]; + [tableName in TableNames]?: { + values?: TTableValues[]; + options?: TTableValues; statuses?: TTableValues[]; filters?: TTableValues[]; };