closes #33

src/app/shared/components/input-quest/input-quest.component.html

@@ -0,0 +1,25 @@
+<div class="relative">
+  <ng-select class="form-control" [items]="values()" [(ngModel)]="quest" placeholder="Select quest..."
+    (change)="change.emit($event?.value)" [compareWith]="itemCompare" [searchFn]="search">
+
+    <ng-template ng-label-tmp let-item="item">
+      <div class="relative">
+        <div class="text-white">
+          {{ item.value }}
+        </div>
+      </div>
+    </ng-template>
+
+    <ng-template ng-option-tmp let-item="item">
+      <div class="relative">
+        <div class="text-white">
+          {{ item.value }}
+        </div>
+
+        <p class="text-white text-sm italic whitespace-break-spaces">{{ item.desc }}</p>
+      </div>
+    </ng-template>
+  </ng-select>
+
+  <app-input-floating-label>{{ label() }}</app-input-floating-label>
+</div>

src/app/shared/components/input-quest/input-quest.component.ts

@@ -0,0 +1,55 @@
+import {
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  OnInit,
+  output,
+} from '@angular/core';
+import { IQuest } from '../../../../interfaces';
+import { ModService } from '../../../services/mod.service';
+
+@Component({
+  selector: 'app-input-quest',
+  templateUrl: './input-quest.component.html',
+  styleUrl: './input-quest.component.scss',
+})
+export class InputQuestComponent implements OnInit {
+  private modService = inject(ModService);
+
+  public quest = model<IQuest | undefined>();
+  public defaultValue = input<string>();
+  public label = input<string>('Quest');
+  public change = output<string>();
+
+  public values = computed(() => {
+    const mod = this.modService.mod();
+
+    return [
+      ...mod.quests.map((q) => ({
+        value: q.name,
+        desc: `[${q.giver}] ${q.desc}`,
+      })),
+    ];
+  });
+
+  ngOnInit() {
+    const defaultItem = this.defaultValue();
+    if (defaultItem) {
+      const foundItem = this.values().find((i) => i.value === defaultItem);
+      this.quest.set(foundItem as unknown as IQuest);
+    }
+  }
+
+  public itemCompare(
+    itemA: { value: string; desc: string },
+    itemB: { value: string; desc: string }
+  ): boolean {
+    return itemA.value === itemB.value;
+  }
+
+  public search(term: string, item: { value: string }) {
+    return item.value.toLowerCase().includes(term.toLowerCase());
+  }
+}

src/app/shared/shared.module.ts

@@ -45,6 +45,7 @@ import { InputQuestrewardComponent } from './components/input-questreward/input-
 import { InputMapnpcComponent } from './components/input-mapnpc/input-mapnpc.component';
 import { SpriteWithInlineNameComponent } from './components/sprite-with-inline-name/sprite-with-inline-name.component';
 import { InputRecipeComponent } from './components/input-recipe/input-recipe.component';
+import { InputQuestComponent } from './components/input-quest/input-quest.component';
 
 @NgModule({
   declarations: [
@@ -86,6 +87,7 @@ import { InputRecipeComponent } from './components/input-recipe/input-recipe.com
     InputMapnpcComponent,
     SpriteWithInlineNameComponent,
     InputRecipeComponent,
+    InputQuestComponent,
   ],
   imports: [
     CommonModule,
@@ -135,6 +137,7 @@ import { InputRecipeComponent } from './components/input-recipe/input-recipe.com
     InputMapnpcComponent,
     SpriteWithInlineNameComponent,
     InputRecipeComponent,
+    InputQuestComponent,
   ],
 })
 export class SharedModule {}

src/app/tabs/items/items-editor/items-editor.component.html

@@ -500,6 +500,11 @@
       <input [(ngModel)]="editingData.requirements!.level" type="number" min="0" placeholder="Enter required level..."
         class="form-input" />
     </div>
+
+    <div class="form-row">
+      <app-input-quest (change)="editingData.requirements!.quest = $event"
+        [defaultValue]="editingData.requirements!.quest" label="Required Quest"></app-input-quest>
+    </div>
   </div>
 </div>
 }

src/app/tabs/items/items-editor/items-editor.component.ts

@@ -128,7 +128,7 @@ export class ItemsEditorComponent
     item.useEffect ??= { name: '', potency: 0, duration: 0 };
     item.equipEffect ??= { name: '', potency: 0 };
     item.breakEffect ??= { name: '', potency: 0 };
-    item.requirements ??= { baseClass: undefined, level: 0 };
+    item.requirements ??= { baseClass: undefined, level: 0, quest: undefined };
     item.cosmetic ??= { name: '', isPermanent: false };
     item.trait ??= { name: '', level: 0 };
     item.randomTrait ??= { name: [], level: { min: 0, max: 0 } };
@@ -348,7 +348,8 @@ export class ItemsEditorComponent
     if (
       item.requirements &&
       !item.requirements.baseClass &&
-      !item.requirements.level
+      !item.requirements.level &&
+      !item.requirements.quest
     ) {
       delete item.requirements;
     }