Refactor and fixes for the Party Sheet

src/module/dialog/party-sheet.js

@@ -8,6 +8,8 @@ export class OsePartySheet extends FormApplication {
       width: 280,
       height: 400,
       resizable: true,
+      dragDrop: [{ dragSelector: ".actor-list .actor", dropSelector: ".party-members" }],
+      closeOnSubmit: false
     });
   }
 
@@ -28,10 +30,18 @@ export class OsePartySheet extends FormApplication {
    * @return {Object}
    */
   getData() {
+    const actors = this.object.documents.filter(
+      (e) =>
+        e.data.type === "character" &&
+        e.data.flags.ose &&
+        e.data.flags.ose.party === true
+    );
     const settings = {
       ascending: game.settings.get("ose", "ascendingAC"),
     };
+
     let data = {
+      partyActors: actors,
       data: this.object,
       config: CONFIG.OSE,
       user: game.user,
@@ -40,83 +50,105 @@ export class OsePartySheet extends FormApplication {
     return data;
   }
 
+  async _addActorToParty(actor) {
+    await actor.setFlag("ose", "party", true);
+  }
+
+  async _removeActorFromParty(actor) {
+    await actor.setFlag("ose", "party", false);
+  }
+
+  /* ---------------------- */
+  /* --Drag&Drop Behavior-- */
+  /* ---------------------- */
+
+  /* - Adding to the Party Sheet -*/
   _onDrop(event) {
     event.preventDefault();
+
     // WIP Drop Items
     let data;
     try {
       data = JSON.parse(event.dataTransfer.getData("text/plain"));
-      if (data.type !== "Item") return;
+
+      switch (data.type) {
+        case "Actor":
+          return this._onDropActor(event, data);
+        case "Folder":
+          return this._onDropFolder(event, data);
+      }
     } catch (err) {
       return false;
     }
   }
+
+  _onDropActor(event, data) {
+    const actors = this.object.documents;
+    let droppedActor = actors.find(actor => actor.id === data.id);
+
+    this._addActorToParty(droppedActor);
+  }
+
+  _onDropFolder(event, data) {
+    const folder = game.folders.get(data.id);
+    if (!folder) return;
+
+    switch (data.documentName) {
+      case "Actor":
+        folder.content.forEach(actor => this._addActorToParty(actor));
+        break;
+    }
+  }
+
+  /* - Dragging from the Party Sheet - */
+  _onDragStart(event) {
+    try {
+      const actorId = event.currentTarget.dataset.actorId;
+
+      const dragData = {
+        id: actorId,
+        type: "Actor"
+      };
+
+      // Set data transfer
+      event.dataTransfer.setData("text/plain", JSON.stringify(dragData));
+    } catch (error) {
+      return false;
+    }
+
+    return true;
+  }
+
   /* -------------------------------------------- */
 
   async _dealXP(ev) {
     new OsePartyXP(this.object, {}).render(true);
   }
 
-  async _selectActors(ev) {
-    const actorDocuments = this.object.documents.sort(
-      (a, b) => b.data.token.disposition - a.data.token.disposition
-    );
-    const template = "systems/ose/dist/templates/apps/party-select.html";
-    const templateData = {
-      actors: actorDocuments,
-    };
-    const content = await renderTemplate(template, templateData);
-    new Dialog(
-      {
-        title: game.i18n.localize("OSE.dialog.partyselect"),
-        content: content,
-        buttons: {
-          set: {
-            icon: '<i class="fas fa-save"></i>',
-            label: game.i18n.localize("OSE.Update"),
-            callback: async (html) => {
-              let checks = html.find("input[data-action='select-actor']");
-              await Promise.all(
-                checks.map(async (_, c) => {
-                  let key = c.getAttribute("name");
-                  await this.object.documents[key].setFlag(
-                    "ose",
-                    "party",
-                    c.checked
-                  );
-                })
-              );
-              this.render(true);
-            },
-          },
-        },
-      },
-      {
-        height: "auto",
-        width: 260,
-        classes: ["ose", "dialog", "party-select"],
-      }
-    ).render(true);
-  }
-
   /** @override */
   activateListeners(html) {
     super.activateListeners(html);
-    html
-      .find(".item-controls .item-control .select-actors")
-      .click(this._selectActors.bind(this));
 
     html
-      .find(".item-controls .item-control .deal-xp")
+      .find(".header #deal-xp")
       .click(this._dealXP.bind(this));
 
-    html.find("a.resync").click(() => this.render(true));
+    // Actor buttons
+    const getActor = (event) => {
+      const id = event.currentTarget.closest(".actor").dataset.actorId;
+      return game.actors.get(id)
+    };
 
-    html.find(".field-img button[data-action='open-sheet']").click((ev) => {
-      let actorId =
-        ev.currentTarget.parentElement.parentElement.parentElement.dataset
-          .actorId;
-      game.actors.get(actorId).sheet.render(true);
-    });
+    html
+      .find(".field-img button[data-action='open-sheet']")
+      .click((event) => {
+        getActor(event).sheet.render(true);
+      });
+
+    html
+      .find(".field-img button[data-action='remove-actor']")
+      .click(async (event) => {
+        await this._removeActorFromParty(getActor(event));
+      });
   }
 }

src/module/dialog/party-xp.js

@@ -6,6 +6,7 @@ export class OsePartyXP extends FormApplication {
       width: 300,
       height: "auto",
       resizable: false,
+      closeOnSubmit: true
     });
   }
 
