Allow editing effects from effect panel tooltip (foundryvtt#10177)

nikolaj-a · Sep 20, 2023 · c062184 · c062184
1 parent 10630ae
commit c062184
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 18 deletions.
diff --git a/src/module/apps/effects-panel.ts b/src/module/apps/effects-panel.ts
@@ -4,6 +4,7 @@ import { ActorPF2e } from "@actor";
 import { InlineRollLinks } from "@scripts/ui/inline-roll-links.ts";
 import { htmlQuery, htmlQueryAll } from "@util";
 import type { TokenDocumentPF2e } from "@scene/token-document/document.ts";
+import { PersistentDialog } from "@item/condition/persistent-damage-dialog.ts";
 
 export class EffectsPanel extends Application {
  private get token(): TokenDocumentPF2e | null {
@@ -95,15 +96,15 @@ export class EffectsPanel extends Application {
  InlineRollLinks.listen(html, this.actor);
 
  for (const effectEl of htmlQueryAll(html, ".effect-item[data-item-id]")) {
- const itemId = effectEl.dataset.itemId;
- if (!itemId) continue;
+ const { actor } = this;
+ const itemId = effectEl.dataset.itemId ?? "";
+ const effect = actor?.conditions.get(itemId) ?? actor?.items.get(itemId);
+ if (!actor || !effect) continue;
 
  const iconElem = effectEl.querySelector(":scope > .icon");
  // Increase or render persistent-damage dialog on left click
  iconElem?.addEventListener("click", async () => {
- const { actor } = this;
- const effect = actor?.items.get(itemId);
- if (actor && effect?.isOfType("condition") && effect.slug === "persistent-damage") {
+ if (actor && effect.isOfType("condition") && effect.slug === "persistent-damage") {
  await effect.onEndTurn({ token: this.token });
  } else if (effect instanceof AbstractEffectPF2e) {
  await effect.increase();
@@ -112,8 +113,6 @@ export class EffectsPanel extends Application {
 
  // Remove effect or decrease its badge value on right-click
  iconElem?.addEventListener("contextmenu", async () => {
- const { actor } = this;
- const effect = actor?.items.get(itemId);
  if (effect instanceof AbstractEffectPF2e) {
  await effect.decrease();
  } else {
@@ -123,17 +122,22 @@ export class EffectsPanel extends Application {
  });
 
  effectEl.querySelector("[data-action=recover-persistent-damage]")?.addEventListener("click", () => {
- const item = this.actor?.items.get(itemId);
- if (item?.isOfType("condition")) {
- item.rollRecovery();
+ if (effect.isOfType("condition")) {
+ effect.rollRecovery();
+ }
+ });
+
+ effectEl.querySelector("[data-action=edit]")?.addEventListener("click", () => {
+ if (effect.isOfType("condition") && effect.slug === "persistent-damage") {
+ new PersistentDialog(actor, { editing: effect.id }).render(true);
+ } else {
+ effect.sheet.render(true);
  }
  });
 
  // Send effect to chat
  effectEl.querySelector("[data-action=send-to-chat]")?.addEventListener("click", () => {
- const { actor } = this;
- const effect = actor?.conditions.get(itemId) ?? actor?.items.get(itemId);
- effect?.toMessage();
+ effect.toMessage();
  });
 
  // Uses a scale transform to fit the text within the box

diff --git a/src/module/item/condition/persistent-damage-dialog.ts b/src/module/item/condition/persistent-damage-dialog.ts
@@ -6,8 +6,8 @@ import { DAMAGE_TYPE_ICONS } from "@system/damage/values.ts";
 import { htmlClosest, htmlQuery, htmlQueryAll, pick, sortBy } from "@util";
 import { PersistentDamagePF2e } from "./document.ts";
 
-class PersistentDamageDialog extends Application {
- constructor(private actor: ActorPF2e, options: Partial<ApplicationOptions> = {}) {
+class PersistentDamageDialog extends Application<PersistentDamageDialogOptions> {
+ constructor(private actor: ActorPF2e, options: Partial<PersistentDamageDialogOptions> = {}) {
  super(options);
  actor.apps[this.appId] = this;
  }
@@ -132,12 +132,18 @@ class PersistentDamageDialog extends Application {
  /** Overriden to autofocus on first render behavior */
  protected override _injectHTML($html: JQuery<HTMLElement>): void {
  super._injectHTML($html);
+ const html = $html[0];
 
- // Since this is an initial render, focus the roll button
- htmlQuery($html[0], ".new .formula")?.focus();
+ // Since this is an initial render, focus the formula
+ const existing = this.options.editing ? htmlQuery(html, `[data-id=${this.options.editing}] .formula`) : null;
+ (existing ?? htmlQuery(html, ".new .formula"))?.focus();
  }
 }
 
+interface PersistentDamageDialogOptions extends ApplicationOptions {
+ editing?: string;
+}
+
 interface PersistentDialogData {
  existing: DamageEntryData[];
  damageTypes: DamageTypeData[];

diff --git a/src/styles/system/_effects-panel.scss b/src/styles/system/_effects-panel.scss
@@ -50,6 +50,7 @@
  h1 {
  @include p-reset;
  border: none;
+ display: flex;
  font-size: var(--font-size-14);
  padding-top: 0.25em;
  text-align: right;

diff --git a/static/templates/system/effects-panel.hbs b/static/templates/system/effects-panel.hbs
@@ -22,7 +22,10 @@
  <div class="effect-info">
  <h1>
  {{effect.name}}
- <a data-action="send-to-chat" title="{{localize "PF2E.NPC.SendToChat"}}"><i class="fa-solid fa-comment-alt" ></i></a>
+ <a data-action="send-to-chat" data-tooltip="{{localize "PF2E.NPC.SendToChat"}}"><i class="fa-solid fa-fw fa-comment-alt" ></i></a>
+ {{#if (or (ne effect.type "condition") (eq effect.slug "persistent-damage"))}}
+ <a data-action="edit" data-tooltip="{{localize "PF2E.EditItemTitle"}}"><i class="fa-solid fa-fw fa-pencil" ></i></a>
+ {{/if}}
  </h1>
  {{#if (or (eq effect.type "effect") effect.breakdown)}}
  <div class="tags">