Phase 2: Email List View #7052

Author: tobiu

apps/email/EPIC_PLAN.md

@@ -25,28 +25,55 @@ This document outlines the plan for refactoring the `apps/email` application int
 
 ---
 
-## Phase 2: Email List View
+## Phase 2: Email List View (Completed)
 
 **Goal:** Implement the email list pane using a Neo.mjs grid to display a list of emails.
 
-**Potential Tools to Explore:**
+**Sub-Tasks:**
 
--   `src/grid/Base.mjs`: For a powerful, feature-rich data grid.
--   `src/list/Base.mjs`: For a simpler list view if a full grid is not needed initially.
--   `src/data/Store.mjs`: To manage the email data.
--   `src/collection/Base.mjs`: For sorting and filtering capabilities within the store.
+1.  **Create Mock Data:**
+    -   Populated the `apps/email/store/Emails.mjs` with hardcoded sample email data.
+2.  **Integrate Grid:**
+    -   Replaced the "Email List" placeholder in `MainView.mjs` with a `Neo.grid.Container`.
+    -   Configured the grid to use the `Emails` store and defined the columns.
+3.  **Styling & Layout:**
+    -   Wrapped the grid in a styled `div` to ensure correct flexbox layout.
+    -   Used the `wrapperStyle` config on the grid to control its internal dimensions, which is necessary for the grid's layout engine.
+4.  **Enable Interoperability:**
+    -   Enhanced `functional.component.Base` to propagate the parent's `windowId` to all child components. This was a critical fix to ensure the classic grid component could function correctly when rendered inside our functional `MainView`.
+
+**Learnings & Decisions:**
+
+-   **Complex Component Integration:** Integrating a complex classic component like `grid.Container` into a functional component requires more than just placing it in the VDOM. We must provide layout-critical styles (like `height` and `width`) via the component's specific config (`wrapperStyle`) for it to render correctly.
+-   **`windowId` is Crucial:** The `windowId` must be manually propagated from functional parents to classic children. This is a fundamental requirement for interoperability and ensuring that events, theming, and other window-specific functionalities work correctly. This led to enhancing `functional.component.Base` and creating a dedicated ticket for it.
+
+**Next Steps:**
+-   Implement selection handling on the grid to prepare for the detail view.
 
-**Sub-Tasks:**
-*(To be defined)*
 
 ---
 
-## Phase 3: Email Detail View
+## Phase 3: Email Detail View (Completed)
 
-**Goal:** Display the content of a selected email.
+**Goal:** Display the content of a selected email from the grid.
 
 **Sub-Tasks:**
-*(To be defined)*
+
+1.  **Grid Selection:**
+    -   Configured a `selection.RowModel` on the grid's `bodyConfig`.
+    -   Set `singleSelect: true` to allow only one row to be selected.
+2.  **State Management:**
+    -   Used the `useConfig()` hook in `MainView` to create a `selectedEmail` state variable.
+3.  **Event Handling:**
+    -   Added a `selectionChange` listener to the selection model.
+    -   The listener updates the `selectedEmail` state with the selected record.
+4.  **Detail View:**
+    -   The "Email Details" pane now conditionally renders the `title`, `sender`, and `content` of the `selectedEmail`.
+    -   If no email is selected, it displays a placeholder message.
+
+**Next Steps:**
+-   Implement "Compose" functionality.
+
 
 ---
 

apps/email/neo-config.json

@@ -4,6 +4,6 @@
     "environment": "development",
     "mainPath": "./Main.mjs",
     "themes": [
-        "neo-theme-light"
+        "neo-theme-dark"
     ]
-}
+}

apps/email/store/Emails.mjs

@@ -15,7 +15,17 @@ class Emails extends Store {
         /**
          * @member {Neo.data.Model} model=Email
          */
-        model: EmailModel
+        model: EmailModel,
+        /**
+         * @member {Object[]} data
+         */
+        data: [
+            {id: 1, sender: 'John Doe', title: 'Hello World!', content: 'This is the first email.', dateSent: '2025-07-15T10:00:00Z'},
+            {id: 2, sender: 'Jane Smith', title: 'Re: Project Update', content: 'Here is the project update you requested.', dateSent: '2025-07-15T11:30:00Z'},
+            {id: 3, sender: 'Peter Jones', title: 'Lunch tomorrow?', content: 'Are we still on for lunch tomorrow at 12:30?', dateSent: '2025-07-15T12:15:00Z'},
+            {id: 4, sender: 'Mary Williams', title: 'Your order has shipped', content: 'Your order #12345 has shipped and will arrive in 3-5 business days.', dateSent: '2025-07-14T15:45:00Z'},
+            {id: 5, sender: 'David Brown', title: 'Quick question', content: 'I have a quick question about the new feature.', dateSent: '2025-07-14T09:20:00Z'}
+        ]
     }
 }
 

