migrates active effect to DocumentV2

src/module/sheets/ActiveEffectSheet.mjs

@@ -1,44 +1,65 @@
-export class ActiveEffectSheet extends foundry.appv1.sheets.ItemSheet {
+const {DocumentSheetV2, HandlebarsApplicationMixin} = foundry.applications.api
-    /**@override */
+
-    static get defaultOptions() {
+export class ActiveEffectSheet extends HandlebarsApplicationMixin(DocumentSheetV2) {
-        return foundry.utils.mergeObject(super.defaultOptions, {
+
-            classes: ['dsa41', 'sheet', 'activeeffect'],
+    /** @inheritDoc */
-            width: 520,
+    static DEFAULT_OPTIONS = {
-            height: 480
+        position: {width: 520, height: 480},
-        });
+        classes: ['dsa41', 'sheet', 'item', 'activeeffect'],
+        tag: 'form',
+        form: {
+            submitOnChange: true,
+            closeOnSubmit: false,
+            handler: ActiveEffectSheet.#onSubmitForm
+        },
+        actions: {
+            openEffect: ActiveEffectSheet.#openEffect,
+            editImage: DocumentSheetV2.DEFAULT_OPTIONS.actions.editImage,
+        }
+    }
+
+    /** @inheritDoc */
+    static PARTS = {
+        form: {
+            template: `systems/DSA_4-1/templates/item/activeeffect/main-sheet.hbs`
+        },
+    }
+
+    static async #openEffect(evt) {
+        evt.preventDefault()
+        const {id} = evt.srcElement.dataset
+        const effect = await this.document.effects.get(id)
+        effect.sheet.render(true)
+    }
+
+    /**
+     * Handle form submission
+     * @this {AdvantageSheet}
+     * @param {SubmitEvent} event
+     * @param {HTMLFormElement} form
+     * @param {FormDataExtended} formData
+     */
+    static async #onSubmitForm(event, form, formData) {
+        event.preventDefault()
+
+        await this.document.update(formData.object) // Note: formData.object
     }
 
     /** @override */
-    get template() {
+    async _prepareContext(options) {
-        return `systems/DSA_4-1/templates/item/item-activeeffect-sheet.hbs`;
-    }
 
-    /** @override */
+        const context = await super._prepareContext(options)
-    getData() {
+        context.system = context.document.system
-        // Retrieve the data structure from the base sheet. You can inspect or log
+
-        // the context variable to see the structure, but some key properties for
+        const effects = context.document.getEmbeddedCollection("ActiveEffect").contents
-        // sheets are the actor object, the data object, whether or not it's
-        // editable, the items array, and the effects array.
-        const context = super.getData();
-        const effects = context.document.getEmbeddedCollection("ActiveEffect").contents;
         if (effects.length > 0) {
-            context.effectId = effects[0]._id;
+            context.effectId = effects[0]._id
         }
 
-        return context;
+        context.name = context.document.name
+        context.img = context.document.img
+        context.notes = context.document.system.notes
+
+        return context
     }
-
-    activateListeners(html) {
-        super.activateListeners(html);
-
-        // Everything below here is only needed if the sheet is editable
-        if (!this.isEditable) return;
-
-        html.on('click', '.editEffects', (evt) => {
-            const {id} = evt.currentTarget.dataset;
-            const effect = this.object.effects.get(id);
-            effect.sheet.render(true);
-        })
-    }
-
 }

src/module/sheets/equipmentSheet.mjs

@@ -110,12 +110,12 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2)
     }
 
     #prepareMetaContext(context) {
-        const equipmentData = context.document.system;
+        const equipmentData = context.document.system
-        context.system = equipmentData;
+        context.system = equipmentData
-        context.quantity = equipmentData.quantity;
+        context.quantity = equipmentData.quantity
-        context.description = equipmentData.description;
+        context.description = equipmentData.description
-        context.name = context.document.name;
+        context.name = context.document.name
-        context.img = context.document.img;
+        context.img = context.document.img
 
         context.categoryAndOptions = {
             options: {
@@ -131,8 +131,8 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2)
     }
 
     #prepareMeleeContext(context) {
-        const equipmentData = context.document.system;
+        const equipmentData = context.document.system
-        context.system = equipmentData;
+        context.system = equipmentData
         context.meleeSkillsAndOptions = {
             options: {
                 "": "",
@@ -156,7 +156,7 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2)
     }
 
     #prepareRangedContext(context) {
