Reports halfway through

Datatable now correctly handles the situation when user is not logged in and access protected resources

client/src/lib/form.js

@@ -9,6 +9,7 @@ import interoperableErrors from '../../../shared/interoperable-errors';
 import { withPageHelpers } from './page'
 import { withErrorHandling, withAsyncErrorHandler } from './error-handling';
 import { TreeTable, TreeSelectMode } from './tree';
+import { Table, TableSelectMode } from './table';
 
 import brace from 'brace';
 import AceEditor from 'react-ace';
@@ -62,6 +63,17 @@ class Form extends Component {
                 return;
             }
 
+            if (error instanceof interoperableErrors.NotFoundError) {
+                owner.disableForm();
+                owner.setFormStatusMessage('danger',
+                    <span>
+                        <strong>{t('Your updates cannot be saved.')}</strong>{' '}
+                        {t('It seems that someone else has deleted the entity in the meantime.')}
+                    </span>
+                );
+                return;
+            }
+
             throw error;
         }
     }
@@ -368,7 +380,46 @@ class TreeTableSelect extends Component {
         const htmlId = 'form_' + id;
 
         return wrapInput(id, htmlId, owner, props.label, props.help,
-            <TreeTable data={this.props.data} dataUrl={this.props.dataUrl} selectMode={TreeSelectMode.SINGLE} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
+            <TreeTable data={props.data} dataUrl={props.dataUrl} selectMode={TreeSelectMode.SINGLE} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
+        );
+    }
+}
+
+class TableSelect extends Component {
+    static propTypes = {
+        dataUrl: PropTypes.string,
+        data: PropTypes.array,
+        columns: PropTypes.array,
+        selectionKeyIndex: PropTypes.number,
+        selectMode: PropTypes.number,
+        withHeader: PropTypes.bool,
+
+        id: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired,
+        help: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
+    }
+
+    static defaultProps = {
+        selectMode: TableSelectMode.SINGLE
+    }
+
+    static contextTypes = {
+        formStateOwner: PropTypes.object.isRequired
+    }
+
+    async onSelectionChangedAsync(sel) {
+        const owner = this.context.formStateOwner;
+        owner.updateFormValue(this.props.id, sel);
+    }
+
+    render() {
+        const props = this.props;
+        const owner = this.context.formStateOwner;
+        const id = this.props.id;
+        const htmlId = 'form_' + id;
+
+        return wrapInput(id, htmlId, owner, props.label, props.help,
+            <Table data={props.data} dataUrl={props.dataUrl} columns={props.columns} selectMode={props.selectMode} withHeader={props.withHeader} selection={owner.getFormValue(id)} onSelectionChangedAsync={::this.onSelectionChangedAsync}/>
         );
     }
 }
@@ -727,6 +778,8 @@ export {
     ButtonRow,
     Button,
     TreeTableSelect,
+    TableSelect,
+    TableSelectMode,
     ACEEditor,
     FormSendMethod
 }

client/src/lib/page.css

@@ -1,8 +1,8 @@
-.mt-button-row > button {
+.mt-button-row > * {
     margin-right: 15px;
 }
 
-.mt-button-row > button:last-child {
+.mt-button-row > *:last-child {
     margin-right: 0px;
 }
 

client/src/lib/table.js

@@ -52,6 +52,7 @@ class Table extends Component {
         columns: PropTypes.array,
         selectMode: PropTypes.number,
         selection: PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.number]),
+        selectionKeyIndex: PropTypes.number,
         onSelectionChangedAsync: PropTypes.func,
         actionLinks: PropTypes.array,
         withHeader: PropTypes.bool
@@ -61,6 +62,10 @@ class Table extends Component {
         return this.props.selection !== nextProps.selection || this.props.data != nextProps.data || this.props.dataUrl != nextProps.dataUrl;
     }
 
+    static defaultProps = {
+        selectionKeyIndex: 0
+    }
+
     componentDidMount() {
 
         const columns = this.props.columns.slice();
@@ -108,10 +113,7 @@ class Table extends Component {
             dtOptions.data = this.props.data;
         } else {
             dtOptions.serverSide = true;
-            dtOptions.ajax = {
-                url: this.props.dataUrl,
-                type: 'POST'
-            };
+            dtOptions.ajax = ::this.fetchData;
         }
 
         this.table = jQuery(this.domTable).DataTable(dtOptions);
@@ -122,6 +124,13 @@ class Table extends Component {
         this.updateSelection();
     }
 
+    @withAsyncErrorHandler
+    async fetchData(data, callback) {
+        // This custom ajax fetch function allows us to properly handle the case when the user is not authenticated.
+        const response = await axios.post(this.props.dataUrl, data);
+        callback(response.data);
+    }
+
     componentDidUpdate() {
         if (this.props.data) {
             this.table.clear();
@@ -132,23 +141,35 @@ class Table extends Component {
     }
 
     updateSelection() {
-        /*
-        const tree = this.tree;
-        if (this.selectMode === TableSelectMode.MULTI) {
-            const selectSet = new Set(this.props.selection);
-
-            tree.enableUpdate(false);
-            tree.visit(node => node.setSelected(selectSet.has(node.key)));
-            tree.enableUpdate(true);
-
-        } else if (this.selectMode === TableSelectMode.SINGLE) {
-            this.tree.activateKey(this.props.selection);
+        let selArray = [];
+        if (this.selectMode === TableSelectMode.SINGLE) {
+            selArray = [this.props.selection];
+        } else if (this.selectMode === TableSelectMode.MULTI) {
+            selArray = this.props.selection;
         }
-        */
+
+        const selSet = new Set(selArray);
+
+        const selectionKeyIndex = this.props.selectionKeyIndex;
+
+        this.table.rows({ selected: true }).every(function() {
+            const key = this.data()[selectionKeyIndex];
+            if (!selSet.has(key)) {
+                this.deselect();
+            }
+
+            selSet.delete(key);
+        });
+
+        this.table.rows((idx, data, node) => selSet.has(data[selectionKeyIndex])).select();
     }
 
     async onSelect(event, data) {
-        const sel = this.table.rows( { selected: true } ).data();
+        let sel = this.table.rows( { selected: true } ).data().toArray().map(item => item[this.props.selectionKeyIndex]);
+
+        if (this.selectMode === TableSelectMode.SINGLE) {
+            sel = sel.length ? sel[0] : null;
+        }
 
         if (this.props.onSelectionChangedAsync) {
             await this.props.onSelectionChangedAsync(sel);