newportsite 1.1.3

package/src/lib/players/model/model.item.ts

@@ -0,0 +1,9 @@
+import { Type } from '@angular/core';
+import { ItemInterface } from '../../interfaces/index';
+
+export class ModelItem {
+  constructor(
+    public component: Type<any>,
+    public data: ItemInterface
+  ) {}
+}

package/src/lib/players/model/model.player.component.ts

@@ -0,0 +1,109 @@
+import {
+  Component,
+  input,
+  output,
+  effect,
+  untracked,
+  ChangeDetectionStrategy,
+  viewChild,
+  OnInit,
+  DestroyRef,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { ModelDirective } from './model.directive';
+import { ModelItem } from './model.item';
+import { ItemInterface, ItemCommandInterface } from '../../interfaces/index';
+import { GlobalService } from '../../services/global.service';
+
+@Component({
+  selector: 'modelplayer',
+  template: `<ng-template mdModel></ng-template>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ModelDirective],
+})
+export class ModelPlayerComponent implements OnInit {
+  private gsv = inject(GlobalService);
+
+  readonly model = input<ModelItem>();
+  readonly command = input<ItemCommandInterface>();
+  readonly viewList = input<boolean>();
+  readonly lookupValue = input<any>();
+  readonly dialogValue = input<any>();
+  readonly scale = input<number>();
+
+  readonly modelHost = viewChild.required(ModelDirective);
+  readonly commandsChanged = output<ItemCommandInterface[]>();
+
+  private componentRef!: any;
+  private destroyRef = inject(DestroyRef);
+
+  constructor() {
+    effect(() => {
+      const m = this.model();
+      if (!m) return;
+      this.gsv.setLoaderState(true);
+      const viewContainerRef = this.modelHost().viewContainerRef;
+      viewContainerRef.clear();
+      if (this.componentRef) {
+        this.componentRef.destroy();
+        this.componentRef = undefined;
+      }
+      this.componentRef = viewContainerRef.createComponent(m.component);
+      (this.componentRef.instance as ItemInterface).initItem?.(m.data);
+    });
+    effect(() => {
+      const cmd = this.command();
+      if (cmd && this.componentRef) {
+        (this.componentRef.instance as ItemInterface).sendCommand?.(cmd);
+      }
+    });
+    effect(() => {
+      const vl = this.viewList();
+      if (vl !== undefined && this.componentRef) {
+        (this.componentRef.instance as ItemInterface).setViewList?.(vl);
+      }
+    });
+    effect(() => {
+      const lv = this.lookupValue();
+      if (lv && this.componentRef) {
+        // untracked() exits the reactive context so that signal writes inside
+        // lookupResult (e.g. this._showlookup.set(false)) do not throw the
+        // "Writing to signals is not allowed in an effect" error, which would
+        // abort the call mid-way and leave showlookup=true (UI frozen).
+        untracked(() =>
+          (this.componentRef.instance as ItemInterface).lookupResult?.(lv)
+        );
+      }
+    });
+    effect(() => {
+      const dv = this.dialogValue();
+      if (dv && this.componentRef) {
+        untracked(() =>
+          (this.componentRef.instance as ItemInterface).dialogResult?.(dv)
+        );
+      }
+    });
+    effect(() => {
+      const s = this.scale();
+      if (s && this.componentRef) {
+        (this.componentRef.instance as ItemInterface).setScale?.(s);
+      }
+    });
+  }
+
+  /** Lifecycle: subscribes to toolbar command changes and re-emits them as output events. */
+  public ngOnInit() {
+    this.gsv
+      .getItemCommands()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(commands => {
+        this.OnCommandChanged(commands);
+      });
+  }
+
+  /** Re-emits a command array change to the parent (model.component) via commandsChanged output. */
+  public OnCommandChanged(commands: ItemCommandInterface[]) {
+    this.commandsChanged.emit(commands);
+  }
+}

package/src/lib/players/model/model.selector.component.ts

@@ -0,0 +1,59 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  effect,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import { ModelItemComponent } from './model.item.component';
+import { ModelItem } from './model.item';
+import { ItemInterface, ItemCommandInterface } from '../../interfaces/index';
+import { ModelPlayerComponent } from './model.player.component';
+
+@Component({
+  selector: 'modelselector',
+  template: `<modelplayer
+    [model]="modelItem()"
+    [command]="command()"
+    [viewList]="viewList()"
+    [lookupValue]="lookupValue()"
+    [dialogValue]="dialogValue()"
+    [scale]="scale()"
+    (commandsChanged)="onCommandsChanged($event)"></modelplayer>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [ModelPlayerComponent],
+})
+export class ModelSelectorComponent {
+  currentModel = input<ItemInterface>();
+  currentCommand = input<ItemCommandInterface>();
+  viewList = input<boolean>();
+  lookupValue = input<any>();
+  dialogValue = input<any>();
+  scale = input<number>();
+
+  commandsChanged = output<ItemCommandInterface[]>();
+
+  modelItem = signal<ModelItem | null>(null);
+  command = signal<ItemCommandInterface | null>(null);
+
+  constructor() {
+    effect(() => {
+      const m = this.currentModel();
+      if (m) {
+        this.modelItem.set(new ModelItem(ModelItemComponent, m));
+      }
+    });
+    effect(() => {
+      const c = this.currentCommand();
+      if (c !== undefined) {
+        this.command.set(c);
+      }
+    });
+  }
+
+  /** Forwards toolbar command state changes to the parent via the commandsChanged output. */
+  onCommandsChanged(commands: ItemCommandInterface[]) {
+    this.commandsChanged.emit(commands);
+  }
+}

package/src/lib/scheduler/scheduler.component.html

@@ -0,0 +1,13 @@
+<full-calendar class="calendar" [options]="calendarOptions"></full-calendar>
+<schedulerdialog
+  [hidden]="!showdialog"
+  [(show)]="showdialog"
+  [(text)]="textdialog"
+  [(title)]="titledialog"
+  (schedulerDialogResult)="dialogResult($event)"
+  [(showconfirm)]="showconfirm"
+  [(width)]="dialogWidth"
+  [(height)]="dialogHeight"
+  [(top)]="dialogTop"
+  [(left)]="dialogLeft">
+</schedulerdialog>

package/src/lib/scheduler/scheduler.component.scss

@@ -0,0 +1,6 @@
+
+.calendar {
+  width: 100%;
+  height: 100%;
+  padding: 0.8rem;
+}

package/src/lib/scheduler/scheduler.component.ts

@@ -0,0 +1,296 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  inject,
+  DestroyRef,
+} from '@angular/core';
+import {
+  CalendarOptions,
+  DateSelectArg,
+  EventClickArg,
+  EventApi,
+  EventAddArg,
+  EventRemoveArg,
+  EventInput,
+} from '@fullcalendar/core';
+import itLocale from '@fullcalendar/core/locales/it';
+import enLocale from '@fullcalendar/core/locales/en-gb';
+import { GlobalService, Languages } from '../services/global.service';
+import { AppMessageService } from '../services/message.service';
+import { SchedulerService } from './services/scheduler.service';
+import {
+  DialogFieldInterface,
+  DialogType,
+  TransportInterface,
+} from '../interfaces/item.interface';
+import { SchedulerInterface } from '../interfaces/item.interface';
+import { v4 as uuidv4 } from 'uuid';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import listPlugin from '@fullcalendar/list';
+
+import interactionPlugin from '@fullcalendar/interaction';
+import stc from 'string-to-color';
+import { FullCalendarModule } from '@fullcalendar/angular';
+import { SchedulerDialogComponent } from './schedulerdialog.component';
+
+@Component({
+  selector: 'scheduler',
+  templateUrl: './scheduler.component.html',
+  styleUrls: ['./scheduler.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [FullCalendarModule, SchedulerDialogComponent],
+})
+export class SchedulerComponent implements AfterViewInit, OnDestroy {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+  scr = inject(SchedulerService);
+
+  public scheduler!: SchedulerInterface;
+
+  // SchedulerDialog
+  public showdialog = false;
+  public titledialog = '';
+  public textdialog = '';
+  public showconfirm = false;
+  public dialogHeight = 0;
+  public dialogWidth = 0;
+  public dialogTop = 0;
+  public dialogLeft = 0;
+  public dialogValue!: any;
+  public dialogType: DialogType = 0;
+  private destroyRef = inject(DestroyRef);
+
+  calendarOptions: CalendarOptions = {
+    headerToolbar: {
+      left: 'prev,next today',
+      center: 'title',
+      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
+    },
+    plugins: [dayGridPlugin, timeGridPlugin, listPlugin, interactionPlugin],
+
+    initialView: 'dayGridMonth',
+    weekends: true,
+    editable: true,
+    selectable: true,
+    selectMirror: true,
+    dayMaxEvents: true,
+    select: this.handleDateSelect.bind(this),
+    eventClick: this.handleEventClick.bind(this),
+    eventsSet: this.handleEvents.bind(this),
+    eventAdd: this.handleDateAdd.bind(this),
+    eventChange: this.handleDateChange.bind(this),
+    eventRemove: this.handleDateRemove.bind(this),
+    datesSet: this.handleDateChange.bind(this),
+    timeZone: 'Europe/Rome',
+  };
+  constructor() {
+    this.calendarOptions.locales = [this.gsv.getLng() === Languages.IT ? itLocale : enLocale];
+  }
+
+  /** Fetches calendar events for the given date range and updates the calendarEvents signal. */
+  public loadEvents(start: Date, end: Date) {
+    this.currentEvents = [];
+
+    this.scheduler = this.gsv.getSchedulerInterface();
+
+    this.scheduler.year = this.gsv.getYear();
+    this.scheduler.start = start;
+    this.scheduler.end = end;
+
+    this.scr
+      .getSchedulerDataRange(this.scheduler)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: async (data: TransportInterface) => {
+          let events: Array<EventInput> = new Array<EventInput>();
+          (data.dataFile as any[]).forEach((element: any) => {
+            events.push({
+              id: element.id,
+              title: element.description,
+              start: element.startdate,
+              end: element.enddate,
+              allDay: element.allday,
+              extendedProps: { assigned: element.assigned },
+              backgroundColor: stc(element.description.split('-')[0]),
+            });
+          });
+          this.calendarOptions.events = events;
+        },
+        error: () => {},
+      });
+  }
+  /** Lifecycle: no-op — subscriptions managed by takeUntilDestroyed. */
+  public ngOnDestroy(): void {
+    // subscriptions are managed by takeUntilDestroyed
+  }
+
+  /** Lifecycle: subscribes to the dialog-field channel to open the event dialog. */
+  public ngAfterViewInit() {
+    this.gsv
+      .getDialogField()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(dialog => {
+        this.setDialog(dialog);
+      });
+  }
+
+  currentEvents: EventApi[] = [];
+
+  /** Broadcasts the current dialog state (show/hide, position, tag) to GlobalService. */
+  private sendDialog() {
+    this.gsv.setDialogField({
+      showdialog: this.showdialog,
+      titledialog: this.titledialog,
+      textdialog: this.textdialog,
+      showconfirm: this.showconfirm,
+      dialogHeight: this.dialogHeight,
+      dialogWidth: this.dialogWidth,
+      dialogTop: this.dialogTop,
+      dialogLeft: this.dialogLeft,
+    });
+  }
+
+  /** Applies an incoming dialog state (called by the parent shell on a dialog-field event). */
+  public setDialog(dialog: DialogFieldInterface) {
+    this.showdialog = 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;
+  }
+
+  /**
+   * Handles the dialog close result: on confirm, creates a new event via postData, or
+   * deletes an existing event via deleteItem, then reloads the visible date range.
+   */
+  dialogResult(rsp: any) {
+    this.showdialog = false;
+    this.dialogValue = rsp;
+    this.titledialog = '';
+    this.textdialog = '';
+    this.showconfirm = false;
+    this.dialogHeight = 300;
+    this.dialogWidth = 400;
+    this.dialogTop = 200;
+    this.dialogLeft = 200;
+
+    if (rsp.value) {
+      if (rsp.tag.view === undefined) {
+        this.scheduler.id = rsp.tag.id;
+        this.scheduler.year = this.gsv.getYear();
+        this.scheduler.start = rsp.tag.start;
+        this.scheduler.end = rsp.tag.end;
+        this.scheduler.assigned = rsp.props[1];
+        this.scheduler.description = rsp.props[0];
+        this.scheduler.allday = rsp.tag.allDay;
+        this.scr.deleteItem(this.scheduler).subscribe({
+          next: (data: boolean) => {
+            if (data === true) {
+              rsp.tag.remove();
+              const calendarApi = rsp.tag._context.viewApi.calendar;
+              calendarApi.unselect();
+              calendarApi.addEvent({
+                id: rsp.tag.id,
+                title: rsp.props[0],
+                start: rsp.tag.startStr,
+                end: rsp.tag.endStr,
+                allDay: rsp.tag.allDay,
+                assigned: rsp.props[1],
+                backgroundColor: stc(rsp.props[0].split('-')[0]),
+              });
+            }
+          },
+          error: () => {},
+        });
+      } else {
+        const calendarApi = rsp.tag.view.calendar;
+        calendarApi.unselect();
+        calendarApi.addEvent({
+          id: uuidv4(),
+          title: rsp.props[0],
+          start: rsp.tag.startStr,
+          end: rsp.tag.endStr,
+          allDay: rsp.tag.allDay,
+          assigned: rsp.props[1],
+          backgroundColor: stc(rsp.props[0].split('-')[0]),
+        });
+      }
+    } else if (rsp.tag.view === undefined && rsp.delete) {
+      rsp.tag.remove();
+    }
+  }
+
+  /** Toggles the weekend-days visibility on the FullCalendar instance. */
+  handleWeekendsToggle() {
+    const { calendarOptions } = this;
+    calendarOptions.weekends = !calendarOptions.weekends;
+  }
+
+  /** Called by FullCalendar after an external event is dropped; logs the new event data. */
+  handleDateAdd(eventAdd: EventAddArg) {
+    this.scheduler.id = eventAdd.event.id;
+    this.scheduler.year = this.gsv.getYear();
+    this.scheduler.start = eventAdd.event.start;
+    this.scheduler.end = eventAdd.event.end;
+    this.scheduler.assigned = eventAdd.event.extendedProps.assigned;
+    this.scheduler.description = eventAdd.event.title;
+    this.scheduler.allday = eventAdd.event.allDay;
+    this.scr.postData(this.scheduler).subscribe({
+      next: () => {},
+      error: () => {},
+    });
+  }
+
+  /** Called by FullCalendar after an event is dragged/resized; reloads events for the new range. */
+  handleDateChange(eventChange: any) {
+    this.loadEvents(eventChange.start, eventChange.end);
+  }
+
+  /** Called by FullCalendar after an event is removed; logs the removed event data. */
+  handleDateRemove(eventRemove: EventRemoveArg) {
+    this.scheduler.id = eventRemove.event.id;
+    this.scheduler.year = this.gsv.getYear();
+    this.scr.deleteItem(this.scheduler).subscribe({
+      next: () => {},
+      error: () => {},
+    });
+  }
+
+  /** Called by FullCalendar on date/range selection; opens the dialog to create a new event. */
+  handleDateSelect(selectInfo: DateSelectArg) {
+    this.gsv.setDialog({ target: '', state: true, tag: selectInfo });
+    this.openDialog();
+  }
+
+  /** Called by FullCalendar when an existing event is clicked; opens the dialog to edit/delete. */
+  handleEventClick(clickInfo: EventClickArg) {
+    this.gsv.setDialog(null);
+    this.gsv.setDialog({ target: '', state: true, tag: clickInfo.event });
+    this.openDialog();
+  }
+
+  private openDialog() {
+    this.textdialog = '';
+    this.titledialog = this.msg.get('app.notify');
+    this.dialogHeight = 300;
+    this.dialogWidth = 400;
+    this.dialogTop = screen.height / 2 - this.dialogHeight / 2;
+    this.dialogLeft = screen.width / 2 - this.dialogWidth / 2;
+    this.showconfirm = true;
+    this.showdialog = true;
+    this.sendDialog();
+  }
+
+  /** FullCalendar callback: keeps the currentEvents array in sync for template rendering. */
+  handleEvents(events: EventApi[]) {
+    this.currentEvents = events;
+  }
+}