@@ -55,6 +56,10 @@ export class OsePartyXP extends FormApplication {
   }
   /* -------------------------------------------- */
 
+  _updateObject(event, formData) {
+    this._dealXP(event);
+  }
+
   _calculateShare(ev) {
     const actors = this.object.documents.filter(
       (e) =>
@@ -88,12 +93,12 @@ export class OsePartyXP extends FormApplication {
     });
   }
 
-  /** @override */
   activateListeners(html) {
     super.activateListeners(html);
-    html
-      .find('button[data-action="calculate-share"')
-      .click(this._calculateShare.bind(this));
-    html.find('button[data-action="deal-xp"').click(this._dealXP.bind(this));
+
+    const totalField = html.find('input[name="total"]');
+    totalField.on("input", this._calculateShare.bind(this));
+
+    html.find('button[data-action="deal-xp"').click(event => { super.submit(event) });
   }
 }

src/module/party.js

@@ -4,24 +4,28 @@ export const addControl = (object, html) => {
     let control = `<button class='ose-party-sheet' type="button" title='${game.i18n.localize('OSE.dialog.partysheet')}'><i class='fas fa-users'></i></button>`;
     html.find(".fas.fa-search").replaceWith($(control))
     html.find('.ose-party-sheet').click(ev => {
-        showPartySheet(object);
+        showPartySheet(ev, object);
     })
 }
 
-export const showPartySheet = (object) => {
+export const showPartySheet = (event, object) => {
     event.preventDefault();
     new OsePartySheet(object, {
-      top: window.screen.height / 2 - 180,
-      left:window.screen.width / 2 - 140,
+        top: window.screen.height / 2 - 180,
+        left: window.screen.width / 2 - 140,
     }).render(true);
 }
 
 export const update = (actor, data) => {
-    if (actor.getFlag('ose', 'party')) {
-        Object.values(ui.windows).forEach(w => {
-            if (w instanceof OsePartySheet) {
-                w.render(true);
-            }
-        })
+    const partyFlag = actor.getFlag('ose', 'party');
+
+    if (partyFlag === null) {
+        return;
+    }
+
+    const partySheetUI = Object.values(ui.windows).find(win => { return win instanceof OsePartySheet });
+
+    if (partySheetUI) {
+        partySheetUI.render();
     }
 }

src/scss/apps.scss

@@ -64,53 +64,37 @@
   }
 }
 
-.ose.dialog.party-select {
-  .actor-list {
-    padding: 0 4px 0;
-    max-height: 250px;
-    overflow: auto;
-    .actor {
-      label {
-        height: 28px;
-        overflow: hidden;
-      }
-      .form-fields {
-        flex: 0 20px;
-      }
-      &.disposition-1 label {
-        font-weight: 600;
-      }
-      &.disposition--1 label {
-        font-style: italic;
-      }
-    }
-  }
-}
-
 .ose.dialog.party-sheet {
   min-width: 250px;
   min-height: 250px;
   .window-content {
     padding: 0;
   }
+  #party-sheet{
+    display: flex;
+    flex-direction: column;
+  }
   .header {
     color: whitesmoke;
     background: $darkBackground;
     padding: 4px 0;
     line-height: 20px;
     text-align: left;
     padding: 2px 10px;
-    .item-controls {
-      .item-control {
-        padding: 0 2px;
-        button {
-          line-height: 15px;
-          margin: 0 1px;
-          background: rgba(255, 255, 240, 0.8);
-          border: 1px solid #b5b3a4;
-        }
-      }
+    .item-control {
+      padding: 0 2px;
     }
+    button {
+      max-width: 25%;
+      line-height: 15px;
+      margin: 0 1px;
+      background: rgba(255, 255, 240, 0.8);
+      border: 1px solid #b5b3a4;
+    }
+  }
+  .body {
+    width: 100%;
+    flex-grow: 1;
   }
   .actor-list {
     margin: 0;