feat(harmonia): a view: calendar child renders as an embedded calendar on the DOCUMENT surface too - power and personal (#6364)

The embedded calendar for a composition child (intent view: calendar) existed
on the master layout's detail panels and the my-form child panels, but a
DOCUMENT master rendered the same child as a plain table in its secondary
panels - and the personal document did not render non-item children at all.
The concrete case: a day-allocation calendar on a timesheet document.

- perspective/document: the secondary detail panels honor def.calendar exactly
  like the master layout (embedded x-h-calendar; event-click edits the child,
  empty-day click creates one with the document FK + clicked date preset) -
  the shared detailPanel component already carried the whole behavior.
- my-document: renders the non-item scope-inheriting children below the totals
  (the SAME panels the my-form renders - calendar for a view: calendar child,
  table otherwise), reading through the children's scoped My controllers.
- embedded event titles naming a RELATION resolve to the referenced label
  (the raw-FK-id class, completing the standalone-calendar fix): detailPanel
  reuses its existing column lookups and re-renders events when maps arrive;
  the my-form/my-document child calendars fetch the title lookup emitted into
  the child config (parameterUtils), raw value as the fail-soft fallback.

IntentEmissionCoverageIT: the fixture gains TicketVisit (view: calendar
composition child of the personal chat Document, relation title) and asserts
the power document's calendar branch, the detail registration's calendar +
lookup config, and the personal document's children loading, titleLookup and
panel markup. Ran green locally (1/1).

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: delchev

components/resources/application-core/src/main/resources/META-INF/dirigible/application-core/shell/js/components/detailPanel.js

@@ -67,6 +67,9 @@ function detailPanel(def, masterId) {
         }
       }
       this.lookups = all;
+      // A calendar def re-renders its events once the maps arrive - a title naming a relation
+      // column resolves to the referenced label instead of the raw FK id.
+      if (this.def.calendar) this.calCfg = { view: this.calCfg.view, events: this.buildEvents() };
       this.refreshIcons();
     },
 