package/src/lib/scheduler/scheduler.routes.ts

@@ -0,0 +1,15 @@
+import { Routes } from '@angular/router';
+import { SchedulerComponent } from './scheduler.component';
+import { authGuard } from '../auth/services/auth.service';
+
+export const SCHEDULER_ROUTES: Routes = [
+  {
+    path: '',
+    component: SchedulerComponent,
+    canActivate: [authGuard],
+    children: [
+      { path: 'scheduler', component: SchedulerComponent },
+      { path: '**', redirectTo: '/scheduler', pathMatch: 'full' },
+    ],
+  },
+];

package/src/lib/scheduler/schedulerdialog.component.html

@@ -0,0 +1,72 @@
+<div
+  class="modal fade"
+  bsModal
+  #modal="bs-modal"
+  [ngStyle]="contextStyle()"
+  ngxModalDraggable>
+  <div class="modal-header">
+    <h6 class="modal-title">{{ title() }}</h6>
+    <button
+      type="button"
+      class="btn-close"
+      data-dismiss="modal"
+      aria-label="Close"
+      (click)="closeDetail(false)"></button>
+  </div>
+  <div class="modal-body-60 bg-light p-2">
+    <form #form [formGroup]="profileform">
+      <div class="container">
+        <div class="row mt-2">
+          <label for="assigned" class="col-sm-3">{{
+            msg?.get('app.assigned')
+          }}</label>
+          <div class="col-sm-9">
+            <select
+              nvg
+              id="assigned"
+              tabindex="0"
+              class="field"
+              name="assigned"
+              [(ngModel)]="selected"
+              formControlName="assigned">
+              @for (c of assigneds; track c) {
+                <option value="{{ c.id }}">
+                  {{ c.name }}
+                </option>
+              }
+            </select>
+          </div>
+        </div>
+        <div class="row mt-2">
+          <label for="description" class="col-sm-3">{{
+            msg?.get('app.description')
+          }}</label>
+          <div class="col-sm-9">
+            <input
+              nvg
+              autocomplete="off"
+              tabindex="1"
+              id="description"
+              [attr.data-state]="0"
+              class="field"
+              type="text"
+              formControlName="description" />
+          </div>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button class="btn mx-2" (click)="closeAndRemove()">
+      {{ closeButtonText }}
+    </button>
+    <button
+      class="btn mx-2"
+      (click)="closeDetail(true)"
+      [hidden]="!showconfirm()"
+      type="submit"
+      [disabled]="!profileform.valid">
+      {{ msg?.get('app.confirm') }}
+    </button>
+  </div>
+</div>