newportsite 1.1.3

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

@@ -0,0 +1,111 @@
+<!-- modeltoolbar.component -->
+<div class="mtb-bar-m2" [class.pe-none]="gsv?.getLoading()">
+  <div class="mtb-group">
+    <a class="mtb-btn" (click)="click('exit')">
+      <i
+        [class.icon-disabled]="exitState || gsv?.getLoading()"
+        [class.icon-exit]="!exitState && !gsv?.getLoading()"
+        class="bi bi-box-arrow-left"
+        title="{{ msg?.get('app.exit') }}"></i>
+    </a>
+  </div>
+
+  <div class="mtb-divider"></div>
+
+  <div class="mtb-group">
+    <a class="mtb-btn" (click)="click('plus')">
+      <i
+        [class.icon-disabled]="plusState || gsv?.getLoading()"
+        class="bi bi-plus-circle"
+        title="{{ msg?.get('app.plus') }}"></i>
+    </a>
+    <a class="mtb-btn" (click)="click('minus')">
+      <i
+        [class.icon-disabled]="minusState || gsv?.getLoading()"
+        class="bi bi-patch-minus"
+        title="{{ msg?.get('app.minus') }}"></i>
+    </a>
+  </div>
+
+  <div class="mtb-divider"></div>
+
+  <div class="mtb-group">
+    <a class="mtb-btn" (click)="click('detail')">
+      <i
+        [class.icon-disabled]="detailState || gsv?.getLoading()"
+        class="bi bi-card-text"
+        title="{{ msg?.get('app.detail') }}"></i>
+    </a>
+    <a class="mtb-btn" (click)="click('intodetail')">
+      <i
+        [class.icon-disabled]="intodetailState || gsv?.getLoading()"
+        class="bi bi-box-arrow-up-left"
+        title="{{ msg?.get('app.intodetail') }}"></i>
+    </a>
+    <a class="mtb-btn" (click)="click('table')">
+      <i
+        [class.icon-disabled]="tableState || gsv?.getLoading()"
+        class="bi bi-list"
+        title="{{ msg?.get('app.table') }}"></i>
+    </a>
+    <a class="mtb-btn" (click)="click('print')">
+      <i
+        [class.icon-disabled]="printState || gsv?.getLoading()"
+        class="bi bi-printer"
+        title="{{ msg?.get('app.print') }}"></i>
+    </a>
+  </div>
+
+  <div class="mtb-divider"></div>
+
+  <div class="mtb-group">
+    <a class="mtb-btn" [class.pe-none]="saveState" (click)="click('save')">
+      <i
+        [class.icon-disabled]="saveState"
+        class="bi bi-save"
+        title="{{ msg?.get('app.save') }}"></i>
+    </a>
+    <a class="mtb-btn d-none d-lg-flex" (click)="click('upload')">
+      <i
+        [class.icon-disabled]="uploadState || gsv?.getLoading()"
+        class="bi bi-upload"
+        title="{{ msg?.get('app.upload') }}"></i>
+    </a>
+    <a class="mtb-btn d-none d-lg-flex" (click)="click('download')">
+      <i
+        [class.icon-disabled]="downloadState || gsv?.getLoading()"
+        class="bi bi-download"
+        title="{{ msg?.get('app.download') }}"></i>
+    </a>
+  </div>
+
+  <div class="mtb-spacer"></div>
+
+  <div class="mtb-group">
+    <a class="mtb-btn d-none d-lg-flex" (click)="click('first')">
+      <i
+        [class.icon-disabled]="firstState || gsv?.getLoading()"
+        class="bi bi-chevron-double-left"
+        title="{{ msg?.get('app.first') }}"></i>
+    </a>
+    <a class="mtb-btn" (click)="click('previous')">
+      <i
+        [class.icon-disabled]="previousState || gsv?.getLoading()"
+        class="bi bi-chevron-left"
+        title="{{ msg?.get('app.previous') }}"></i>
+    </a>
+    <a class="mtb-btn" (click)="click('next')">
+      <i
+        [class.icon-disabled]="nextState || gsv?.getLoading()"
+        class="bi bi-chevron-right"
+        title="{{ msg?.get('app.next') }}"></i>
+    </a>
+    <a class="mtb-btn d-none d-lg-flex" (click)="click('last')">
+      <i
+        [class.icon-disabled]="lastState || gsv?.getLoading()"
+        class="bi bi-chevron-double-right"
+        title="{{ msg?.get('app.last') }}"></i>
+    </a>
+  </div>
+</div>
+<!-- fine modeltoolbar.component -->

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

