newportsite 1.1.3

package/src/lib/common/index.ts

@@ -0,0 +1,9 @@
+export * from './loader.component';
+export * from './lookup.component';
+export * from './messagebox.component';
+export * from './context.component';
+export * from './grid.component';
+export * from './commands.component';
+export * from './card.component';
+export * from './theme-toggle.component';
+export * from '../home/model/barchart.component';

package/src/lib/common/loader.component.html

@@ -0,0 +1,5 @@
+@if (loading()) {
+  <div class="cssload-container">
+    <div class="cssload-speeding-wheel"></div>
+  </div>
+}

package/src/lib/common/loader.component.ts

@@ -0,0 +1,27 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  inject,
+} from '@angular/core';
+import { GlobalService } from '../services/global.service';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'loader',
+  templateUrl: 'loader.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [],
+})
+export class LoaderComponent {
+  private gsv = inject(GlobalService);
+
+  loading = toSignal(this.gsv.getLoaderState(), { initialValue: false });
+
+  /** Mirrors the loader signal into GlobalService so non-signal code can read loading state. */
+  constructor() {
+    effect(() => {
+      this.gsv.setLoading(this.loading());
+    });
+  }
+}

package/src/lib/common/lookup.component.html

@@ -0,0 +1,29 @@
+<div class="modal-glass-overlay"></div>
+<div
+  ngxModalDraggable
+  class="modal fade"
+  bsModal
+  #modal="bs-modal"
+  [config]="{ backdrop: false, keyboard: false }"
+  [ngStyle]="contextStyle()">
+  <div class="lk-shell">
+    <div class="lk-header">
+      <span class="lk-grip"><i class="bi bi-grip-horizontal"></i></span>
+      <span class="lk-icon"><i class="bi bi-search"></i></span>
+      <h6 class="lk-title">{{ title() }}</h6>
+      <button
+        type="button"
+        class="lk-close"
+        aria-label="Close"
+        (click)="closeDetail(null)">
+        <i class="bi bi-x-lg"></i>
+      </button>
+    </div>
+
+    <div class="lk-body">
+      <lookupselector
+        [lookupData]="lookupData()"
+        (lookupChanged)="lookupChanged($event)"></lookupselector>
+    </div>
+  </div>
+</div>

package/src/lib/common/lookup.component.ts

@@ -0,0 +1,115 @@
+import {
+  Component,
+  HostListener,
+  AfterViewInit,
+  inject,
+  input,
+  output,
+  viewChild,
+  computed,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+
+import { AppMessageService } from '../services/message.service';
+
+import { ModalDirective } from 'ngx-bootstrap/modal';
+import { LookupInterface, ViewListInterface } from '../interfaces/index';
+import { NgxModalDraggableDirective } from '../directives/component.draggable';
+import { NgStyle } from '@angular/common';
+import { LookupSelectorComponent } from '../players/lookup/lookup.selector.component';
+
+@Component({
+  selector: 'lookup',
+  templateUrl: 'lookup.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    NgxModalDraggableDirective,
+    ModalDirective,
+    NgStyle,
+    LookupSelectorComponent,
+  ],
+  styles: [
+    `
+      :host ::ng-deep .lk-body {
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      :host ::ng-deep .lk-body lookupselector,
+      :host ::ng-deep .lk-body lookupplayer,
+      :host ::ng-deep .lk-body lookupplayer > *,
+      :host ::ng-deep .lk-body grid {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        min-height: 0;
+      }
+      :host ::ng-deep .grid-wrapper {
+        flex: 1;
+        min-height: 0;
+        height: 100% !important;
+      }
+    `,
+  ],
+})
+export class LookupComponent implements AfterViewInit {
+  msg = inject(AppMessageService);
+
+  readonly modal = viewChild.required<ModalDirective>('modal');
+
+  show = input<boolean>(false);
+  title = input<string>('');
+  text = input<string>('');
+  width = input<number>(0);
+  height = input<number>(0);
+  top = input<number>(0);
+  left = input<number>(0);
+  lookup = input<string>('');
+  filter = input<string>('');
+
+  lookupResult = output<any>();
+
+  readonly lookupData = computed<LookupInterface>(() => ({
+    lookup: this.lookup(),
+    filter: this.filter(),
+  }));
+
+  readonly contextStyle = computed(() => ({
+    position: 'fixed',
+    top: this.top() + 'px',
+    left: this.left() + 'px',
+    width: this.width() + 'px',
+    height: this.height() + 'px',
+    pointerEvents: 'auto',
+    zIndex: '2001',
+  }));
+
+  /** Lifecycle: shows the modal on first render. */
+  ngAfterViewInit() {
+    this.modal().show();
+  }
+
+  /** Forwards the lookup selection to closeDetail. */
+  public lookupChanged(changed: ViewListInterface) {
+    this.closeDetail(changed.rows);
+  }
+
+  @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(
+    event: KeyboardEvent
+  ) {
+    if (this.show()) {
+      event.stopImmediatePropagation();
+      this.closeDetail(null);
+    }
+  }
+
+  /** Hides the modal and emits the lookup result (null when dismissed). */
+  public closeDetail(rsp: any) {
+    if (this.modal().isShown !== undefined) {
+      this.modal().hide();
+      this.lookupResult.emit({
+        value: rsp,
+      });
+    }
+  }
+}

