Added support for "WikiUrl" on duty list items

Author: acapper

frontend/src/components/DutyListItem.vue

@@ -1,14 +1,11 @@
 <template>
   <div
-    class="list-group-item align-items-center"
+    class="list-group-item align-items-center duty-list-group"
     :class="{
       'list-group-item-action':
         this.$store.getters.hasCharacter && isHovering && (duty.cleared == -1 || duty.cleared == 2),
       'cursor-pointer': this.$store.getters.hasCharacter && (duty.cleared == -1 || duty.cleared == 2),
     }"
-    @click="check"
-    @mouseover="isHovering = true"
-    @mouseout="isHovering = false"
   >
     <div
       class="d-flex justify-content-between align-items-center"
@@ -23,6 +20,9 @@
           'duty-list-item-blur': duty.blur,
         }"
         :title="title"
+        @click="check"
+        @mouseover="onDutyItemMouseOver"
+        @mouseout="onDutyItemMouseOut"
       >
         <i
           class="me-2 fa-fw fal"
@@ -46,7 +46,7 @@
             'user-select-none': duty.blur,
           }"
         >
-          {{ duty["Name" + $i18n.locale.toUpperCase()] || duty["NameEN"] }}
+          {{ dutyName }}
         </a>
         <span
           v-else
@@ -58,23 +58,35 @@
             'text-bold': duty.Bold,
           }"
         >
-          {{ duty["Name" + $i18n.locale.toUpperCase()] || duty["NameEN"] }}
+          {{ dutyName }}
         </span>
       </span>
-      <span
-        v-if="duty.IsMSQ"
-        class="icon-marker-msq"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        :title="$t('encounters.msqContent')"
-      ></span>
-      <span
-        v-if="duty.Expansion && showPatchNums"
-        :class="'icon-exp-' + duty.Expansion"
-        data-bs-toggle="tooltip"
-        data-bs-placement="top"
-        :title="$t('encounters.unlockedInExp')"
-      ></span>
+      <div class="d-inline-flex align-items-center duty-icons">
+        <span
+          v-if="duty.IsMSQ"
+          class="icon-marker-msq"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          :title="$t('encounters.msqContent')"
+          @click="check"
+          @mouseover="onDutyItemMouseOver"
+          @mouseout="onDutyItemMouseOut"
+        ></span>
+        <span
+          v-if="duty.Expansion && showPatchNums"
+          :class="'icon-exp-' + duty.Expansion"
+          data-bs-toggle="tooltip"
+          data-bs-placement="top"
+          :title="$t('encounters.unlockedInExp')"
+          @click="check"
+          @mouseover="onDutyItemMouseOver"
+          @mouseout="onDutyItemMouseOut"
+        ></span>
+        <a v-if="showWikiLink" href="{{duty.WikiUrl}}" class="text-success tt duty-wiki-link" @hover.stop="">
+          <i class="fa-fw fad fa-external-link"></i>
+          <span class="tt-text">Wiki resource</span>
+        </a>
+      </div>
     </div>
     <div id="rewards" v-if="filters.rewards && !duty.blur && ('Mounts' in duty || 'Minions' in duty)">
       <div v-if="'Mounts' in duty">
@@ -143,10 +155,24 @@
   text-overflow: unset;
 }
 
+.duty-list-group {
+  padding: 0;
+}
+
 .duty-list-item {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: "… ";
+  width: 100%;
+}
+
+.duty-wiki-link,
+.duty-list-item {
+  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
+}
+
+.duty-icons > :not(.duty-wiki-link):last-child {
+  padding-right: var(--bs-list-group-item-padding-x);
 }
 
 .duty-list-item-blur {
@@ -206,6 +232,9 @@ export default {
     title() {
       return this.duty.LodestoneID || this.duty.blur ? "" : this.duty.Name;
     },
+    dutyName() {
+      return this.duty["Name" + this.$i18n.locale.toUpperCase()] || this.duty["NameEN"];
+    },
     showPatchNums() {
       let patchNumsSetting = this.$store.getters.settings.patchNumsOption || 0;
 
@@ -215,6 +244,9 @@ export default {
         patchNumsSetting == 2
       );
     },
+    showWikiLink() {
+      return !this.duty.blur && this.duty.WikiUrl ? true : false;
+    },
   },
   methods: {
     getLodestoneURL: getLodestoneURL,
@@ -243,6 +275,12 @@ export default {
       let characterID = this.$store.getters.lodestoneData.Character.ID;
       updateEncounterIDs(characterID, encounterIDsAsArray);
     },
+    onDutyItemMouseOver() {
+      this.isHovering = true
+    },
+    onDutyItemMouseOut() {
+      this.isHovering = false
+    }
   },
 };
 </script>