Added Formula select to view mode

module/applications/sheets/rollTables/rollTable.mjs

@@ -11,7 +11,10 @@ export default class DhRollTableSheet extends foundry.applications.sheets.RollTa
     static buildParts() {
         const { footer, header, sheet, ...parts } = super.PARTS;
         return {
-            sheet,
+            sheet: {
+                ...sheet,
+                template: 'systems/daggerheart/templates/sheets/rollTable/sheet.hbs'
+            },
             header: { template: 'systems/daggerheart/templates/sheets/rollTable/header.hbs' },
             ...parts,
             summary: { template: 'systems/daggerheart/templates/sheets/rollTable/summary.hbs' },
@@ -21,10 +24,35 @@ export default class DhRollTableSheet extends foundry.applications.sheets.RollTa
 
     static PARTS = DhRollTableSheet.buildParts();
 
+    async _preRender(context, options) {
+        await super._preRender(context, options);
+
+        if (!options.internalRefresh)
+            this.daggerheartFlag = new game.system.api.data.DhRollTable(this.document.flags.daggerheart);
+    }
+
+    /* root PART has a blank element on _attachPartListeners, so it cannot be used to set the eventListeners for the view mode */
+    async _onRender(context, options) {
+        super._onRender(context, options);
+
+        for (const element of this.element.querySelectorAll('.system-update-field'))
+            element.addEventListener('change', this.updateSystemField.bind(this));
+    }
+
     async _preparePartContext(partId, context, options) {
         context = await super._preparePartContext(partId, context, options);
 
         switch (partId) {
+            case 'sheet':
+                context.altFormulaOptions = {
+                    '': { name: this.daggerheartFlag.formulaName },
+                    ...this.daggerheartFlag.altFormula
+                };
+                context.activeAltFormula = this.daggerheartFlag.activeAltFormula;
+                context.selectedFormula = context.activeAltFormula
+                    ? this.daggerheartFlag.altFormula[context.activeAltFormula].formula
+                    : this.document.formula;
+                break;
             case 'header':
                 context.altFormulaOptions = {
                     '': { name: this.daggerheartFlag.formulaName },
@@ -42,11 +70,10 @@ export default class DhRollTableSheet extends foundry.applications.sheets.RollTa
         return context;
     }
 
-    async _preRender(context, options) {
+    async updateSystemField(event) {
-        await super._preRender(context, options);
+        const { dataset, value } = event.target;
-
+        await this.daggerheartFlag.updateSource({ [dataset.path]: value });
-        if (!options.internalRefresh)
+        this.render({ internalRefresh: true });
-            this.daggerheartFlag = new game.system.api.data.DhRollTable(this.document.flags.daggerheart);
     }
 
     /** @override */

styles/less/sheets/rollTables/sheet.less

@@ -19,4 +19,11 @@
             }
         }
     }
+
+    .roll-table-view-formula-container {
+        width: fit-content;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
 }

templates/sheets/rollTable/header.hbs

@@ -6,7 +6,7 @@
     <div class="form-group">
         <label>{{localize "Formula"}}</label>
         <div class="form-fields">
-            <select name="flags.daggerheart.activeAltFormula">
+            <select class="system-update-field" data-path="activeAltFormula">
                 {{selectOptions this.altFormulaOptions selected=this.activeAltFormula labelAttr="name"}}
             </select>
         </div>

templates/sheets/rollTable/sheet.hbs

@@ -0,0 +1,47 @@
+<header class="sheet-header flexrow">
+    <img src="{{document.img}}" alt="{{localize "DOCUMENT.FIELDS.img.label"}}">
+    <h1>{{document.name}}</h1>
+    <div class="roll-table-view-formula-container">
+        <select class="system-update-field" data-path="activeAltFormula">
+            {{selectOptions this.altFormulaOptions selected=this.activeAltFormula labelAttr="name"}}
+        </select>
+        <h4>{{selectedFormula}}</h4>
+    </div>
+    <button data-action="changeMode">
+        <i class="fa-solid fa-pen" inert></i>
+        <span>{{localize "TABLE.ACTIONS.ChangeMode.Edit"}}</span>
+    </button>
+</header>
+
+{{{descriptionHTML}}}
+
+<table class="flexcol" data-results>
+    <thead>
+        <tr class="flexrow">
+            <th class="image flexrow"></th>
+            <th class="range flexrow">{{localize "TABLE_RESULT.FIELDS.range.label"}}</th>
+            <th class="details flexrow">{{localize "TABLE_RESULT.Details"}}</th>
+            <th class="controls flexrow"></th>
+        </tr>
+    </thead>
+    <tbody class="scrollable">
+        {{#each results as |result i|}}
+        <tr class="flexrow{{#if result.drawn}} drawn{{/if}}" data-result-id="{{result.id}}">
+            <td class="image">
+                <img src="{{result.img}}" alt="{{localize "TABLE_RESULT.FIELDS.img.label"}}" loading="lazy">
+            </td>
+            <td class="range">{{result.range}}</td>
+            <td class="details">
+                {{> "templates/sheets/roll-table/result-details.hbs" result=result}}
+            </td>
+            <td class="controls flexrow">
+                <button class="inline-control icon fa-solid fa-lock{{#unless result.drawn}}-open{{/unless}}"
+                        data-action="lockResult"
+                        data-tooltip aria-label="{{localize "TABLE.ACTIONS.ToggleDrawn"}}"></button>
+                <button class="inline-control icon fa-solid fa-up-from-bracket" data-action="drawSpecificResult"
+                        data-tooltip aria-label="{{localize "TABLE.ACTIONS.DrawSpecificResult"}}"></button>
+            </td>
+        </tr>
+        {{/each}}
+    </tbody>
+</table>