feat(web): «Campos» también en pagos, asientos y filas con varios controles; no se muestran las columnas internas

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/src/app/shared/form/sbo-field.ts

@@ -22,7 +22,7 @@ let nextId = 0;
         [class.link]="linkable()"
         [attr.title]="dbName() ?? null"
         (click)="labelClick.emit()"
-        >{{ label() }}@if (dbName() && names.show()) {
+        ><span class="t">{{ label() }}</span>@if (dbName() && names.show()) {
           <span class="db">{{ dbName() }}</span>
         }</label
       >
@@ -51,7 +51,7 @@ let nextId = 0;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    label.req::after {
+    label.req .t::after {
       content: ' *';
       color: var(--err);
     }
@@ -74,6 +74,8 @@ let nextId = 0;
       margin-top: -2px;
       font: 10.5px/1.2 var(--mono, monospace);
       color: var(--quiet);
+      white-space: normal;
+      overflow-wrap: anywhere;
     }
     label.link {
       cursor: pointer;

apps/web/src/app/shared/grid/lines-grid.html

@@ -15,7 +15,7 @@
       <tr>
         <th class="rn">#</th>
         @for (c of columns(); track c.key; let j = $index) {
-          <th sboColResize [style.width]="c.width" [style.text-align]="alignOf(c)" [class.req]="c.required" [attr.title]="c.key">{{ c.title }}@if (names.show()) {
+          <th sboColResize [style.width]="c.width" [style.text-align]="alignOf(c)" [class.req]="c.required" [attr.title]="isSap(c.key) ? c.key : null">{{ c.title }}@if (names.show() && isSap(c.key)) {
               <span class="db">{{ c.key }}</span>
             }</th>
           @if (hasDetails() && j === detailAt()) {

apps/web/src/app/shared/grid/lines-grid.ts

@@ -12,7 +12,7 @@ import {
   output,
   signal,
 } from '@angular/core';
-import { FieldNames } from '../../core/field-names';
+import { FieldNames, isSapField } from '../../core/field-names';
 import { formatNumber, parseDecimal } from '../../core/format';
 import { SlLookupApi } from '../../core/sl/sl-lookup';
 import type { ListRow } from '../list/list.types';
@@ -59,6 +59,7 @@ export class LinesGrid {
   private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);
   private readonly injector = inject(Injector);
   protected readonly names = inject(FieldNames);
+  protected readonly isSap = isSapField;
 
   constructor() {
     // las celdas de código con texto propio (la cuenta con su formato) piden los textos de las líneas que se cargan

apps/web/src/app/shared/grid/rows-table.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { ChangeDetectionStrategy, Component, computed, effect, inject, input, model, signal } from '@angular/core';
 import { API_URL } from '../../core/api';
-import { FieldNames } from '../../core/field-names';
+import { FieldNames, isSapField } from '../../core/field-names';
 import { formatNumber, parseDecimal } from '../../core/format';
 import { SlLookupApi } from '../../core/sl/sl-lookup';
 import type { ListRow } from '../list/list.types';
@@ -32,7 +32,7 @@ const dateOnly = (v: unknown): string => (typeof v === 'string' ? v.slice(0, 10)
           <tr>
             <th class="rn">#</th>
             @for (c of columns(); track c.key) {
-              <th [style.width]="c.width" [class.req]="c.required" [attr.title]="c.key">{{ c.title }}@if (fieldNames.show()) {
+              <th [style.width]="c.width" [class.req]="c.required" [attr.title]="isSap(c.key) ? c.key : null">{{ c.title }}@if (fieldNames.show() && isSap(c.key)) {
                 <span class="db">{{ c.key }}</span>
               }</th>
             }
@@ -186,6 +186,7 @@ export class RowsTable {
   });
 
   protected readonly fieldNames = inject(FieldNames);
+  protected readonly isSap = isSapField;
   private readonly lookupApi = inject(SlLookupApi);
   private readonly http = inject(HttpClient);
   /** Nombres de los catálogos de las columnas `nameOf`, por recurso. */

apps/web/src/app/shared/list/data-table.html

@@ -19,11 +19,11 @@
             [style.text-align]="align(c)"
             [class.pick]="searchable(c)"
             [class.active]="c.key === activeColumnKey()"
-            [attr.title]="(searchable(c) ? 'Buscar en esta columna · ' : '') + c.key"
+            [attr.title]="(searchable(c) ? 'Buscar en esta columna' : '') + (searchable(c) && isSap(c.key) ? ' · ' : '') + (isSap(c.key) ? c.key : '') || null"
             (click)="columnPicked.emit(c)"
           >
             {{ c.title }}
-            @if (names.show()) {
+            @if (names.show() && isSap(c.key)) {
               <span class="db">{{ c.key }}</span>
             }
           </th>

apps/web/src/app/shared/list/data-table.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, computed, inject, input, output } from '@angular/core';
-import { FieldNames } from '../../core/field-names';
+import { FieldNames, isSapField } from '../../core/field-names';
 import { ColResize } from '../table/col-resize';
 import { Badge } from '../window/badge';
 import { type ListColumn, type ListRow, alignOf, cellText, isSearchable, type Tone } from './list.types';
@@ -17,6 +17,7 @@ import { type ListColumn, type ListRow, alignOf, cellText, isSearchable, type To
 })
 export class DataTable {
   protected readonly names = inject(FieldNames);
+  protected readonly isSap = isSapField;
 
   readonly columns = input.required<readonly ListColumn[]>();
   readonly rows = input.required<readonly ListRow[]>();