Merge e854818 into 505141a

src/app/features/gossip/gossip-menu-option-preview/gossip-menu-option-preview.component.html

@@ -0,0 +1,11 @@
+<div class="preview-container" [ngClass]="show ? 'show-preview' : 'hide-preview'">
+  <perfect-scrollbar class="transparent">
+    <div class="gossip-preview">
+
+      <p *ngFor="let row of options">
+        <img *ngIf="OPTION_IMG[row.OptionIcon]" [src]="'assets/img/gossip/' + OPTION_IMG[row.OptionIcon]"> {{ row.OptionText }}
+      </p>
+
+    </div>
+  </perfect-scrollbar>
+</div>

src/app/features/gossip/gossip-menu-option-preview/gossip-menu-option-preview.component.scss

@@ -0,0 +1,5 @@
+.gossip-preview {
+  color: #fff;
+  padding: 10px;
+  margin-top: calc(50vh - 70%);
+}

src/app/features/gossip/gossip-menu-option-preview/gossip-menu-option-preview.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+
+import { GossipMenuOption } from '@keira-types/gossip-menu-option.type';
+import { OPTION_IMG } from '@keira-constants/options/gossip-option-icon';
+
+@Component({
+  selector: 'keira-gossip-menu-option-preview',
+  templateUrl: './gossip-menu-option-preview.component.html',
+  styleUrls: ['./gossip-menu-option-preview.component.scss']
+})
+export class GossipMenuOptionPreviewComponent {
+  @Input() options: GossipMenuOption[];
+  @Input() show = true;
+
+  public readonly OPTION_IMG = OPTION_IMG;
+}

src/app/features/gossip/gossip-menu-option-preview/gossip-menu-option-preview.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
+import { QueryOutputModule } from '@keira-shared/modules/query-output/query-output.module';
+import { GossipMenuOptionPreviewComponent } from './gossip-menu-option-preview.component';
+
+@NgModule({
+  declarations: [
+    GossipMenuOptionPreviewComponent,
+  ],
+  imports: [
+    BrowserModule,
+    QueryOutputModule,
+    PerfectScrollbarModule,
+  ],
+  exports: [
+    GossipMenuOptionPreviewComponent,
+  ],
+})
+export class GossipMenuOptionPreviewModule {}

src/app/features/gossip/gossip-menu-option/gossip-menu-option.component.html

@@ -1,6 +1,6 @@
 <keira-top-bar [handler]="handlerService"></keira-top-bar>
 
-<div class="container-fluid">
+<div class="container-fluid editor-with-preview" [ngClass]="{'show-preview': showGossipPreview }">
 
   <span *ngIf="editorService.loading">Loading...</span>
 
@@ -167,5 +167,15 @@
       </div>
 
     </div>
+
+    <keira-gossip-menu-option-preview
+      [options]="editorService.newRows"
+      [show]="showGossipPreview"
+    ></keira-gossip-menu-option-preview>
+
+    <button class="btn btn-secondary btn-sm toggle-preview-button" (click)="showGossipPreview = !showGossipPreview">
+      <i class="fas {{ showGossipPreview ? 'fa-angle-double-right' : 'fa-angle-double-left' }}"></i>
+    </button>
+
   </div>
 </div>

src/app/features/gossip/gossip-menu-option/gossip-menu-option.component.ts

@@ -24,4 +24,6 @@ export class GossipMenuOptionComponent extends MultiRowEditorComponent<GossipMen
   ) {
     super(editorService, handlerService);
   }
+
+  showGossipPreview = true;
 }

src/app/features/gossip/gossip-menu-option/gossip-menu-option.module.ts

@@ -12,6 +12,7 @@ import { GossipMenuOptionComponent } from './gossip-menu-option.component';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { GossipMenuOptionService } from './gossip-menu-option.service';
 import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
