Quest preview objectives, sql editor changes

apps/keira/src/app/scss/_quest-preview.scss

@@ -1,5 +1,6 @@
 .quest-preview {
-  .r0 {
+  .r0,
+  .red {
     color: #f00 !important;
   }
   .r1 {
@@ -11,7 +12,36 @@
   .r3 {
     color: #40bf40 !important;
   }
-  .r4 {
+  .r4,
+  .greyed {
     color: #808080 !important;
   }
+
+  color: white;
+  padding: 0 20px;
+  white-space: pre-line;
+
+  p {
+    margin-bottom: 0.3rem;
+  }
+
+  .title {
+    margin-top: 10px;
+    margin-bottom: 6px;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  ol,
+  ul {
+    padding: 0 0 0 17px;
+  }
+
+  .colored {
+    color: #ffd100;
+  }
+
+  .text-sm {
+    font-size: 0.8rem;
+  }
 }

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,37 @@
+<div id="objectives">
+  <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';
+import { Observable } from 'rxjs';
+
+export interface NpcOrGoObjective {
+  text$: Observable<string | number | undefined>;
+  count: string;
+}
+
+export interface ItemObjective {
+  id: number | string;
+  name$: Observable<string>;
+  count: string;
+}
+
+export interface FactionRequirement {
+  name$: Observable<string>;
+  value: string;
+}
+
+@Component({
+  selector: 'keira-quest-objectives',
+  templateUrl: './quest-objectives.component.html',
+  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

@@ -1,6 +1,6 @@
 <div class="preview-container" [class.show-preview]="service.showPreview" [class.hide-preview]="!service.showPreview">
   <div class="transparent perfect-scrollbar">
-    <div class="preview-content quest-preview">
+    <div class="quest-preview">
       @if (!!service.title) {
         <h5 id="title">{{ service.title }}</h5>
       }
@@ -214,73 +214,38 @@ <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>
+      <p class="title text-left cursor-pointer mt-3" (click)="objectiveToggle = !objectiveToggle" id="objective-toggle">
+        <i class="fa" [class.fa-caret-right]="objectiveToggle" [class.fa-caret-down]="!objectiveToggle"></i> Objective
+      </p>
+      <div [collapse]="objectiveToggle" class="greyed text-sm" id="description-text">
+        <keira-quest-objectives
+          [objectiveText]="service.objectiveText"
+          [areaDescription]="service.questTemplate.AreaDescription"
+          [npcObjectives]="npcObjectivesData"
+          [itemObjectives]="itemObjectivesData"
+          [factionRequirements]="factionRequirementsData"
+        />
       </div>
 
       <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
       </p>
       <div [collapse]="descriptionToggle" class="greyed text-sm" id="description-text">
-        {{ service.questTemplate.QuestDescription }}
+        {{ service.descriptionText }}
       </div>
 
       <p class="title text-left cursor-pointer" (click)="progressToggle = !progressToggle" id="progress-toggle">
         <i class="fa" [class.fa-caret-right]="progressToggle" [class.fa-caret-down]="!progressToggle"></i> Progress (CompletionText)
       </p>
       <div [collapse]="progressToggle" class="greyed text-sm" id="progress-text">
-        {{ service.questRequestItems.CompletionText }}
+        {{ service.completionText }}
       </div>
 
       <p class="title text-left cursor-pointer" (click)="completionToggle = !completionToggle" id="completion-toggle">
         <i class="fa" [class.fa-caret-right]="completionToggle" [class.fa-caret-down]="!completionToggle"></i> Completion (RewardText)
       </p>
       <div [collapse]="completionToggle" class="greyed text-sm" id="completion-text">
-        {{ service.questOfferReward.RewardText }}
+        {{ service.rewardText }}
       </div>
 
       @if (service.isReward()) {

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

@@ -90,6 +90,9 @@ class QuestPreviewComponentPage extends PageObject<QuestPreviewComponent> {
   get completionText(): HTMLDivElement {
     return this.query<HTMLDivElement>('#completion-text');
   }
+  get objectiveToggle(): HTMLParagraphElement {
+    return this.query<HTMLParagraphElement>('#objective-toggle');
+  }
   get descriptionToggle(): HTMLParagraphElement {
     return this.query<HTMLParagraphElement>('#description-toggle');
   }
@@ -451,10 +454,14 @@ describe('QuestPreviewComponent', () => {
 
       fixture.detectChanges();
 
+      page.expectCollapsed(page.objectiveToggle);
       page.expectCollapsed(page.descriptionToggle);
       page.expectCollapsed(page.progressToggle);
       page.expectCollapsed(page.completionToggle);
 
+      page.clickElement(page.objectiveToggle);
+      page.expectNotCollapsed(page.objectiveToggle);
+
       page.clickElement(page.descriptionToggle);
       page.expectNotCollapsed(page.descriptionToggle);
 

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

@@ -2,26 +2,28 @@ import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 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 { Model3DViewerComponent, VIEWER_TYPE } from '@keira/shared/model-3d-viewer';
 import { PreviewHelperService } from '@keira/shared/preview';
 import { CollapseModule } from 'ngx-bootstrap/collapse';
 import { Quest } from './quest-preview.model';
 import { QuestPreviewService } from './quest-preview.service';
+import { from, Observable, of } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'keira-quest-preview',
   templateUrl: './quest-preview.component.html',
-  styleUrls: ['./quest-preview.component.scss'],
-  imports: [IconComponent, CollapseModule, AsyncPipe, Model3DViewerComponent],
+  imports: [IconComponent, CollapseModule, AsyncPipe, QuestObjectivesComponent, Model3DViewerComponent],
 })
 export class QuestPreviewComponent implements OnInit {
   private readonly changeDetectorRef = inject(ChangeDetectorRef);
   private readonly destroyRef = inject(DestroyRef);
   readonly service: QuestPreviewService = inject(QuestPreviewService);
   protected readonly helper: PreviewHelperService = inject(PreviewHelperService);
 
+  objectiveToggle = true;
   descriptionToggle = true;
   progressToggle = true;
   completionToggle = true;
@@ -76,7 +78,10 @@ export class QuestPreviewComponent implements OnInit {
     this.service
       .valueChanges$(300)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(() => this.changeDetectorRef.markForCheck());
+      .subscribe(() => {
+        this.invalidateObjectivesCache();
+        this.changeDetectorRef.markForCheck();
+      });
   }
 
   getRaceText(raceIndex: RacesTextKey): RacesTextValue | null {
@@ -86,4 +91,58 @@ 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);
   }
+
+  private _npcObjectivesData: NpcOrGoObjective[] | null = null;
+  private _itemObjectivesData: ItemObjective[] | null = null;
+  private _factionRequirementsData: FactionRequirement[] | null = null;
+
+  invalidateObjectivesCache(): void {
+    this._npcObjectivesData = null;
+    this._itemObjectivesData = null;
+    this._factionRequirementsData = null;
+  }
+
+  get npcObjectivesData(): NpcOrGoObjective[] {
+    if (this._npcObjectivesData) return this._npcObjectivesData;
+    const array: NpcOrGoObjective[] = [];
+    for (let i = 1; i <= 4; i++) {
+      if (this.service.isNpcOrGoObj(i)) {
+        const text = this.service.getObjText(i);
+        const text$: Observable<string | number | undefined> = text ? of(text) : from(this.service.getObjective$(i));
+        array.push({ text$, count: this.service.getObjectiveCount(i) });
+      }
+    }
+    return (this._npcObjectivesData = array);
+  }
+
+  get itemObjectivesData(): ItemObjective[] {
+    if (this._itemObjectivesData) return this._itemObjectivesData;
+    const array: ItemObjective[] = [];
+    for (let i = 1; i <= 6; i++) {
+      const reqItem = this.service.questTemplate['RequiredItemId' + i];
+      if (reqItem) {
+        array.push({
+          id: reqItem,
+          name$: from(this.service.mysqlQueryService.getItemNameById(reqItem)),
+          count: this.service.getObjItemCount(i),
+        });
+      }
+    }
+    return (this._itemObjectivesData = array);
+  }
+
+  get factionRequirementsData(): FactionRequirement[] {
+    if (this._factionRequirementsData) return this._factionRequirementsData;
+    const array: FactionRequirement[] = [];
+    for (let i = 1; i <= 2; i++) {
+      const reqFaction = this.service.questTemplate['RequiredFactionId' + i];
+      if (reqFaction) {
+        array.push({
+          name$: from(this.service.sqliteQueryService.getFactionNameById(reqFaction)),
+          value: this.service.getFactionByValue(i),
+        });
+      }
+    }
+    return (this._factionRequirementsData = array);
+  }
 }