Add sorting attribute to matrix

JelteMX · JelteMX · commit 8788b4e91860 · 2020-04-03T15:24:13.000+02:00
diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ Show a reference table. Rows & Columns are Mendix objects, Entry objects are in
 - Selection of rows (single, multi)
 - Events: Click/Double click on Row, Column, Entry or empty field
 
-> This widget is about 580Kb uncompressed, so in your cloud deployment this widget should take about 150 Kb of network resources
+> This widget is about 600Kb uncompressed, so in your cloud deployment this widget should take about 160 Kb of network resources
 
 Tested:
 
diff --git a/assets/settings1.png b/assets/settings1.png
diff --git a/assets/settings3.png b/assets/settings3.png
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dynamictable",
   "widgetName": "DynamicTable",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Dynamic (Tree) Table for Mendix",
   "copyright": "Jelte Lagendijk 2019",
   "author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",
diff --git a/src/DynamicTable.tsx b/src/DynamicTable.tsx
@@ -69,12 +69,17 @@ class DynamicTable extends Component<DynamicTableContainerProps> {
 
         this.bindMethods();
 
+        const sortingTypeRows = props.rowSortingAttribute !== "" ? props.rowSortingOrder : "none";
+        const sortingTypeColumns = props.columnSortingAttribute !== "" ? props.columnSortingOrder : "none";
+
         const validationMessages = this.getRuntimeValidations(props);
 
         this.store = new TableStore({
             entriesLoader: this.entriesLoad,
             onSelectionChange: this.onSelectionChange,
-            validationMessages
+            validationMessages,
+            sortingTypeRows,
+            sortingTypeColumns
         });
     }
 
@@ -151,6 +156,7 @@ class DynamicTable extends Component<DynamicTableContainerProps> {
         this.setAxisObjects = this.setAxisObjects.bind(this);
         this.getTitleMethod = this.getTitleMethod.bind(this);
         this.getClassMethod = this.getClassMethod.bind(this);
+        this.getSortMethod = this.getSortMethod.bind(this);
         this.expanderFunc = this.expanderFunc.bind(this);
         this.onSelectionChange = this.onSelectionChange.bind(this);
         this.clickTypeHandler = this.clickTypeHandler.bind(this);
@@ -249,19 +255,23 @@ class DynamicTable extends Component<DynamicTableContainerProps> {
             rowTitleAttr,
             rowTitleNanoflow,
             rowClassAttr,
+            rowSortingAttribute,
             columnTitleType,
             columnTitleAttr,
             columnTitleNanoflow,
-            columnClassAttr
+            columnClassAttr,
+            columnSortingAttribute
         } = this.props;
         if (axis === "row") {
             this.store.setRows(objects, this.rowChildReference, this.hasChildAttr, parent, clean, {
                 classMethod: this.getClassMethod(rowClassAttr),
+                sortMethod: this.getSortMethod(rowSortingAttribute),
                 titleMethod: this.getTitleMethod(rowTitleType, rowTitleAttr, rowTitleNanoflow, "row")
             });
         } else {
             this.store.setColumns(objects, {
                 classMethod: this.getClassMethod(columnClassAttr),
+                sortMethod: this.getSortMethod(columnSortingAttribute),
                 titleMethod: this.getTitleMethod(columnTitleType, columnTitleAttr, columnTitleNanoflow, "column")
             });
         }
@@ -299,6 +309,15 @@ class DynamicTable extends Component<DynamicTableContainerProps> {
         };
     }
 
