neo.mjs 5.16.5 → 5.17.1

package/src/form/field/FileUpload.mjs

@@ -143,12 +143,19 @@ class FileUpload extends Base {
          */
         documentStatusMap : {
             SCANNING         : 'scanning',
+
+            // The server doing its own secondary upload to the final storage location may return this.
+            // We enter the same state as scanning. A spinner shows for the duration of this state
+            UPLOADING        : 'scanning',
+
             MALWARE_DETECTED : 'scan-failed',
             UN_DOWNLOADABLE  : 'not-downloadable',
             DOWNLOADABLE     : 'downloadable',
             DELETED          : 'deleted'
         },
 
+        document_ : null,
+
         /**
          * If this widget should reference an existing document, configure the widget with a documentId
          * so that it can initialize in the correct "uploaded" state.
@@ -178,7 +185,7 @@ class FileUpload extends Base {
          * The document status request URL must be configured in {@link #member-documentStatusUrl}
          * @member {String} uploadUrl
          */
-        uploadUrl_ : null,
+        uploadUrl : null,
 
         /**
          * The name of the JSON property in which the document id is returned in the upload response
@@ -239,7 +246,7 @@ class FileUpload extends Base {
          *
          * @member {String} documentStatusUrl
          */
-        documentStatusUrl : null,
+        documentStatusUrl_ : null,
 
         /**
          * The polling interval *in milliseconds* to wait between asking the server how the document scan
@@ -272,9 +279,7 @@ class FileUpload extends Base {
          *
          * @member {String} documentDeleteUrl
          */
-        documentDeleteUrl : null,
-
-        headers_ : {},
+        documentDeleteUrl_ : null,
 
         /**
          * @member {String} state_=null
@@ -289,7 +294,27 @@ class FileUpload extends Base {
         /**
          * @member {String|Number} maxSize
          */
-        maxSize_: null
+        maxSize_: null,
+
+        /**
+         * The error text to show below the widget
+         * @member {String} error
+         */
+        error_ : null,
+
+        // UI strings which can be overridden for other languages
+        documentText         : 'Document',
+        pleaseUseTheseTypes  : 'Please use these file types',
+        fileSizeMoreThan     : 'File size exceeds',
+        documentDeleteError  : 'Document delete service error',
+        isNoLongerAvailable  : 'is no longer available',
+        documentStatusError  : 'Document status service error',
+        uploadFailed         : 'Upload failed',
+        scanning             : 'Scanning',
+        malwareFoundInFile   : 'Malware found in file',
+        pleaseCheck          : 'Please check the file and try again',
+        successfullyUploaded : 'Successfully uploaded',
+        fileWasDeleted       : 'File was deleted'
     }
 
     /**
@@ -304,13 +329,13 @@ class FileUpload extends Base {
             { input : me.onInputValueChange, scope: me},
             { click : me.onActionButtonClick, delegate : '.neo-file-upload-action-button', scope : me}
         ]);
+    }
 
-        // If we are to reference an existing document, start by asking the server about its
-        // state. Widget state will proceed from there.
-        if (me.documentId) {
-            me.state = 'processing';
-            me.checkDocumentStatus();
-        }
+    /**
+     * @returns {Object}
+     */
+    getInputEl() {
+        return this.vdom.cn[3];
     }
 
     async clear() {
@@ -327,7 +352,7 @@ class FileUpload extends Base {
 
         // We have to wait for the DOM to have changed, and the input field to be visible
         await new Promise(resolve => setTimeout(resolve, 100));
-        me.focus(me.vdom.cn[3].id);
+        me.focus(me.getInputEl().id);
     }
 
     /**
@@ -346,10 +371,10 @@ class FileUpload extends Base {
                 type     = pointPos > -1 ? file.name.slice(pointPos + 1) : '';
 
             if (me.types && !types[type]) {
-                me.error = `Please use these file types: .${Object.keys(types).join(' .')}`;
+                me.error = `${me.pleaseUseTheseTypes}: .${Object.keys(types).join(' .')}`;
             }
             else if (file.size > me.maxSize) {
-                me.error = `File size exceeds ${String(me._maxSize).toUpperCase()}`;
+                me.error = `${me.fileSizeMoreThan} ${String(me._maxSize).toUpperCase()}`;
             }
             // If it passes the type and maxSize check, upload it
             else {
@@ -395,7 +420,6 @@ class FileUpload extends Base {
 
         /**
          * This event fires before every HTTP request is sent to the server via any of the configured URLs.
-         *
          * 
          * @event beforeRequest
          * @param {Object} event The event
@@ -480,6 +504,10 @@ class FileUpload extends Base {
                 me.abortUpload();
                 break;
 
+            // While processing we just have to wait until it's succeeded or failed..
+            case 'processing':
+                break;
+
             // If the upload or the scan failed, the document will not have been
             // saved, so we just go back to ready state
             case 'upload-failed':
@@ -488,13 +516,17 @@ class FileUpload extends Base {
                 me.state = 'ready';
                 break;
 
-            // During scanning and for stored documents, we need to tell the server the document
+            // For stored documents, we need to tell the server the document
             // is not required.
             case 'processing':
             case 'downloadable':
             case 'not-downloadable':
                 me.deleteDocument();
                 break;
+            case 'deleted':
+                me.clear();
+                me.state = 'ready';
+                break;
         }
     }
 
@@ -504,18 +536,15 @@ class FileUpload extends Base {
 
     async deleteDocument() {
         const
-            me      = this,
-            headers = { ...me.headers },
-            url     = me.createUrl(me.documentDeleteUrl, {
-                [me.documentIdParameter] : me.documentId
-            });
+            me          = this,
+            { headers } = me;
 
         me.fire('beforeRequest', {
             headers
         });
 
         // We ask the server to delete using our this.documentId
-        const statusResponse = await fetch(url, {
+        const statusResponse = await fetch(me.documentDeleteUrl, {
             headers
         });
 
@@ -525,24 +554,21 @@ class FileUpload extends Base {
             me.state = 'ready';
         }
         else {
-            me.error = `Document delete service error: ${statusResponse.statusText}`;
+            me.error = `${me.documentDeleteError}: ${statusResponse.statusText}`;
         }
     }
 
     async checkDocumentStatus() {
         const
-            me      = this,
-            headers = { ...me.headers },
-            url     = me.createUrl(me.documentStatusUrl, {
-                [me.documentIdParameter] : me.documentId
-            });
+            me          = this,
+            { headers } = me;
 
         if (me.state === 'processing') {
             me.fire('beforeRequest', {
                 headers
             });
 
-            const statusResponse = await fetch(url, {
+            const statusResponse = await fetch(me.documentStatusUrl, {
                 headers
             });
 
@@ -559,25 +585,33 @@ class FileUpload extends Base {
                         setTimeout(() => me.checkDocumentStatus(), me.statusScanInterval);
                         break;
                     case 'deleted':
-                        me.error = `Document ${me.documentId} is no longer available`;
+                        me.error = `${me.documentText} ${me.documentId} ${isNoLongerAvailable}`;
                         me.state = 'ready';
                         break;
                     default:
-                        const { fileName, size } = serverJson;
-
-                        if (fileName) {
-                            me.vdom.cn[1].cn[0].innerHTML = fileName;
-                            me.fileSize = me.formatSize(size);
-                        }
                         me.state = status;
                 }
             }
             else {
-                me.error = `Document status service error: ${statusResponse.statusText}`;
+                me.error = `${me.documentStatusError}: ${statusResponse.statusText || `Server error ${statusResponse.status}`}`;
+                me.state = 'deleted';
             }
         }
     }
 
+    afterSetDocument(document) {
+        if (document) {
+            const
+                me = this;
+
+            me.preExistingDocument = true;
+            me.documentId = document.id;
+            me.fileSize = me.formatSize(document.size);
+            me.vdom.cn[1].cn[0].innerHTML = document.fileName;
+            me.state = me.documentStatusMap[document.status];
+        }
+    }
+
     /**
      * Triggered after the state config got changed
      * @param {String} value
@@ -593,20 +627,23 @@ class FileUpload extends Base {
             anchor  = vdom.cn[1].cn[0],
             status  = vdom.cn[1].cn[1];
 
+        delete vdom.inert;
+
         switch (value) {
             case 'ready':
                 anchor.tag = 'div';
                 anchor.href = '';
                 break;
             case 'upload-failed':
-                status.innerHTML = `Upload failed... (${Math.round(me.progress * 100)}%)`;
+                status.innerHTML = `${me.uploadFailed}... (${Math.round(me.progress * 100)}%)`;
                 break;
             case 'processing':
-                status.innerHTML = `Scanning... (${me.formatSize(me.uploadSize)})`;
+                status.innerHTML = `${me.scanning}... (${me.formatSize(me.uploadSize)})`;
+                vdom.inert = true;
                 break;
             case 'scan-failed':
-                status.innerHTML = `Malware found in file. \u2022 ${me.fileSize}`;
-                me.error = 'Please check the file and try again';
+                status.innerHTML = `${me.malwareFoundInFile}. \u2022 ${me.fileSize}`;
+                me.error = me.pleaseCheck;
                 break;
             case 'downloadable':
                 anchor.tag = 'a';
@@ -616,9 +653,14 @@ class FileUpload extends Base {
                 status.innerHTML = me.fileSize;
                 break;
             case 'not-downloadable':
-                status.innerHTML = `Successfully uploaded \u2022 ${me.fileSize}`;
+                status.innerHTML = me.preExistingDocument ?
+                me.fileSize : `${me.successfullyUploaded} \u2022 ${me.fileSize}`;
+                break;
+            case 'deleted':
+                status.innerHTML = me.fileWasDeleted;
         }
 
+        me.validate();
         me.update();
 
         // Processing above may mutate cls
@@ -642,6 +684,34 @@ class FileUpload extends Base {
         return urlPattern;
     }
 
+    beforeGetHeaders(headers) {
+        return { ...(headers || {}) }
+    }
+
+    beforeGetDocumentStatusUrl(documentStatusUrl) {
+        const me = this;
+
+        return typeof documentStatusUrl === 'function'? documentStatusUrl.call(me, me) : me.createUrl(documentStatusUrl, {
+            [me.documentIdParameter] : me.documentId
+        });
+    }
+
+    beforeGetDocumentDeleteUrl(documentDeleteUrl) {
+        const me = this;
+
+        return typeof documentDeleteUrl === 'function'? documentDeleteUrl.call(me, me) : me.createUrl(documentDeleteUrl, {
+            [me.documentIdParameter] : me.documentId
+        });
+    }
+
+    beforeGetDownloadUrl(downloadUrl) {
+        const me = this;
+
+        return typeof downloadUrl === 'function'? downloadUrl.call(me, me) : me.createUrl(downloadUrl, {
+            [me.documentIdParameter] : me.documentId
+        });
+    }
+
     beforeGetMaxSize(maxSize) {
         // Not configured means no limit
         if (maxSize == null) {
@@ -659,21 +729,18 @@ class FileUpload extends Base {
         }
     }
 
-    set error(text) {
-        const { cls } = this;
-
+    afterSetError(text) {
         if (text) {
             this.vdom.cn[4].cn = [{
                 vtype : 'text',
                 html  : text
             }];
-            NeoArray.add(cls, 'neo-invalid');
         }
         else {
-            NeoArray.remove(cls, 'neo-invalid');
+            this.vdom.cn[4].cn = [];
         }
 
-        this.cls = cls;
+        this.validate();
         this.update();
     }
 
@@ -687,6 +754,29 @@ class FileUpload extends Base {
         }
         return 'n/a';
     }
+
+    /**
+     * @returns {Boolean}
+     */
+    validate() {
+        const
+            { cls } = this,
+            isValid = this.isValid();
+
+        NeoArray.toggle(cls, 'neo-invalid', !isValid);
+        this.cls = cls;
+
+        return isValid;
+    }
+
+    isValid() {
+        const me = this;
+
+        return !me.error &&  !(me.state === 'ready' && me.required) ||
+               (    (me.state === 'downloadable') ||
+                    (me.state === 'not-downloadable')
+               );
+    }
 }
 
 Neo.applyClassConfig(FileUpload);

