How to put 2 columns and search for them in a pick #1604

Mehmet created 3 years ago

Hi @samuelhelou

Unfortunately, ABP lookup table component do not support displaying extra columns.

However, you can achieve this;

First way: You can handle this situation in backend side. So you can manipulate displayName prop like this: {displayName: "Code: HZON, Name: XXX" } With this way, you can display more than one information in one table column.

Second way: You should create your lookup component and use it instead of the abp-lookup-input component. You can follow the steps below to do this:

Create a new component with the following command:

yarn ng generate component shared/lookup-input --export

Import SharedModule to your module which is generated from ABP Suite.
Open created lookup-input.component.ts file and replace its content with below code:

import { ABP, AbstractNgModelComponent, ListService } from '@abp/ng.core';
import { AfterViewInit, Component, Injector, Input } from '@angular/core';
import { NgControl } from '@angular/forms';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-lookup-input',
  templateUrl: 'lookup-input.component.html',
  providers: [ListService],
})
export class LookupInputComponent
  extends AbstractNgModelComponent<string>
  implements AfterViewInit
{
  @Input() getFn: (params: ABP.PageQueryParams) => Observable<ABP.PagedResponse<any>>;
  @Input() lookupNameProp = 'displayName';
  @Input() displayNameProp = 'name';
  @Input() editingData: any;
  @Input() pickButton = { show: true, disabled: false };
  @Input() clearButton = { show: true, disabled: false };
  @Input() cid?: string;

  selectedName = '';
  isModalVisible: boolean;

  data = {
    items: [],
    totalCount: 0,
  };
  pageQuery: ABP.PageQueryParams = { maxResultCount: 10, skipCount: 0, filter: '' };

  private ngControl: NgControl;
  public readonly list: ListService;

  get isInvalid() {
    return this.ngControl.dirty && this.ngControl.invalid;
  }

  constructor(injector: Injector) {
    super(injector);

    this.list = injector.get(ListService);
    this.ngControl = injector.get(NgControl);
    this.ngControl.valueAccessor = this;
  }

  ngAfterViewInit() {
    if (this.value && this.editingData && this.editingData[this.displayNameProp]) {
      this.selectedName = this.editingData[this.displayNameProp];
    }

    const getData = (query: ABP.PageQueryParams) =>
      this.getFn({
        ...query,
        ...this.pageQuery,
      });

    const setData = list => (this.data = list);

    this.list.hookToQuery(getData).subscribe(setData);
  }

  pick(data: any) {
    this.value = data.id;
    this.selectedName = data[this.lookupNameProp];
    this.isModalVisible = false;
  }

  onClickPick() {
    this.isModalVisible = true;
  }

  onClickClear() {
    this.value = '';
    this.selectedName = '';
  }

  writeValue(value: string): void {
    if (!value) this.selectedName = '';
    super.writeValue(value);
  }
}

Open created lookup-input.component.html file and replace its content with below code:

<div class="input-group">
  <input
    [id]="cid"
    type="text"
    class="form-control"
    disabled
    [ngModel]="selectedName"
    [class.input-validation-error]="isInvalid"
  />
  <div class="input-group-append">
    <button
      *ngIf="pickButton.show"
      [disabled]="pickButton.disabled"
      class="btn btn-info"
      type="button"
      (click)="onClickPick()"
    >
      {{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}
    </button>
    <button
      *ngIf="clearButton.show"
      [disabled]="clearButton.disabled"
      class="btn btn-danger"
      type="button"
      (click)="onClickClear()"
    >
      <i class="fa fa-times"></i>
    </button>
  </div>
</div>

<abp-modal [(visible)]="isModalVisible">
  <ng-template #abpHeader>
    <h3>{{ { key: '::Pick', defaultValue: 'Pick' } | abpLocalization }}</h3>
  </ng-template>

  <ng-template #abpBody>
    <div class="card">
      <div class="card-body">
        <div id="data-tables-table-filter" class="data-tables-filter">
          <label
            ><input
              type="search"
              class="form-control"
              [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
              [(ngModel)]="pageQuery.filter"
              (input.debounce)="list.get()"
          /></label>
        </div>
        <ngx-datatable
          [rows]="data.items"
          [count]="data.totalCount"
          [list]="list"
          default
          [headerHeight]="0"
        >
          <ngx-datatable-column [maxWidth]="150" [width]="150" [sortable]="false">
            <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
              <button class="btn btn-primary btn-sm" type="button" (click)="pick(row)">
                {{ '::Pick' | abpLocalization }}
              </button>
            </ng-template>
          </ngx-datatable-column>

          <ngx-datatable-column [sortable]="false">
            <ng-template let-row="row" ngx-datatable-cell-template>
              {{ row[lookupNameProp] }}
            </ng-template>
          </ngx-datatable-column>

          <!-- you can add new column here -->
        </ngx-datatable>
      </div>
    </div>
  </ng-template>

  <ng-template #abpFooter>
    <button type="button" class="btn btn-secondary" abpClose (click)="isModalVisible = false">
      {{ 'AbpUi::Cancel' | abpLocalization }}
    </button>
  </ng-template>
</abp-modal>