FEAT: improvement of DHApplicationMixin

FEAT: create a new DHBaseItemSheet

lang/en.json

@@ -1028,6 +1028,13 @@
             }
         },
         "Sheets": {
+            "TABS": {
+                "features": "Features",
+                "effects": "Effects",
+                "settings": "Settings",
+                "actions": "Actions",
+                "description": "Description"
+            },
             "PC": {
                 "Name": "Name",
                 "Pronouns": "Pronouns",

module/applications/_module.mjs

@@ -12,4 +12,6 @@ export { default as DhpWeapon } from './sheets/items/weapon.mjs';
 export { default as DhpArmor } from './sheets/items/armor.mjs';
 export { default as DhpChatMessage } from './chatMessage.mjs';
 export { default as DhpEnvironment } from './sheets/environment.mjs';
-export { default as DhActiveEffectConfig } from './sheets/activeEffectConfig.mjs';
+export { default as DhActiveEffectConfig } from './sheets/activeEffectConfig.mjs';
+
+export * as api from './sheets/api/_modules.mjs';

module/applications/sheets/api/_modules.mjs

@@ -0,0 +1,2 @@
+export {default as DHApplicationMixin} from "./application-mixin.mjs";
+export {default as DHBaseItemSheet} from "./base-item.mjs";

module/applications/sheets/api/application-mixin.mjs

@@ -0,0 +1,102 @@
+const { HandlebarsApplicationMixin } = foundry.applications.api;
+
+/**
+ * @typedef {object} DragDropConfig
+ * @property {string|null} dragSelector - A CSS selector that identifies draggable elements.
+ * @property {string|null} dropSelector - A CSS selector that identifies drop targets.
+ */
+
+/**
+ * @typedef {import("@client/applications/api/handlebars-application.mjs").HandlebarsRenderOptions} HandlebarsRenderOptions
+ * @typedef {foundry.applications.types.ApplicationConfiguration & HandlebarsRenderOptions & { dragDrop?: DragDropConfig[] }} DHSheetV2Configuration
+ */
+
+/**
+ * @template {Constructor<foundry.applications.api.DocumentSheet>} BaseDocumentSheet
+ * @param {BaseDocumentSheet} Base - The base class to extend.
+ * @returns {BaseDocumentSheet}
+ */
+export default function DHApplicationMixin(Base) {
+  class DHSheetV2 extends HandlebarsApplicationMixin(Base) {
+    /**
+     * @param {DHSheetV2Configuration} [options={}]
+     */
+    constructor(options = {}) {
+      super(options);
+      /**
+       * @type {foundry.applications.ux.DragDrop[]}
+       * @private
+       */
+      this._dragDrop = this._createDragDropHandlers();
+    }
+
+    /**
+     * The default options for the sheet.
+     * @type {DHSheetV2Configuration}
+     */
+    static DEFAULT_OPTIONS = {
+       classes: ['daggerheart', 'sheet', 'dh-style'],
+      position: {
+        width: 480,
+        height: 'auto'
+      },
+
+      dragDrop: []
+    };
+
+    /* -------------------------------------------- */
+
+    /**@inheritdoc */
+    _attachPartListeners(partId, htmlElement, options) {
+      super._attachPartListeners(partId, htmlElement, options);
+      this._dragDrop.forEach(d => d.bind(htmlElement));
+    }
+
+    /* -------------------------------------------- */
+    /*  Drag and Drop                               */
+    /* -------------------------------------------- */
+
+    /**
+     * Creates drag-drop handlers from the configured options.
+     * @returns {foundry.applications.ux.DragDrop[]}
+     * @private
+     */
+    _createDragDropHandlers() {
+      return this.options.dragDrop.map(d => {
+        d.callbacks = {
+          drop: this._onDrop.bind(this)
+        };
+        return new foundry.applications.ux.DragDrop.implementation(d);
+      });
+    }
+
+    /**
+     * Handle drop event.
+     * @param {DragEvent} event
+     * @protected
+     */
+    _onDrop(event) { }
+
+    /* -------------------------------------------- */
+    /*  Prepare Context                             */
+    /* -------------------------------------------- */
+
+    /**
+     * Prepare the template context.
+     * @param {object} options
+     * @param {string} [objectPath='document']
+     * @returns {Promise<object>}
+     * @inheritdoc
+     */
+    async _prepareContext(options, objectPath = 'document') {
+      const context = await super._prepareContext(options);
+      context.config = CONFIG.daggerheart;
+      context.source = this[objectPath];
+      context.fields = this[objectPath].schema.fields;
+      context.systemFields = this[objectPath].system ? this[objectPath].system.schema.fields : {};
+      return context;
+    }
+  }
+
+  return DHSheetV2;
+}

module/applications/sheets/api/base-item.mjs

@@ -0,0 +1,129 @@
+import DHApplicationMixin from "./application-mixin.mjs";
+
+const { ItemSheetV2 } = foundry.applications.sheets;
+
+/**
+ * A base item sheet extending {@link ItemSheetV2} via {@link DHApplicationMixin}
+ * @extends ItemSheetV2
+ * @mixes DHSheetV2
+ */
+export default class DHBaseItemSheet extends DHApplicationMixin(ItemSheetV2) {
+  /** @inheritDoc */
+  static DEFAULT_OPTIONS = {
+    classes: ['item'],
+    position: { width: 600 },
+    form: {
+      submitOnChange: true
+    },
+    actions: {
+      addAction: DHBaseItemSheet.#addAction,
+      editAction: DHBaseItemSheet.#editAction,
+      removeAction: DHBaseItemSheet.#removeAction
+    }
+  };
+
+  /* -------------------------------------------- */
+
+  /** @inheritdoc */
+  static TABS = {
+    primary: {
+      tabs: [
+        { id: 'description' },
+        { id: 'actions' },
+        { id: 'settings' }
+      ],
+      initial: "description",
+      labelPrefix: "DAGGERHEART.Sheets.TABS"
+    }
+  }
+
+  /* -------------------------------------------- */
+  /*  Application Clicks Actions                  */
+  /* -------------------------------------------- */
+
+  /**
+   * Render a dialog prompting the user to select an action type.
+   *
+   * @returns {Promise<object>} An object containing the selected action type.
+   */
+  static async selectActionType() {
+    const content = await foundry.applications.handlebars.renderTemplate(
+      'systems/daggerheart/templates/views/actionType.hbs',
+      { types: SYSTEM.ACTIONS.actionTypes }
+    ),
+      title = 'Select Action Type', //useless var
+      type = 'form',
+      data = {}; //useless var
+    //TODO: use DialogV2
+    return Dialog.prompt({
+      title,
+      label: title,
+      content,
+      type, //this prop is useless
+      callback: html => {
+        const form = html[0].querySelector('form'),
+          fd = new foundry.applications.ux.FormDataExtended(form);
+        foundry.utils.mergeObject(data, fd.object, { inplace: true });
+        // if (!data.name?.trim()) data.name = game.i18n.localize(SYSTEM.ACTIONS.actionTypes[data.type].name);
+        return data;
+      },
+      rejectClose: false
+    });
+  }
+
+  /**
+  * Add a new action to the item, prompting the user for its type.
+  * @param {PointerEvent} _event - The originating click event
+  * @param {HTMLElement} _button - The capturing HTML element which defines the [data-action="addAction"]
+  */
+  static async #addAction(_event, _button) {
+    const actionType = await DHBaseItemSheet.selectActionType(),
+      actionIndexes = this.document.system.actions.map(x => x._id.split('-')[2]).sort((a, b) => a - b);
+    try {
+      const cls = actionsTypes[actionType?.type] ?? actionsTypes.attack,
+        action = new cls(
+          {
+            // id: `${this.document.id}-Action-${actionIndexes.length > 0 ? actionIndexes[0] + 1 : 1}`
+            _id: foundry.utils.randomID(),
+            type: actionType.type,
+            name: game.i18n.localize(SYSTEM.ACTIONS.actionTypes[actionType.type].name),
+            ...cls.getSourceConfig(this.document)
+          },
+          {
+            parent: this.document
+          }
+        );
+      await this.document.update({ 'system.actions': [...this.document.system.actions, action] });
+      await new DHActionConfig(this.document.system.actions[this.document.system.actions.length - 1]).render(
+        true
+      );
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  /**
+    * Edit an existing action on the item
+    * @param {PointerEvent} event - The originating click event
+    * @param {HTMLElement} button - The capturing HTML element which defines the [data-action="editAction"]
+    */
+  static async #editAction(_event, button) {
+    const action = this.document.system.actions[button.dataset.index];
+    await new DHActionConfig(action).render(true);
+  }
+
+  /**
+   * Remove an action from the item.
+   * @param {PointerEvent} event - The originating click event
+   * @param {HTMLElement} button - The capturing HTML element which defines the [data-action="removeAction"]
+   */
+  static async #removeAction(event, button) {
+    event.stopPropagation();
+    await this.document.update({
+      'system.actions': this.document.system.actions.filter(
+        (_, index) => index !== Number.parseInt(button.dataset.index)
+      )
+    });
+  }
+
+}

module/applications/sheets/items/armor.mjs

@@ -1,14 +1,14 @@
-import { armorFeatures } from '../../../config/itemConfig.mjs';
+import DHBaseItemSheet from '../api/base-item.mjs';
 import { tagifyElement } from '../../../helpers/utils.mjs';
-import DHItemSheetV2 from '../item.mjs';
 
-const { ItemSheetV2 } = foundry.applications.sheets;
+export default class ArmorSheet extends DHBaseItemSheet {
-export default class ArmorSheet extends DHItemSheetV2(ItemSheetV2) {
+    /**@inheritdoc */
     static DEFAULT_OPTIONS = {
         classes: ['armor'],
         dragDrop: [{ dragSelector: null, dropSelector: null }]
     };
 
+    /**@override */
     static PARTS = {
         header: { template: 'systems/daggerheart/templates/sheets/items/armor/header.hbs' },
         tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
@@ -23,6 +23,7 @@ export default class ArmorSheet extends DHItemSheetV2(ItemSheetV2) {
         }
     };
 
+    /**@inheritdoc */
     async _preparePartContext(partId, context) {
         super._preparePartContext(partId, context);
 
@@ -35,15 +36,20 @@ export default class ArmorSheet extends DHItemSheetV2(ItemSheetV2) {
         return context;
     }
 
+    /**@inheritdoc */
     _attachPartListeners(partId, htmlElement, options) {
         super._attachPartListeners(partId, htmlElement, options);
 
         const featureInput = htmlElement.querySelector('.features-input');
-        tagifyElement(featureInput, armorFeatures, this.onFeatureSelect.bind(this));
+        tagifyElement(featureInput, CONFIG.daggerheart.ITEM.armorFeatures, ArmorSheet.onFeatureSelect.bind(this));
     }
 
-    async onFeatureSelect(features) {
+    /**
-        await this.document.update({ 'system.features': features.map(x => ({ value: x.value })) });
+     * Callback function used by `tagifyElement`.
-        this.render(true);
+     * @param {Array<Object>} selectedOptions - The currently selected tag objects.
+     */
+    static async onFeatureSelect(selectedOptions ) {
+        await this.document.update({ 'system.features': selectedOptions .map(x => ({ value: x.value })) });
+        this.render({force: false, parts: ["settings"]});
     }
 }

module/applications/sheets/items/class.mjs

@@ -1,15 +1,14 @@
+import DHBaseItemSheet from '../api/base-item.mjs';
 import { actionsTypes } from '../../../data/_module.mjs';
 import { tagifyElement } from '../../../helpers/utils.mjs';
 import DHActionConfig from '../../config/Action.mjs';
-import DaggerheartSheet from '../daggerheart-sheet.mjs';
 
-const { ItemSheetV2 } = foundry.applications.sheets;
 const { TextEditor } = foundry.applications.ux;
 
-export default class ClassSheet extends DaggerheartSheet(ItemSheetV2) {
+export default class ClassSheet extends DHBaseItemSheet {
     static DEFAULT_OPTIONS = {
         tag: 'form',
-        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'class'],
+        classes: ['class'],
         position: { width: 700 },
         actions: {
             removeSubclass: this.removeSubclass,
@@ -23,11 +22,6 @@ export default class ClassSheet extends DaggerheartSheet(ItemSheetV2) {
             removeSecondaryWeapon: this.removeSecondaryWeapon,
             removeArmor: this.removeArmor
         },
-        form: {
-            handler: this.updateForm,
-            submitOnChange: true,
-            closeOnSubmit: false
-        },
         dragDrop: [
             { dragSelector: '.suggested-item', dropSelector: null },
             { dragSelector: null, dropSelector: '.take-section' },
@@ -53,24 +47,17 @@ export default class ClassSheet extends DaggerheartSheet(ItemSheetV2) {
         }
     };
 
+    /** @inheritdoc */
     static TABS = {
-        features: {
+        primary: {
-            active: true,
+            tabs: [
-            cssClass: '',
+                { id: 'description' },
-            group: 'primary',
+                { id: 'settings' },
-            id: 'features',
+            ],
-            icon: null,
+            initial: "description",
-            label: 'DAGGERHEART.Sheets.Class.Tabs.Features'
+            labelPrefix: "DAGGERHEART.Sheets.Feature.Tabs"
-        },
-        settings: {
-            active: false,
-            cssClass: '',
-            group: 'primary',
-            id: 'settings',
-            icon: null,
-            label: 'DAGGERHEART.Sheets.Class.Tabs.settings'
         }
-    };
+    }
 
     _attachPartListeners(partId, htmlElement, options) {
         super._attachPartListeners(partId, htmlElement, options);
@@ -81,17 +68,10 @@ export default class ClassSheet extends DaggerheartSheet(ItemSheetV2) {
 
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
-        context.document = this.document;
-        context.tabs = super._getTabs(this.constructor.TABS);
         context.domains = this.document.system.domains;
-
         return context;
     }
 
-    static async updateForm(event, _, formData) {
-        await this.document.update(formData.object);
-        this.render();
-    }
 
     onAddTag(e) {
         if (e.detail.index === 2) {
@@ -157,9 +137,9 @@ export default class ClassSheet extends DaggerheartSheet(ItemSheetV2) {
 
     async selectActionType() {
         const content = await foundry.applications.handlebars.renderTemplate(
-                'systems/daggerheart/templates/views/actionType.hbs',
+            'systems/daggerheart/templates/views/actionType.hbs',
-                { types: SYSTEM.ACTIONS.actionTypes }
+            { types: SYSTEM.ACTIONS.actionTypes }
-            ),
+        ),
             title = 'Select Action Type',
             type = 'form',
             data = {};

module/applications/sheets/items/consumable.mjs

@@ -1,7 +1,6 @@
-import DHItemSheetV2 from '../item.mjs';
+import DHBaseItemSheet from '../api/base-item.mjs';
 
-const { ItemSheetV2 } = foundry.applications.sheets;
+export default class ConsumableSheet extends DHBaseItemSheet {
-export default class ConsumableSheet extends DHItemSheetV2(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         classes: ['consumable'],
         position: { width: 550 }

module/applications/sheets/items/domainCard.mjs

@@ -1,7 +1,6 @@
-import DHItemSheetV2 from '../item.mjs';
+import DHBaseItemSheet from '../api/base-item.mjs';
 
-const { ItemSheetV2 } = foundry.applications.sheets;
+export default class DomainCardSheet extends DHBaseItemSheet {
-export default class DomainCardSheet extends DHItemSheetV2(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         classes: ['domain-card'],
         position: { width: 450, height: 700 }

module/applications/sheets/items/feature.mjs

@@ -1,17 +1,11 @@
-import DHItemSheetV2 from '../item.mjs';
+import DHBaseItemSheet from '../api/base-item.mjs';
-
-const { ItemSheetV2 } = foundry.applications.sheets;
-export default class FeatureSheet extends DHItemSheetV2(ItemSheetV2) {
-    constructor(options = {}) {
-        super(options);
-
-        this.selectedEffectType = null;
-    }
 
+export default class FeatureSheet extends DHBaseItemSheet {
+    /** @inheritDoc */
     static DEFAULT_OPTIONS = {
         id: 'daggerheart-feature',
         classes: ['feature'],
-        position: { width: 600, height: 600 },
+        position: { height: 600 },
         window: { resizable: true },
         actions: {
             addEffect: this.addEffect,
@@ -19,6 +13,7 @@ export default class FeatureSheet extends DHItemSheetV2(ItemSheetV2) {
         }
     };
 
+    /**@override */
     static PARTS = {
         header: { template: 'systems/daggerheart/templates/sheets/items/feature/header.hbs' },
         tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
@@ -37,58 +32,85 @@ export default class FeatureSheet extends DHItemSheetV2(ItemSheetV2) {
         }
     };
 
+    /**
+     * Internally tracks the selected effect type from the select.
+     * @type {String}
+     * @private
+     */
+    _selectedEffectType;
+
+    /**@override */
     static TABS = {
-        ...super.TABS,
+        primary: {
-        effects: {
+            tabs: [
-            active: false,
+                { id: 'description' },
-            cssClass: '',
+                { id: 'actions' },
-            group: 'primary',
+                { id: 'settings' },
-            id: 'effects',
+                { id: 'effects' }
-            icon: null,
+            ],
-            label: 'DAGGERHEART.Sheets.Feature.Tabs.Effects'
+            initial: "description",
+            labelPrefix: "DAGGERHEART.Sheets.TABS"
         }
     };
 
+    /**@inheritdoc*/
     _attachPartListeners(partId, htmlElement, options) {
         super._attachPartListeners(partId, htmlElement, options);
-        $(htmlElement).find('.effect-select').on('change', this.effectSelect.bind(this));
+        if (partId === "effects")
+            htmlElement.querySelector('.effect-select')?.addEventListener('change', this._effectSelect.bind(this));
     }
 
+
+    /**
+     * Handles selection of a new effect type.
+     * @param {Event} event - Change Event
+     */
+    _effectSelect(event) {
+        const value = event.currentTarget.value;
+        this._selectedEffectType = value;
+        this.render({ parts: ["effects"] });
+    }
+
+    /**@inheritdoc */
     async _prepareContext(_options) {
         const context = await super._prepareContext(_options);
-        context.document = this.document;
+        context.properties = CONFIG.daggerheart.ACTOR.featureProperties;
-        context.tabs = super._getTabs(this.constructor.TABS);
+        context.dice = CONFIG.daggerheart.GENERAL.diceTypes;
-        context.generalConfig = SYSTEM.GENERAL;
+        context.effectConfig = CONFIG.daggerheart.EFFECTS;
-        context.itemConfig = SYSTEM.ITEM;
+
-        context.properties = SYSTEM.ACTOR.featureProperties;
+        context.selectedEffectType = this._selectedEffectType;
-        context.dice = SYSTEM.GENERAL.diceTypes;
-        context.selectedEffectType = this.selectedEffectType;
-        context.effectConfig = SYSTEM.EFFECTS;
 
         return context;
     }
 
-    effectSelect(event) {
-        this.selectedEffectType = event.currentTarget.value;
-        this.render(true);
-    }
 
-    static async addEffect() {
+    /**
-        if (!this.selectedEffectType) return;
+     * Adds a new effect to the item, based on the selected effect type.
-
+     * @param {PointerEvent} _event - The originating click event
-        const { id, name, ...rest } = SYSTEM.EFFECTS.effectTypes[this.selectedEffectType];
+     * @param {HTMLElement} _target - The capturing HTML element which defines the [data-action]
-        const update = {
+     * @returns 
-            [foundry.utils.randomID()]: {
+     */
-                type: this.selectedEffectType,
+    static async addEffect(_event, _target) {
+        const type = this._selectedEffectType;
+        if (!type) return;
+        const { id, name, ...rest } = CONFIG.daggerheart.EFFECTS.effectTypes[type];
+        await this.item.update({
+            [`system.effects.${foundry.utils.randomID()}`]: {
+                type,
                 value: '',
                 ...rest
             }
-        };
+        });
-        await this.item.update({ 'system.effects': update });
     }
 
-    static async removeEffect(_, button) {
+    /**
-        const path = `system.effects.-=${button.dataset.effect}`;
+     * Removes an effect from the item.
+     * @param {PointerEvent} _event - The originating click event
+     * @param {HTMLElement} target - The capturing HTML element which defines the [data-action]
+     * @returns 
+     */
+    static async removeEffect(_event, target) {
+        const path = `system.effects.-=${target.dataset.effect}`;
         await this.item.update({ [path]: null });
     }
 }

module/applications/sheets/items/miscellaneous.mjs

@@ -1,7 +1,6 @@
-import DHItemSheetV2 from '../item.mjs';
+import DHBaseItemSheet from '../api/base-item.mjs';
 
-const { ItemSheetV2 } = foundry.applications.sheets;
+export default class MiscellaneousSheet extends DHBaseItemSheet {
-export default class MiscellaneousSheet extends DHItemSheetV2(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
         classes: ['miscellaneous'],
         position: { width: 550 }

module/applications/sheets/items/subclass.mjs

@@ -1,12 +1,10 @@
+import DHBaseItemSheet from '../api/base-item.mjs';
 import { actionsTypes } from '../../../data/_module.mjs';
 import DHActionConfig from '../../config/Action.mjs';
-import DhpApplicationMixin from '../daggerheart-sheet.mjs';
 
-const { ItemSheetV2 } = foundry.applications.sheets;
+export default class SubclassSheet extends DHBaseItemSheet {
-export default class SubclassSheet extends DhpApplicationMixin(ItemSheetV2) {
     static DEFAULT_OPTIONS = {
-        tag: 'form',
+        classes: ['subclass'],
-        classes: ['daggerheart', 'sheet', 'item', 'dh-style', 'subclass'],
         position: { width: 600 },
         window: { resizable: false },
         actions: {
@@ -14,11 +12,6 @@ export default class SubclassSheet extends DhpApplicationMixin(ItemSheetV2) {
             editFeature: this.editFeature,
             deleteFeature: this.deleteFeature
         },
-        form: {
-            handler: this.updateForm,
-            submitOnChange: true,
-            closeOnSubmit: false
-        }
     };
 
     static PARTS = {
@@ -35,45 +28,17 @@ export default class SubclassSheet extends DhpApplicationMixin(ItemSheetV2) {
         }
     };
 
+    /** @inheritdoc */
     static TABS = {
-        description: {
+        primary: {
-            active: true,
+            tabs: [
-            cssClass: '',
+                { id: 'description' },
-            group: 'primary',
+                { id: 'features' },
-            id: 'description',
+                { id: 'settings' }
-            icon: null,
+            ],
-            label: 'DAGGERHEART.Sheets.Feature.Tabs.Description'
+            initial: "description",
-        },
+            labelPrefix: "DAGGERHEART.Sheets.TABS"
-        features: {
-            active: false,
-            cssClass: '',
-            group: 'primary',
-            id: 'features',
-            icon: null,
-            label: 'DAGGERHEART.Sheets.Feature.Tabs.Features'
-        },
-        settings: {
-            active: false,
-            cssClass: '',
-            group: 'primary',
-            id: 'settings',
-            icon: null,
-            label: 'DAGGERHEART.Sheets.Feature.Tabs.Settings'
         }
-    };
-
-    async _prepareContext(_options) {
-        const context = await super._prepareContext(_options);
-        context.document = this.document;
-        context.config = CONFIG.daggerheart;
-        context.tabs = super._getTabs(this.constructor.TABS);
-
-        return context;
-    }
-
-    static async updateForm(event, _, formData) {
-        await this.document.update(formData.object);
-        this.render();
     }
 
     static addFeature(_, target) {
@@ -93,9 +58,9 @@ export default class SubclassSheet extends DhpApplicationMixin(ItemSheetV2) {
 
     async #selectActionType() {
         const content = await foundry.applications.handlebars.renderTemplate(
-                'systems/daggerheart/templates/views/actionType.hbs',
+            'systems/daggerheart/templates/views/actionType.hbs',
-                { types: SYSTEM.ACTIONS.actionTypes }
+            { types: SYSTEM.ACTIONS.actionTypes }
-            ),
+        ),
             title = 'Select Action Type',
             type = 'form',
             data = {};

module/applications/sheets/items/weapon.mjs

@@ -1,13 +1,14 @@
+import DHBaseItemSheet from '../api/base-item.mjs';
 import { weaponFeatures } from '../../../config/itemConfig.mjs';
 import { tagifyElement } from '../../../helpers/utils.mjs';
-import DHItemSheetV2 from '../item.mjs';
 
-const { ItemSheetV2 } = foundry.applications.sheets;
+export default class WeaponSheet extends DHBaseItemSheet {
-export default class WeaponSheet extends DHItemSheetV2(ItemSheetV2) {
+    /**@inheritdoc */
     static DEFAULT_OPTIONS = {
         classes: ['weapon']
     };
 
+    /**@override */
     static PARTS = {
         header: { template: 'systems/daggerheart/templates/sheets/items/weapon/header.hbs' },
         tabs: { template: 'systems/daggerheart/templates/sheets/global/tabs/tab-navigation.hbs' },
@@ -22,6 +23,7 @@ export default class WeaponSheet extends DHItemSheetV2(ItemSheetV2) {
         }
     };
 
+    /**@inheritdoc */
     async _preparePartContext(partId, context) {
         super._preparePartContext(partId, context);
 
@@ -34,15 +36,20 @@ export default class WeaponSheet extends DHItemSheetV2(ItemSheetV2) {
         return context;
     }
 
+    /**@inheritdoc */
     _attachPartListeners(partId, htmlElement, options) {
         super._attachPartListeners(partId, htmlElement, options);
 
         const featureInput = htmlElement.querySelector('.features-input');
-        tagifyElement(featureInput, weaponFeatures, this.onFeatureSelect.bind(this));
+        tagifyElement(featureInput, weaponFeatures, WeaponSheet.onFeatureSelect.bind(this));
     }
 
-    async onFeatureSelect(features) {
+    /**
-        await this.document.update({ 'system.features': features.map(x => ({ value: x.value })) });
+     * Callback function used by `tagifyElement`.
-        this.render(true);
+     * @param {Array<Object>} selectedOptions - The currently selected tag objects.
+     */
+    static async onFeatureSelect(selectedOptions) {
+        await this.document.update({ 'system.features': selectedOptions.map(x => ({ value: x.value })) });
+        this.render({ force: false, parts: ["settings"] });
     }
 }

templates/sheets/items/feature/effects.hbs

@@ -8,15 +8,15 @@
         <span>{{localize "DAGGERHEART.Sheets.Feature.effects.addEffect"}}</span>
         <div class="nest-inputs">
             <select class="effect-select">
-                {{selectOptions this.effectConfig.effectTypes selected=this.selectedEffectType labelAttr="name" localize=true blank=""}} 
+                {{selectOptions effectConfig.effectTypes selected=selectedEffectType labelAttr="name" localize=true blank=""}} 
             </select>
-            <a>
+            <a data-action="addEffect" {{disabled (not selectedEffectType)}}>
-                <i class="fa-solid fa-plus icon-button {{#if (not this.selectedEffectType)}}disabled{{/if}}" data-action="addEffect"></i>
+                <i class="fa-solid fa-plus icon-button {{disabled (not selectedEffectType)}}"></i>
             </a>
         </div>
     </fieldset>
 
-    {{#each this.document.system.effects as |effect key|}}
+    {{#each document.system.effects as |effect key|}}
         <fieldset class="two-columns">
             <legend>
                 {{localize (concat 'DAGGERHEART.Effects.Types.' effect.type '.Name')}}
@@ -32,8 +32,8 @@
                     {{selectOptions effect.applyLocationChoices selected=effect.appliesOn localize=true}}
                 </select>
             {{/if}}
-            {{#if (eq effect.valueType ../this.effectConfig.valueTypes.numberString.id)}}
+            {{#if (eq effect.valueType @root.effectConfig.valueTypes.numberString.id)}}
-                {{#if (eq effect.type ../this.effectConfig.effectTypes.damage.id) }}
+                {{#if (eq effect.type @root.effectConfig.effectTypes.damage.id) }}
                     <span>{{localize "DAGGERHEART.Sheets.Feature.effects.value"}}</span>
                     <input type="text" name="system.effects.{{key}}.valueData.value" value="{{effect.valueData.value}}" />
 
@@ -47,7 +47,7 @@
                     <input type="text" name="system.effects.{{key}}.valueData.value" value="{{effect.valueData.value}}" />
                 {{/if}}
             {{/if}}
-            {{#if (eq effect.valueType ../this.effectConfig.valueTypes.select.id)}}
+            {{#if (eq effect.valueType @root.effectConfig.valueTypes.select.id)}}
                 <span>
                     {{localize effect.valueData.fromValue}}
                 </span>

templates/sheets/items/feature/settings.hbs

@@ -22,13 +22,13 @@
         <legend>{{localize "DAGGERHEART.Sheets.Feature.ValueType.Title"}}</legend>
         <span>{{localize "DAGGERHEART.Sheets.Feature.ValueType.Title"}}</span>
         <select name="system.featureType.type">
-            {{selectOptions this.itemConfig.valueTypes selected=document.system.featureType.type labelAttr="name" localize=true}}
+            {{selectOptions itemConfig.valueTypes selected=document.system.featureType.type labelAttr="name" localize=true}}
         </select>
 
         {{#if (eq document.system.featureType.type "dice")}}
             <span>{{localize "DAGGERHEART.Sheets.Feature.ValueType.Dice"}}</span>
             <select name="system.featureType.data.value">
-                {{selectOptions this.dice selected=document.system.featureType.data.value }}
+                {{selectOptions dice selected=document.system.featureType.data.value }}
             </select>
 
             <span>{{localize "DAGGERHEART.Feature.Max"}}</span>
@@ -36,7 +36,7 @@
 
             <span>{{localize "DAGGERHEART.Sheets.Feature.ValueType.Property"}}</span>
             <select name="system.featureType.data.property">
-                {{selectOptions this.properties selected=document.system.featureType.data.property labelAttr="name" localize=true}}
+                {{selectOptions properties selected=document.system.featureType.data.property labelAttr="name" localize=true}}
             </select>
         {{/if}}
     </fieldset>