newportsite 1.1.3

package/src/lib/directives/input.directive.ts

@@ -0,0 +1,210 @@
+import { Directive, ElementRef, HostListener, inject } from '@angular/core';
+import { FieldType, FieldState, FieldAttr, FieldFontSize } from '../interfaces/index';
+
+import { GlobalService } from '../services/global.service';
+
+import { AppMessageService } from '../services/message.service';
+
+@Directive({ selector: '[nvg]', standalone: true })
+export class InputDirective {
+  el = inject(ElementRef);
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+
+  /** Returns the named HTML attribute from the host element, or undefined if absent. */
+  private attr(key: string): Attr | undefined {
+    return (this.el.nativeElement as any).attributes[FieldAttr.get(key)!];
+  }
+
+  /** Parses the named HTML attribute as an integer (defaults to 0 if absent). */
+  private attrInt(key: string): number {
+    return parseInt(this.attr(key)?.value ?? '0', 10);
+  }
+
+  @HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !this.gsv.getDialog()?.state) {
+      this.navigateEnter(event.shiftKey);
+    } else {
+      if (this.isReadOnlyField(event)) return false;
+      if (!this.isControlKey(event)) return this.handleTypedKey(event);
+    }
+  }
+
+  /** Moves focus to the previous or next focusable element based on the Shift key state. */
+  private navigateEnter(backward: boolean): void {
+    const tbidx = this.el.nativeElement.tabIndex;
+    const element = backward ? this.findPrevFocusable(tbidx) : this.findNextFocusable(tbidx);
+    element?.focus();
+  }
+
+  /** Scans forward through tabindex values to find the next enabled, visible input or select. */
+  private findNextFocusable(tbidx: number): HTMLElement | null {
+    let element: HTMLElement | null = null;
+    do {
+      tbidx++;
+      element = document.querySelector<HTMLElement>(
+        `input[tabindex="${tbidx}"], select[tabindex="${tbidx}"]`
+      );
+    } while (
+      (!element || element.hidden || element.getAttribute('disabled') !== null) &&
+      tbidx < 1024
+    );
+    return element;
+  }
+
+  /** Scans backward through tabindex values to find the previous enabled, visible input or select. */
+  private findPrevFocusable(tbidx: number): HTMLElement | null {
+    if (tbidx <= 0) return null;
+    let element: HTMLElement | null = null;
+    do {
+      tbidx--;
+      const inputs = document.querySelectorAll<HTMLElement>(`input[tabindex="${tbidx}"]`);
+      const selects = document.querySelectorAll<HTMLElement>(`select[tabindex="${tbidx}"]`);
+      element = inputs.length > 0 ? inputs[inputs.length - 1]
+        : selects.length > 0 ? selects[selects.length - 1] : null;
+    } while (
+      (!element || element.hidden || element.getAttribute('disabled') !== null) &&
+      tbidx >= 0
+    );
+    return element;
+  }
+
+  /** Returns true when the host field is in a state that should block typed input. */
+  private isReadOnlyField(event: KeyboardEvent): boolean {
+    return (
+      this.el.nativeElement.value === undefined ||
+      !!this.el.nativeElement.attributes['disabled'] ||
+      this.attrInt('state') === FieldState.ReadOnly ||
+      this.el.nativeElement.readOnly ||
+      (((event.ctrlKey && event.key === '@') || event.shiftKey || event.altKey) &&
+        this.attr('type') !== undefined &&
+        this.attrInt('type') === FieldType.Number)
+    );
+  }
+
+  /** Clears a multi-char selection if present, adjusts font size, then delegates to the type-specific handler. */
+  private handleTypedKey(event: KeyboardEvent): boolean | void {
+    const native = this.el.nativeElement;
+    if (native.selectionEnd - native.selectionStart > 1) native.value = '';
+    if (this.attr('type') === undefined) return;
+
+    const inputLen = native.value.length * FieldFontSize.compactPx;
+    native.style.fontSize =
+      inputLen > parseFloat(native.style.width) ? FieldFontSize.compact : FieldFontSize.default;
+
+    switch (this.attrInt('type')) {
+      case FieldType.Text:        return this.handleTextKey(event);
+      case FieldType.Number:      return this.handleNumberKey(event);
+      case FieldType.TextualCheck: return this.handleTextualCheckKey(event);
+      case FieldType.Date:        return this.handleDateKey(event);
+    }
+  }
+
+  /** Validates a keystroke for Text fields: checks allowedchars and maxLength regex. */
+  private handleTextKey(event: KeyboardEvent): boolean {
+    const ac = this.attr('allowchar');
+    if (ac?.value && !this.regExpressionMatch(ac.value, event.key.toUpperCase())) return false;
+    const value = this.el.nativeElement.value + event.key.toUpperCase();
+    const maxLen = parseInt(this.el.nativeElement.getAttribute(FieldAttr.get('length')!) ?? '0', 10);
+    return value.match(`^[A-Za-z0-9, %/@\\-+().']{0,${maxLen}}$`) !== null;
+  }
+
+  /** Validates a keystroke for Number fields: enforces precision, scale, sign, and locale decimal separator. */
+  private handleNumberKey(event: KeyboardEvent): boolean {
+    const nmv = this.el.nativeElement.value + event.key;
+    const prc = this.attrInt('length');
+    const scl = this.attrInt('decimal');
+    const dec = this.gsv.getDecimalChar();
+    const intPart = this.attr('sign')?.value === 'true' ? `^+?[-0-9]{0,${prc}}` : `^[0-9]{0,${prc}}`;
+    const regExp = scl === 0 ? `${intPart}$` : `${intPart}(\\${dec}\\d{0,${scl}})?$`;
+    return nmv.match(regExp) !== null;
+  }
+
+  /** Handles Space (toggle) and 'X' entry for TextualCheck fields; blocks all other keys. */
+  private handleTextualCheckKey(event: KeyboardEvent): boolean | void {
+    if (event.key === ' ') { this.invertTextualCheck(); return false; }
+    if (event.key.toUpperCase() !== 'X' || this.el.nativeElement.value.length > 0) return false;
+  }
+
+  /** Validates a keystroke for Date fields: allows only digits, auto-inserts slashes at positions 3 and 6. */
+  private handleDateKey(event: KeyboardEvent): boolean | void {
+    const dtv = this.el.nativeElement.value + event.key;
+    if (dtv.length > 10) return false;
+    if (dtv.length === 3 || dtv.length === 6) this.el.nativeElement.value += '/';
+    if (!(event.key >= '0' && event.key <= '9')) return false;
+  }
+
+  @HostListener('click', ['$event']) onClick(_event: MouseEvent) {
+    if (
+      this.attr('type') !== undefined &&
+      this.attrInt('type') === FieldType.TextualCheck
+    ) {
+      this.invertTextualCheck();
+      this.sendChanged();
+    }
+  }
+
+  @HostListener('dblclick', ['$event']) dblClick(_event: MouseEvent) {
+    this.sendChanged('setForced');
+  }
+
+  @HostListener('focus') onFocus() {
+    if (this.el.nativeElement.id && this.attr('type') !== undefined) {
+      const typeComponent = this.attrInt('type');
+      if (
+        typeComponent !== FieldType.Label &&
+        typeComponent !== FieldType.Combo
+      ) {
+        this.gsv.setCurrentField(this.el.nativeElement);
+      }
+    }
+  }
+
+  @HostListener('blur') onBlur() {
+    if (!this.gsv.getDialog()?.state) {
+      this.sendChanged();
+    }
+  }
+
+  /** Returns true for modifier keys, arrows, Escape, Enter, Backspace, Tab, and function keys. */
+  isControlKey(event: KeyboardEvent): boolean {
+    return (
+      event.altKey ||
+      event.shiftKey ||
+      event.ctrlKey ||
+      event.key?.indexOf('Arrow') >= 0 ||
+      event.key === 'Escape' ||
+      event.key === 'Enter' ||
+      event.key === 'Backspace' ||
+      event.key === 'Tab' ||
+      /^F(1[0-2]|[1-9])$/.test(event.key)
+    );
+  }
+
+  /** Toggles a TextualCheck field between 'X' (checked) and '' (unchecked). */
+  invertTextualCheck(): void {
+    if (this.attrInt('state') !== FieldState.ReadOnly) {
+      if (this.el.nativeElement.value === 'X') {
+        this.el.nativeElement.value = '';
+        this.el.nativeElement.checked = false;
+      } else {
+        this.el.nativeElement.value = 'X';
+        this.el.nativeElement.checked = true;
+      }
+    }
+  }
+
+  /** Tests whether the given key matches the provided regular expression string. */
+  regExpressionMatch(rem: string, key: string): boolean {
+    return new RegExp(rem.toUpperCase()).test(key);
+  }
+
+  /** Notifies GlobalService that the field value has changed, carrying the field id, value, and function name. */
+  sendChanged(functionName = 'sendChanged') {
+    this.gsv.setFieldChanged({
+      id: this.el.nativeElement.getAttribute('id') ?? '',
+      value: this.el.nativeElement.value.toUpperCase(),
+      function: functionName,
+    });
+  }
+}

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