apps/email/view/MainView.mjs

@@ -1,27 +1,64 @@
-import {defineComponent} from '../../../src/functional/_export.mjs';
+import {defineComponent, useConfig} from '../../../src/functional/_export.mjs';
+import GridContainer                from '../../../src/grid/Container.mjs';
+import EmailsStore                  from '../store/Emails.mjs';
+import RowModel                     from '../../../src/selection/grid/RowModel.mjs';
 
 export default defineComponent({
     config: {
         className: 'Email.view.MainView',
         cls      : ['email-mainview']
     },
     createVdom() {
+        const [selectedEmail, setSelectedEmail] = useConfig(null);
+
         const paneStyle = {
-            border: '1px solid #c0c0c0',
-            margin: '10px',
+            border : '1px solid #c0c0c0',
+            margin : '10px',
             padding: '10px'
         };
 
+        const onSelectionChange = ({records}) => {
+            setSelectedEmail(records[0] || null);
+        };
+
         return {
             cn: [{
                 style: {...paneStyle, flex: '0 0 200px'},
                 text : 'Folders'
             }, {
-                style: {...paneStyle, flex: '1 1 400px'},
-                text : 'Email List'
+                style: {...paneStyle, flex: '1 1 600px', padding: '0'},
+                cn: [{
+                    module      : GridContainer,
+                    id          : 'email-grid',
+                    store       : EmailsStore,
+                    wrapperStyle: {height: '100%', width: '100%'},
+                    bodyConfig: {
+                        selectionModel: {
+                            module   : RowModel,
+                            listeners: {selectionChange: onSelectionChange}
+                        }
+                    },
+                    columns: [
+                        {dataField: 'sender', text: 'Sender', width: 150},
+                        {dataField: 'title',  text: 'Title',  flex: 1, minWidth: 200},
+                        {
+                            cellAlign: 'right',
+                            dataField: 'dateSent',
+                            text     : 'Date',
+                            width    : 100,
+                            renderer : (({value}) => new Date(value).toLocaleDateString())
+                        }
+                    ]
+                }]
             }, {
                 style: {...paneStyle, flex: '1 1 600px'},
-                text : 'Email Details'
+                cn: selectedEmail ? [
+                    {tag: 'h2', text: selectedEmail.title},
+                    {tag: 'p', text: `From: ${selectedEmail.sender}`},
+                    {tag: 'div', style: {marginTop: '10px'}, text: selectedEmail.content}
+                ] : [{
+                    text: 'Select an email to read'
+                }]
             }]
         }
     }

src/functional/component/Base.mjs

@@ -178,14 +178,20 @@ class FunctionalBase extends Base {
      * @protected
      */
     afterSetWindowId(value, oldValue) {
+        const me = this;
+
         if (value) {
-            Neo.currentWorker.insertThemeFiles(value, this.__proto__)
+            Neo.currentWorker.insertThemeFiles(value, me.__proto__)
         }
 
+        me.childComponents?.forEach(component => {
+            component.windowId = value
+        })
+
         // If a component gets moved into a different window, an update cycle might still be running.
         // Since the update might no longer get mapped, we want to re-enable this instance for future updates.
         if (oldValue) {
-            this.isVdomUpdating = false
+            me.isVdomUpdating = false
         }
     }
 
@@ -353,12 +359,12 @@ class FunctionalBase extends Base {
             if (!component) {
                 me.childComponents ??= new Map();
 
-
                 // Instantiate the component
                 component = Neo[(vdomTree.className || vdomTree.module) ? 'create' : 'ntype']({
                     ...vdomTree,
                     parentId,
-                    parentIndex
+                    parentIndex,
+                    windowId: me.windowId
                 })
             } else {
                 const newConfig = {...vdomTree}; // Shallow copy

src/selection/grid/BaseModel.mjs

@@ -53,6 +53,7 @@ class BaseModel extends Model {
             }
 
             me.fire('selectionChange', {
+                records  : me.selectedRows.map(id => view.store.get(id)),
                 selection: me.selectedRows
             })
         } else if (!silent) {