newportsite 1.1.3

package/src/lib/containers/default-layout/default-layout.component.html

@@ -0,0 +1,191 @@
+<div class="container-fluid" [class.pe-none]="gsv?.getLoading()">
+  <div class="row flex-nowrap">
+    <div class="col-auto px-0">
+      <div id="sidebar" class="collapse collapse-horizontal show">
+        <nav
+          id="sidebar-nav"
+          class="min-vh-100"
+          aria-label="Navigazione principale"
+          [class.pe-none]="gsv?.getModalActive()">
+          <div class="sidebar-logo">
+            <a title="Newport - {{ version }}" aria-label="Newport - logout" role="button" (click)="logOff()">
+              <i class="bi bi-grid-1x2-fill" aria-hidden="true"></i>
+            </a>
+          </div>
+          <ul class="sidebar-items" role="menubar">
+            @if (gsv?.isLogged()) {
+              <li class="sidebar-item" role="none">
+                <a
+                  role="menuitem"
+                  [attr.aria-current]="isDashBoard() ? 'page' : null"
+                  [attr.aria-label]="msg?.get('app.dashboard')"
+                  (click)="viewChange(msg?.get('app.dashboard'))">
+                  <i
+                    [ngClass]="{ 'has-selected': isDashBoard() }"
+                    class="bi bi-building-gear"
+                    aria-hidden="true"
+                    title="{{ msg?.get('app.dashboard') }}"></i>
+                </a>
+              </li>
+            }
+            @if (gsv?.isLogged()) {
+              <li class="sidebar-item" role="none">
+                <a
+                  role="menuitem"
+                  [attr.aria-current]="isCalendar() ? 'page' : null"
+                  [attr.aria-label]="msg?.get('app.calendar')"
+                  (click)="viewChange(msg?.get('app.calendar'))">
+                  <i
+                    [ngClass]="{ 'has-selected': isCalendar() }"
+                    class="bi bi-calendar"
+                    aria-hidden="true"
+                    title="{{ msg?.get('app.calendar') }}"></i>
+                </a>
+              </li>
+            }
+            <li class="sidebar-item" role="none">
+              <a
+                role="menuitem"
+                [attr.aria-current]="isInfo() ? 'page' : null"
+                [attr.aria-label]="msg?.get('app.info')"
+                (click)="viewChange(msg?.get('app.info'))">
+                <i
+                  [ngClass]="{ 'has-selected': isInfo() }"
+                  class="bi bi-info-lg"
+                  aria-hidden="true"
+                  title="{{ msg?.get('app.info') }}"></i>
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div class="col p-0 fillvp">
+      <header class="app-toolbar" [class.pe-none]="gsv?.getModalActive()">
+        <button
+          type="button"
+          class="toolbar-btn"
+          data-bs-toggle="collapse"
+          data-bs-target="#sidebar"
+          [attr.aria-expanded]="!sidebarState"
+          aria-controls="sidebar"
+          aria-label="Mostra/nascondi menu"
+          (click)="sidebarToggle()"
+          title="Menu">
+          <i
+            aria-hidden="true"
+            [ngClass]="{
+              bi: sidebarState,
+              'bi-chevron-compact-left': !sidebarState,
+              'bi-chevron-compact-right': sidebarState,
+            }"></i>
+        </button>
+        <div class="btn-group" dropdown>
+          <button
+            dropdownToggle
+            type="button"
+            class="btn dropdown-toggle"
+            id="button-language"
+            aria-label="Seleziona lingua"
+            aria-controls="dropdown-language">
+            {{ gsv?.getLng() }}
+          </button>
+          <ul
+            id="dropdown-language"
+            *dropdownMenu
+            class="dropdown-menu"
+            role="menu"
+            aria-labelledby="button-language">
+            <li role="none">
+              <a
+                class="dropdown-item text-center"
+                role="menuitem"
+                (click)="languageChange('IT')"
+                >IT</a
+              >
+            </li>
+            <li role="none">
+              <a
+                class="dropdown-item text-center"
+                role="menuitem"
+                (click)="languageChange('EN')"
+                >EN</a
+              >
+            </li>
+          </ul>
+        </div>
+        <app-theme-toggle></app-theme-toggle>
+        @if (gsv?.isLogged()) {
+          <span class="btn-group" dropdown>
+            <button
+              id="button-basic-year"
+              dropdownToggle
+              type="button"
+              class="btn dropdown-toggle"
+              aria-label="Seleziona anno"
+              aria-controls="dropdown-basic-year">
+              {{ gsv?.getYear() }}
+            </button>
+            <ul
+              id="dropdown-basic-year"
+              *dropdownMenu
+              class="dropdown-menu"
+              role="menu"
+              aria-labelledby="button-basic-year">
+              <li role="none">
+                @for (year of gsv?.getYears(); track year) {
+                  <a
+                    class="dropdown-item text-center"
+                    role="menuitem"
+                    (click)="yearChange(year)"
+                    >{{ year }}</a
+                  >
+                }
+              </li>
+            </ul>
+          </span>
+        }
+        <div class="ms-auto">
+          @if (gsv?.isLogged()) {
+            <span
+              class="btn-group d-flex"
+              dropdown
+              title="{{ gsv?.loggedUser() }}">
+              <a
+                id="button-basic"
+                dropdownToggle
+                type="button"
+                role="button"
+                class="btn dropdown-toggle"
+                [attr.aria-label]="'Utente: ' + gsv?.loggedUser()"
+                aria-controls="dropdown-basic">
+                <i class="bi bi-person" aria-hidden="true" title="{{ gsv?.loggedUser() }}"></i>
+              </a>
+              <ul
+                id="dropdown-basic"
+                *dropdownMenu
+                class="dropdown-menu dropdown-menu-end"
+                role="menu"
+                aria-labelledby="button-basic">
+                <li role="none">
+                  <a
+                    class="dropdown-item"
+                    role="menuitem"
+                    href="#"
+                    (click)="logOff()"
+                    title="{{ gsv?.loggedUser() }}">
+                    <span class="bi bi-person-lock" aria-hidden="true"></span>
+                    {{ msg?.get('app.logoff') }}
+                  </a>
+                </li>
+              </ul>
+            </span>
+          }
+        </div>
+      </header>
+      <main class="main">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
+  </div>
+</div>