@@ -0,0 +1,38 @@
+<basetemplate>
+  <div class="container-fluid">
+    <div>
+      <div class="row align-items-start">
+        @for (project of currentProjects; track project) {
+          <div class="p-1 col-sm-6 col-md-4">
+            <div class="card">
+              <div class="card-body">
+                <h5 class="card-title">
+                  <h1 class="bg-transparent truncate">
+                    {{ msg?.getProjectInfo(project, 'description') }}
+                  </h1>
+                </h5>
+                <div
+                  class="truncate"
+                  title="{{
+                    msg?.getProjectInfo(project, 'extendeddescription')
+                  }}">
+                  {{ msg?.getProjectInfo(project, 'extendeddescription') }}
+                </div>
+              </div>
+              <div class="nopaddingtae">
+                <button
+                  title="{{ msg?.get('app.dashboard.module.start') }}"
+                  class="btn bi bi-box-arrow-right"
+                  (click)="activate(project)"
+                  [hidden]="!project.active"></button>
+                <h1 class="bg-transparent truncate" [hidden]="project.active">
+                  {{ msg?.get('app.dashboard.module.inactive') }}
+                </h1>
+              </div>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  </div>
+</basetemplate>

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

@@ -0,0 +1,50 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  DestroyRef,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { GlobalService } from '../../services/global.service';
+
+import { AppMessageService } from '../../services/message.service';
+
+import { UserLicenses } from '../../interfaces/index';
+
+import { BaseTemplateComponent } from '../../template/basetemplate.component';
+
+@Component({
+  selector: 'dashboard',
+  templateUrl: 'dashboard.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [BaseTemplateComponent],
+})
+export class DashboardComponent {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+  private cdr = inject(ChangeDetectorRef);
+  private destroyRef = inject(DestroyRef);
+
+  constructor() {
+    this.gsv
+      .getStateChanged()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.cdr.markForCheck());
+  }
+
+  get currentProjects() {
+    return this.gsv?.getProjects()[this.gsv.getYear()];
+  }
+
+  /** Activates the selected project license and navigates to its home view. */
+  public activate(prj: UserLicenses) {
+    this.gsv.activateProject(prj);
+  }
+
+  /** Opens the given help URL in an external browser tab. */
+  public help(url: string) {
+    this.gsv.externalnavigate(url);
+  }
+}

