feat: Implement Profile Tab in DevIndex Controls (#9112)

Author: tobiu

apps/devindex/view/home/ControlsContainer.mjs

@@ -2,6 +2,7 @@ import * as selection from '../../../../src/selection/grid/_export.mjs';
 import CheckBox       from '../../../../src/form/field/CheckBox.mjs';
 import Container      from '../../../../src/container/Base.mjs';
 import Country        from '../../../../src/form/field/Country.mjs';
+import Profile        from './ProfileContainer.mjs';
 import Radio          from '../../../../src/form/field/Radio.mjs';
 import TabContainer   from '../../../../src/tab/Container.mjs';
 
@@ -28,6 +29,7 @@ class ControlsContainer extends Container {
             module        : TabContainer,
             cls           : ['devindex-controls-container-content'],
             dragResortable: true,
+            reference     : 'controls-tab-container',
 
             headerToolbar: {
                 sortZoneConfig: {
@@ -94,6 +96,10 @@ class ControlsContainer extends Container {
                     reference: 'count-rows-label',
                     style    : {marginTop: '1em'}
                 }]
+            }, {
+                module   : Profile,
+                header   : {text: 'Profile'},
+                reference: 'profile-container'
             }, {
                 module: Container,
                 header: {text: 'Selection'},

apps/devindex/view/home/MainContainerController.mjs

@@ -19,6 +19,12 @@ class MainContainerController extends Controller {
     onComponentConstructed() {
         let me = this;
 
+        // Setup Grid Listeners
+        let grid = me.getReference('grid');
+        if (grid) {
+            grid.on('select', me.onGridSelect, me);
+        }
+
         Neo.Main.getByPath({
             path    : 'location.search',
             windowId: me.windowId
@@ -38,6 +44,29 @@ class MainContainerController extends Controller {
             }
         })
     }
+
+    /**
+     * @param {Object} data
+     */
+    onGridSelect(data) {
+        let me           = this,
+            record       = data.record,
+            controls     = me.getReference('controls'),
+            profile      = controls?.down({reference: 'profile-container'}),
+            tabContainer = controls?.down({reference: 'controls-tab-container'});
+
+        if (record && profile) {
+            profile.updateRecord(record);
+
+            if (tabContainer) {
+                tabContainer.activeIndex = 1; // Switch to Profile Tab
+            }
+
+            if (controls && !controls.cls.includes('neo-expanded')) {
+                controls.addCls('neo-expanded');
+            }
+        }
+    }
 }
 
 export default Neo.setupClass(MainContainerController);

apps/devindex/view/home/ProfileContainer.mjs

@@ -0,0 +1,127 @@
+import Container from '../../../../src/container/Base.mjs';
+import Image     from '../../../../src/component/Image.mjs';
+import Label     from '../../../../src/component/Label.mjs';
+
+/**
+ * @class DevIndex.view.home.ProfileContainer
+ * @extends Neo.container.Base
+ */
+class ProfileContainer extends Container {
+    static config = {
+        /**
+         * @member {String} className='DevIndex.view.home.ProfileContainer'
+         * @protected
+         */
+        className: 'DevIndex.view.home.ProfileContainer',
+        /**
+         * @member {Object} layout={ntype:'vbox',align:'stretch'}
+         */
+        layout: {ntype: 'vbox', align: 'stretch'},
+        /**
+         * @member {Object[]} items
+         */
+        items: [{
+            ntype : 'component',
+            cls   : ['profile-header'],
+            height: 100,
+            style : {marginBottom: '1em'},
+            vdom  : {
+                cn: [{
+                    tag: 'div', cls: ['profile-avatar-wrapper'], cn: [
+                        {tag: 'img', cls: ['profile-avatar'], flag: 'avatar'}
+                    ]
+                }, {
+                    tag: 'div', cls: ['profile-names'], cn: [
+                        {tag: 'div', cls: ['profile-name'],  flag: 'name'},
+                        {tag: 'div', cls: ['profile-login'], flag: 'login'}
+                    ]
+                }]
+            }
+        }, {
+            module   : Label,
+            cls      : ['profile-bio'],
+            reference: 'profile-bio',
+            style    : {
+                fontStyle : 'italic',
+                lineHeight: '1.4',
+                whiteSpace: 'normal'
+            },
+            text: ''
+        }, {
+            ntype : 'container',
+            layout: 'vbox',
+            style : {marginTop: '1em'},
+            items : [{
+                ntype: 'label',
+                style: {fontWeight: 'bold'},
+                text : 'Details'
+            }, {
+                ntype    : 'label',
+                reference: 'profile-location',
+                text     : ''
+            }, {
+                ntype    : 'label',
+                reference: 'profile-company',
+                text     : ''
+            }]
+        }, {
+            ntype    : 'container',
+            reference: 'profile-orgs',
+            layout   : {ntype: 'hbox', wrap: true},
+            style    : {gap: '5px', marginTop: '1em'},
+            items    : []
+        }]
+    }
+
+    /**
+     * @param {Object} record
+     */
+    updateRecord(record) {
+        let me   = this,
+            vdom = me.items[0].vdom,
+            bio  = me.getReference('profile-bio'),
+            loc  = me.getReference('profile-location'),
+            comp = me.getReference('profile-company'),
+            orgs = me.getReference('profile-orgs'),
+            avatar, name, login;
+
+        avatar = me.getVdomChild(vdom, 'avatar');
+        name   = me.getVdomChild(vdom, 'name');
+        login  = me.getVdomChild(vdom, 'login');
+
+        avatar.src = record.avatar_url || '';
+        name.html  = record.name || '';
+        login.html = `@${record.login}`;
+
+        me.items[0].vdom = vdom;
+        me.items[0].update();
+
+        bio.text = record.bio || 'No bio available.';
+        loc.text = record.location ? `📍 ${record.location}` : '';
+        comp.text = record.company ? `🏢 ${record.company}` : '';
+
+        // Update Orgs
+        if (record.organizations && Array.isArray(record.organizations)) {
+            orgs.removeAll();
+            if (record.organizations.length > 0) {
+                orgs.add({ntype: 'label', text: 'Organizations:', width: '100%', style: {fontWeight: 'bold', marginBottom: '5px'}});
+                
+                record.organizations.forEach(org => {
+                    orgs.add({
+                        module: Image,
+                        alt   : org.login,
+                        height: 32,
+                        src   : org.avatar_url,
+                        title : org.login,
+                        width : 32,
+                        style : {borderRadius: '4px'}
+                    })
+                });
+            }
+        } else {
+            orgs.removeAll();
+        }
+    }
+}
+
+export default Neo.setupClass(ProfileContainer);