-        const equipmentData = context.document.system;
+        const equipmentData = context.document.system
         context.rangedSkillsAndOptions = {
             options: {
                 "": "",
@@ -187,14 +187,14 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2)
      */
     _prepareTabs(tabGroup) {
 
-        const currentTabs = super._prepareTabs(tabGroup);
+        const currentTabs = super._prepareTabs(tabGroup)
 
         const category = this.document.system.category
         /**
          *
          * @type {[{ApplicationTab}]}
          */
-        let tabs = currentTabs;
+        let tabs = currentTabs
 
         if (category.includes("Nahkampfwaffe")) {
             tabs.melee = {
@@ -223,7 +223,7 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2)
     /** @override */
     async _prepareContext(options) {
 
-        const context = await super._prepareContext(options);
+        const context = await super._prepareContext(options)
         context.price = context.document.system.price
         context.weight = context.document.system.weight
 
@@ -239,12 +239,12 @@ export class EquipmentSheet extends HandlebarsApplicationMixin(DocumentSheetV2)
      */
     _onRender(context, options) {
         this.element.querySelector('.array-editor select').addEventListener('change', (evt) => {
-            const addingValue = evt.currentTarget.value;
+            const addingValue = evt.currentTarget.value
-            const fieldToTarget = evt.currentTarget.dataset.targetField;
+            const fieldToTarget = evt.currentTarget.dataset.targetField
-            const newSkills = [...this.document.system[fieldToTarget], addingValue];
+            const newSkills = [...this.document.system[fieldToTarget], addingValue]
 
-            this.document.update({system: {[fieldToTarget]: newSkills}});
+            this.document.update({system: {[fieldToTarget]: newSkills}})
-            evt.currentTarget.value = "";
+            evt.currentTarget.value = ""
         })
     }
 

src/style/_active-effect-sheet.scss

@@ -14,6 +14,11 @@
       height: 48px;
       line-height: 48px;
     }
+
+    button {
+      height: 48px;
+      width: 48px;
+    }
   }
 
   .meta {

src/style/_liturgy-banner.scss

@@ -72,7 +72,9 @@ $deity_colours_tint: (
   }
 }
 
-.tab.liturgies {
+.dsa41.sheet {
+
+  .tab.liturgies {
     table {
 
       @include coloring('Praios');
@@ -244,4 +246,6 @@ $deity_colours_tint: (
       text-shadow: 0 0 10px rgb(255 0 0);
     }
 
+  }
+
 }

src/style/_player-action.scss

@@ -2,7 +2,8 @@
 @use "./_numbers";
 @use "sass:color";
 
-.player-action {
+.dsa41.sheet {
+  .player-action {
 
     display: inline-block;
     width: 120px;
@@ -23,4 +24,5 @@
 
     }
 
+  }
 }

src/style/_richtext-editor.scss

@@ -1,3 +1,7 @@
-.editor.prosemirror.active, .editor.prosemirror.inactive {
+.dsa41.sheet {
+
+  .editor.prosemirror.active, .editor.prosemirror.inactive {
     flex: 1;
+  }
+
 }

src/style/_skill-sheet.scss

@@ -1,4 +1,4 @@
-.sheet.item.skill {
+.dsa41.sheet.item.skill {
 
   .meta-details {
 

src/style/_tabs.scss

@@ -44,11 +44,10 @@
 
   }
 
-}
 
-// Tabs v2
+  // Tabs v2
 
-.sheet-tabs {
+  .sheet-tabs {
 
     position: relative;
     display: flow;
@@ -87,9 +86,9 @@
       }
 
     }
-}
+  }
 
-section.tab {
+  section.tab {
     border: numbers.$tab-border-width solid colours.$tab-border-color;
     background: assets.$tab-pane-background;
     flex: 1;
@@ -101,4 +100,6 @@ section.tab {
       gap: 8px;
       padding: 8px;
     }
+  }
+
 }

src/templates/item/activeeffect/main-sheet.hbs

@@ -0,0 +1,24 @@
+<div class="active-effect">
+
+    <div class="header">
+        <img class="img" src="{{img}}" data-action="editImage" data-edit="img" alt="{{name}}" title="{{name}}"/>
+        <input type="text" name="name" value="{{name}}"/>
+
+        <button class="editEffects" data-id="{{this.effectId}}" data-action="openEffect">
+            <i class="fas fa-pencil-alt"></i>
+        </button>
+    </div>
+
+    <div class="meta">
+        <label>Spielleiter Hinweise</label>
+        <prose-mirror
+                name="system.notes"
+                button="false"
+                editable="{{editable}}"
+                toggled="true"
+                value="{{system.notes}}">
+            {{{notes}}}
+        </prose-mirror>
+    </div>
+
+</div>

src/templates/item/item-activeeffect-sheet.hbs

@@ -1,20 +0,0 @@
-<form class="{{cssClass}} {{item.type}} flexcol" autocomplete="off">
-    <div class="active-effect">
-
-        <div class="header">
-            <img src="{{item.img}}" data-edit="img" title="{{item.name}}"/>
-            <input type="text" name="actor.name" value="{{item.name}}"/>
-
-            <button class="editEffects" data-id="{{this.effectId}}" data-operation="editActiveEffect">
-                <i class="fas fa-pencil-alt"></i>
-            </button>
-        </div>
-
-        <div class="meta">
-            <label>Spielleiter Hinweise</label>
-            {{editor item.system.notes target="system.notes" button=true owner=owner editable=editable}}
-        </div>
-
-
-    </div>
-</form>