package/src/lib/containers/default-layout/default-layout.component.ts

@@ -0,0 +1,158 @@
+import {
+  Component,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  DestroyRef,
+  PLATFORM_ID,
+  inject,
+  CUSTOM_ELEMENTS_SCHEMA,
+} from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import { GlobalService } from '../../services/global.service';
+
+import { AppMessageService } from '../../services/message.service';
+
+import { PACKAGE_VERSION } from '../../version';
+import { NgClass } from '@angular/common';
+import {
+  BsDropdownDirective,
+  BsDropdownToggleDirective,
+  BsDropdownMenuDirective,
+} from 'ngx-bootstrap/dropdown';
+import { RouterOutlet } from '@angular/router';
+import { ThemeToggleComponent } from '../../common/theme-toggle.component';
+
+@Component({
+  providers: [AppMessageService],
+  selector: 'app-dashboard',
+  templateUrl: './default-layout.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgClass,
+    BsDropdownDirective,
+    BsDropdownToggleDirective,
+    BsDropdownMenuDirective,
+    RouterOutlet,
+    ThemeToggleComponent,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class DefaultLayoutComponent implements AfterViewInit {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+  private cdr = inject(ChangeDetectorRef);
+  private destroyRef = inject(DestroyRef);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+  public active!: string;
+
+  public languagevalue = '';
+  public viewvalue = 'Dashboard';
+  public element: HTMLElement = this.isBrowser ? document.body : ({} as HTMLElement);
+
+  public sidebarState: boolean = false;
+
+  public version: string;
+
+  constructor() {
+    const gsv = this.gsv;
+
+    this.languagevalue = this.gsv.getLng();
+    this.active = gsv.getActiveLink();
+    this.version = PACKAGE_VERSION;
+
+    this.gsv
+      .getStateChanged()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.cdr.markForCheck());
+
+    this.gsv
+      .getModalActiveChanges()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.cdr.markForCheck());
+  }
+
+  /** Lifecycle: syncs the active link after the view initialises. */
+  public ngAfterViewInit() {
+    this.active = this.gsv.getActiveLink();
+  }
+
+  /** Opens the given URL in an external browser tab. */
+  public externalnavigate(url: string) {
+    this.gsv.externalnavigate(url);
+  }
+
+  /** Updates the active language and redirects to Dashboard when already logged in. */
+  public languageChange(language: any) {
+    this.languagevalue = language;
+    this.gsv.setLng(language);
+    // only navigate to Dashboard when already logged in
+    if (this.gsv.isLogged()) {
+      this.viewChange('Dashboard');
+    }
+    this.cdr.detectChanges();
+  }
+
+  /** Sets the current view label and notifies GlobalService. */
+  public viewChange(view: any) {
+    this.viewvalue = view;
+    this.gsv.setView(view);
+    this.cdr.detectChanges();
+  }
+
+  /** Returns true when the active view is the Dashboard. */
+  public isDashBoard(): boolean {
+    return this.viewvalue === this.msg?.get('app.dashboard');
+  }
+
+  /** Returns true when the active view is the Calendar. */
+  public isCalendar(): boolean {
+    return this.viewvalue === this.msg?.get('app.calendar');
+  }
+
+  /** Returns true when the active view is the Info page. */
+  public isInfo(): boolean {
+    return this.viewvalue === this.msg?.get('app.info');
+  }
+
+  /** Updates the active fiscal year and resets the view to Dashboard. */
+  public yearChange(year: number) {
+    this.gsv.setYear(year);
+    this.viewChange('Dashboard');
+    this.cdr.detectChanges();
+  }
+
+  /** Returns the display name of the currently authenticated user. */
+  public loggedUser(): string {
+    return this.gsv.loggedUser();
+  }
+
+  /** Clears localStorage, resets the view, and calls GlobalService.logOff(). */
+  public logOff(): void {
+    if (this.isBrowser) {
+      try {
+        localStorage.clear();
+      } catch (error) {
+        console.error('Error clearing localStorage:', error);
+      }
+    }
+    this.viewChange('Dashboard');
+    this.gsv.logOff();
+    this.ngAfterViewInit();
+  }
+
+  /** Updates the active sidebar link and navigates to the given route URL. */
+  public navigate(url: string) {
+    this.active = url;
+    this.gsv.setActiveLink(url);
+    this.gsv.navigate(url);
+  }
+
+  /** Toggles the sidebar open/closed state. */
+  public sidebarToggle() {
+    this.sidebarState = !this.sidebarState;
+  }
+}