package/src/lib/home/dashboard/index.ts

@@ -0,0 +1 @@
+export * from './dashboard.component';

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

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

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

@@ -0,0 +1,10 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'index',
+  templateUrl: 'index.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet],
+})
+export class IndexComponent {}

package/src/lib/home/index.routes.ts

@@ -0,0 +1,29 @@
+import { Routes } from '@angular/router';
+import { IndexComponent } from './index';
+import { ModelComponent } from './model/index';
+import { ModelSearchComponent } from './modelsearch/index';
+import { authGuard } from '../auth/services/auth.service';
+import { DashboardComponent } from './dashboard/index';
+import { InfoComponent } from './info/index';
+
+export const INDEX_ROUTES: Routes = [
+  {
+    path: '',
+    component: IndexComponent,
+    children: [
+      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+      {
+        path: 'dashboard',
+        component: DashboardComponent,
+        canActivate: [authGuard],
+      },
+      { path: 'model', component: ModelComponent, canActivate: [authGuard] },
+      {
+        path: 'modelsearch',
+        component: ModelSearchComponent,
+        canActivate: [authGuard],
+      },
+      { path: 'info', component: InfoComponent },
+    ],
+  },
+];

package/src/lib/home/index.ts

@@ -0,0 +1 @@
+export * from './index.component';

package/src/lib/home/info/index.ts

@@ -0,0 +1 @@
+export * from './info.component';