GH-18 BaseTable sorting order button in columns should edit collection's CollConstr from resultScope

.storybook/manager.js

@@ -0,0 +1,24 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  //isFullscreen: false,
+  //showNav: true,
+  showPanel: false,
+  //panelPosition: 'bottom',
+  //enableShortcuts: true,
+  //isToolshown: true,
+  //theme: undefined,
+  //selectedPanel: undefined,
+  //initialActive: 'sidebar',
+  //sidebar: {
+  //  showRoots: false,
+  //  collapsedRoots: ['other'],
+  //},
+  //toolbar: {
+  //  title: { hidden: false },
+  //  zoom: { hidden: false },
+  //  eject: { hidden: false },
+  //  copy: { hidden: false },
+  //  fullscreen: { hidden: false },
+  //},
+});

package.json

@@ -53,7 +53,7 @@
   },
   "peerDependencies": {
     "@agentlab/react-collapse-pane": ">=2.0.3",
-    "@agentlab/sparql-jsld-client": ">=5.0.7",
+    "@agentlab/sparql-jsld-client": ">=5.0.8",
     "@ant-design/icons": ">=4.7.0",
     "@rdfjs/data-model": ">=1.3.4",
     "@tinymce/tinymce-react": ">=3.13.0",
@@ -84,7 +84,7 @@
   },
   "dependencies": {
     "@agentlab/react-collapse-pane": "^2.0.3",
-    "@agentlab/sparql-jsld-client": "^5.0.7",
+    "@agentlab/sparql-jsld-client": "^5.0.8",
     "@ant-design/icons": "^4.7.0",
     "@tinymce/tinymce-react": "^3.13.0",
     "@types/react": "^17.0.38",
@@ -123,14 +123,14 @@
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.4.17",
-    "@storybook/addon-essentials": "^6.4.17",
-    "@storybook/addon-links": "^6.4.17",
-    "@storybook/addons": "^6.4.17",
-    "@storybook/node-logger": "^6.4.17",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/addons": "^6.4.18",
+    "@storybook/node-logger": "^6.4.18",
     "@storybook/preset-ant-design": "^0.0.2",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "^6.4.17",
+    "@storybook/react": "^6.4.18",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -158,12 +158,12 @@
     "husky": "^7.0.4",
     "jest": "^27.4.7",
     "jest-watch-typeahead": "^1.0.0",
-    "lint-staged": "^12.3.2",
+    "lint-staged": "^12.3.3",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.6",
     "prettier": "2.5.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.66.1",
+    "rollup": "^2.67.0",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",

src/BaseTable/BaseTable.tsx

@@ -1,5 +1,5 @@
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { useState } from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
 import BaseTable, { AutoResizer } from 'react-base-table';
 import { InitTinyMCE, ContextMenu, Overlay } from './components';
@@ -25,7 +25,17 @@ interface EditableTableProps<T> {
 
 export const EditableTable: React.FC<EditableTableProps<any>> = observer<any>(
   ({ viewKind, viewKindElement, viewDescr, viewDescrElement, schema, actions }) => {
-    const { sourceData, viewOptions, actionsMap, isLoading, handleEndReached, onSelect, setData } = useTableData({
+    const {
+      sourceData,
+      viewOptions,
+      actionsMap,
+      isLoading,
+      handleEndReached,
+      onSelect,
+      setData,
+      getCollConstrJs,
+      setCollConstrJs,
+    } = useTableData({
       viewKindElement,
       viewDescr,
       actions,
@@ -55,6 +65,48 @@ export const EditableTable: React.FC<EditableTableProps<any>> = observer<any>(
       order: viewOptions.order,
     });
 
+    const [sortState, setSortState] = useState<any>({});
+    const onSort = (property: string, sortDir: any) => {
+      const collCnstr: any = getCollConstrJs();
+      const orderBy = collCnstr.orderBy;
+      let newOrder = undefined;
+      //console.log({ property, sortDir, sortState, collCnstr });
+      if (sortState[property] === 'desc') {
+        //console.log('reset sorting order');
+        // reset sorting order
+        sortDir = null;
+        if (Array.isArray(orderBy)) {
+          const idx = orderBy.findIndex((e: any) => e.variable === property);
+          //console.log({ idx, orderBy });
+          if (idx !== -1) {
+            newOrder = [...orderBy];
+            newOrder.splice(idx, 1);
+            if (newOrder.length === 0) newOrder = undefined;
+          }
+        }
+      } else {
+        const isDesc = sortDir === 'desc' ? true : false;
+        const sortQuery = { variable: property, descending: isDesc };
+        //console.log('NO reset sorting order', sortQuery);
+        if (!orderBy) {
+          newOrder = [sortQuery];
+        } else if (Array.isArray(orderBy)) {
+          newOrder = [...orderBy];
+          const idx = orderBy.findIndex((e: any) => e.variable === property);
+          if (idx !== -1) {
+            newOrder[idx] = sortQuery;
+          } else {
+            newOrder.push(sortQuery);
+          }
+        }
+      }
+      const newCollConstr = { ...collCnstr, orderBy: newOrder };
+      setCollConstrJs(newCollConstr);
+      const newSortState = { ...sortState, [property]: sortDir };
+      //console.log({ newSortState, newCollConstr });
+      setSortState(newSortState);
+    };
+
     return (
       <React.Fragment>
         <InitTinyMCE />
@@ -83,6 +135,10 @@ export const EditableTable: React.FC<EditableTableProps<any>> = observer<any>(
                 onEndReached={handleEndReached}
                 rowEventHandlers={rowEventHandlers}
                 rowProps={rowProps}
+                sortState={sortState}
+                onColumnSort={(args) => {
+                  if (typeof args.key === 'string') onSort(args.key, args.order);
+                }}
               />
             </DraggableContainer>
           )}

src/BaseTable/hooks/useBaseTableData.tsx

@@ -44,6 +44,17 @@ export const useTableData = ({ viewKindElement: baseViewKindElement, viewDescr,
     [coll],
   );
 
+  const getCollConstrJs = useCallback(() => {
+    return getSnapshot(coll.collConstr);
+  }, [coll.collConstr]);
+
+  const setCollConstrJs = useCallback(
+    (collConstr: any) => {
+      applySnapshot(coll.collConstr, collConstr);
+    },
+    [coll.collConstr],
+  );
+
   return {
     sourceData: getSnapshot<any>(coll?.data) || [],
     isLoading: coll.isLoading,
@@ -52,5 +63,7 @@ export const useTableData = ({ viewKindElement: baseViewKindElement, viewDescr,
     handleEndReached,
     onSelect,
     setData,
+    getCollConstrJs,
+    setCollConstrJs,
   };
 };

src/data-controls/TabControlRenderer.tsx

@@ -80,7 +80,7 @@ export const AntdTabControlWithStore = observer<any>((props) => {
     }
   };
   return (
-    <div style={{ width: 'auto', display: 'flex', alignItems: 'center' }}>
+    <div style={{ width: 'auto', display: 'flex', alignItems: 'left' }}>
       {options.title ? (
         <Col>
           <h2 style={{ margin: '0 24px 0 0' }}>{options.title}</h2>

src/formatters/baseFormatters.tsx

@@ -77,7 +77,7 @@ export const artifactTitle = ({ value, type }: any): JSX.Element => {
   );
 };
 
-export const dateTime = ({ value }: any): JSX.Element => <span>{moment(value).subtract(10, 'days').calendar()}</span>;
+export const dateTime = ({ value }: any): JSX.Element => <span>{moment(value).calendar()}</span>;
 
 export const link = ({ value, link, options }: any): JSX.Element => {
   const label = options.label || value || link;

src/util/ContextToProps.tsx

@@ -17,6 +17,7 @@ import { observer } from 'mobx-react-lite';
 import { createLabelDescriptionFrom } from './label';
 import { LayoutComponent } from '../layouts/LayoutComponent';
 import { IViewKindElement, IViewKind } from '../models/uischema';
+import { values } from 'mobx';
 import { compareByIri, ControlComponent, processViewKindOverride, RenderProps } from '../Form';
 //import { FilterType } from '../complex/Query';
 import { validators } from '../validation';
@@ -405,123 +406,6 @@ export const withStoreToCollapseProps = (Component: React.FC<any>): React.FC<any
     );
   });
 
-const ComponentCachingSubRenderer = (props: any) => {
-  console.log('ChartSubRenderer');
-  const [allState, setAllState] = useState<any>(null);
-  useEffect(() => {
-    if (!props.dataIsLoading) {
-      //console.log('setDelayedConfig');
-      setAllState(props);
-    }
-  }, [props]);
-  return <props.comp {...allState} />;
-};
-
-export const withStoreToArrayProps = (Component: React.FC<any>): React.FC<any> =>
-  observer<any>(({ ...props }: any) => {
-    const { viewKind, viewDescr, schema, actions } = props;
-    const { store } = useContext(MstContext);
-    //if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) {
-    //  store.setSaveLogic(viewKindElement.resultsScope);
-    //}
-
-    const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride(
-      props,
-      store,
-    );
-    const options = useMemo(() => viewKindElement.options || {}, [viewKindElement]);
-    let targetIri = options?.target?.iri;
-    let targetData: any = null;
-    if (targetIri) {
-      if (viewDescr.collsConstrs) {
-        const extCollConstr = viewDescr.collsConstrs?.find((el: any) => compareByIri(el['@parent'], targetIri));
-        if (extCollConstr) {
-          targetIri = extCollConstr['@id'] || '';
-        }
-      }
-      const targetColl = store.getColl(targetIri);
-      targetData = targetColl?.data;
-    }
-    const coll = store.getColl(collIriOverride);
-    let dataIsLoading = false;
-
-    const actionsMap = useMemo(
-      () => mapViewKindPropsToActions({ actions, viewKindActionProps: options.selectActions, coll, root: store }),
-      [coll, actions, options],
-    );
-
-    let data: any[] = [];
-    if (!coll.isLoading) {
-      data = coll?.data;
-      if (!data) {
-        data = [];
-      } else {
-        data = getSnapshot(data as any);
-      }
-    } else {
-      dataIsLoading = true;
-    }
-
-    const loadMoreData = async () => {
-      //coll.loadMore();
-    };
-
-    const withConnections = options.connections;
-    const addDataToTarget = (data: any) => {
-      if (targetData) {
-        const snapData = getSnapshot(targetData) as any;
-        const newData = [...snapData, ...data];
-        applySnapshot(targetData, newData);
-      }
-    };
-    const onDeleteRows = (del: any) => {
-      if (data) {
-        const newData = data.filter((el: any) => del.filter((e: any) => e['@id'] === el['@id']).length === 0);
-        applySnapshot(coll?.data, newData);
-      }
-    };
-    const onSelect = (data: any) => {
-      if (data && isArray(data)) {
-        if (data.length === 1) {
-          store.setSelectedData(collIriOverride, data[0]);
-          withConnections && store.editConn(withConnections, data[0]);
-        } else {
-          store.setSelectedData(collIriOverride, null);
-          withConnections && store.editConn(withConnections, null);
-        }
-      }
-    };
-    const loadExpandedData = (subject: string) => {
-      //const newQuery = store.queries[viewKindElement.resultsScope];
-      //newQuery.shapes[0].conditions = { ...newQuery.shapes[0].conditions, parentBinding: subject };
-      return data; //store.getDataByQuery(newQuery);
-    };
-    return (
-      <ComponentCachingSubRenderer
-        dataIsLoading={dataIsLoading}
-        comp={Component}
-        viewKind={viewKind}
-        viewKindElement={viewKindElement}
-        viewDescr={viewDescr}
-        viewDescrElement={viewDescrElement}
-        addDataToTarget={addDataToTarget}
-        schema={schema}
-        loadExpandedData={loadExpandedData}
-        actionsMap={actionsMap}
-        sortDir={{} /*store.queries[scope].orderBy*/}
-        uri={id}
-        onDeleteRows={onDeleteRows}
-        loadMoreData={loadMoreData}
-        onSort={(property: string, sortDir: any) => {
-          /*store.onSort(scope, property, sortDir)*/
-        }}
-        data={data}
-        options={options}
-        onSelect={onSelect}
-      />
-    );
-  });
-
 export const withLayoutProps = (Component: React.FC<LayoutComponent>): React.FC<RenderProps> =>
   observer<RenderProps>(
     ({ viewKind, viewKindElement, viewDescr, viewDescrElement, schema, enabled, form, readOnly }) => {