newportsite 1.1.3

package/src/lib/home/model/model.component.html

@@ -0,0 +1,121 @@
+<!-- model.component -->
+<modeltemplate>
+  <div class="scale-outer-wrapper" #outerWrapper>
+    <div
+      class="fill scale-container"
+      #mainContainer
+      [style.transform]="scaleTransform">
+      <div class="d-flex h-100 model-split-layout">
+        <div
+          class="model-split-nav overflow-hidden"
+          [style.width.%]="navAreaSize">
+          <navigation
+            [model]="currentModel"
+            [collapsed]="navCollapsed"
+            (modelChanged)="modelChanged($event)"
+            (hideNavigation)="navigationState($event)"
+            (collapsedChanged)="navigationCollapsed($event)">
+          </navigation>
+        </div>
+        <div
+          class="d-flex flex-column model-split-content overflow-hidden"
+          [style.width.%]="contentAreaSize">
+          <div class="model-header">
+            <div class="model-title truncate" [title]="modelTitle">
+              {{ msg?.getItemInfo(currentModel, 'title') }}
+              {{ gsv?.getExtendedDescription() }}
+            </div>
+          </div>
+          <div>
+            <modeltoolbar
+              [hidden]="hide"
+              [commands]="commands"
+              (commandRaised)="commandRaised($event)"
+              (viewChanged)="viewChanged($event)"
+              [disabled]="showlookup()"></modeltoolbar>
+          </div>
+          <div class="model-breadcrumb">
+            @for (
+              breadCrumb of breadCrumbs;
+              track breadCrumb;
+              let isFirst = $first;
+              let isLast = $last
+            ) {
+              <span class="bc-item" [class.bc-last]="isLast">
+                @if (!isFirst) {
+                  <span class="bc-sep"></span>
+                }
+                <span class="bc-label">{{ breadCrumb }}</span>
+              </span>
+            }
+          </div>
+          <div class="d-flex" style="gap: 2px">
+            <itemtab
+              [model]="currentModel"
+              [hidden]="viewList"
+              (modelChanged)="modelChanged($event)"
+              [insertMode]="insertMode"
+              [disabled]="showlookup()"></itemtab>
+            <itemdetail
+              [model]="currentModel"
+              [hidden]="viewList"
+              (modelChanged)="modelChanged($event)"
+              [insertMode]="insertMode"
+              [disabled]="showlookup()"></itemdetail>
+          </div>
+          <div
+            id="container"
+            #contentContainer
+            class="flex-grow-1 overflow-auto"
+            style="min-height: 0">
+            <article
+              [model]="currentModel"
+              [command]="currentCommand"
+              (viewChanged)="viewChanged($event)"
+              (commandsChanged)="commandsChanged($event)"
+              [viewList]="viewList"
+              [lookupValue]="lookupValue()"
+              [dialogValue]="dialogValue()"
+              [scale]="scale"></article>
+            <grid
+              [hidden]="gridHidden"
+              [style.opacity]="gridOpacity"
+              [model]="currentModel"
+              (viewChanged)="viewChanged($event)"
+              [viewList]="viewList"
+              [refreshGrid]="refreshGrid"
+              [print]="print"></grid>
+          </div>
+        </div>
+      </div>
+      @if (showlookup()) {
+        <lookup
+          [show]="showlookup()"
+          [(text)]="textlookup"
+          [(title)]="titlelookup"
+          (lookupResult)="lookupResult($event)"
+          [(width)]="lookupWidth"
+          [(height)]="lookupHeight"
+          [(top)]="lookupTop"
+          [(left)]="lookupLeft"
+          [(lookup)]="lookup"
+          [(filter)]="lookupfilter">
+        </lookup>
+      }
+      @if (showdialog()) {
+        <messagebox
+          [show]="showdialog()"
+          [(text)]="textdialog"
+          [(title)]="titledialog"
+          (messageResult)="dialogResult($event)"
+          [(showconfirm)]="showconfirm"
+          [(width)]="dialogWidth"
+          [(height)]="dialogHeight"
+          [(top)]="dialogTop"
+          [(left)]="dialogLeft">
+        </messagebox>
+      }
+    </div>
+  </div>
+</modeltemplate>
+<!-- fine model.component-->

package/src/lib/home/model/model.component.ts

