Merge branch 'equip-items-in-character-sheet' into 'master'

make equip icon for items clickable in item list in character sheet

See merge request dungeonslayers/ds4!14

src/module/actor/actor-sheet.ts

@@ -62,6 +62,8 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
             li.slideUp(200, () => this.render(false));
         });
 
+        html.find(".item-change").on("change", this._onItemChange.bind(this));
+
         // Rollable abilities.
         html.find(".rollable").click(this._onRoll.bind(this));
     }
@@ -70,7 +72,7 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
 
     /**
      * Handle creating a new Owned Item for the actor using initial data defined in the HTML dataset
-     * @param {Event} event   The originating click event
+     * @param {JQuery.ClickEvent} event   The originating click event
      * @private
      */
     private _onItemCreate(event: JQuery.ClickEvent): Promise<Item> {
@@ -95,9 +97,93 @@ export class DS4ActorSheet extends ActorSheet<DS4ActorDataType, DS4Actor, DS4Ite
         return this.actor.createOwnedItem(itemData);
     }
 
+    /**
+     * Handle changes to properties of an Owned Item from within character sheet.
+     * Can currently properly bind: see getValue().
+     * Assumes the item property is given as the value of the HTML element property 'data-property'.
+     * @param {JQuery.ChangeEvent<HTMLFormElement>} ev    The originating change event
+     * @private
+     */
+    private _onItemChange(ev: JQuery.ChangeEvent<HTMLFormElement>): void {
+        ev.preventDefault();
+        console.log("Current target:", $(ev.currentTarget).get(0)["name"]);
+        const el: HTMLFormElement = $(ev.currentTarget).get(0);
+        const id = $(ev.currentTarget).parents(".item").data("itemId");
+        const item = duplicate(this.actor.getOwnedItem(id)); // getOwnedItem is typed incorrectly, it actually returns a ItemData<DS4ItemDataType>, not an Item
+        const property: string | undefined = $(ev.currentTarget).data("property");
+
+        // Early return:
+        // Disabled => do nothing
+        if (el.disabled || el.getAttribute("disabled")) return;
+        // name not given => raise
+        if (property === undefined) {
+            throw TypeError("HTML element does not provide 'data-property' attribute");
+        }
+
+        // Set new value
+        const newValue = this.getValue(el);
+        setProperty(item, property, newValue);
+        this.actor.updateOwnedItem(item);
+    }
+
+    /**
+     * Collect the value of a form element depending on the element's type
+     * The value is parsed to:
+     * - Checkbox: boolean
+     * - Text input: string
+     * - Number: number
+     * @param el the input element to collect the value of
+     */
+    private getValue(el: HTMLFormElement): boolean | string | number {
+        // One needs to differentiate between e.g. checkboxes (value="on") and select boxes etc.
+        // Checkbox:
+        if (el.type === "checkbox") {
+            const value: boolean = el.checked;
+            return value;
+        }
+
+        // Text input:
+        else if (el.type === "text") {
+            const value: string = el.value;
+            return value;
+        }
+
+        // Numbers:
+        else if (el.type === "number") {
+            const value = Number(el.value.trim());
+            return value;
+        }
+
+        // // Ranges:
+        // else if (el.type === "range") {
+        //     const value: string = el.value.trim();
+        //     return value;
+        // }
+
+        // // Radio Checkboxes (untested, cf. FormDataExtended.process)
+        // else if (el.type === "radio") {
+        //     const chosen: HTMLFormElement = el.find((r: HTMLFormElement) => r["checked"]);
+        //     const value: string = chosen ? chosen.value : null;
+        //     return value;
+        // }
+
+        // // Multi-Select (untested, cf. FormDataExtended.process)
+        // else if (el.type === "select-multiple") {
+        //     const value: Array<string> = [];
+        //     el.options.array.forEach((opt: HTMLOptionElement) => {
+        //         if (opt.selected) value.push(opt.value);
+        //     });
+        //    return value;
+
+        // unsupported:
+        else {
+            throw TypeError("Binding of item property to this type of HTML element not supported; given: " + el);
+        }
+    }
+
     /**
      * Handle clickable rolls.
-     * @param {Event} event   The originating click event
+     * @param {JQuery.ClickEvent} event   The originating click event
      * @private
      */
     private _onRoll(event: JQuery.ClickEvent): void {

src/scss/components/_items.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .items-list {
     list-style: none;
     margin: 7px 0;
@@ -16,13 +18,26 @@
 
         .item-image {
             flex: 0 0 24px;
-            margin-right: 5px;
+            height: 100%;
+            //margin-right: 5px;
+            @include centered-content;
         }
 
         img {
             display: block;
             border: none;
         }
+
+        input {
+            border: 0;
+            padding: 0;
+        }
+
+        input[type="checkbox"] {
+            width: auto;
+            height: 100%;
+            margin: 0px;
+        }
     }
 
     .item-name {
@@ -36,6 +51,11 @@
 
     .item-num-val {
         text-align: center;
+        width: 2.5em;
+        padding: 0;
+    }
+    .item-num-val:invalid {
+        background-color: color.mix(lightcoral, $c-light-grey, 25%);
     }
 
     .item-description {
@@ -43,6 +63,7 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        height: 100%;
         p {
             text-overflow: ellipsis;
             overflow: hidden;

src/templates/actor/partials/items-overview.hbs

@@ -12,7 +12,7 @@
 --}}
 {{#*inline "addItemButton"}}
     <div class="item-controls">
-        <a class="item-control item-create" title="Create item" data-type="{{dataType}}" {{!-- SPECIFIC --}}>
+        <a class="item-control item-create" title="Create item" data-type="{{dataType}}">
             <i class="fas fa-plus"></i>
             {{localize 'DS4.UserInteractionAddItem'}}</a>
     </div>
@@ -44,14 +44,14 @@
     <li class="item flexrow item-header">
         {{!-- equipped --}}
         {{#if (ne dataType 'equipment')}}
-            <div title="{{localize 'DS4.ItemEquipped'}}" class="flex05">E</div>
+            <div class="flex05" title="{{localize 'DS4.ItemEquipped'}}">E</div>
         {{/if}}
         {{!-- image --}}
-        <div class="item-image" class="flex05"></div>
+        <div class="flex05 item-image"></div>
         {{!-- amount --}}
-        <div class="item-num-val" title="{{localize 'DS4.Quantity'}}" class="flex05">#</div>
+        <div class="flex05 item-num-val" title="{{localize 'DS4.Quantity'}}">#</div>
         {{!-- name --}}
-        <div class="item-name flex3">{{localize 'DS4.ItemName'}}</div>
+        <div class="flex3 item-name">{{localize 'DS4.ItemName'}}</div>
         {{!-- item type specifics --}}
         {{> @partial-block }}
         {{!-- description --}}
@@ -76,20 +76,19 @@
     <li class="item flexrow" data-item-id="{{item._id}}">
         {{!-- equipped --}}
         {{#if (ne item.data.data.equipped undefined)}}
-            {{#if item.data.data.equipped}}<i class="fas fa-check-square flex05"></i>
+            <input class="flex05 item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
-            {{else}}<i class="far fa-square flex05"></i>
+                data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
-            {{/if}}
         {{/if}}
-        <div class="flexrow flexnowrap flex15">
+        {{!-- image --}}
-            {{!-- image --}}
+        <div class="flex05 item-image">
-            <div class="item-image">
+            <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-                <img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
-            </div>
-            {{!-- amount --}}
-            <div class="item-num-val">{{item.data.data.quantity}}</div>
         </div>
+        {{!-- amount --}}
+        <input class="flex05 item-num-val item-change" type="number" min="0" step="1" value="{{item.data.data.quantity}}" data-dtype="Number"
+            data-property="data.quantity" title="{{localize 'DS4.Quantity'}}">
         {{!-- name --}}
-        <h4 class="item-name flex3">{{item.name}}</h4>
+        <input class="flex3 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
+            data-property="name" title="{{localize 'DS4.ItemName'}}">
         {{!-- item type specifics --}}
         {{> @partial-block}}
         {{!-- description --}}
@@ -109,22 +108,22 @@
     <h4 class="items-list-title">{{localize 'DS4.ItemTypeWeapon'}}</h4>
     <ol class="items-list">
         {{#> itemListHeader dataType='weapon'}}
-            <div title="{{localize 'DS4.AttackType'}}" class="flex05">{{localize 'DS4.AttackTypeAbbr'}}</div>
+            <div class="flex05 item-image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
-            <div class="item-num-val flex05" title="{{localize 'DS4.WeaponBonus'}}">
+            <div class="flex05 item-num-val" title="{{localize 'DS4.WeaponBonus'}}">
                 {{localize 'DS4.WeaponBonusAbbr'}}
             </div>
-            <div class="item-num-val flex05" title="{{localize 'DS4.OpponentDefense'}}">
+            <div class="flex05 item-num-val" title="{{localize 'DS4.OpponentDefense'}}">
                 {{localize 'DS4.OpponentDefenseAbbr'}}
             </div>
         {{/itemListHeader}}
         {{#each itemsByType.weapon as |item id|}}
             {{#> itemListEntry item=item}}
-                <div class="flex05">
+                <div class="flex05 item-image">
                     <img src="{{lookup ../../config.attackTypesIcons  item.data.data.attackType}}"
                         title="{{lookup ../../config.attackTypes  item.data.data.attackType}}" width="24" height="24" />
                 </div>
-                <div class="item-num-val flex05">{{ item.data.data.weaponBonus}}</div>
+                <div class="flex05 item-num-val">{{ item.data.data.weaponBonus}}</div>
-                <div class="item-num-val flex05">{{ item.data.data.opponentDefense}}</div>
+                <div class="flex05 item-num-val">{{ item.data.data.opponentDefense}}</div>
             {{/itemListEntry}}
         {{/each}}
     </ol>
@@ -176,7 +175,8 @@
         {{/itemListHeader}}
         {{#each itemsByType.trinket as |item id|}}
             {{#> itemListEntry item=item }}
-                <div class="flex2">{{{item.data.data.storageLocation}}}</div>
+                <input class="flex2 item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
+                    data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
             {{/itemListEntry}}
         {{/each}}
     </ol>
@@ -189,7 +189,8 @@
         {{/itemListHeader}}
         {{#each itemsByType.equipment as |item id|}}
             {{#> itemListEntry item=item }}
-                <div class="flex2">{{{item.data.data.storageLocation}}}</div>
+                <input class="flex2 item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
+                    data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
             {{/itemListEntry}}
         {{/each}}
     </ol>

src/templates/item/partials/description.hbs

@@ -13,7 +13,7 @@
         </div>
         <div class="side-property">
             <label for="data.quantity">{{localize 'DS4.Quantity'}}</label>
-            <input type="number" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
+            <input type="number" min="0" step="1" data-dtype="Number" name="data.quantity" value="{{data.quantity}}" />
         </div>
         <div class="side-property">
             <label for="data.storageLocation">{{localize 'DS4.StorageLocation'}}</label>

src/templates/item/partials/details.hbs

@@ -4,7 +4,7 @@
     <div class="side-properties">
         <div class="side-property">
                 <label for="data.price">{{localize "DS4.PriceGold"}}</label>
-                <input type="number" data-dtype="Number" name="data.price" value="{{data.price}}" />
+                <input type="number" min="0" data-dtype="Number" name="data.price" value="{{data.price}}" />
             </div>
             <div class="side-property">
                 <label for="data.availability">{{localize "DS4.ItemAvailability"}}</label>