package/src/selection/TreeAccordionModel.mjs

@@ -0,0 +1,293 @@
+import TreeModel from './TreeModel.mjs';
+import NeoArray  from "../util/Array.mjs";
+
+/**
+ * @class Neo.selection.TreeAccordionModel
+ * @extends Neo.selection.TreeModel
+ */
+class TreeAccordionModel extends TreeModel {
+    static config = {
+        /**
+         * @member {String} className='Neo.selection.TreeAccordionModel'
+         * @protected
+         */
+        className: 'Neo.selection.TreeAccordionModel',
+        /**
+         * @member {String} ntype='selection-treeaccordionmodel'
+         * @protected
+         */
+        ntype: 'selection-treeaccordionmodel'
+    }
+
+    /**
+     * Tries to find a child and returns it
+     * @param {Object} record
+     * @returns {Object|null}
+     */
+    checkForChild(record) {
+        const view     = this.view,
+              recordId = record[view.getKeyProperty()];
+        let childRecord = null;
+
+        for (const item of view.store.items) {
+            if (item.parentId === recordId) {
+                childRecord = item;
+                break;
+            }
+        }
+
+        return childRecord;
+    }
+
+    /**
+     * Return the parent record if any
+     * @param {Object} record
+     * @returns {Object|null}
+     */
+    checkForParent(record) {
+        if (record.parentId) {
+            const view = this.view;
+
+            return view.store.get(record.parentId);
+        } else {
+            return null;
+        }
+    }
+
+    /**
+     * Depending on {-1|1} step return
+     * -1: previous record OR parent record
+     *  1: next record or null
+     *
+     * @param {Object} record
+     * @param {Number} step
+     * @returns {Object|null}
+     */
+    checkForSibling(record, step) {
+        const view           = this.view,
+              store          = view.store,
+              parentRecordId = record.parentId,
+              recordId       = record[view.getKeyProperty()];
+        let hasFoundNext   = false,
+            nextItemRecord = null,
+            previousItemRecord;
+
+        for (let item of store.items) {
+            if (hasFoundNext && item.parentId === parentRecordId) {
+                nextItemRecord = item;
+                break;
+            }
+
+            if (!hasFoundNext && item.parentId === parentRecordId) {
+                if (!hasFoundNext && item[view.getKeyProperty()] === recordId) {
+                    if (step === -1) break;
+                    hasFoundNext = true;
+                } else {
+                    previousItemRecord = item;
+                }
+            }
+        }
+
+        return step === 1 ? nextItemRecord : (previousItemRecord || store.get(parentRecordId));
+    }
+
+    /**
+     * Find the next sibling of a parent item
+     * @param {Object} record
+     * @returns {Object|null}
+     */
+    checkNextParentSibling(record) {
+        const parent = this.view.store.get(record.parentId);
+        let parentSibling = this.checkForSibling(parent, 1);
+
+        if (!parentSibling && parent.parentId) this.checkNextParentSibling(parent);
+
+        return parentSibling;
+    }
+
+    /**
+     * Called by keys (List.mjs:register)
+     * Toggle collapse or if isLeaf select next item
+     * @param {Object} data
+     */
+    onKeyDownEnter(data) {
+        let me     = this,
+            view   = me.view,
+            itemId = me.getSelection()[0],
+            record = view.store.get(view.getItemRecordId(itemId));
+
+        if (record.isLeaf || record.collapsed) {
+            me.onKeyDownRight(data);
+        } else {
+            me.onKeyDownLeft(data);
+        }
+    }
+
+    /**
+     * Called by keys (List.mjs:register)
+     * Deselect all and fire event selectPostLastItem
+     * @param {Object} data
+     */
+    onKeyDownEscape(data) {
+        let me = this;
+
+        me.deselectAll();
+    }
+
+    /**
+     * Collapse folder or select previous
+     * @param {Object} data
+     */
+    onKeyDownLeft(data) {
+        const me     = this,
+              view   = me.view,
+              itemId = me.getSelection()[0];
+
+        if (!itemId) {
+            me.selectRoot();
+            return;
+        }
+
+        const record = view.store.get(view.getItemRecordId(itemId));
+
+        if (record.isLeaf || record.collapsed || !view.rootParentsAreCollapsible) {
+            me.onNavKey(data, -1);
+        } else {
+            me.toggleCollapsed(record, itemId, true);
+        }
+    }
+
+    /**
+     * Open folder or select next
+     * @param {Object} data
+     */
+    onKeyDownRight(data) {
+        const me     = this,
+              view   = me.view,
+              itemId = me.getSelection()[0];
+
+        if (!itemId) {
+            me.selectRoot();
+            return;
+        }
+
+        const record = view.store.get(view.getItemRecordId(itemId));
+
+        if (record.isLeaf || !record.collapsed) {
+            me.onNavKey(data, 1);
+        } else {
+            me.toggleCollapsed(record, itemId, false);
+        }
+    }
+
+    /**
+     * Handles 'up' and 'down' keys
+     * @param {Object} data
+     * @param {Number} step
+     */
+    onNavKey(data, step) {
+        const me   = this,
+              view = me.view,
+              item = me.getSelection()[0];
+        let newRecord;
+
+        if (item) {
+            const recordId = view.getItemRecordId(item);
+            let record = view.store.get(recordId);
+
+            if (step === 1) {
+                if (!record.isLeaf && !record.collapsed) {
+                    // find first child
+                    newRecord = this.checkForChild(record);
+                } else {
+                    // find next sibling
+                    newRecord = this.checkForSibling(record, step);
+                    // no ==> loop through parent next siblings until no parent
+                    if (!newRecord) {
+                        newRecord = this.checkNextParentSibling(record);
+                    }
+                }
+                // current item was the last item
+                if (!newRecord) {
+                    me.deselectAll();
+                    view.fire('selectPostLastItem');
+                }
+            } else if (step === -1) {
+                // check previous sibling
+                newRecord = this.checkForSibling(record, step);
+                // no ==> get parent
+                if (!newRecord) {
+                    newRecord = this.checkForParent(record);
+                }
+                // current item was the first item
+                if (!newRecord) {
+                    me.deselectAll();
+                    view.fire('selectPreFirstItem');
+                }
+            }
+        } else {
+            me.selectRoot();
+        }
+
+        if (newRecord) {
+            const itemId = view.getItemId(newRecord[me.view.getKeyProperty()]);
+
+            me.selectAndScrollIntoView(itemId);
+        }
+    }
+
+    /**
+     * Select an item and scroll the tree to show the item in the center
+     * @param {String} itemId
+     */
+    selectAndScrollIntoView(itemId) {
+        const me = this;
+
+        me.select(itemId);
+
+        Neo.main.DomAccess.scrollIntoView({
+            id   : itemId,
+            block: 'center'
+        });
+    }
+
+    /**
+     * Select the root item of the tree
+     */
+    selectRoot() {
+        const me    = this,
+              view  = me.view,
+              store = view.store;
+        let rootItemId;
+
+        for (let record of store.items) {
+            if (!record.parentId) {
+                rootItemId = view.getItemId(record[me.view.getKeyProperty()]);
+                break;
+            }
+        }
+
+        me.selectAndScrollIntoView(rootItemId);
+    }
+
+    /**
+     * Return the parent record if any
+     * @param {Object} record
+     * @param {String} itemId
+     * @param {Boolean} collapse
+     */
+    toggleCollapsed(record, itemId, collapse) {
+        const me    = this,
+              item  = me.view.getVdomChild(itemId),
+              clsFn = collapse ? 'remove' : 'add';
+
+        NeoArray[clsFn](item.cls, 'neo-folder-open');
+        me.view.update();
+
+        record.collapsed = collapse;
+    }
+}
+
+Neo.applyClassConfig(TreeAccordionModel);
+
+export default TreeAccordionModel;

package/src/selection/TreeModel.mjs

@@ -22,7 +22,7 @@ class TreeModel extends ListModel {
      * @param {Object} data
      */
     onKeyDownEnter(data) {
-        console.log('onKeyDownEnter', data)
+        Neo.log('onKeyDownEnter', data)
     }
 
     /**
@@ -30,10 +30,10 @@ class TreeModel extends ListModel {
      * @param {Number} step
      */
     onNavKey(data, step) {
-        console.log('onNavKey', data, step)
+        Neo.log('onNavKey', data, step)
     }
 }
 
 Neo.applyClassConfig(TreeModel);
 
-export default TreeModel;
+export default TreeModel;