package/src/lib/containers/default-layout/index.ts

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

package/src/lib/containers/index.ts

@@ -0,0 +1 @@
+export * from './default-layout';

package/src/lib/directives/component.draggable.ts

@@ -0,0 +1,80 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  AfterViewInit,
+  OnDestroy,
+  inject,
+} from '@angular/core';
+import { GlobalService } from '../services/global.service';
+
+/*
+ * Directive to add 'drag' support to Ngx Bootstrap modals (https://github.com/valor-software/ngx-bootstrap).
+ * Based on this library to enable drag support for an ng-bootstrap modal: https://github.com/mattxu-zz/ngb-modal-draggable
+ *
+ * Enable by adding the directive to the modal-header element, e.g.:
+ *
+ * <div class="modal-header" ngxModalDraggable>  </div>
+ */
+
+@Directive({ selector: '[ngxModalDraggable]', standalone: true })
+export class NgxModalDraggableDirective implements AfterViewInit {
+  element = inject(ElementRef);
+  private gsv = inject(GlobalService, { optional: true });
+
+  private modalElement!: HTMLElement;
+  private topStart!: number;
+  private leftStart!: number;
+  private isDraggable!: boolean;
+  private handleElement!: HTMLElement;
+
+  /** Lifecycle: sets the host element as the drag handle and fixes the modal position. */
+  ngAfterViewInit() {
+    let element = this.element.nativeElement;
+
+    //only make the modal header draggable
+    this.handleElement = this.element.nativeElement;
+
+    //change cursor on the header
+    this.handleElement.style.cursor = 'pointer';
+
+    this.modalElement = element;
+    this.modalElement.style.position = 'fixed';
+  }
+
+  /** Records the pointer offset from the modal origin to begin a drag operation. */
+  @HostListener('mousedown', ['$event'])
+  onMouseDown(event: MouseEvent) {
+    this.isDraggable = true;
+
+    const _s = this.gsv?.getScale() ?? 1;
+    this.topStart =
+      event.clientY / _s -
+      Number(this.modalElement.style.top.replace('px', ''));
+    this.leftStart =
+      event.clientX / _s -
+      Number(this.modalElement.style.left.replace('px', ''));
+  }
+
+  /** Ends the drag operation on mouse button release. */
+  @HostListener('document:mouseup', ['$event'])
+  onMouseUp(event: MouseEvent) {
+    this.isDraggable = false;
+  }
+
+  /** Repositions the modal to follow the pointer while dragging. */
+  @HostListener('document:mousemove', ['$event'])
+  onMouseMove(event: MouseEvent) {
+    if (this.isDraggable) {
+      const _s = this.gsv?.getScale() ?? 1;
+      this.modalElement.style.top = event.clientY / _s - this.topStart + 'px';
+      this.modalElement.style.left = event.clientX / _s - this.leftStart + 'px';
+    }
+  }
+
+  /** Ends the drag operation when the pointer leaves the document. */
+  @HostListener('document:mouseleave', ['$event'])
+  onMouseLeave(event: MouseEvent) {
+    this.isDraggable = false;
+  }
+}

