Merge pull request #16 from tobiu-acn/main

Admin.view.content.user.TableContainer: edit records #15
neomjs · Nov 17, 2022 · 9edcb64 · 9edcb64
2 parents 8e86737 + 5c6c578
commit 9edcb64
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 14 deletions.
diff --git a/apps/admin/view/content/user/ContainerController.mjs b/apps/admin/view/content/user/ContainerController.mjs
@@ -18,7 +18,37 @@ class ContainerController extends Component {
         className: 'Admin.view.content.user.ContainerController'
     }}
 
+    showDialog(record, animateTargetId) {
+        let me = this;
+
+        if (!me.dialog) {
+            import('./Dialog.mjs').then(module => {
+                me.dialog = Neo.create({
+                    module     : module.default,
+                    animateTargetId,
+                    appName    : me.component.appName,
+                    closeAction: 'hide',
+                    height     : 400,
+                    record,
+                    width      : 300,
+
+                    listeners: {
+                        submit: me.onUserFormSubmit.bind(me)
+                    }
+                });
+            });
+        } else {
+            me.dialog.set({
+                animateTargetId,
+                record
+            });
+
+            me.dialog.show();
+        }
+    }
+
     /**
+     * todo: use showDialog()
      * @param {Object} data
      */
     onCreateUserButtonClick(data) {
@@ -45,15 +75,42 @@ class ContainerController extends Component {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onEditIconClick(data) {
+        let me    = this,
+            table = me.getReference('user-table'),
+            item, record;
+
+        for (item of data.path) {
+            if (item.cls.includes('neo-table-row')) {
+                record = table.getView().getRecordByRowId(item.id);
+
+                console.log(record, data.path[1]);
+
+                me.showDialog(record, data.path[1].id);
+            }
+        }
+    }
+
     /**
      * @param {Object} data
      */
     onUserFormSubmit(data) {
-        this.getReference('user-table').store.add({
-            firstname: data.firstname,
-            id       : 'user_4', // todo: dynamic ids
-            lastname : data.lastname
-        });
+        let me     = this,
+            record = me.dialog?.record;
+
+        if (record) {
+            record.set(data.formValues);
+            me.dialog.hide();
+        } else {
+            me.getReference('user-table').store.add({
+                firstname: data.firstname,
+                id       : 'user_4', // todo: dynamic ids
+                lastname : data.lastname
+            })
+        }
     }
 }
 

diff --git a/apps/admin/view/content/user/Dialog.mjs b/apps/admin/view/content/user/Dialog.mjs
@@ -30,7 +30,23 @@ class Dialog extends Base {
         /**
          * @member {Object[]} items
          */
-        items: [{
+        items: null,
+        /**
+         * @member {Object} record_=null
+         */
+        record_: null
+    }}
+
+    /**
+     *
+     * @param config
+     */
+    construct(config) {
+        super.construct(config);
+
+        let me = this;
+
+        me.items = [{
             module      : FormContainer,
             flex        : 1,
             itemDefaults: {flex: 'none'},
@@ -40,11 +56,14 @@ class Dialog extends Base {
             items: [{
                 module   : TextField,
                 labelText: 'Firstname',
-                name     : 'firstname'
+                name     : 'firstname',
+                value    : me.record.firstname
             }, {
                 module   : TextField,
                 labelText: 'Lastname',
-                name     : 'lastname'
+                name     : 'lastname',
+                // todo: value    : '@config:record.lastname'
+                value    : me.record.lastname
             }]
         }, {
             module : Button,
@@ -53,7 +72,17 @@ class Dialog extends Base {
             style  : {marginTop: 'auto'},
             text   : 'Submit'
         }]
-    }}
+    }
+
+    /**
+     * Triggered after the record config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetRecord(value, oldValue) {
+        oldValue && this.down({reference: 'user-form'}).setValues(value)
+    }
 }
 
 Neo.applyClassConfig(Dialog);

diff --git a/apps/admin/view/content/user/DialogController.mjs b/apps/admin/view/content/user/DialogController.mjs
@@ -22,8 +22,8 @@ class DialogController extends Component {
             form   = me.getReference('user-form');
 
         dialog.fire('submit', {
-            ...form.getValues(),
-            scope: dialog
+            formValues: form.getValues(),
+            scope     : dialog
         });
     }
 }

diff --git a/apps/admin/view/content/user/TableContainer.mjs b/apps/admin/view/content/user/TableContainer.mjs
@@ -2,16 +2,16 @@ import Container from '../../../../../node_modules/neo.mjs/src/table/Container.m
 import UserStore from '../../../store/Users.mjs'
 
 /**
- * @class Admin.view.content.TableContainer
+ * @class Admin.view.content.user.TableContainer
  * @extends Neo.table.Container
  */
 class TableContainer extends Container {
     static getConfig() {return {
         /**
-         * @member {String} className='Admin.view.content.UserTableContainer'
+         * @member {String} className='Admin.view.content.user.TableContainer'
          * @protected
          */
-        className: 'Admin.view.content.UserTableContainer',
+        className: 'Admin.view.content.user.TableContainer',
         /**
          * @member {String[]} cls=['admin-user-table','neo-table-container']
          */
@@ -28,12 +28,32 @@ class TableContainer extends Container {
         }, {
             dataField: 'lastname',
             text     : 'Lastname'
+        }, {
+            text: '',
+            renderer: data => {
+                return '<i class="neo-edit fa fa-pencil"></i>';
+            }
         }],
         /**
          * @member {Neo.data.Store} store=UserStore
          */
         store: UserStore
     }}
+
+    construct(config) {
+        super.construct(config);
+
+        let me    = this,
+            scope = me.getController();
+
+        // todo: string based listener does not work
+
+        me.addDomListeners({
+            click   : scope.onEditIconClick,
+            delegate: '.neo-edit',
+            scope
+        })
+    }
 }
 
 Neo.applyClassConfig(TableContainer);