update summonCosts application

src/module/powers/summonSupport.js

@@ -1,8 +1,10 @@
 /* globals Sequencer */
-import { log, moduleHelpers, moduleName, settingKeys } from '../globals.js';
+import { log, moduleName } from '../globals.js';
 import { templates } from '../preloadTemplates.js';
 import { ActorFolderEffect } from './basePowers.js';
 
+const { ApplicationV2, HandlebarsApplicationMixin } = foundry.applications.api;
+
 export class BaseSummonEffect extends ActorFolderEffect {
   get name() {
     return 'Base Summon';
@@ -62,25 +64,46 @@ export class BaseSummonEffect extends ActorFolderEffect {
   }
 }
 
-export class SummonCostApplication extends FormApplication {
+export class SummonCostApplication extends HandlebarsApplicationMixin(ApplicationV2) {
   constructor(actors, powers) {
     super();
     this.actors = actors;
     this.powers = powers;
+    this.object = {};
   }
 
-  static get defaultOptions() {
-    return foundry.utils.mergeObject(super.defaultOptions, {
-      classes: ['sheet', 'mbSwade', 'mbSwadeForm', 'mbSwadeSummonCostForm'],
-      popOut: true,
+  static DEFAULT_OPTIONS = {
+    id: 'mbSwadeSummonCostApplication',
+    form: {
+      handler: SummonCostApplication.#onSubmit,
+      closeOnSubmit: true,
+    },
+    tag: 'form',
+    position: {
+      width: 800,
+      height: 'auto',
+    },
+    classes: ['mbSwade', 'mbSwadeForm', 'mbSwadeSummonCostForm'],
+    window: {
+      title: 'Set Summoning Costs',
+    },
+  };
+
+  static PARTS = {
+    header: {
+      template: templates['dialogHeader.html'],
+      classes: ['mbSwade', 'mbSwadeDialogHeader', 'mbSwadeSummonCostsHeader'],
+    },
+    body: {
       template: templates['summonCosts.html'],
-      id: ['mbSwadeSummonCostFormApplication'],
-      title: 'Summoning Costs',
-      width: 750,
-    });
-  }
+      classes: ['mbSwade', 'mbSwadePowerEffectsBody', 'scrollable'],
+    },
+    footer: {
+      template: 'templates/generic/form-footer.hbs',
+    },
+  };
 
-  getData() {
+  async _prepareContext() {
     const actorNames = Object.keys(this.actors).map((k) => {
       let splitName = k.split(' | ');
       splitName.pop();
@@ -96,8 +119,15 @@ export class SummonCostApplication extends FormApplication {
       return 0;
     });
     const data = {
+      name: 'Set Summon Costs',
+      formId: foundry.utils.randomID(),
+      headerTitle: 'Set Summon Costs',
       powers: this.powers,
       actors: [],
+      buttons: [
+        { type: 'submit', icon: 'fa-solid fa-save', label: 'SETTINGS.Save' },
+        { type: 'cancel', icon: 'fa-solid fa-ban', label: 'SETTINGS.Cancel' },
+      ],
     };
     for (const actor of actorNames) {
       const summon = this.actors[actor.fullName].getFlag(moduleName, 'summonData') ?? {
@@ -118,12 +148,13 @@ export class SummonCostApplication extends FormApplication {
     return data;
   }
 
-  async _updateObject(ev, formData) {
-    const submit = ev?.submitter?.value ?? 'cancel';
+  static async #onSubmit(event, form, formData) {
+    const submit = event?.submitter?.value ?? 'cancel';
     if (submit === 'cancel') {
       return;
     }
     log('FORMDATA |', formData);
+    formData = formData.object;
     const updates = {};
     for (const key of Object.keys(formData)) {
       const value = formData[key];

src/templates/summonCosts.html

@@ -1,8 +1,4 @@
-<form class='flexcol'>
-  <!-- vim: set ft=handlebars.html:-->
-  <header class='sheet-header'>
-    <h2>Set Summon Parameters</h2>
-  </header>
+<section>
   <table class="mbForm">
     <thead>
       <tr>
@@ -22,23 +18,12 @@
       <tr>
         <td>{{actor.folder}}</td>
         <td>{{actor.name}}</td>
-        <td><input type="number"
-                   value="{{summon.cost}}"
-                   name="{{actor.fullName}}:;:cost"
-                   step="1"
-                   min="0"/></td>
+        <td><input type="number" value="{{summon.cost}}" name="{{actor.fullName}}:;:cost" step="1" min="0" /></td>
         {{#each summon.powers}}
-        <td align="center"><input
-            type="checkbox"
-            name="{{../actor.fullName}}:;:{{power}}"
-            {{checked value}}></td>
+        <td align="center"><input type="checkbox" name="{{../actor.fullName}}:;:{{power}}" {{checked value}}></td>
         {{/each}}
       </tr>
       {{/each}}
     </tbody>
   </table>
-  <footer class="sheet-footer flexrow">
-    <button type="submit" name="submit" value="submit">Submit</button>
-    <button type="submit" name="submit" value="cancel">Cancel</button>
-  </footer>
-</form>
+</section>