Refactor QuestPreviewComponent

libs/features/quest/src/index.ts

@@ -4,6 +4,7 @@ export * from './gameobject-questender/gameobject-questender.component';
 export * from './gameobject-queststarter/gameobject-queststarter.component';
 export * from './quest-offer-reward/quest-offer-reward.component';
 export * from './quest-preview/quest-preview.component';
+export * from './quest-preview/quest-objectives.component';
 export * from './quest-request-items/quest-request-items.component';
 export * from './quest-template/quest-template.component';
 export * from './quest-template-addon/quest-template-addon.component';

libs/features/quest/src/quest-preview/quest-objectives.component.html

@@ -0,0 +1,39 @@
+<div id="objectives">
+  <p class="title">Objectives</p>
+
+  <div class="greyed text-sm">
+    {{ objectiveText() }}
+  </div>
+  @if (areaDescription()) {
+    <p class="greyed text-sm mt-3" id="areaDescription">
+      {{ areaDescription() }}
+    </p>
+  }
+
+  <div class="mt-2" id="npcOrGoObjectives">
+    @for (obj of npcObjectives(); track obj) {
+      <p>
+        • <span class="colored">{{ obj.text$ | async }}</span> {{ obj.count }}
+      </p>
+    }
+  </div>
+
+  <div class="mt-2" id="itemObjectives">
+    @for (obj of itemObjectives(); track obj) {
+      <p>
+        • <keira-icon [size]="'small'" [itemId]="obj.id" /> &nbsp;
+        <span class="colored">{{ obj.name$ | async }}</span>
+        {{ obj.count }}
+      </p>
+    }
+  </div>
+
+  <div class="mt-2" id="RequiredFaction">
+    @for (f of factionRequirements(); track f) {
+      <p>
+        • <span class="colored">{{ f.name$ | async }}</span>
+        {{ f.value }}
+      </p>
+    }
+  </div>
+</div>

libs/features/quest/src/quest-preview/quest-objectives.component.ts

@@ -0,0 +1,35 @@
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { IconComponent } from '@keira/shared/base-editor-components';
+
+export interface NpcOrGoObjective {
+  text$: Promise<string>;
+  count: string;
+}
+
+export interface ItemObjective {
+  id: number;
+  name$: Promise<string>;
+  count: string;
+}
+
+export interface FactionRequirement {
+  name$: Promise<string>;
+  value: string;
+}
+
+@Component({
+  selector: 'keira-quest-objectives',
+  templateUrl: './quest-objectives.component.html',
+  styleUrls: ['./quest-objectives.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [IconComponent, AsyncPipe],
+})
+export class QuestObjectivesComponent {
+  readonly objectiveText = input.required<string>();
+  readonly areaDescription = input<string | undefined>();
+  readonly npcObjectives = input<NpcOrGoObjective[]>([]);
+  readonly itemObjectives = input<ItemObjective[]>([]);
+  readonly factionRequirements = input<FactionRequirement[]>([]);
+}

libs/features/quest/src/quest-preview/quest-preview.component.html

@@ -186,53 +186,13 @@ <h5 id="title">{{ service.title }}</h5>
         </ul>
       }
 
