improve effect picker

LandOfTheRair · Aug 15, 2024 · 8067c2a · 8067c2a
1 parent b979c7d
commit 8067c2a
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/src/app/shared/components/input-effect/input-effect.component.html b/src/app/shared/components/input-effect/input-effect.component.html
@@ -2,6 +2,14 @@
   <ng-select class="form-control" [items]="values()" [(ngModel)]="effect" placeholder="Select effect..."
     (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">

diff --git a/src/app/shared/components/input-effect/input-effect.component.ts b/src/app/shared/components/input-effect/input-effect.component.ts
@@ -4,6 +4,7 @@ import {
   inject,
   input,
   model,
+  OnInit,
   output,
 } from '@angular/core';
 import { ElectronService } from '../../../services/electron.service';
@@ -14,12 +15,13 @@ import { ModService } from '../../../services/mod.service';
   templateUrl: './input-effect.component.html',
   styleUrl: './input-effect.component.scss',
 })
-export class InputEffectComponent {
+export class InputEffectComponent implements OnInit {
   private electronService = inject(ElectronService);
   private modService = inject(ModService);
 
-  public effect = model.required<string>();
+  public effect = model<string | undefined>();
   public label = input<string>('Effect');
+  public defaultValue = input<string>();
   public change = output<string>();
 
   public values = computed(() => {
@@ -52,6 +54,14 @@ export class InputEffectComponent {
     this.electronService.requestJSON('effect-data');
   }
 
+  ngOnInit() {
+    const defaultItem = this.defaultValue();
+    if (defaultItem) {
+      const foundItem = this.values().find((i) => i.value === defaultItem);
+      this.effect.set(foundItem as unknown as string);
+    }
+  }
+
   public itemCompare(
     itemA: { value: string; desc: string },
     itemB: { value: string; desc: string }

diff --git a/src/app/tabs/items/items-editor/items-editor.component.html b/src/app/tabs/items/items-editor/items-editor.component.html
@@ -415,10 +415,11 @@
 
   <div class="form-column">
     <div class="form-row">
-      <app-input-effect [effect]="editingData.useEffect!.name" (change)="editingData.useEffect!.name = $event"
+      <app-input-effect [defaultValue]="editingData.useEffect!.name" (change)="editingData.useEffect!.name = $event"
         label="Use Effect"></app-input-effect>
     </div>
 
+    @if(editingData.useEffect!.name) {
     <div class="form-row">
       <app-input-floating-label>Use Potency</app-input-floating-label>
       <input [(ngModel)]="editingData.useEffect!.potency" type="number" min="0" placeholder="Enter potency..."
@@ -437,14 +438,16 @@
         <span class="label-text">Can Apply Use Effect Via Thief Apply</span>
       </label>
     </div>
+    }
 
     <hr class="my-4">
 
     <div class="form-row">
-      <app-input-effect [effect]="editingData.strikeEffect!.name" (change)="editingData.strikeEffect!.name = $event"
-        label="Strike Effect"></app-input-effect>
+      <app-input-effect [defaultValue]="editingData.strikeEffect!.name"
+        (change)="editingData.strikeEffect!.name = $event" label="Strike Effect"></app-input-effect>
     </div>
 
+    @if(editingData.strikeEffect!.name) {
     <div class="form-row">
       <app-input-floating-label>Strike Potency</app-input-floating-label>
       <input [(ngModel)]="editingData.strikeEffect!.potency" type="number" min="0" placeholder="Enter potency..."
@@ -462,32 +465,37 @@
       <input [(ngModel)]="editingData.strikeEffect!.chance" type="number" min="0" max="100"
         placeholder="Enter chance..." class="form-input" />
     </div>
+    }
 
     <hr class="my-4">
 
     <div class="form-row">
-      <app-input-effect [effect]="editingData.equipEffect!.name" (change)="editingData.equipEffect!.name = $event"
+      <app-input-effect [defaultValue]="editingData.equipEffect!.name" (change)="editingData.equipEffect!.name = $event"
         label="Equip Effect"></app-input-effect>
     </div>
 
+    @if(editingData.equipEffect!.name) {
     <div class="form-row">
       <app-input-floating-label>Equip Potency</app-input-floating-label>
       <input [(ngModel)]="editingData.equipEffect!.potency" type="number" min="0" placeholder="Enter potency..."
         class="form-input" />
     </div>
+    }
 
     <hr class="my-4">
 
     <div class="form-row">
-      <app-input-effect [effect]="editingData.breakEffect!.name" (change)="editingData.breakEffect!.name = $event"
+      <app-input-effect [defaultValue]="editingData.breakEffect!.name" (change)="editingData.breakEffect!.name = $event"
         label="Break Effect"></app-input-effect>
     </div>
 
+    @if(editingData.breakEffect!.name) {
     <div class="form-row">
       <app-input-floating-label>Break Potency</app-input-floating-label>
       <input [(ngModel)]="editingData.breakEffect!.potency" type="number" min="0" placeholder="Enter potency..."
         class="form-input" />
     </div>
+    }
   </div>
 
   <div class="form-column">