51 lines
2.2 KiB
TypeScript
51 lines
2.2 KiB
TypeScript
|
import { ChangeDetectionStrategy, Component, computed, inject, input, resource } from '@angular/core';
|
||
|
|
import { apiErrorMessage } from '../../core/api';
|
||
|
|
import { SapDbApi } from '../../core/sl/sapdb-api';
|
||
|
|
import type { DetailColumn } from './grid.types';
|
||
|
|
import { RowsTable } from './rows-table';
|
||
|
|
|
||
|
|
/** Tabla de solo lectura con el resultado de una consulta registrada a la base de SAP (el stock de un lote por almacén). */
|
||
|
|
@Component({
|
||
|
|
selector: 'sbo-query-table',
|
||
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
||
|
|
imports: [RowsTable],
|
||
|
|
template: `
|
||
|
|
@if (result.error()) {
|
||
|
|
<p class="err" role="alert">{{ error() }}</p>
|
||
|
|
} @else if (result.isLoading()) {
|
||
|
|
<p class="hint">Consultando…</p>
|
||
|
|
} @else {
|
||
|
|
<sbo-rows-table [columns]="columns()" [rows]="rows()" [readonly]="true" [removable]="false" [hideEmptyBy]="hideEmptyBy() ?? null" [hideEmptyLabel]="hideEmptyLabel()" emptyText="Sin datos." />
|
||
|
|
@if (result.value()?.truncated) {
|
||
|
|
<p class="hint">Hay más filas de las que se muestran.</p>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
styles: `
|
||
|
|
:host { display: block; }
|
||
|
|
.hint { margin: 6px 0; color: var(--quiet); }
|
||
|
|
.err { margin: 6px 0; color: var(--err); }
|
||
|
|
`,
|
||
|
|
})
|
||
|
|
export class QueryTable {
|
||
|
|
private readonly api = inject(SapDbApi);
|
||
|
|
|
||
|
|
readonly query = input.required<string>();
|
||
|
|
readonly params = input.required<Record<string, unknown>>();
|
||
|
|
readonly columns = input.required<readonly DetailColumn[]>();
|
||
|
|
readonly hideEmptyBy = input<readonly string[]>();
|
||
|
|
readonly hideEmptyLabel = input('Ocultar las filas en 0');
|
||
|
|
|
||
|
|
/** La consulta y sus parámetros como texto: quien nos usa puede armar un objeto nuevo en cada ciclo y no por eso se vuelve a consultar. */
|
||
|
|
private readonly request = computed(() => JSON.stringify({ query: this.query(), params: this.params() }));
|
||
|
|
|
||
|
|
protected readonly result = resource({
|
||
|
|
params: () => this.request(),
|
||
|
|
loader: ({ params }) => {
|
||
|
|
const r = JSON.parse(params) as { query: string; params: Record<string, unknown> };
|
||
|
|
return this.api.run(r.query, r.params);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
protected readonly rows = computed(() => (this.result.hasValue() ? this.result.value().rows : []));
|
||
|
|
protected readonly error = computed(() => apiErrorMessage(this.result.error()));
|
||
|
|
}
|