package/src/lib/common/messagebox.component.html

@@ -0,0 +1,39 @@
+<div class="modal-glass-overlay"></div>
+<div
+  class="modal fade"
+  bsModal
+  #modal="bs-modal"
+  [config]="{ backdrop: false, keyboard: false }"
+  [ngStyle]="contextStyle()"
+  ngxModalDraggable>
+  <div class="mb-shell">
+    <div class="mb-header">
+      <span class="mb-grip"><i class="bi bi-grip-horizontal"></i></span>
+      <span class="mb-icon"><i class="bi bi-info-circle"></i></span>
+      <h6 class="mb-title">{{ title() }}</h6>
+      <button
+        type="button"
+        class="mb-close"
+        aria-label="Close"
+        (click)="closeDetail(false)">
+        <i class="bi bi-x-lg"></i>
+      </button>
+    </div>
+
+    <div class="mb-body">
+      <div class="mb-message">{{ text() }}</div>
+    </div>
+
+    <div class="mb-footer">
+      <button
+        class="btn btn-primary btn-sm"
+        (click)="closeDetail(true)"
+        [hidden]="!showconfirm()">
+        {{ msg?.get('app.confirm') }}
+      </button>
+      <button class="btn btn-sm" (click)="closeDetail(false)">
+        {{ msg?.get('app.close') }}
+      </button>
+    </div>
+  </div>
+</div>

package/src/lib/common/messagebox.component.ts

