tables functional

src/client/Containers/Calculation/Sections/list.js

@@ -1364,7 +1364,7 @@ export default [
                     {
                       name: 'fruit',
                       title: 'Fruit',
-                      Component: Input,
+                      Component: Select,
                     },
                     {
                       name: 'number',

src/client/Elements/Table.jsx

@@ -48,6 +48,9 @@ const TableWrapper = styled(Box)`
 `;
 
 const Table = ({ name: tableName, columns, values }) => {
+  if (!values) {
+    values = [];
+  }
   return (
     <TableWrapper>
       <table className="table">

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 <ObservedTable {...props} {...tableData} />;
-  };
-  return TableWithStore;
+    return <Table {...props} {...tableData} />;
+  });
+  return () => TableWithStore;
 };
 
 export const withTableValue = Component => ({

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

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

src/client/hooks/useValue.js

@@ -52,7 +52,7 @@ export const useTableValue = ({ tableName, rowIndex, propName }) => {
   useEffect(() => {
     calculationStore.setTableRow(
       {
-        target: 'values',
+        targetName: 'values',
         tableName,
         rowIndex,
       },

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

src/client/tools/clone.js

@@ -1,7 +0,0 @@
-export function cloneObject(targetObj, replaceValue) {
-  let res = Object.assign({}, targetObj);
-  for (let prop in targetObj) {
-    res[prop] = replaceValue;
-  }
-  return res;
-}

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;

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

src/core/types/tables.ts

@@ -8,9 +8,9 @@ export type TTableValues<T> = {
 };
 
 export type IStoreTable = {
-  [tableName in TableNames]: {
-    values: TTableValues<any>[];
-    options?: TTableValues<any>[];
+  [tableName in TableNames]?: {
+    values?: TTableValues<any>[];
+    options?: TTableValues<any>;
     statuses?: TTableValues<Status>[];
     filters?: TTableValues<any>[];
   };