+import { GossipMenuOptionPreviewModule } from '../gossip-menu-option-preview/gossip-menu-option-preview.module';
 
 @NgModule({
   declarations: [
@@ -27,6 +28,7 @@ import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor
     NgxDatatableModule,
     SingleValueSelectorModule,
     EditorButtonsModule,
+    GossipMenuOptionPreviewModule,
   ],
   exports: [
     GossipMenuOptionComponent,

src/app/features/gossip/gossip-menu/gossip-menu.component.html

@@ -20,6 +20,10 @@
         <div class="row">
           <div class="form-group col-12 col-sm-6 col-md-4 col-lg-2 col-xl-2">
             <label class="control-label" for="TextID">TextID</label>
+            <keira-npc-text-selector-btn
+              [control]="editorService.form.controls.TextID"
+              [config]="{  name: 'TextID' }"
+            ></keira-npc-text-selector-btn>
             <i
               class="fas fa-info-circle ml-1" [placement]="'auto'"
               [tooltip]="'The npc_text.ID for the gossip you want to be initially displayed. Also this tells the NPC what to say at the top of the options menu when it is displayed.'"
@@ -59,6 +63,16 @@
               </ng-template>
             </ngx-datatable-column>
             <ngx-datatable-column name="TextID" prop="TextID" [minWidth]="80"></ngx-datatable-column>
+            <ngx-datatable-column name="Text0_0" [minWidth]="80">
+              <ng-template let-row="row" ngx-datatable-cell-template>
+                {{ queryService.getText0ById(row.TextID) | async }}
+              </ng-template>
+            </ngx-datatable-column>
+            <ngx-datatable-column name="Text0_1" [minWidth]="80">
+              <ng-template let-row="row" ngx-datatable-cell-template>
+                {{ queryService.getText1ById(row.TextID) | async }}
+              </ng-template>
+            </ngx-datatable-column>
           </ngx-datatable>
 
         </div>

src/app/features/gossip/gossip-menu/gossip-menu.component.ts

@@ -4,6 +4,7 @@ import { MultiRowEditorComponent } from '@keira-abstract/components/editors/mult
 import { GossipMenu } from '@keira-types/gossip-menu.type';
 import { GossipMenuService } from './gossip-menu.service';
 import { GossipHandlerService } from '../gossip-handler.service';
+import { MysqlQueryService } from '@keira-shared/services/mysql-query.service';
 
 @Component({
   selector: 'keira-gossip-menu',
@@ -15,6 +16,7 @@ export class GossipMenuComponent extends MultiRowEditorComponent<GossipMenu> {
   constructor(
     public editorService: GossipMenuService,
     public handlerService: GossipHandlerService,
+    public readonly queryService: MysqlQueryService,
   ) {
     super(editorService, handlerService);
   }

src/app/features/gossip/gossip-menu/gossip-menu.integration.spec.ts

@@ -99,7 +99,7 @@ describe('GossipMenu integration tests', () => {
       page.clickExecuteQuery();
 
       page.expectDiffQueryToContain(expectedQuery);
-      expect(querySpy).toHaveBeenCalledTimes(1);
+      expect(querySpy).toHaveBeenCalled();
       expect(querySpy.calls.mostRecent().args[0]).toContain(expectedQuery);
     });
 

src/app/features/gossip/gossip-menu/gossip-menu.module.ts

@@ -11,6 +11,7 @@ import { GossipMenuComponent } from './gossip-menu.component';
 import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { GossipMenuService } from './gossip-menu.service';
 import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor-buttons.module';
+import { NpcTextSelectorModule } from '@keira-shared/modules/selectors/npc-text-selector/npc-text-selector.module';
 
 @NgModule({
   declarations: [
@@ -25,6 +26,7 @@ import { EditorButtonsModule } from '@keira-shared/modules/editor-buttons/editor
     ToastrModule.forRoot(toastrConfig),
     NgxDatatableModule,
     EditorButtonsModule,
+    NpcTextSelectorModule,
   ],
   exports: [
     GossipMenuComponent,

src/app/features/gossip/select-gossip/select-gossip.component.html

@@ -38,7 +38,6 @@
 
       <ngx-datatable
         class="bootstrap table table-striped text-center datatable-select"
-        style="max-width: 500px"
         [rows]="selectService.rows"
         [headerHeight]="DTCFG.headerHeight"
         [footerHeight]="DTCFG.footerHeight"
@@ -54,6 +53,16 @@
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="TextID" prop="TextID" [minWidth]="80"></ngx-datatable-column>
+        <ngx-datatable-column name="Text0_0" [minWidth]="200">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ queryService.getText0ById(row.TextID) | async }}
+          </ng-template>
+        </ngx-datatable-column>
+        <ngx-datatable-column name="Text0_1" [minWidth]="200">
+          <ng-template let-row="row" ngx-datatable-cell-template>
+            {{ queryService.getText1ById(row.TextID) | async }}
+          </ng-template>
+        </ngx-datatable-column>
       </ngx-datatable>
 
     </div>

src/app/features/gossip/select-gossip/select-gossip.integration.spec.ts

@@ -135,7 +135,7 @@ describe('SelectGossip integration tests', () => {
 
       page.clickElement(page.searchBtn);
 
-      expect(querySpy).toHaveBeenCalledTimes(1);
+      expect(querySpy).toHaveBeenCalled();
       expect(querySpy).toHaveBeenCalledWith(expectedQuery);
     });
   }

src/app/shared/constants/options/gossip-option-icon.ts

@@ -13,3 +13,17 @@ export const OPTION_ICON: Option[] = [
   { value: 9,  name: 'BATTLE (Two swords)' },
   { value: 10, name: 'DOT (Yellow dot)' },
 ];
+
+export const OPTION_IMG = [
+  'chat.png',
+  'vendor.png',
+  'taxi.png',
+  'trainer.png',
+  'interaction_wheel_1.png',
+  'interaction_wheel_2.png',
+  'money_bag.png',
+  'talk.png',
+  'tabard.png',
+  'battle.png',
+  'chat.png',
+];

src/app/shared/modules/search/npc-text-search.service.spec.ts

@@ -0,0 +1,19 @@
+import { TestBed } from '@angular/core/testing';
+import { instance } from 'ts-mockito';
+
+import { NpcTextSearchService } from './npc-text-search.service';
+import { MysqlQueryService } from '../../services/mysql-query.service';
+import { MockedMysqlQueryService } from '../../testing/mocks';
+
+describe('NpcTextSearchService', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    providers: [
+      { provide: MysqlQueryService, useValue: instance(MockedMysqlQueryService) },
+    ]
+  }));
+
+  it('should be created', () => {
+    const service: NpcTextSearchService = TestBed.inject(NpcTextSearchService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/shared/modules/search/npc-text-search.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { NPC_TEXT_SEARCH_FIELDS, NPC_TEXT_TABLE } from '@keira-shared/types/npc-text.type';
+import { MysqlQueryService } from '../../services/mysql-query.service';
+import { ItemTemplate } from '../../types/item-template.type';
+import { SearchService } from './search.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NpcTextSearchService extends SearchService<ItemTemplate> {
+
+  /* istanbul ignore next */ // because of: https://github.com/gotwarlost/istanbul/issues/690
+  constructor(
+    public readonly queryService: MysqlQueryService,
+  ) {
+    super(queryService, NPC_TEXT_TABLE, NPC_TEXT_SEARCH_FIELDS);
+  }
+}

src/app/shared/modules/selectors/npc-text-selector/npc-text-selector-btn.component.spec.ts

@@ -0,0 +1,26 @@
+import { async, TestBed } from '@angular/core/testing';
+
+import { NpcTextSelectorBtnComponent } from './npc-text-selector-btn.component';
+import { NpcTextSelectorModule } from './npc-text-selector.module';
+
+describe('NpcTextSelectorBtnComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ NpcTextSelectorModule ],
+    })
+    .compileComponents();
+  }));
+
+  function setup() {
+    const fixture = TestBed.createComponent(NpcTextSelectorBtnComponent);
+    const component = fixture.componentInstance;
+    fixture.detectChanges();
+
+    return { component, fixture };
+  }
+
+  it('should create', () => {
+    const { component } = setup();
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/modules/selectors/npc-text-selector/npc-text-selector-btn.component.ts

@@ -0,0 +1,23 @@
+import { Component } from '@angular/core';
+import { BsModalService } from 'ngx-bootstrap/modal';
+
+import { NpcTextSelectorModalComponent } from './npc-text-selector-modal.component';
+import { BaseSelectorBtnComponent } from '../base-selector/base-selector-btn.component';
+
+@Component({
+  selector: 'keira-npc-text-selector-btn',
+  templateUrl: '../base-selector/base-selector-btn.component.html',
+  styleUrls: ['../base-selector/base-selector-btn.component.scss']
+})
+export class NpcTextSelectorBtnComponent extends BaseSelectorBtnComponent {
+
+  /* istanbul ignore next */ // because of: https://github.com/gotwarlost/istanbul/issues/690
+  constructor(
+    modalService: BsModalService,
+  ) {
+    super(
+      NpcTextSelectorModalComponent,
+      modalService,
+    );
+  }
+}

src/app/shared/modules/selectors/npc-text-selector/npc-text-selector-modal.component.html

@@ -0,0 +1,52 @@
+<div class="modal-body">
+
+  <p class="lead text-center mb-1">Npc Text selector</p>
+
+  <form [formGroup]="searchService.queryForm">
+    <div class="row">
+      <ng-container [formGroup]="searchService.fields">
+        <div class="form-group col-2">
+          <input [formControlName]="'ID'" type="number" class="form-control form-control-sm" id="ID" placeholder="ID">
+        </div>
+        <div class="form-group col-3">
+          <input [formControlName]="'text0_0'" class="form-control form-control-sm" id="text0_0" placeholder="text0_0">
+        </div>
+        <div class="form-group col-3">
+          <input [formControlName]="'text0_1'" class="form-control form-control-sm" id="text0_1" placeholder="text0_1">
+        </div>
+      </ng-container>
+      <div class="form-group col-2">
+        <input [formControlName]="'limit'" class="form-control form-control-sm" id="limit" placeholder="Unlimited">
+      </div>
+      <div class="col-2">
+        <keira-search-button [searchService]="searchService"></keira-search-button>
+      </div>
+    </div>
+    <code [highlight]="searchService.query"></code>
+  </form>
+
+  <div *ngIf="searchService.rows">
+
+    <ngx-datatable
+      class="bootstrap table table-striped text-center datatable-select highlight-select datatable-icon-list"
+      [rows]="searchService.rows"
+      [headerHeight]="DTCFG.headerHeight"
+      [footerHeight]="DTCFG.footerHeight"
+      [columnMode]="DTCFG.columnMode"
+      [rowHeight]="DTCFG.rowHeightWithIcon"
+      [limit]="DTCFG.limit"
+      [selectionType]="DTCFG.selectionType"
+      (select)='onSelect($event)'
+    >
+      <ngx-datatable-column name="ID" prop="ID" [minWidth]="50" [maxWidth]="50"></ngx-datatable-column>
+      <ngx-datatable-column name="text0_0" prop="text0_0"></ngx-datatable-column>
+      <ngx-datatable-column name="text0_1" prop="text0_1"></ngx-datatable-column>
+    </ngx-datatable>
+
+  </div>
+</div>
+
+<div class="modal-footer">
+  <button type="button" class="btn btn-danger" id="modal-cancel-btn" (click)="onCancel()">Cancel</button>
+  <button type="button" class="btn btn-success" id="modal-select-btn" (click)="onSave()">Select</button>
+</div>