@@ -160,8 +163,17 @@ function detailPanel(def, masterId) {
     eventTitle(row) {
       const cal = this.def.calendar;
       if (cal.title) {
-        const t = row[cal.title];
-        if (t !== undefined && t !== null && String(t) !== '') return String(t);
+        const v = row[cal.title];
+        // A title naming a RELATION column resolves to its referenced label, exactly like the
+        // table cell does; the raw value stays the fallback for dangling FKs / unloaded maps.
+        const col = (this.def.columns || []).find(c => c.name === cal.title && c.lookup);
+        if (col) {
+          const m = this.lookups[cal.title];
+          const ref = m ? m[v] : undefined;
+          const t = ref ? ref[col.lookup.text] : undefined;
+          if (t !== undefined && t !== null && String(t) !== '') return String(t);
+        }
+        if (v !== undefined && v !== null && String(v) !== '') return String(v);
       }
       return this.def.label + ' #' + row[this.def.primaryKey];
     },

components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-document-page.js.template

@@ -92,6 +92,7 @@ document.addEventListener('alpine:init', () => {
 #end
           this.itemsEnabled = true;
           await this.loadItems();
+          if (this.loadChildren) this.loadChildren();
           this.state = 'default';
         } catch (e) {
           this.error = (e && e.message) || 'Could not load the document.';
@@ -334,5 +335,121 @@ document.addEventListener('alpine:init', () => {
     },
 
     goBack() { this.navigate('/my/${name}'); },
+#set($docChildren = [])
+#if($myChildren)
+#foreach($child in $myChildren)
+#if($child.name != "$!{documentItemsEntity}")
+#set($ignore = $docChildren.add($child))
+#end
+#end
+#end
+#if($docChildren.size() > 0)
+
+    // --- non-item children inheriting the personal scope (panels below the document) --------------
+    // The SAME panels the my-form renders: an embedded calendar for a view: calendar child (e.g. a
+    // day-allocation calendar on a timesheet document), a table otherwise.
+    children: [
+#foreach($child in $docChildren)
+      { name: '${child.name}', label: '${child.label}', fkProperty: '${child.fkProperty}',
+        apiPath: '${child.apiPath}', rows: [], state: 'loading',
+        calendar: #if($child.calendar){ start: '${child.calendar.start}', end: #if($child.calendar.end)'${child.calendar.end}'#{else}null#end, title: #if($child.calendar.title)'${child.calendar.title}'#{else}null#end, titleLookup: #if($child.calendar.titleLookup){ url: '${child.calendar.titleLookup.url}', key: '${child.calendar.titleLookup.key}', value: '${child.calendar.titleLookup.value}' }#{else}null#end, view: '${child.calendar.view}' }#{else}null#end,
+        calCfg: { view: '#if($child.calendar)${child.calendar.view}#{else}month#end', events: [] },
+        columns: [#foreach($col in $child.columns){ name: '${col.name}', label: '${col.label}'#if($col.number), number: true#end#if($col.date), date: true#end }#if($foreach.hasNext), #end#end] },
+#end
+    ],
+
+    async loadChildren() {
+      for (const child of this.children) {
+        try {
+          child.rows = await App.services.api.get(child.apiPath + '?' + encodeURIComponent(child.fkProperty) + '=' + encodeURIComponent(this.id)) || [];
+          if (child.calendar) {
+            // a title naming a RELATION resolves to its referenced label (fail-soft: raw value stays)
+            if (child.calendar.titleLookup && !child.titleMap) {
+              try {
+                const rows = await App.services.api.getAll(child.calendar.titleLookup.url, { baseUrl: '' });
+                const m = {};
+                (rows || []).forEach(r => { m[r[child.calendar.titleLookup.key]] = r[child.calendar.titleLookup.value]; });
+                child.titleMap = m;
+              } catch (e) { child.titleMap = {}; }
+            }
+            child.calCfg = { view: child.calendar.view, events: this.buildChildEvents(child) };
+          }
+          child.state = 'default';
+        } catch (e) {
+          child.state = 'error';
+        }
+      }
+      this.refreshIcons && this.refreshIcons();
+    },
+
+    // Row -> event mapping, the same conventions as the shared detailPanel (Jackson java.time
+    // arrays / epoch seconds / ISO strings normalize via childToISO).
+    buildChildEvents(child) {
+      return (child.rows || []).map(row => {
+        const start = this.childToISO(row[child.calendar.start]);
+        if (!start) return null;
+        const ev = { id: row.Id, title: this.childEventTitle(child, row), start: start, allDay: true };
+        if (child.calendar.end) {
+          const end = this.childToISO(row[child.calendar.end]);
+          if (end) ev.end = end;
+        }
+        return ev;
+      }).filter(Boolean);
+    },
+    childEventTitle(child, row) {
+      if (child.calendar.title) {
+        const v = row[child.calendar.title];
+        const m = child.titleMap;
+        const resolved = m ? m[v] : undefined;
+        if (resolved !== undefined && resolved !== null && String(resolved) !== '') return String(resolved);
+        if (v !== undefined && v !== null && String(v) !== '') return String(v);
+      }
+      return child.label + ' #' + row.Id;
+    },
+    childToISO(v) {
+      if (v === undefined || v === null || v === '') return '';
+      if (Array.isArray(v)) {
+        const p = n => String(n).padStart(2, '0');
+        const date = v[0] + '-' + p(v[1]) + '-' + p(v[2]);
+        if (v.length <= 3) return date;
+        return date + 'T' + p(v[3] || 0) + ':' + p(v[4] || 0) + ':' + p(v[5] || 0);
+      }
+      if (typeof v === 'number') {
+        const ms = v < 1e12 ? v * 1000 : v;
+        try { return new Date(ms).toISOString(); } catch (e) { return ''; }
+      }
+      return String(v);
+    },
+    displayChild(child, row, col) {
+      const v = row[col.name];
+      if (v == null || v === '') return '—';
+      if (col.date) return this.childToISO(v).split('T')[0];
+      return String(v);
+    },
+
+    addChild(child) {
+      this.navigate('/my/' + child.name + '/create?' + encodeURIComponent(child.fkProperty) + '='
+          + encodeURIComponent(this.id) + '&returnTo=' + encodeURIComponent('/my/${name}/' + this.id + '/edit'));
+    },
+    editChild(child, id) {
+      this.navigate('/my/' + child.name + '/' + id + '/edit?returnTo=' + encodeURIComponent('/my/${name}/' + this.id + '/edit'));
+    },
+    onChildEventClick(child, e) {
+      const id = e && e.detail && e.detail.event ? e.detail.event.id : null;
+      if (id) this.editChild(child, id);
+    },
+    onChildDateClick(child, e) {
+      let q = '?' + encodeURIComponent(child.fkProperty) + '=' + encodeURIComponent(this.id)
+            + '&returnTo=' + encodeURIComponent('/my/${name}/' + this.id + '/edit');
+      const d = e && e.detail ? e.detail.date : null;
+      if (d instanceof Date && !isNaN(d.getTime())) {
+        const p = n => String(n).padStart(2, '0');
+        let val = d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate());
+        if (e.detail.time) val += 'T' + e.detail.time;
+        q += '&' + encodeURIComponent(child.calendar.start) + '=' + encodeURIComponent(val);
+      }
+      this.navigate('/my/' + child.name + '/create' + q);
+    },
+#end
   }));
 });