package/src/lib/directives/index.ts

@@ -0,0 +1,2 @@
+export * from './input.directive';
+export * from './component.draggable';

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

@@ -0,0 +1,158 @@
+import { TestBed } from '@angular/core/testing';
+import { ElementRef } from '@angular/core';
+import { InputDirective } from './input.directive';
+import { GlobalService } from '../services/global.service';
+import { AppMessageService } from '../services/message.service';
+
+// ── Minimal stubs ─────────────────────────────────────────────────────────────
+
+const mockGsv = {
+  getDialog: () => null,
+  getDecimalChar: () => '.',
+  setCurrentField: jest.fn(),
+  setFieldChanged: jest.fn(),
+};
+const mockMsg = {};
+const mockElementRef = { nativeElement: document.createElement('input') };
+
+function key(init: KeyboardEventInit): KeyboardEvent {
+  return new KeyboardEvent('keydown', init);
+}
+
+// ── Suite ─────────────────────────────────────────────────────────────────────
+
+describe('InputDirective', () => {
+  let directive: InputDirective;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        InputDirective,
+        { provide: ElementRef, useValue: mockElementRef },
+        { provide: GlobalService, useValue: mockGsv },
+        { provide: AppMessageService, useValue: mockMsg },
+      ],
+    });
+    directive = TestBed.inject(InputDirective);
+  });
+
+  // ── isControlKey() ────────────────────────────────────────────────────────
+
+  describe('isControlKey()', () => {
+    it('returns true for Backspace', () => {
+      expect(directive.isControlKey(key({ key: 'Backspace' }))).toBe(true);
+    });
+
+    it('returns true for Tab', () => {
+      expect(directive.isControlKey(key({ key: 'Tab' }))).toBe(true);
+    });
+
+    it('returns true for Escape', () => {
+      expect(directive.isControlKey(key({ key: 'Escape' }))).toBe(true);
+    });
+
+    it('returns true for Enter', () => {
+      expect(directive.isControlKey(key({ key: 'Enter' }))).toBe(true);
+    });
+
+    it('returns true for ArrowLeft', () => {
+      expect(directive.isControlKey(key({ key: 'ArrowLeft' }))).toBe(true);
+    });
+
+    it('returns true for ArrowRight', () => {
+      expect(directive.isControlKey(key({ key: 'ArrowRight' }))).toBe(true);
+    });
+
+    it('returns true for ArrowUp', () => {
+      expect(directive.isControlKey(key({ key: 'ArrowUp' }))).toBe(true);
+    });
+
+    it('returns true for ArrowDown', () => {
+      expect(directive.isControlKey(key({ key: 'ArrowDown' }))).toBe(true);
+    });
+
+    it('returns true for F1', () => {
+      expect(directive.isControlKey(key({ key: 'F1' }))).toBe(true);
+    });
+
+    it('returns true for F9', () => {
+      expect(directive.isControlKey(key({ key: 'F9' }))).toBe(true);
+    });
+
+    it('returns true for F12', () => {
+      expect(directive.isControlKey(key({ key: 'F12' }))).toBe(true);
+    });
+
+    it('returns false for F13 (outside the F1–F12 range)', () => {
+      expect(directive.isControlKey(key({ key: 'F13' }))).toBe(false);
+    });
+
+    it('returns true when ctrlKey modifier is held', () => {
+      expect(directive.isControlKey(key({ key: 'a', ctrlKey: true }))).toBe(true);
+    });
+
+    it('returns true when altKey modifier is held', () => {
+      expect(directive.isControlKey(key({ key: 'a', altKey: true }))).toBe(true);
+    });
+
+    it('returns true when shiftKey modifier is held', () => {
+      expect(directive.isControlKey(key({ key: 'a', shiftKey: true }))).toBe(true);
+    });
+
+    it('returns false for a plain letter key', () => {
+      expect(directive.isControlKey(key({ key: 'a' }))).toBe(false);
+    });
+
+    it('returns false for a plain digit key', () => {
+      expect(directive.isControlKey(key({ key: '5' }))).toBe(false);
+    });
+
+    it('returns false for a space character', () => {
+      expect(directive.isControlKey(key({ key: ' ' }))).toBe(false);
+    });
+  });
+
+  // ── regExpressionMatch() ──────────────────────────────────────────────────
+
+  describe('regExpressionMatch()', () => {
+    it('matches an uppercase letter against [A-Z]', () => {
+      expect(directive.regExpressionMatch('[A-Z]', 'A')).toBe(true);
+    });
+
+    it('returns false for a digit against [A-Z]', () => {
+      expect(directive.regExpressionMatch('[A-Z]', '1')).toBe(false);
+    });
+
+    it('matches a digit against [0-9]', () => {
+      expect(directive.regExpressionMatch('[0-9]', '7')).toBe(true);
+    });
+
+    it('returns false for a letter against [0-9]', () => {
+      expect(directive.regExpressionMatch('[0-9]', 'A')).toBe(false);
+    });
+
+    it('uppercases the pattern before matching — [a-z] becomes [A-Z]', () => {
+      // The implementation calls rem.toUpperCase() on the pattern.
+      // '[a-z]'.toUpperCase() === '[A-Z]', so uppercase keys still match.
+      expect(directive.regExpressionMatch('[a-z]', 'A')).toBe(true);
+    });
+
+    it('returns false for an empty key string', () => {
+      expect(directive.regExpressionMatch('[A-Z]', '')).toBe(false);
+    });
+
+    it('matches a specific character literal', () => {
+      expect(directive.regExpressionMatch('A', 'A')).toBe(true);
+    });
+
+    it('returns false for a character that does not match the literal', () => {
+      expect(directive.regExpressionMatch('A', 'B')).toBe(false);
+    });
+
+    it('matches against a union pattern', () => {
+      expect(directive.regExpressionMatch('[A-Z0-9]', '5')).toBe(true);
+      expect(directive.regExpressionMatch('[A-Z0-9]', 'Z')).toBe(true);
+      expect(directive.regExpressionMatch('[A-Z0-9]', '!')).toBe(false);
+    });
+  });
+});