-      <div id="objectives">
-        <p class="title">Objectives</p>
-
-        <div class="greyed text-sm">
-          {{ service.objectiveText }}
-        </div>
-        @if (!!service.questTemplate.AreaDescription) {
-          <p class="greyed text-sm mt-3" id="areaDescription">
-            {{ service.questTemplate.AreaDescription }}
-          </p>
-        }
-
-        <div class="mt-2" id="npcOrGoObjectives">
-          @for (i of [1, 2, 3, 4]; track i) {
-            @if (service.isNpcOrGoObj(i)) {
-              <p>
-                • <span class="colored">{{ !!service.getObjText(i) ? service.getObjText(i) : (service.getObjective$(i) | async) }}</span>
-                {{ service.getObjectiveCount(i) }}
-              </p>
-            }
-          }
-        </div>
-
-        <div class="mt-2" id="itemObjectives">
-          @for (i of [1, 2, 3, 4, 5, 6]; track i) {
-            @if (service.questTemplate['RequiredItemId' + i]; as reqItem) {
-              <p>
-                • <keira-icon [size]="'small'" [itemId]="reqItem" /> &nbsp;<span class="colored">{{
-                  service.mysqlQueryService.getItemNameById(reqItem) | async
-                }}</span>
-                {{ service.getObjItemCount(i) }}
-              </p>
-            }
-          }
-        </div>
-
-        <div class="mt-2" id="RequiredFaction">
-          @for (i of [1, 2]; track i) {
-            @if (service.questTemplate['RequiredFactionId' + i]; as reqFaction) {
-              <p>
-                • <span class="colored">{{ service.sqliteQueryService.getFactionNameById(reqFaction) | async }}</span>
-                {{ service.getFactionByValue(i) }}
-              </p>
-            }
-          }
-        </div>
-      </div>
+      <keira-quest-objectives
+        [objectiveText]="service.objectiveText"
+        [areaDescription]="service.questTemplate.AreaDescription"
+        [npcObjectives]="npcObjectivesData"
+        [itemObjectives]="itemObjectivesData"
+        [factionRequirements]="factionRequirementsData"
+      />
 
       <p class="title text-left cursor-pointer mt-3" (click)="descriptionToggle = !descriptionToggle" id="description-toggle">
         <i class="fa" [class.fa-caret-right]="descriptionToggle" [class.fa-caret-down]="!descriptionToggle"></i> Description

libs/features/quest/src/quest-preview/quest-preview.component.ts

@@ -1,6 +1,12 @@
 import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 import { IconComponent } from '@keira/shared/base-editor-components';
+import {
+  FactionRequirement,
+  ItemObjective,
+  NpcOrGoObjective,
+  QuestObjectivesComponent,
+} from './quest-objectives.component';
 import { RacesTextKey, RacesTextValue } from '@keira/shared/constants';
 import { PreviewHelperService } from '@keira/shared/preview';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
@@ -13,7 +19,7 @@ import { QuestPreviewService } from './quest-preview.service';
   selector: 'keira-quest-preview',
   templateUrl: './quest-preview.component.html',
   styleUrls: ['./quest-preview.component.scss'],
-  imports: [IconComponent, CollapseModule, AsyncPipe],
+  imports: [IconComponent, CollapseModule, AsyncPipe, QuestObjectivesComponent],
 })
 export class QuestPreviewComponent implements OnInit {
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
@@ -72,4 +78,45 @@ export class QuestPreviewComponent implements OnInit {
   hasPrevOrNext(questLists: { prev?: Quest[] | null; next?: Quest[] | null }): boolean {
     return !!(questLists.prev && questLists.prev.length > 0) || !!(questLists.next && questLists.next.length > 0);
   }
+
+  get npcObjectivesData(): NpcOrGoObjective[] {
+    const array: NpcOrGoObjective[] = [];
+    for (let i = 1; i <= 4; i++) {
+      if (this.service.isNpcOrGoObj(i)) {
+        const text = this.service.getObjText(i);
+        const text$ = text ? Promise.resolve(text) : this.service.getObjective$(i);
+        array.push({ text$, count: this.service.getObjectiveCount(i) });
+      }
+    }
+    return array;
+  }
+
+  get itemObjectivesData(): ItemObjective[] {
+    const array: ItemObjective[] = [];
+    for (let i = 1; i <= 6; i++) {
+      const reqItem = this.service.questTemplate['RequiredItemId' + i];
+      if (reqItem) {
+        array.push({
+          id: reqItem,
+          name$: this.service.mysqlQueryService.getItemNameById(reqItem),
+          count: this.service.getObjItemCount(i),
+        });
+      }
+    }
+    return array;
+  }
+
+  get factionRequirementsData(): FactionRequirement[] {
+    const array: FactionRequirement[] = [];
+    for (let i = 1; i <= 2; i++) {
+      const reqFaction = this.service.questTemplate['RequiredFactionId' + i];
+      if (reqFaction) {
+        array.push({
+          name$: this.service.sqliteQueryService.getFactionNameById(reqFaction),
+          value: this.service.getFactionByValue(i),
+        });
+      }
+    }
+    return array;
+  }
 }