@@ -0,0 +1,74 @@
+import {
+  Component,
+  HostListener,
+  inject,
+  input,
+  output,
+  viewChild,
+  computed,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+
+import { AppMessageService } from '../services/message.service';
+
+import { ModalDirective } from 'ngx-bootstrap/modal';
+import { NgxModalDraggableDirective } from '../directives/component.draggable';
+import { NgStyle } from '@angular/common';
+
+@Component({
+  selector: 'messagebox',
+  templateUrl: 'messagebox.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ModalDirective, NgxModalDraggableDirective, NgStyle],
+})
+export class MessageBoxComponent implements AfterViewInit {
+  msg = inject(AppMessageService);
+
+  readonly modal = viewChild.required<ModalDirective>('modal');
+
+  show = input<boolean>(false);
+  title = input<string>('');
+  text = input<string>('');
+  showconfirm = input<boolean>(false);
+  width = input<number>(0);
+  height = input<number>(0);
+  top = input<number>(0);
+  left = input<number>(0);
+
+  messageResult = output<any>();
+
+  /** Lifecycle: shows the modal on first render. */
+  ngAfterViewInit() {
+    this.modal().show();
+  }
+
+  readonly contextStyle = computed(() => ({
+    position: 'fixed',
+    top: this.top() + 'px',
+    left: this.left() + 'px',
+    width: this.width() + 'px',
+    height: this.height() + 'px',
+    pointerEvents: 'auto',
+    zIndex: '2001',
+  }));
+
+  @HostListener('document:keydown.escape', ['$event']) onKeydownHandler(
+    event: KeyboardEvent
+  ) {
+    if (this.show()) {
+      event.stopImmediatePropagation();
+      this.closeDetail(false);
+    }
+  }
+
+  /** Hides the modal and emits the confirmation result (true = confirmed). */
+  public closeDetail(status: boolean) {
+    if (this.modal().isShown !== undefined) {
+      this.modal().hide();
+      this.messageResult.emit({
+        value: status,
+      });
+    }
+  }
+}

package/src/lib/common/theme-toggle.component.ts

@@ -0,0 +1,139 @@
+import { Component, inject, ChangeDetectionStrategy } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { ThemeService } from '../services/theme.service';
+
+@Component({
+  selector: 'app-theme-toggle',
+  standalone: true,
+  imports: [NgClass],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div class="theme-toggle-wrapper">
+      <button
+        class="theme-toggle-switch"
+        (click)="toggleTheme()"
+        [class.dark]="currentTheme() === 'dark'"
+        [attr.aria-label]="
+          'Cambia tema a ' + (currentTheme() === 'light' ? 'scuro' : 'chiaro')
+        "
+        [title]="'Tema: ' + (currentTheme() === 'light' ? 'Chiaro' : 'Scuro')">
+        <span class="toggle-track">
+          <span class="toggle-switch-dot">
+            <i
+              [ngClass]="
+                currentTheme() === 'light'
+                  ? 'bi bi-sun-fill'
+                  : 'bi bi-moon-fill'
+              "></i>
+          </span>
+        </span>
+      </button>
+    </div>
+  `,
+  styles: [
+    `
+      .theme-toggle-wrapper {
+        display: inline-flex;
+        align-items: center;
+        margin-left: 8px;
+      }
+
+      .theme-toggle-switch {
+        position: relative;
+        width: 54px;
+        height: 28px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        border-radius: 20px;
+        outline: none;
+        transition: transform 0.2s ease;
+      }
+
+      .theme-toggle-switch:hover {
+        transform: scale(1.08);
+      }
+
+      .theme-toggle-switch:active {
+        transform: scale(0.92);
+      }
+
+      .toggle-track {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background-color: #d0d0d0;
+        border-radius: 20px;
+        transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
+      }
+
+      .theme-toggle-switch:hover .toggle-track {
+        background-color: #b0b0b0;
+      }
+
+      .theme-toggle-switch.dark .toggle-track {
+        background-color: #0d6fa3;
+      }
+
+      .theme-toggle-switch.dark:hover .toggle-track {
+        background-color: #0d8ac8;
+      }
+
+      .toggle-switch-dot {
+        position: absolute;
+        left: 2px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        background: white;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 2;
+        transition:
+          left 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
+          box-shadow 0.3s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+
+      .theme-toggle-switch:hover .toggle-switch-dot {
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+      }
+
+      .theme-toggle-switch.dark .toggle-switch-dot {
+        left: 28px;
+        background: #ffd700;
+      }
+
+      .toggle-switch-dot i {
+        font-size: 13px;
+        color: #1a1a1a;
+        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+      }
+
+      .theme-toggle-switch:hover .toggle-switch-dot i {
+        transform: scale(1.15) rotate(10deg);
+      }
+
+      .theme-toggle-switch.dark .toggle-switch-dot i {
+        color: #003049;
+      }
+    `,
+  ],
+})
+export class ThemeToggleComponent {
+  private themeService = inject(ThemeService);
+
+  readonly currentTheme = this.themeService.currentTheme;
+
+  /** Toggles between light and dark theme. */
+  toggleTheme(): void {
+    this.themeService.toggleTheme();
+  }
+}

package/src/lib/config.ts

@@ -0,0 +1,62 @@
+import { InjectionToken, isDevMode, importProvidersFrom, LOCALE_ID } from '@angular/core';
+import { LocationStrategy, PathLocationStrategy } from '@angular/common';
+import { provideRouter, withRouterConfig } from '@angular/router';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { ErrorHandler } from '@angular/core';
+import { ModalModule } from 'ngx-bootstrap/modal';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { ButtonsModule } from 'ngx-bootstrap/buttons';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import { provideZoneChangeDetection } from '@angular/core';
+import { APP_ROUTES } from './app.routing';
+import { authInterceptor } from './services/auth.interceptor';
+import { GlobalErrorHandler } from './services/global-error-handler';
+import { ManagmentService } from './home/model/services';
+import { SchedulerService } from './scheduler/services/scheduler.service';
+import { AppMessageService } from './services/message.service';
+import { EntitiesData, Entities } from './interfaces';
+
+/** Contract returned by projectsInfoLoader — provides runtime data and schema for a project. */
+export interface ProjectInfo {
+  getData(): EntitiesData;
+  getSchema(): Entities;
+}
+
+export interface NewportConfig {
+  /** Base URL of the backend REST API */
+  apiUrl: string;
+  /** Factory for the project-specific logic layer. May return a Promise (for lazy loading). */
+  logicFactory: (...args: any[]) => any | Promise<any>;
+  /** Loader for project_info schema/data modules */
+  projectsInfoLoader: (year: number, appId: string) => Promise<ProjectInfo>;
+  /** Loader for static lookup tables used in login (optional). May return a Promise. */
+  staticTableLoader?: (id: string) => string | Promise<string>;
+}
+
+export const NEWPORT_CONFIG = new InjectionToken<NewportConfig>('NEWPORT_CONFIG');
+
+/** Register all library providers. Call this inside bootstrapApplication providers. */
+export function provideNewport(config: NewportConfig) {
+  return [
+    provideZoneChangeDetection(),
+    provideRouter(APP_ROUTES, withRouterConfig({ onSameUrlNavigation: 'reload' })),
+    importProvidersFrom(
+      ModalModule,
+      BsDropdownModule,
+      TooltipModule,
+      ButtonsModule,
+      BsDatepickerModule,
+    ),
+    ManagmentService,
+    SchedulerService,
+    AppMessageService,
+    { provide: ErrorHandler, useExisting: GlobalErrorHandler },
+    { provide: LocationStrategy, useClass: PathLocationStrategy },
+    { provide: LOCALE_ID, useValue: 'en-US' },
+    { provide: NEWPORT_CONFIG, useValue: config },
+    provideAnimations(),
+    provideHttpClient(withInterceptors([authInterceptor])),
+  ];
+}