@@ -0,0 +1,510 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  AfterViewInit,
+  viewChild,
+  ElementRef,
+  signal,
+  HostListener,
+  DestroyRef,
+  inject,
+  AfterViewChecked,
+} from '@angular/core';
+
+import { GlobalService } from '../../services/global.service';
+
+import { AppMessageService } from '../../services/message.service';
+
+import {
+  ItemCommandInterface,
+  ItemInterface,
+  ViewListInterface,
+  LookupFieldInterface,
+  DialogFieldInterface,
+} from '../../interfaces/index';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ModelTemplateComponent } from '../../template/modeltemplate.component';
+import { NavigationComponent } from './navigation.component';
+import { ModelToolbarComponent } from './modeltoolbar.component';
+import { ItemTabComponent } from './itemtab.component';
+import { ItemDetailComponent } from './itemdetail.component';
+import { ArticleComponent } from './article.component';
+import { GridComponent } from '../../common/grid.component';
+import { LookupComponent } from '../../common/lookup.component';
+import { MessageBoxComponent } from '../../common/messagebox.component';
+
+@Component({
+  selector: 'app-model',
+  templateUrl: 'model.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    ModelTemplateComponent,
+    NavigationComponent,
+    ModelToolbarComponent,
+    ItemTabComponent,
+    ItemDetailComponent,
+    ArticleComponent,
+    GridComponent,
+    LookupComponent,
+    MessageBoxComponent,
+  ],
+})
+
+export class ModelComponent implements AfterViewInit, AfterViewChecked {
+
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+
+  public commands: ItemCommandInterface[] = [];
+  public currentModel!: ItemInterface;
+  public previousModel!: ItemInterface;
+  public viewList = true;
+  public currentCommand!: ItemCommandInterface;
+  public insertMode = false;
+  public refreshGrid = false;
+  public lookupValue = signal<any>(undefined);
+  public dialogValue = signal<any>(undefined);
+  public print = false;
+
+  // Messagebox
+  public showdialog = signal(false);
+  public titledialog = '';
+  public textdialog = '';
+  public showconfirm = false;
+  public dialogHeight = 0;
+  public dialogWidth = 0;
+  public dialogTop = 0;
+  public dialogLeft = 0;
+
+  // Lookup
+  public showlookup = signal(false);
+  public titlelookup = '';
+  public textlookup = '';
+  public lookupHeight = 0;
+  public lookupWidth = 0;
+  public lookupTop = 0;
+  public lookupLeft = 0;
+  public lookup = '';
+  public lookupfilter = '';
+  public hideNavigation = true;
+  public navCollapsed = false;
+  public scale = 0; // totalScale — propagated via [(scale)] to ModelItemComponent → GlobalService
+  public uiScale = 0; // chrome scale capped at 1: applied to #mainContainer
+  public hide = true;
+
+  /** Returns the split-pane pixel size for the navigation panel (0 when hidden). */
+  get navAreaSize(): number {
+    if (this.hideNavigation) return 0;
+    return this.navCollapsed ? 8 : 20;
+  }
+  /** Returns the split-pane pixel size for the content area (100% when nav is hidden). */
+  get contentAreaSize(): number {
+    if (this.hideNavigation) return 100;
+    return this.navCollapsed ? 92 : 80;
+  }
+  /** Returns the title string for the active model item. */
+  get modelTitle(): string {
+    return `${this.currentModel?.title ?? ''} ${this.gsv?.getExtendedDescription() ?? ''}`.trim();
+  }
+  /** Returns the CSS transform string that scales the SVG/form content area. */
+  get scaleTransform(): string {
+    return `scale(${this.uiScale})`;
+  }
+  public articleRendered = false;
+
+  /** Returns true when the AG-Grid panel should be hidden (no list view and no masterDetail split). */
+  get gridHidden(): boolean {
+    return !this.viewList && !this.currentModel?.masterDetail;
+  }
+  /**
+   * Returns 0 (transparent) until the article wrapper has been rendered, then 1 (opaque).
+   * For masterDetail models the grid is always visible alongside the article,
+   * so we never hide it during the article-render transition.
+   */
+  get gridOpacity(): number {
+    if (this.currentModel?.masterDetail) return 1;
+    return this.articleRendered ? 1 : 0;
+  }
+  private destroyRef = inject(DestroyRef);
+  private _prevScaleKey = '';
+  public breadCrumbs: string[] = [];
+
+  readonly mainContainer = viewChild.required<ElementRef>('mainContainer');
+  readonly outerWrapper = viewChild.required<ElementRef>('outerWrapper');
+  readonly contentContainer =
+    viewChild.required<ElementRef>('contentContainer');
+
+  /** Checks whether scale inputs have changed and, if so, calls refreshScale(). */
+  ngAfterViewChecked() {
+    const el = this.outerWrapper().nativeElement;
+    const key = `${el.clientWidth}x${el.clientHeight}|${this.viewList}|${this.showlookup()}|${this.currentModel?.id ?? ''}`;
+    if (key !== this._prevScaleKey) {
+      this._prevScaleKey = key;
+      this.refreshScale();
+    }
+  }
+
+  /**
+   * Measures the article/SVG dimensions and the viewport to compute the CSS
+   * scale factor that fits the form inside the available content area.
+   */
+  public refreshScale() {
+    const mc = this.mainContainer().nativeElement;
+    const cc = this.contentContainer().nativeElement;
+    const w = this.outerWrapper().nativeElement.clientWidth * 1.1;
+    if (w === 0) {
+      this.scale = 1;
+      this.uiScale = 1;
+      return;
+    }
+
+    const modelItem = cc.querySelector('app-model-item');
+
+    if (modelItem === null) {
+      this.scale = 1;
+      this.uiScale = 1;
+      mc.style.width = '100%';
+      mc.style.height = '100%';
+      cc.style.transform = '';
+      cc.style.width = '';
+      cc.style.height = '';
+      return;
+    }
+
+    const article = cc.querySelector('article') as HTMLElement | null;
+    const gridHost = cc.querySelector('grid') as HTMLElement | null;
+    const agGrid = cc.querySelector('ag-grid-angular') as HTMLElement | null;
+
+    const md = this.currentModel?.masterDetail ?? 0;
+    const hasSvg = (this.currentModel?.svg?.length ?? 0) > 0;
+
+    // Use model's declared design width; fall back to SVG img width → scrollWidth
+    let ww = parseInt(this.currentModel?.width ?? '', 10) || 0;
+    if (ww === 0 && hasSvg) {
+      // When SVG is present, use the img's actual design width so scale = w/entity.width
+      const svgImg = cc.querySelector('#bkgwhite') as HTMLImageElement | null;
+      ww =
+        (svgImg
+          ? parseInt(svgImg.style.width, 10) || svgImg.naturalWidth
+          : 0) || 0;
+    }
+    if (ww === 0) ww = (modelItem.children[0] as HTMLElement)?.scrollWidth ?? 0;
+    if (ww === 0) ww = w;
+
+    // totalScale: SVG is vector → fill the full available width; forms: never above 1
+    this.scale = hasSvg ? w / ww : Math.min(w / ww, 1);
+    // uiScale: chrome (toolbar/itemtab/itemdetail) — never above 1
+    this.uiScale = Math.min(this.scale, 1);
+    // contentExtra: extra scale applied only to article+grid (#contentContainer)
+    const contentExtra = this.uiScale > 0 ? this.scale / this.uiScale : 1;
+
+    // Expand mainContainer to compensate uiScale so it fills outerWrapper
+    mc.style.width = 100 / this.uiScale + '%';
+    mc.style.height = 100 / this.uiScale + '%';
+
+    // contentContainer: apply extra scale for SVG (> 1 only when ratio > 1 and SVG)
+    if (contentExtra > 1) {
+      cc.style.transform = `scale(${contentExtra})`;
+      cc.style.transformOrigin = '0 0';
+      cc.style.width = 100 / contentExtra + '%';
+      cc.style.height = 100 / contentExtra + '%';
+    } else {
+      cc.style.transform = '';
+      cc.style.width = '';
+      cc.style.height = '';
+    }
+
+    if (article) {
+      if (this.viewList) {
+        // List view: hide the article so the grid occupies the full container.
+        article.style.position = 'fixed';
+        article.style.width = '0px';
+        article.style.height = '0px';
+        article.style.minHeight = '';
+        article.style.overflowY = '';
+      } else {
+        // Detail view: show the article at full width.
+        article.style.position = 'relative';
+        article.style.top = '0px';
+        article.style.width = '100%';
+        article.style.maxHeight = '';
+        article.style.overflowY = 'auto';
+        if (md > 0) {
+          // masterDetail: article takes top md%, grid takes the remainder.
+          article.style.height = md + '%';
+          article.style.minHeight = '50px';
+        } else {
+          article.style.height = 100 / contentExtra + '%';
+          article.style.minHeight = '';
+        }
+      }
+    }
+
+    if (gridHost) {
+      gridHost.style.width = '100%';
+      // In list view the article is hidden, so the grid takes the full height
+      // even when masterDetail is configured.
+      gridHost.style.height =
+        md > 0 && !this.viewList ? 100 - md + '%' : '100%';
+    }
+    if (agGrid) {
+      agGrid.style.opacity = this.showlookup() ? '0.1' : '0.9';
+    }
+  }
+
+  /** Computes the centred top/left position for a floating panel of given size. */
+  private centrePanel(h: number, w: number): { top: number; left: number } {
+    const s = this.scale || 1;
+    return {
+      top: Math.max(0, (window.innerHeight / s - h) / 2),
+      left: Math.max(0, (window.innerWidth / s - w) / 2),
+    };
+  }
+
+  @HostListener('window:resize')
+  /** HostListener: recalculates scale and re-centres dialog/lookup panels on window resize. */
+  public onResize() {
+    this._prevScaleKey = '';
+    this.refreshScale();
+    if (this.showdialog() && this.dialogWidth > 0 && this.dialogHeight > 0) {
+      ({ top: this.dialogTop, left: this.dialogLeft } = this.centrePanel(
+        this.dialogHeight,
+        this.dialogWidth
+      ));
+    }
+    if (this.showlookup() && this.lookupWidth > 0 && this.lookupHeight > 0) {
+      ({ top: this.lookupTop, left: this.lookupLeft } = this.centrePanel(
+        this.lookupHeight,
+        this.lookupWidth
+      ));
+    }
+  }
+
+  /** Lifecycle: wires lookup, dialog, and grid-refresh subscriptions from GlobalService. */
+  public ngAfterViewInit() {
+    this.viewList = this.currentModel?.viewList ?? true;
+    this.gsv
+      .getLookupField()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(lookup => this.setLookup(lookup));
+    this.gsv
+      .getDialogField()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(dialog => this.setDialog(dialog));
+    this.gsv
+      .getGridRefresh()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => {
+        this.refreshGrid = !this.refreshGrid;
+      });
+  }
+
+  /** Applies lookup panel position/visibility state received from the child model item. */
+  public setLookup(lookup: LookupFieldInterface) {
+    this.showlookup.set(lookup.showlookup);
+    this.gsv.setModalActive(lookup.showlookup);
+    this.titlelookup = lookup.titlelookup;
+    this.textlookup = lookup.textlookup;
+    this.lookupHeight = lookup.lookupHeight;
+    this.lookupWidth = lookup.lookupWidth;
+    this.lookupTop = lookup.lookupTop;
+    this.lookupLeft = lookup.lookupLeft;
+    this.lookup = lookup.lookup;
+    this.lookupfilter = lookup.lookupfilter;
+  }
+
+  /** Applies dialog/messagebox position and visibility state received from the child model item. */
+  public setDialog(dialog: DialogFieldInterface) {
+    this.showdialog.set(dialog.showdialog);
+    this.gsv.setModalActive(dialog.showdialog);
+    this.titledialog = dialog.titledialog;
+    this.textdialog = dialog.textdialog;
+    this.showconfirm = dialog.showconfirm;
+    this.dialogHeight = dialog.dialogHeight;
+    this.dialogWidth = dialog.dialogWidth;
+    this.dialogTop = dialog.dialogTop;
+    this.dialogLeft = dialog.dialogLeft;
+  }
+
+  /** Forwards dialog-close event to the child model item and clears local dialog state. */
+  public dialogResult(rsp: any) {
+    this.showdialog.set(false);
+    this.gsv.setModalActive(false);
+    this.dialogValue.set(rsp);
+    this.titledialog = '';
+    this.textdialog = '';
+    this.showconfirm = false;
+    this.dialogHeight = 0;
+    this.dialogWidth = 0;
+    this.dialogTop = 0;
+    this.dialogLeft = 0;
+  }
+
+  /** Forwards lookup-selection event to the child model item and clears local lookup state. */
+  public lookupResult(rsp: any) {
+    this.showlookup.set(false);
+    this.gsv.setModalActive(false);
+    this.lookupValue.set(rsp);
+    this.titlelookup = '';
+    this.textlookup = '';
+    this.lookupHeight = 0;
+    this.lookupWidth = 0;
+    this.lookupTop = 0;
+    this.lookupLeft = 0;
+    this.lookup = '';
+    this.lookupfilter = '';
+  }
+
+  /** Handles toolbar command updates emitted by the child article component. */
+  public commandsChanged(commands: ItemCommandInterface[]) {
+    if (commands) {
+      this.articleRendered = true;
+      this.commands = commands;
+      if (this.currentModel?.viewList && this.viewList) {
+        this.viewList = this.currentModel.viewList;
+        this.insertMode = commands.find(c => c.id === 'insertmode')!.state;
+      }
+    }
+  }
+
+  /** Dispatches toolbar actions (exit, print, viewState, etc.) to the active model item. */
+  public commandRaised(commandId: string) {
+    if (commandId === 'exit') {
+      this.gsv
+        .getProjectItems(
+          this.gsv.getProject().project + '.' + this.gsv.getProject().year
+        )
+        .forEach(item => {
+          item.loaded = false;
+        });
+    }
+    if (commandId !== 'viewState') {
+      if (this.viewList && commandId !== 'exit' && commandId !== 'print') {
+        this.viewList = false;
+      }
+      if (commandId === 'print') {
+        this.print = !this.print;
+      }
+      this.currentCommand = { id: commandId, state: true };
+    }
+  }
+
+  /** Updates the active model reference, breadcrumbs, and view state on model navigation. */
+  public modelChanged(model: ItemInterface) {
+    this.breadCrumbs = [];
+    this.gsv.setExtendedDescription('');
+    try {
+      const origin = localStorage.getItem('origin');
+      if (origin) {
+        queueMicrotask(() => {
+          try {
+            localStorage.removeItem('origin');
+
+            const originParts = origin.split('.');
+            if (originParts.length < 3) {
+              return;
+            }
+
+            const projectKey = originParts.slice(0, 2).join('.');
+            const modelSource = this.gsv.getProjectItems(projectKey);
+
+            if (!modelSource) {
+              return;
+            }
+
+            const targetModel = modelSource.filter(
+              e => e.name === originParts[2]
+            )[0];
+            if (!targetModel) {
+              return;
+            }
+
+            if (originParts[3]) {
+              this.gsv.setCurrentFocus({ id: originParts[3], value: '' });
+            }
+            if (originParts[4]) {
+              this.gsv.setCurrentKeys(originParts[4]);
+            }
+
+            this.modelChanged(targetModel);
+          } catch {
+            // origin parsing failed — continue silently
+          }
+        });
+      } else {
+        if (localStorage.length > 0) {
+          Object.keys(localStorage)
+            .filter(k => k.split('.').length > 4)
+            .sort(
+              (a, b) =>
+                parseInt(a.split('.')[0], 10) - parseInt(b.split('.')[0], 10)
+            )
+            .forEach(element => {
+              const parts = element.split('.');
+              this.breadCrumbs.push(parts[4]);
+            });
+        }
+        if (
+          this.previousModel &&
+          (this.previousModel.linkedItems?.[0]?.length ?? 1) === 0
+        ) {
+          this.previousModel.loaded = false;
+        }
+        this.previousModel = this.currentModel;
+        if (
+          this.currentModel === undefined ||
+          model.id !== this.currentModel.id
+        ) {
+          this.currentModel = model;
+          this.hide = false;
+          if (
+            this.currentModel.groupName === '' ||
+            this.previousModel === undefined ||
+            this.currentModel.groupName !== this.previousModel.groupName
+          ) {
+            this.gsv.setCurrentLinkItem({
+              id: this.currentModel.id,
+              groupName: this.currentModel.groupName,
+              prg: this.currentModel.prgDim === 1 ? [1] : [1, 1],
+            });
+          }
+        }
+        this.viewList = model.viewList && !model.loaded;
+      }
+    } catch {
+      // modelChanged failed — continue silently
+    }
+  }
+
+  /** Handles grid row selection or view-list toggle from the grid component. */
+  public viewChanged(changed: ViewListInterface) {
+    const hasRows = Array.isArray(changed.rows) && changed.rows.length > 0;
+    const isMasterDetail = this.currentModel?.masterDetail !== 0;
+
+    if ((this.viewList || isMasterDetail) && hasRows) {
+      // Row selected in the grid → navigate to that record's article view.
+      this.articleRendered = isMasterDetail; // keep grid visible for masterDetail
+      this.currentCommand = {
+        id: 'go:' + (changed.rows![0] as { _prg: string })._prg.replace(',', ';'),
+        state: true,
+      };
+      this.viewList = false;
+    } else if (!isMasterDetail) {
+      // Toggle back to list view (toolbar "table" button).
+      this.viewList = changed.state;
+      this.previousModel = this.currentModel;
+      this.currentCommand = { id: 'table', state: changed.state };
+      this.refreshGrid = !this.refreshGrid;
+    }
+  }
+
+  /** Toggles the navigation panel visibility. */
+  public navigationState(state: boolean) {
+    this.hideNavigation = state;
+  }
+
+  /** Toggles the navigation panel between collapsed and expanded. */
+  public navigationCollapsed(collapsed: boolean) {
+    this.navCollapsed = collapsed;
+  }
+}