components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-document-view.html.template

@@ -184,6 +184,68 @@
     </div>
 #end
 
+#set($docChildren = [])
+#if($myChildren)
+#foreach($child in $myChildren)
+#if($child.name != "$!{documentItemsEntity}")
+#set($ignore = $docChildren.add($child))
+#end
+#end
+#end
+#if($docChildren.size() > 0)
+
+    <!-- Non-item children inheriting the personal scope: an embedded calendar (view: calendar on
+         the child) or a table - the SAME panels the my-form renders (e.g. the day-allocation
+         calendar on a timesheet document). Only once the document exists. -->
+    <template x-if="mode === 'edit'">
+      <div class="vbox gap-4" style="max-width: 900px">
+        <template x-for="child in children" :key="child.name">
+          <div x-h-card>
+            <div x-h-card-header class="hbox items-center">
+              <span x-h-card-title x-text="child.label"></span>
+              <div class="grow"></div>
+              <button x-h-button data-variant="primary" data-size="sm" @click="addChild(child)">
+                <i role="img" x-h-lucide data-lucide="plus"></i>
+                <span x-text="T('$projectName:${tprefix}.defaults.add', 'Add')"></span>
+              </button>
+            </div>
+            <div x-h-card-content>
+              <div x-show="child.state === 'loading'"><div x-h-spinner></div></div>
+              <template x-if="child.calendar">
+                <div x-show="child.state === 'default'" style="min-height: 420px">
+                  <div x-h-calendar="child.calCfg" style="height: 420px"
+                       @event-click="onChildEventClick(child, $event)" @date-click="onChildDateClick(child, $event)"></div>
+                </div>
+              </template>
+              <template x-if="!child.calendar">
+                <div x-show="child.state === 'default'" x-h-table-container.scroll style="max-height: 320px">
+                  <table x-h-table data-borders="rows">
+                    <thead x-h-table-header>
+                      <tr x-h-table-row>
+                        <template x-for="col in child.columns" :key="col.name">
+                          <th x-h-table-head scope="col" :class="col.number ? 'text-right' : ''" x-text="col.label"></th>
+                        </template>
+                      </tr>
+                    </thead>
+                    <tbody x-h-table-body>
+                      <template x-for="row in child.rows" :key="row.Id">
+                        <tr x-h-table-row data-hoverable="true" class="cursor-pointer" @click="editChild(child, row.Id)">
+                          <template x-for="col in child.columns" :key="col.name">
+                            <td x-h-table-cell :class="col.number ? 'text-right' : ''" x-text="displayChild(child, row, col)"></td>
+                          </template>
+                        </tr>
+                      </template>
+                    </tbody>
+                  </table>
+                </div>
+              </template>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+#end
+
     <div class="hbox gap-2" style="max-width: 900px">
       <button x-h-button data-variant="negative" x-show="mode === 'edit'" @click="deleteOpen = true"
               x-text="T('$projectName:${tprefix}.defaults.delete', 'Delete')"></button>

components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/my/my-form-page.js.template

