feat(creature-template): improve all selectors, add item and spell ic…

…ons (#3014) * feat(creature-template): improve all selectors, add item and spell icons * fix(files): imports * chore(.eslintrc.json): add import rule * test(creature-template-resistance): fix dropdown select values * test(selectors): fix all integration tests about selectors * fix(package-lock.json): remove legacy-peer-deps from npmrc * chore(package-lock.json): restore original content
azerothcore · Jun 14, 2024 · 8da6f10 · 8da6f10
1 parent 670f8b6
commit 8da6f10
Show file tree

Hide file tree

Showing 46 changed files with 386 additions and 344 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -42,7 +42,8 @@
         "@typescript-eslint/no-inferrable-types": "off",
         "@typescript-eslint/no-empty-function": "off",
         "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/ban-ts-comment": "off"
+        "@typescript-eslint/ban-ts-comment": "off",
+        "no-duplicate-imports": "error"
       }
     },
     {

diff --git a/libs/features/conditions/src/edit-conditions/conditions.component.ts b/libs/features/conditions/src/edit-conditions/conditions.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { SingleRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   CONDITION_DISTANCE_TO_CV3,
   CONDITION_HP_PCT_CV2,
@@ -18,6 +18,12 @@ import {
   RANKMASK,
   TYPEMASK,
 } from '@keira/shared/acore-world-model';
+import { SingleRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { QueryOutputComponent } from '@keira/shared/base-editor-components';
+import { FlagsSelectorBtnComponent, SingleValueSelectorBtnComponent } from '@keira/shared/selectors';
+import { getEnumKeys } from '@keira/shared/utils';
+import { TranslateModule } from '@ngx-translate/core';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ConditionsHandlerService } from '../conditions-handler.service';
 import {
   CONDITION_TARGET_TOOLTIPS,
@@ -28,14 +34,6 @@ import {
   SOURCE_GROUP_TOOLTIPS,
 } from './conditions-constants';
 import { ConditionsService } from './conditions.service';
-import { SingleValueSelectorBtnComponent } from '@keira/shared/selectors';
-import { FlagsSelectorBtnComponent } from '@keira/shared/selectors';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { QueryOutputComponent } from '@keira/shared/base-editor-components';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { getEnumKeys } from '@keira/shared/utils';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/libs/features/creature/src/creature-equip-template/creature-equip-template.component.ts b/libs/features/creature/src/creature-equip-template/creature-equip-template.component.ts
@@ -1,15 +1,12 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { SingleRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CreatureEquipTemplate } from '@keira/shared/acore-world-model';
-import { CreatureHandlerService } from '../creature-handler.service';
-import { CreatureEquipTemplateService } from './creature-equip-template.service';
+import { SingleRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { IconComponent, QueryOutputComponent, TopBarComponent } from '@keira/shared/base-editor-components';
 import { ItemSelectorBtnComponent } from '@keira/shared/selectors';
-import { IconComponent } from '@keira/shared/base-editor-components';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { QueryOutputComponent } from '@keira/shared/base-editor-components';
 import { TranslateModule } from '@ngx-translate/core';
-
-import { TopBarComponent } from '@keira/shared/base-editor-components';
+import { CreatureHandlerService } from '../creature-handler.service';
+import { CreatureEquipTemplateService } from './creature-equip-template.service';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/libs/features/creature/src/creature-loot-template/creature-loot-template.component.ts b/libs/features/creature/src/creature-loot-template/creature-loot-template.component.ts
@@ -1,11 +1,10 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { LootTemplateIdComponent } from '@keira/shared/base-abstract-classes';
 import { CreatureLootTemplate } from '@keira/shared/acore-world-model';
+import { LootTemplateIdComponent } from '@keira/shared/base-abstract-classes';
+import { TopBarComponent } from '@keira/shared/base-editor-components';
+import { LootEditorComponent } from '@keira/shared/loot-editor';
 import { CreatureHandlerService } from '../creature-handler.service';
 import { CreatureLootTemplateService } from './creature-loot-template.service';
-import { LootEditorComponent } from '@keira/shared/loot-editor';
-
-import { TopBarComponent } from '@keira/shared/base-editor-components';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/...eatures/creature/src/creature-onkill-reputation/creature-onkill-reputation.component.html b/...eatures/creature/src/creature-onkill-reputation/creature-onkill-reputation.component.html
@@ -47,18 +47,19 @@
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="MaxStanding1">MaxStanding1</label>
-              <keira-single-value-selector-btn
+              <keira-generic-option-selector
                 [control]="editorService.form.controls.MaxStanding1"
-                [disabled]="editorService.form.controls.MaxStanding1.disabled"
-                [config]="{ options: FACTION_RANK, name: 'MaxStanding1' }"
-                [modalClass]="'modal-md'"
-              />
-              <input [formControlName]="'MaxStanding1'" id="MaxStanding1" type="number" class="form-control form-control-sm" />
+                id="MaxStanding1"
+                [optionList]="FACTION_RANK"
+              ></keira-generic-option-selector>
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="IsTeamAward1">IsTeamAward1</label>
               <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.ONKILL_REPUTATION.IS_TEAM_AWARD1' | translate"></i>
-              <input [formControlName]="'IsTeamAward1'" id="IsTeamAward1" type="number" class="form-control form-control-sm" />
+              <keira-boolean-option-selector
+                [control]="editorService.form.controls.IsTeamAward1"
+                id="IsTeamAward1"
+              ></keira-boolean-option-selector>
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="RewOnKillRepValue1">RewOnKillRepValue1</label>
@@ -71,18 +72,19 @@
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="MaxStanding2">MaxStanding2</label>
-              <keira-single-value-selector-btn
+              <keira-generic-option-selector
                 [control]="editorService.form.controls.MaxStanding2"
-                [disabled]="editorService.form.controls.MaxStanding2.disabled"
-                [config]="{ options: FACTION_RANK, name: 'MaxStanding2' }"
-                [modalClass]="'modal-md'"
-              />
-              <input [formControlName]="'MaxStanding2'" id="MaxStanding2" type="number" class="form-control form-control-sm" />
+                id="MaxStanding2"
+                [optionList]="FACTION_RANK"
+              ></keira-generic-option-selector>
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="IsTeamAward2">IsTeamAward2</label>
               <i class="fas fa-info-circle ms-1" placement="auto" [tooltip]="'CREATURE.ONKILL_REPUTATION.IS_TEAM_AWARD2' | translate"></i>
-              <input [formControlName]="'IsTeamAward2'" id="IsTeamAward2" type="number" class="form-control form-control-sm" />
+              <keira-boolean-option-selector
+                [control]="editorService.form.controls.IsTeamAward2"
+                id="IsTeamAward2"
+              ></keira-boolean-option-selector>
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="RewOnKillRepValue2">RewOnKillRepValue2</label>
@@ -100,7 +102,10 @@
                 placement="auto"
                 [tooltip]="'CREATURE.ONKILL_REPUTATION.TEAM_DEPENDENT_TOOLTIP' | translate"
               ></i>
-              <input [formControlName]="'TeamDependent'" id="TeamDependent" type="number" class="form-control form-control-sm" />
+              <keira-boolean-option-selector
+                [control]="editorService.form.controls.TeamDependent"
+                id="TeamDependent"
+              ></keira-boolean-option-selector>
             </div>
           </div>
         </div>

diff --git a/.../features/creature/src/creature-onkill-reputation/creature-onkill-reputation.component.ts b/.../features/creature/src/creature-onkill-reputation/creature-onkill-reputation.component.ts
@@ -1,16 +1,18 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { SingleRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CreatureOnkillReputation, FACTION_RANK } from '@keira/shared/acore-world-model';
+import { SingleRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { QueryOutputComponent, TopBarComponent } from '@keira/shared/base-editor-components';
+import {
+  BooleanOptionSelectorComponent,
+  FactionSelectorBtnComponent,
+  GenericOptionSelectorComponent,
+  SingleValueSelectorBtnComponent,
+} from '@keira/shared/selectors';
+import { TranslateModule } from '@ngx-translate/core';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { CreatureHandlerService } from '../creature-handler.service';
 import { CreatureOnkillReputationService } from './creature-onkill-reputation.service';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { SingleValueSelectorBtnComponent } from '@keira/shared/selectors';
-import { FactionSelectorBtnComponent } from '@keira/shared/selectors';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { QueryOutputComponent } from '@keira/shared/base-editor-components';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { TopBarComponent } from '@keira/shared/base-editor-components';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,6 +29,8 @@ import { TopBarComponent } from '@keira/shared/base-editor-components';
     FactionSelectorBtnComponent,
     SingleValueSelectorBtnComponent,
     TooltipModule,
+    BooleanOptionSelectorComponent,
+    GenericOptionSelectorComponent,
   ],
 })
 export class CreatureOnkillReputationComponent extends SingleRowEditorComponent<CreatureOnkillReputation> {

diff --git a/...es/creature/src/creature-onkill-reputation/creature-onkill-reputation.integration.spec.ts b/...es/creature/src/creature-onkill-reputation/creature-onkill-reputation.integration.spec.ts
@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterTestingModule } from '@angular/router/testing';
+import { CreatureOnkillReputation } from '@keira/shared/acore-world-model';
 import { MysqlQueryService, SqliteQueryService, SqliteService } from '@keira/shared/db-layer';
 import { EditorPageObject, TranslateTestingModule } from '@keira/shared/test-utils';
-import { CreatureOnkillReputation } from '@keira/shared/acore-world-model';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { ToastrModule } from 'ngx-toastr';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { of } from 'rxjs';
+import { instance, mock } from 'ts-mockito';
 import { CreatureHandlerService } from '../creature-handler.service';
 import { SaiCreatureHandlerService } from '../sai-creature-handler.service';
 import { CreatureOnkillReputationComponent } from './creature-onkill-reputation.component';
 import Spy = jasmine.Spy;
-import { instance, mock } from 'ts-mockito';
 
 class CreatureOnkillReputationPage extends EditorPageObject<CreatureOnkillReputationComponent> {}
 
@@ -112,10 +112,21 @@ describe('CreatureOnkillReputation integration tests', () => {
     it('changing all properties and executing the query should correctly work', () => {
       const expectedQuery =
         'UPDATE `creature_onkill_reputation` SET ' +
-        '`RewOnKillRepFaction2` = 1, `MaxStanding1` = 2, `IsTeamAward1` = 3, `RewOnKillRepValue1` = 4, ' +
-        '`MaxStanding2` = 5, `IsTeamAward2` = 6, `RewOnKillRepValue2` = 7, `TeamDependent` = 8 WHERE (`creature_id` = 1234);';
+        '`RewOnKillRepFaction2` = 1, `MaxStanding1` = 1, `IsTeamAward1` = 1, `RewOnKillRepValue1` = 4, ' +
+        '`MaxStanding2` = 1, `IsTeamAward2` = 1, `RewOnKillRepValue2` = 7, `TeamDependent` = 1 WHERE (`creature_id` = 1234);';
       querySpy.calls.reset();
 
+      const MaxStanding1 = page.getDebugElementByCss('#MaxStanding1 select').nativeElement;
+      const MaxStanding2 = page.getDebugElementByCss('#MaxStanding2 select').nativeElement;
+      const IsTeamAward1 = page.getDebugElementByCss('#IsTeamAward1 select').nativeElement;
+      const IsTeamAward2 = page.getDebugElementByCss('#IsTeamAward2 select').nativeElement;
+      const TeamDependent = page.getDebugElementByCss('#TeamDependent select').nativeElement;
+      page.setInputValue(MaxStanding1, '1: 1');
+      page.setInputValue(MaxStanding2, '1: 1');
+      page.setInputValue(IsTeamAward1, '1: 1');
+      page.setInputValue(IsTeamAward2, '1: 1');
+      page.setInputValue(TeamDependent, '1: 1');
+
       page.changeAllFields(originalEntity, ['VerifiedBuild']);
       page.expectDiffQueryToContain(expectedQuery);
 
@@ -135,16 +146,17 @@ describe('CreatureOnkillReputation integration tests', () => {
           '(1234, 0, 1, 0, 0, 0, 0, 0, 0, 0);',
       );
 
-      page.setInputValueById('IsTeamAward1', '3');
+      const IsTeamAward1 = page.getDebugElementByCss('#IsTeamAward1 select').nativeElement;
+      page.setInputValue(IsTeamAward1, '1: 1');
       page.expectDiffQueryToContain(
-        'UPDATE `creature_onkill_reputation` SET `RewOnKillRepFaction2` = 1, `IsTeamAward1` = 3 WHERE (`creature_id` = 1234);',
+        'UPDATE `creature_onkill_reputation` SET `RewOnKillRepFaction2` = 1, `IsTeamAward1` = 1 WHERE (`creature_id` = 1234);',
       );
       page.expectFullQueryToContain(
         'DELETE FROM `creature_onkill_reputation` WHERE (`creature_id` = 1234);\n' +
           'INSERT INTO `creature_onkill_reputation` (`creature_id`, `RewOnKillRepFaction1`,' +
           ' `RewOnKillRepFaction2`, `MaxStanding1`, `IsTeamAward1`, `RewOnKillRepValue1`, ' +
           '`MaxStanding2`, `IsTeamAward2`, `RewOnKillRepValue2`, `TeamDependent`) VALUES\n' +
-          '(1234, 0, 1, 0, 3, 0, 0, 0, 0, 0);',
+          '(1234, 0, 1, 0, 1, 0, 0, 0, 0, 0);',
       );
     });
 

diff --git a/libs/features/creature/src/creature-questitem/creature-questitem.component.ts b/libs/features/creature/src/creature-questitem/creature-questitem.component.ts
@@ -1,17 +1,14 @@
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { MultiRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CreatureQuestitem } from '@keira/shared/acore-world-model';
-import { CreatureHandlerService } from '../creature-handler.service';
-import { CreatureQuestitemService } from './creature-questitem.service';
-import { NgxDatatableModule } from '@siemens/ngx-datatable';
-import { EditorButtonsComponent } from '@keira/shared/base-editor-components';
+import { MultiRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { EditorButtonsComponent, IconComponent, QueryOutputComponent, TopBarComponent } from '@keira/shared/base-editor-components';
 import { ItemSelectorBtnComponent } from '@keira/shared/selectors';
-import { IconComponent } from '@keira/shared/base-editor-components';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { QueryOutputComponent } from '@keira/shared/base-editor-components';
 import { TranslateModule } from '@ngx-translate/core';
-import { AsyncPipe } from '@angular/common';
-import { TopBarComponent } from '@keira/shared/base-editor-components';
+import { NgxDatatableModule } from '@siemens/ngx-datatable';
+import { CreatureHandlerService } from '../creature-handler.service';
+import { CreatureQuestitemService } from './creature-questitem.service';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/libs/features/creature/src/creature-spawn-addon/creature-spawn-addon.component.html b/libs/features/creature/src/creature-spawn-addon/creature-spawn-addon.component.html
@@ -30,33 +30,27 @@
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="bytes1">bytes1</label>
-              <keira-single-value-selector-btn
+              <keira-generic-option-selector
                 [control]="editorService.form.controls.bytes1"
-                [disabled]="editorService.form.controls.bytes1.disabled"
-                [config]="{ options: CREATURE_ADDON_BYTES_1, name: 'bytes1' }"
-                [modalClass]="'modal-xl'"
-              />
-              <input [formControlName]="'bytes1'" id="bytes1" type="number" class="form-control form-control-sm" />
+                id="bytes1"
+                [optionList]="CREATURE_ADDON_BYTES_1"
+              ></keira-generic-option-selector>
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="bytes2">bytes2</label>
-              <keira-single-value-selector-btn
+              <keira-generic-option-selector
                 [control]="editorService.form.controls.bytes2"
-                [disabled]="editorService.form.controls.bytes2.disabled"
-                [config]="{ options: CREATURE_ADDON_BYTES_2, name: 'bytes2' }"
-                [modalClass]="'modal-lg'"
-              />
-              <input [formControlName]="'bytes2'" id="bytes2" type="number" class="form-control form-control-sm" />
+                id="bytes2"
+                [optionList]="CREATURE_ADDON_BYTES_2"
+              ></keira-generic-option-selector>
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="emote">emote</label>
-              <keira-single-value-selector-btn
+              <keira-generic-option-selector
                 [control]="editorService.form.controls.emote"
-                [disabled]="editorService.form.controls.emote.disabled"
-                [config]="{ options: EMOTE, name: 'emote' }"
-                [modalClass]="'modal-md'"
-              />
-              <input [formControlName]="'emote'" id="emote" type="number" class="form-control form-control-sm" />
+                id="emote"
+                [optionList]="EMOTE"
+              ></keira-generic-option-selector>
             </div>
             <div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
               <label class="control-label" for="visibilityDistanceType">visibilityDistanceType</label>

diff --git a/libs/features/creature/src/creature-spawn-addon/creature-spawn-addon.component.ts b/libs/features/creature/src/creature-spawn-addon/creature-spawn-addon.component.ts
@@ -1,16 +1,14 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
-import { MultiRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CREATURE_ADDON_BYTES_1, CREATURE_ADDON_BYTES_2, CreatureSpawnAddon, EMOTE } from '@keira/shared/acore-world-model';
-import { CreatureHandlerService } from '../creature-handler.service';
-import { CreatureSpawnAddonService } from './creature-spawn-addon.service';
+import { MultiRowEditorComponent } from '@keira/shared/base-abstract-classes';
+import { QueryOutputComponent, TopBarComponent } from '@keira/shared/base-editor-components';
+import { GenericOptionSelectorComponent, SingleValueSelectorBtnComponent } from '@keira/shared/selectors';
+import { TranslateModule } from '@ngx-translate/core';
 import { NgxDatatableModule } from '@siemens/ngx-datatable';
-import { SingleValueSelectorBtnComponent } from '@keira/shared/selectors';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { QueryOutputComponent } from '@keira/shared/base-editor-components';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { TopBarComponent } from '@keira/shared/base-editor-components';
+import { CreatureHandlerService } from '../creature-handler.service';
+import { CreatureSpawnAddonService } from './creature-spawn-addon.service';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -27,6 +25,7 @@ import { TopBarComponent } from '@keira/shared/base-editor-components';
     TooltipModule,
     SingleValueSelectorBtnComponent,
     NgxDatatableModule,
+    GenericOptionSelectorComponent,
   ],
 })
 export class CreatureSpawnAddonComponent extends MultiRowEditorComponent<CreatureSpawnAddon> {