+    private getSortMethod(attr: string): (obj: mendix.lib.MxObject) => string | null | number {
+        return (obj: mendix.lib.MxObject): string | null | number => {
+            if (!obj || !attr) {
+                return null;
+            }
+            return obj.get(attr) as string | number;
+        };
+    }
+
     private async clickTypeHandler(
         _obj: mendix.lib.MxObject,
         _nodeType: NodeType = "unknown",
diff --git a/src/DynamicTable.xml b/src/DynamicTable.xml
@@ -40,6 +40,27 @@
                     <returnType type="Object" isList="true" entityProperty="rowEntity" />
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Sorting">
+                <property key="rowSortingAttribute" type="attribute" entityProperty="rowEntity" required="false">
+                    <caption>Row Sorting Attribute</caption>
+                    <description>This attribute can be used to sort the data. If not set, it will use the order of objects coming from the data source</description>
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="AutoNumber" />
+                        <attributeType name="Decimal" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                    </attributeTypes>
+                </property>
+                <property key="rowSortingOrder" type="enumeration" defaultValue="asc">
+                    <caption>Row Sorting Order</caption>
+                    <description>The sorting order only applies when using the sorting attribute</description>
+                    <enumerationValues>
+                         <enumerationValue key="asc">Ascending</enumerationValue>
+                         <enumerationValue key="desc">Descending</enumerationValue>
+                    </enumerationValues>
+                </property>
+            </propertyGroup>
             <propertyGroup caption="UI Title">
                 <property key="rowTitleType" type="enumeration" defaultValue="attribute">
                     <caption>Row Title Type</caption>
@@ -159,6 +180,27 @@
                     <returnType type="Object" isList="true" entityProperty="columnEntity" />
                 </property>
             </propertyGroup>
+            <propertyGroup caption="Sorting">
+                <property key="columnSortingAttribute" type="attribute" entityProperty="columnEntity" required="false">
+                    <caption>Column Sorting Attribute</caption>
+                    <description>This attribute can be used to sort the data. If not set, it will use the order of objects coming from the data source</description>
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="AutoNumber" />
+                        <attributeType name="Decimal" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                    </attributeTypes>
+                </property>
+                <property key="columnSortingOrder" type="enumeration" defaultValue="asc">
+                    <caption>Column Sorting Order</caption>
+                    <description>The sorting order only applies when using the sorting attribute</description>
+                    <enumerationValues>
+                         <enumerationValue key="asc">Ascending</enumerationValue>
+                         <enumerationValue key="desc">Descending</enumerationValue>
+                    </enumerationValues>
+                </property>
+            </propertyGroup>
             <propertyGroup caption="UI Title">
                 <property key="columnTitleType" type="enumeration" defaultValue="attribute">
                     <caption>Column Title Type</caption>
diff --git a/src/package.xml b/src/package.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="DynamicTable" version="1.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="DynamicTable" version="1.3.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="DynamicTable.xml"/>
         </widgetFiles>
diff --git a/src/store/objects/abstract/table-object.ts b/src/store/objects/abstract/table-object.ts
@@ -2,11 +2,13 @@ import { computed, flow, observable, action } from "mobx";
 import { ReactNode } from "react";
 
 export type TitleMethod = ((obj: mendix.lib.MxObject) => Promise<ReactNode | string>) | null;
+export type SortMethod = ((obj: mendix.lib.MxObject) => string | number | null) | null;
 export type ClassMethod = ((obj: mendix.lib.MxObject) => string) | null;
 
 export interface TableObjectGetOptions {
     titleMethod?: TitleMethod;
     classMethod?: ClassMethod;
+    sortMethod?: SortMethod;
 }
 
 export interface TableObjectOptions {
@@ -23,9 +25,11 @@ export class TableObject {
 
     public _titleMethod: TitleMethod;
     public _classMethod: ClassMethod;
+    public _sortMethod: SortMethod;
 
     @observable _title: string;
     @observable _class: string;
+    @observable _sortKey: null | string | number;
 
     fixTitle = flow(function*(this: TableObject) {
         if (this._titleMethod) {
@@ -36,18 +40,20 @@ export class TableObject {
 
     constructor(opts: TableObjectOptions) {
         const { mxObject, changeHandler, getMethods } = opts;
-        const { titleMethod, classMethod } = getMethods;
+        const { titleMethod, classMethod, sortMethod } = getMethods;
         this._obj = mxObject;
 
         this._title = "";
+        this._sortKey = null;
         this._class = "";
         this._titleMethod = titleMethod || null;
         this._classMethod = classMethod || null;
+        this._sortMethod = sortMethod || null;
         this._changeHandler = changeHandler || ((): void => {});
         this._subscriptions = [];
 
         if (!changeHandler) {
-            console.log("No changehandler for ", opts);
+            console.warn("No changehandler for ", opts);
         }
 
         if (titleMethod) {
@@ -58,6 +64,10 @@ export class TableObject {
             this.fixClass();
         }
 
+        if (sortMethod) {
+            this.fixSorting();
+        }
+
         if (this._obj) {
             this.resetSubscription();
         }
@@ -77,6 +87,13 @@ export class TableObject {
         }
     }
 
+    @action
+    fixSorting(): void {
+        if (this._sortMethod) {
+            this._sortKey = this._sortMethod(this._obj);
+        }
+    }
+
     @action
     resetSubscription(): void {
         const { subscribe } = window.mx.data;
@@ -95,6 +112,8 @@ export class TableObject {
                             }
                         } else {
                             this.fixTitle();
+                            this.fixSorting();
+                            this.fixClass();
                         }
                     });
                 }
@@ -113,6 +132,11 @@ export class TableObject {
         return this._class;
     }
 
+    @computed
+    get sortKey(): string | number | null {
+        return this._sortKey;
+    }
+
     @computed
     get guid(): string {
         return this._obj.getGuid();
diff --git a/src/store/store.ts b/src/store/store.ts
@@ -8,9 +8,12 @@ import { TableRecord } from "../util/table";
 import arrayToTree, { Tree } from "array-to-tree";
 import { getObject } from "@jeltemx/mendix-react-widget-utils";
 import { ValidationMessage } from "../util/validation";
+import sortBy from "lodash/sortBy";
 
 configure({ enforceActions: "observed" });
 
+export type SortingType = "none" | "asc" | "desc";
+
 export interface TableGuids {
     context: string | null;
     rows?: string[];
@@ -26,6 +29,8 @@ export interface TableStoreConstructorOptions {
     reloadEntriesOnColChange?: boolean;
     reloadEntriesOnRowChange?: boolean;
     validationMessages?: ValidationMessage[];
+    sortingTypeRows?: SortingType;
+    sortingTypeColumns?: SortingType;
 }
 
 export interface TableObjectOptions extends TableObjectGetOptions {}
@@ -54,12 +59,22 @@ export class TableStore {
 
     private reloadOnColChange = true;
     private reloadOnRowChange = true;
+    private sortingTypeRows: SortingType;
+    private sortingTypeColumns: SortingType;
 
     // Flow actions
 
     // Constructor
     constructor(opts: TableStoreConstructorOptions) {
-        const { contextObject, subscriptionHandler, onSelectionChange, entriesLoader, validationMessages } = opts;
+        const {
+            contextObject,
+            subscriptionHandler,
+            onSelectionChange,
+            entriesLoader,
+            validationMessages,
+            sortingTypeRows,
+            sortingTypeColumns
+        } = opts;
 
         this.isLoading = false;
         this.contextObject = contextObject || null;
@@ -72,6 +87,9 @@ export class TableStore {
         this.entriesLoader = entriesLoader || ((_guids: TableGuids): void => {});
         this.validationMessages = validationMessages || [];
 
+        this.sortingTypeRows = sortingTypeRows || "none";
+        this.sortingTypeColumns = sortingTypeColumns || "none";
+
         if (entriesLoader) {
             when(
                 () => {
@@ -354,13 +372,21 @@ export class TableStore {
 
     @computed
     get tableColumns(): Array<ColumnProps<TableRecord>> {
-        return this.columns.map(col => ({
+        const columns = this.columns.map(col => ({
             key: col.id,
             dataIndex: col.id,
             guid: col.guid,
             title: col.title,
+            sortKey: col._sortKey,
             className: col.className
         }));
+
+        if (this.sortingTypeColumns === "asc") {
+            return sortBy(columns, "sortKey");
+        } else if (this.sortingTypeColumns === "desc") {
+            return sortBy(columns, "sortKey").reverse();
+        }
+        return columns;
     }
 
     @computed
@@ -369,6 +395,7 @@ export class TableStore {
             const record: TableRecord = {
                 key: row.guid,
                 guid: row.guid,
+                sortKey: row.sortKey,
                 "row-title": row.title,
                 _classObj: {},
                 _className: row.className
@@ -399,7 +426,14 @@ export class TableStore {
             return record;
         });
 
-        const tree = arrayToTree(rows, arrayToTreeOpts);
+        const tree = arrayToTree(
+            this.sortingTypeRows === "none"
+                ? rows
+                : this.sortingTypeRows === "asc"
+                ? sortBy(rows, "sortKey")
+                : sortBy(rows, "sortKey").reverse(),
+            arrayToTreeOpts
+        );
         return tree.filter(treeEl => typeof treeEl._parent === "undefined" && !treeEl._parent);
     }
 
diff --git a/typings/DynamicTableProps.d.ts b/typings/DynamicTableProps.d.ts
@@ -12,6 +12,7 @@ export type SelectionMode = "none" | "single" | "multi";
 export type ClickType = "single" | "double";
 export type SimpleAction = "nothing" | "microflow" | "nanoflow";
 export type FullAction = "nothing" | "microflow" | "nanoflow" | "open";
+export type SortingType = "asc" | "desc";
 
 export namespace TableStyle {
     export type HeightUnitType = "percentageOfWidth" | "percentageOfParent" | "pixels";
@@ -52,6 +53,8 @@ interface DynamicTableRowProps {
     rowConstraint: string;
     rowGetDataMicroflow: string;
     rowGetDataNanoflow: Nanoflow;
+    rowSortingAttribute: string;
+    rowSortingOrder: SortingType;
     rowTitleType: TitleDataSourceType;
     rowTitleAttr: string;
     rowTitleNanoflow: Nanoflow;
@@ -74,6 +77,8 @@ interface DynamicTableColumnProps {
     columnConstraint: string;
     columnGetDataMicroflow: string;
     columnGetDataNanoflow: Nanoflow;
+    columnSortingAttribute: string;
+    columnSortingOrder: SortingType;
     columnTitleType: TitleDataSourceType;
     columnTitleAttr: string;
     columnTitleNanoflow: Nanoflow;

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "dynamictable",`
`3`	`3`	`"widgetName": "DynamicTable",`
`4`		`- "version": "1.2.1",`
	`4`	`+ "version": "1.3.0",`
`5`	`5`	`"description": "Dynamic (Tree) Table for Mendix",`
`6`	`6`	`"copyright": "Jelte Lagendijk 2019",`
`7`	`7`	`"author": "Jelte Lagendijk <jelte.lagendijk@mendix.com>",`