@@ -182,7 +182,7 @@ document.addEventListener('alpine:init', () => {
 #foreach($child in $myChildren)
       { name: '${child.name}', label: '${child.label}', fkProperty: '${child.fkProperty}',
         apiPath: '${child.apiPath}', rows: [], state: 'loading',
-        calendar: #if($child.calendar){ start: '${child.calendar.start}', end: #if($child.calendar.end)'${child.calendar.end}'#{else}null#end, title: #if($child.calendar.title)'${child.calendar.title}'#{else}null#end, view: '${child.calendar.view}' }#{else}null#end,
+        calendar: #if($child.calendar){ start: '${child.calendar.start}', end: #if($child.calendar.end)'${child.calendar.end}'#{else}null#end, title: #if($child.calendar.title)'${child.calendar.title}'#{else}null#end, titleLookup: #if($child.calendar.titleLookup){ url: '${child.calendar.titleLookup.url}', key: '${child.calendar.titleLookup.key}', value: '${child.calendar.titleLookup.value}' }#{else}null#end, view: '${child.calendar.view}' }#{else}null#end,
         calCfg: { view: '#if($child.calendar)${child.calendar.view}#{else}month#end', events: [] },
         columns: [#foreach($col in $child.columns){ name: '${col.name}', label: '${col.label}'#if($col.number), number: true#end#if($col.date), date: true#end }#if($foreach.hasNext), #end#end] },
 #end
@@ -192,7 +192,18 @@ document.addEventListener('alpine:init', () => {
       for (const child of this.children) {
         try {
           child.rows = await App.services.api.get(child.apiPath + '?' + encodeURIComponent(child.fkProperty) + '=' + encodeURIComponent(this.id)) || [];
-          if (child.calendar) child.calCfg = { view: child.calendar.view, events: this.buildEvents(child) };
+          if (child.calendar) {
+            // a title naming a RELATION resolves to its referenced label (fail-soft: raw value stays)
+            if (child.calendar.titleLookup && !child.titleMap) {
+              try {
+                const rows = await App.services.api.getAll(child.calendar.titleLookup.url, { baseUrl: '' });
+                const m = {};
+                (rows || []).forEach(r => { m[r[child.calendar.titleLookup.key]] = r[child.calendar.titleLookup.value]; });
+                child.titleMap = m;
+              } catch (e) { child.titleMap = {}; }
+            }
+            child.calCfg = { view: child.calendar.view, events: this.buildEvents(child) };
+          }
           child.state = 'default';
         } catch (e) {
           child.state = 'error';
@@ -217,8 +228,11 @@ document.addEventListener('alpine:init', () => {
     },
     eventTitle(child, row) {
       if (child.calendar.title) {
-        const t = row[child.calendar.title];
-        if (t !== undefined && t !== null && String(t) !== '') return String(t);
+        const v = row[child.calendar.title];
+        const m = child.titleMap;
+        const resolved = m ? m[v] : undefined;
+        if (resolved !== undefined && resolved !== null && String(resolved) !== '') return String(resolved);
+        if (v !== undefined && v !== null && String(v) !== '') return String(v);
       }
       return child.label + ' #' + row.Id;
     },

components/template/template-application-ui-harmonia-java/src/main/resources/META-INF/dirigible/template-application-ui-harmonia-java/ui/perspective/document/document-view.html.template

@@ -298,6 +298,15 @@
           <div x-show="state === 'loading'"><div x-h-spinner></div></div>
           <div x-show="state === 'error'" x-h-text.muted x-text="error"></div>
           <div x-show="state === 'empty'" x-h-text.muted x-text="T('$projectName:${tprefix}.messages.noData', 'No records.')"></div>
+          <!-- A calendar detail (intent view: calendar on the composition child) renders the same
+               document-filtered rows as events on an embedded calendar: event-click edits the child,
+               empty-day click creates one with the document FK + the clicked date preset. -->
+          <template x-if="def.calendar">
+            <div x-show="state === 'default'" style="min-height: 420px">
+              <div x-h-calendar="calCfg" style="height: 420px" @event-click="onEventClick" @date-click="onDateClick"></div>
+            </div>
+          </template>
+          <template x-if="!def.calendar">
           <div x-show="state === 'default'" x-h-table-container.scroll style="max-height: 320px">
             <table x-h-table data-borders="rows">
               <thead x-h-table-header>
@@ -322,6 +331,7 @@
               </tbody>
             </table>
           </div>
+          </template>
         </div>
 
         <!-- Delete confirmation (manual corrective removal of a junction row → rollup recomputes). -->

components/ui/service-generate/src/main/resources/META-INF/dirigible/service-generate/template/parameterUtils.js

@@ -311,6 +311,14 @@ export function process(model, parameters) {
                                                  start: c.calendarStartProperty || null,
                                                  end: c.calendarEndProperty || null,
                                                  title: c.calendarTitleProperty || null,
+                                                 // a title naming a RELATION resolves to its referenced label on the panel
+                                                 titleLookup: (() => {
+                                                     const tp = c.calendarTitleProperty;
+                                                     const p = tp && (c.properties || []).find(x => x.name === tp
+                                                             && (x.widgetType === 'DROPDOWN' || x.widgetType === 'DOCUMENT_STATUS'));
+                                                     return p ? { url: p.widgetDropdownControllerUrl, key: p.widgetDropDownKey,
+                                                         value: p.widgetDropDownValue } : null;
+                                                 })(),
                                                  view: c.calendarInitialView || 'month'
                                              } : null,
                                              columns: (c.properties || []).filter(cp => !cp.sensitiveProperty && !cp.dataAutoIncrement

tests/tests-integrations/src/main/java/org/eclipse/dirigible/integration/tests/api/IntentEmissionCoverageIT.java

@@ -216,6 +216,19 @@ class IntentEmissionCoverageIT extends IntegrationTest {
                 relations:
                   - { name: Ticket, kind: manyToOne, to: Ticket, composition: true, required: true }
 
+              # view: calendar on a NON-ITEM composition child of a personal DOCUMENT master - the
+              # document surface renders it as an embedded calendar panel (power secondary panel +
+              # my-document children), and the relation title resolves through a label lookup.
+              - name: TicketVisit
+                view: calendar
+                calendar: { start: visitDate, title: Person }
+                fields:
+                  - { name: id,        type: integer, primaryKey: true, generated: true }
+                  - { name: visitDate, type: date, required: true }
+                relations:
+                  - { name: Ticket, kind: manyToOne, to: Ticket, composition: true, required: true }
+                  - { name: Person, kind: manyToOne, to: Person }
+
               # view: range + a personal owner - the PERSONAL surface must render the range
               # calendar (never the plain form+list), scoped to the MyController (U3 parity).
               - name: Leave
@@ -662,6 +675,23 @@ private void assertEmission() {
         assertTrue(myTicketPage.contains("sendMessage") && myTicketPage.contains("TicketMessageMyController"),
                 "the personal chat composer must append through the personal items controller");
 
+        // view: calendar on a NON-ITEM composition child of a Document master - the document
+        // surface renders the child as an embedded calendar panel on BOTH shells (the class where
+        // the calendar was realized on the master layout but silently degraded to a table - or to
+        // nothing - on the document layout), and a relation title resolves via the label lookup.
+        String ticketDoc2 = contentOf("gen/emission/views/Ticket/Ticket-document.html");
+        assertTrue(ticketDoc2.contains("def.calendar") && ticketDoc2.contains("x-h-calendar"),
+                "the power document's secondary panels must render a calendar child as an embedded calendar");
+        String visitRegister = contentOf("gen/emission/js/components/pages/Ticket/TicketVisit.detail.js");
+        assertTrue(visitRegister.contains("calendar: {"), "the calendar child's detail registration must carry the calendar config");
+        assertTrue(visitRegister.contains("lookup: {"),
+                "the calendar child's relation columns must carry their label lookups (title resolution)");
+        assertTrue(myTicketPage.contains("loadChildren") && myTicketPage.contains("TicketVisitMyController"),
+                "the personal document must load its non-item children through their scoped controllers");
+        assertTrue(myTicketPage.contains("titleLookup"),
+                "the personal document's child calendar must resolve a relation title via the label lookup");
+        assertTrue(myTicketDoc.contains("onChildEventClick"), "the personal document must render the child calendar panel markup");
+
         // view: range/calendar + personal - the personal surface renders the calendar (never the
         // plain form+list), reads through the scoped controller, and /my/<Entity> lands on it.
         String myLeaveCalendar = contentOf("gen/emission/js/components/pages/my/LeaveMyCalendarPage.js");