@@ -0,0 +1,157 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  DestroyRef,
+  OnInit,
+  effect,
+  input,
+  output,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { GlobalService } from '../../services/global.service';
+import { AppMessageService } from '../../services/message.service';
+
+import {
+  ItemCommandInterface,
+  ViewListInterface,
+} from '../../interfaces/index';
+
+@Component({
+  selector: 'modeltoolbar',
+  templateUrl: 'modeltoolbar.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class ModelToolbarComponent implements OnInit {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+  private destroyRef = inject(DestroyRef);
+  private cdr = inject(ChangeDetectorRef);
+
+  readonly commands = input<ItemCommandInterface[]>([]);
+  readonly disabled = input<boolean>();
+  readonly commandRaised = output<string>();
+  readonly viewChanged = output<ViewListInterface>();
+
+  private static readonly CMD_IDS = [
+    'exit',
+    'plus',
+    'minus',
+    'first',
+    'previous',
+    'next',
+    'last',
+    'upload',
+    'download',
+    'detail',
+    'intodetail',
+    'print',
+    'table',
+    'save',
+    'insertmode',
+  ] as const;
+
+  /** All command states keyed by id — true = disabled. */
+  public state: Record<string, boolean> = {};
+  public hidenavigation = true;
+
+  // Template-compatible aliases (kept as getters so existing HTML bindings still work)
+  get exitState() {
+    return this.state['exit'];
+  }
+  get plusState() {
+    return this.state['plus'];
+  }
+  get minusState() {
+    return this.state['minus'];
+  }
+  get firstState() {
+    return this.state['first'];
+  }
+  get previousState() {
+    return this.state['previous'];
+  }
+  get nextState() {
+    return this.state['next'];
+  }
+  get lastState() {
+    return this.state['last'];
+  }
+  get uploadState() {
+    return this.state['upload'];
+  }
+  get downloadState() {
+    return this.state['download'];
+  }
+  get detailState() {
+    return this.state['detail'];
+  }
+  get intodetailState() {
+    return this.state['intodetail'];
+  }
+  get printState() {
+    return this.state['print'];
+  }
+  get tableState() {
+    return this.state['table'];
+  }
+  get saveState() {
+    return this.state['save'];
+  }
+  get insertModeState() {
+    return this.state['insertmode'];
+  }
+
+  constructor() {
+    this.resetCommand();
+    effect(() => {
+      if (this.disabled()) this.resetCommand();
+    });
+  }
+
+  /** Lifecycle: subscribes to the GlobalService command stream and applies state updates. */
+  public ngOnInit() {
+    this.gsv
+      .getItemCommands()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(commands => {
+        this.setState(commands);
+      });
+  }
+
+  /** Handles a toolbar button click: emits viewChanged for 'table', otherwise raises the command by id. */
+  public click(id: string) {
+    if (this.state[id]) return; // state true = disabled → skip
+    if (id === 'table') {
+      this.viewChanged.emit({ state: true });
+      this.resetCommand();
+    } else {
+      this.commandRaised.emit(id);
+    }
+  }
+
+  /** Sets all command states to disabled (true). */
+  private resetCommand() {
+    for (const id of ModelToolbarComponent.CMD_IDS) {
+      this.state[id] = true;
+    }
+  }
+
+  /** Applies incoming command states and recomputes the navigation-row visibility flag. */
+  private setState(commands: ItemCommandInterface[]) {
+    for (const cmd of commands) {
+      if (cmd.id in this.state) {
+        this.state[cmd.id] = cmd.state;
+      }
+    }
+    this.hidenavigation =
+      this.state['first'] &&
+      this.state['previous'] &&
+      this.state['next'] &&
+      this.state['last'];
+    this.cdr.markForCheck();
+  }
+}

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

@@ -0,0 +1,86 @@
+<!-- navigation.component -->
+@if (!hide) {
+  <div
+    class="nav-panel h-100"
+    [class.nav-panel-compact]="collapsed()"
+    [class.pe-none]="gsv?.getLoading()">
+    <!-- HEADER: always visible -->
+    <div class="nav-header">
+      <div class="nav-header-top">
+        @if (!collapsed()) {
+          <span
+            class="nav-title truncate"
+            title="{{ msg?.getProjectDescription('description') }}">
+            {{ msg?.getProjectDescription('description') }}
+          </span>
+        }
+        <button
+          class="nav-toggle-btn"
+          (click)="toggleCollapse()"
+          [title]="
+            collapsed() ? msg?.get('app.expand') : msg?.get('app.collapse')
+          ">
+          <i
+            class="bi"
+            [class.bi-chevron-double-right]="collapsed()"
+            [class.bi-chevron-double-left]="!collapsed()"></i>
+        </button>
+      </div>
+      @if (!collapsed()) {
+        <div class="nav-filter-wrap">
+          <i class="bi bi-search nav-filter-icon"></i>
+          <input
+            id="filter"
+            #txt1
+            [title]="msg?.get('app.filter')"
+            type="text"
+            class="nav-filter-input"
+            [placeholder]="msg?.get('app.filter')"
+            (input)="filter(txt1.value)" />
+        </div>
+      }
+    </div>
+
+    <!-- ITEMS -->
+    <div class="navigation">
+      @if (collapsed()) {
+        @for (item of items; track item) {
+          <div
+            class="nav-entry nav-entry-compact"
+            [class.nav-active]="active === item">
+            <a
+              [title]="msg?.getItemInfo(item, 'title')"
+              (click)="click(item)"
+              [hidden]="!item.visible"
+              [class.disabled]="!item.enabled">
+              <span
+                class="nav-state-dot"
+                [ngClass]="getDesktopStateClass(item)"></span>
+              <span class="nav-item-id">{{ item.id }}</span>
+            </a>
+          </div>
+        }
+      } @else {
+        @for (item of items; track item) {
+          <div class="nav-entry" [class.nav-active]="active === item">
+            <a
+              [title]="msg?.getItemInfo(item, 'title')"
+              (click)="click(item)"
+              [hidden]="!item.visible"
+              [class.disabled]="!item.enabled">
+              <span
+                class="nav-state-dot"
+                [ngClass]="getDesktopStateClass(item)"></span>
+              <span
+                class="nav-item-text truncate"
+                [ngClass]="getItemTextClass(item)">
+                {{ msg?.getItemInfo(item, 'title') }}
+              </span>
+            </a>
+          </div>
+        }
+      }
+    </div>
+  </div>
+}
+<!-- fine navigation.component -->

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

@@ -0,0 +1,247 @@
+import {
+  Component,
+  input,
+  output,
+  effect,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  OnDestroy,
+  AfterViewInit,
+  DestroyRef,
+  inject,
+} from '@angular/core';
+
+import { GlobalService } from '../../services/global.service';
+
+import { AppMessageService } from '../../services/message.service';
+
+import {
+  ItemInterface,
+  ItemState,
+  ManagmentInterface,
+  ItemType,
+} from '../../interfaces/index';
+import { ManagmentService } from './services/index';
+import { Subscription } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'navigation',
+  templateUrl: 'navigation.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgClass],
+})
+export class NavigationComponent implements AfterViewInit, OnDestroy {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+  msv = inject(ManagmentService);
+  private destroyRef = inject(DestroyRef);
+  private cdr = inject(ChangeDetectorRef);
+
+  readonly modelChanged = output<ItemInterface>();
+  readonly hideNavigation = output<boolean>();
+  readonly collapsedChanged = output<boolean>();
+  readonly collapsed = input<boolean>(false);
+  public items!: ItemInterface[];
+  public itemState = ItemState;
+  public active: ItemInterface | null = null;
+  public projectId!: string;
+  public projectItems: ItemInterface[] | undefined;
+  public hide = false;
+  private managment: ManagmentInterface = {
+    functionId: '',
+    appId: '',
+    entId: '',
+    year: 0,
+    keys: '',
+    fields: [],
+    states: [],
+    entIds: [],
+    keyId: '1',
+    filterId: '',
+    page: 1,
+    data: '',
+  };
+  readonly model = input<ItemInterface>();
+  private subscriptionItemState!: Subscription;
+
+  constructor() {
+    // Re-render nav state dots whenever updateState() recalculates item states.
+    this.gsv
+      .getItemState()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.cdr.markForCheck());
+
+    effect(() => {
+      const m = this.model();
+      if (m && this.items?.length > 0) {
+        this.click(m);
+      }
+    });
+  }
+
+  /** Lifecycle: cleans up subscriptions and resets the active item state. */
+  public ngOnDestroy(): void {
+    this.subscriptionItemState?.unsubscribe();
+    this.items = [];
+    this.projectItems = [];
+    this.active = null;
+  }
+
+  /** Lifecycle: subscribes to projectChanged and loads the initial navigation item list. */
+  public ngAfterViewInit(): void {
+    this.gsv
+      .getProjectChanged()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(projectId => {
+        this.reinitializeForProject();
+      });
+
+    this.initializeProject();
+  }
+
+  /** Fetches project items from cache or API and calls setupProject to populate the list. */
+  private initializeProject(): void {
+    this.managment.appId = this.gsv.getProject().project;
+    this.managment.year = this.gsv.getYear();
+    this.managment.keyId = this.gsv.getKeyId();
+
+    this.projectId = this.managment.appId + '.' + this.managment.year;
+
+    this.projectItems = this.gsv.getProjectItems(this.projectId);
+
+    if (this.projectItems === undefined) {
+      this.subscriptionItemState = this.msv
+        .getItemsState(this.managment)
+        .subscribe({
+          next: (data: ItemInterface[]) => {
+            this.setupProject(data);
+            this.gsv.setProjectItems(this.projectId, data);
+          },
+          error: error => {
+            console.error('Error fetching project items:', error);
+            this.gsv.navigateToDefault();
+          },
+        });
+    } else {
+      this.setupProject(this.gsv.getProjectItems(this.projectId));
+    }
+  }
+
+  /** Clears state and re-runs initializeProject when the active project changes. */
+  private reinitializeForProject(): void {
+    if (this.subscriptionItemState) {
+      this.subscriptionItemState.unsubscribe();
+    }
+
+    this.items = [];
+    this.projectItems = undefined;
+    this.active = null;
+
+    this.initializeProject();
+  }
+
+  /**
+   * Filters the raw item array by project, resolves a `targetModel` from localStorage
+   * if present, selects the first/target item, and emits modelChanged.
+   */
+  public setupProject(data: ItemInterface[]): void {
+    if (data.length > 0) {
+      for (let i = 0; i < data.length; i++) {
+        data[i].ivisible = data[i].visible;
+      }
+      this.items = data.filter(
+        e =>
+          ((e.linkedItems ?? []).indexOf(e.name) === -1 ||
+            (e.linkedItems ?? []).indexOf(e.name) === 0) &&
+          e.enabled &&
+          e.visible &&
+          (e.groupName === '' || e.rootModel === true) &&
+          (e.type === ItemType.Multiple || e.type === ItemType.Single)
+      );
+      this.hide = this.items.length == 1;
+      this.hideNavigation.emit(this.hide);
+
+      const targetModel = localStorage.getItem('targetModel');
+      if (targetModel) {
+        const model = this.items.find(e => e.name === targetModel);
+        if (model) {
+          localStorage.removeItem('targetModel');
+          this.click(model);
+        } else {
+          localStorage.removeItem('targetModel');
+          this.click(this.items[0]);
+        }
+      } else {
+        this.click(this.items[0]);
+      }
+    }
+  }
+
+  /** Sets the active navigation item and emits the modelChanged event. */
+  public click(item: ItemInterface): void {
+    if (this.active !== item) {
+      this.active = item;
+      this.modelChanged.emit(item);
+    }
+  }
+
+  /** Shows/hides navigation items by matching the search string against title, name and groupName. */
+  public filter(value: string): void {
+    const needle = value.trim().toUpperCase();
+    this.items.forEach((model: ItemInterface) => {
+      if (
+        needle === '' ||
+        model.title.toUpperCase().includes(needle) ||
+        model.name.toUpperCase().includes(needle) ||
+        model.groupName.toUpperCase().includes(needle)
+      ) {
+        model.visible = model.ivisible;
+      } else {
+        model.visible = false;
+      }
+    });
+  }
+
+  /** Returns true if the given item is the currently selected navigation entry. */
+  isActiveItem(item: ItemInterface): boolean {
+    return this.active === item;
+  }
+
+  /** Returns the CSS class object for the navigation icon (highlights when item is active). */
+  getIconClass(item: ItemInterface) {
+    return { 'has-selected': this.active === item };
+  }
+
+  /** Returns the CSS class object for the desktop state indicator (error/warning/valid icons). */
+  getDesktopStateClass(item: ItemInterface) {
+    return {
+      active: this.active === item,
+      'span-state': item.state === this.itemState.Valid,
+      'span-state-rect':
+        item.state === this.itemState.Error ||
+        item.state === this.itemState.Warning,
+      'dot-empty': item.state === this.itemState.Empty,
+      'dot-success': item.state === this.itemState.Valid,
+      'triangle-error': item.state === this.itemState.Error,
+      'rectangle-warning': item.state === this.itemState.Warning,
+      'font-weight-bold': this.active === item,
+      'mx-1': item.state !== this.itemState.Error,
+      'align-self-start': item.state !== this.itemState.Error,
+    };
+  }
+
+  /** Returns the CSS class object for the item label (bold when active). */
+  getItemTextClass(item: ItemInterface) {
+    return {
+      active: this.active === item,
+      'font-weight-bold': this.active === item,
+    };
+  }
+
+  /** Emits the inverse of the current collapsed state to toggle the navigation panel. */
+  toggleCollapse(): void {
+    this.collapsedChanged.emit(!this.collapsed());
+  }
+}

package/src/lib/home/model/services/index.ts

@@ -0,0 +1 @@
+export * from './model.service';