newportsite 1.1.3

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

@@ -0,0 +1,102 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnInit,
+  computed,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import {
+  trigger,
+  state,
+  style,
+  transition,
+  animate,
+} from '@angular/animations';
+import { GlobalService } from '../services/global.service';
+import { AppMessageService } from '../services/message.service';
+import { DataInterface, ItemState } from '../interfaces';
+import { NgClass } from '@angular/common';
+
+@Component({
+  selector: 'card',
+  templateUrl: './card.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('flipState', [
+      state(
+        'back',
+        style({
+          transform: 'rotateY(179deg)',
+        })
+      ),
+      state(
+        'front',
+        style({
+          transform: 'rotateY(0)',
+        })
+      ),
+      transition('front => back', animate('750ms ease-out')),
+      transition('back => front', animate('750ms ease-in')),
+    ]),
+  ],
+  imports: [NgClass],
+})
+export class CardComponent implements OnInit {
+  gsv = inject(GlobalService);
+  msg = inject(AppMessageService);
+
+  item = input.required<DataInterface>();
+
+  activate = output<string>();
+  delete = output<string>();
+  print = output<string>();
+  flipflop = output<string[]>();
+
+  itemState = ItemState;
+  printHidden = false;
+  summaryHidden = false;
+
+  flip = signal<'front' | 'back'>('front');
+
+  stateClass = computed(() => ({
+    'dot-success': this.item().state_id === this.itemState.Valid,
+    'triangle-error': this.item().state_id === this.itemState.Error,
+    'rectangle-warning': this.item().state_id === this.itemState.Warning,
+  }));
+
+  /** Lifecycle: resolves print and summary visibility from the project schema. */
+  ngOnInit() {
+    this.printHidden = !this.gsv
+      .getSchemaJson(this.gsv.getProject().project + '.' + this.gsv.getYear())
+      .entities.find((_: any) => _.printable)?.printable;
+    this.summaryHidden = !this.gsv.getProject().summary;
+  }
+
+  /** Flips the card between front and back face; emits the new state. */
+  toggleFlip(id: string | undefined): void {
+    if (!id) return;
+    this.flip.set(this.flip() === 'front' ? 'back' : 'front');
+    this.flipflop.emit([id, this.flip()]);
+  }
+
+  /** Emits the activate event for the given record id. */
+  activateitem(id: string | undefined): void {
+    if (!id) return;
+    this.activate.emit(id);
+  }
+
+  /** Emits the delete event for the given record id. */
+  deleteitem(id: string | undefined): void {
+    if (!id) return;
+    this.delete.emit(id);
+  }
+
+  /** Emits the print event for the given record id. */
+  printitem(id: string | undefined): void {
+    if (!id) return;
+    this.print.emit(id);
+  }
+}

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

@@ -0,0 +1,8 @@
+<span
+  (click)="click()"
+  [hidden]="!show()"
+  [ngStyle]="contextStyle()"
+  [title]="title()"
+  class="command-dots"
+  >{{ text() }}</span
+>

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

@@ -0,0 +1,42 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { NgStyle } from '@angular/common';
+
+@Component({
+  selector: 'commands',
+  templateUrl: 'commands.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgStyle],
+})
+export class CommandsComponent {
+  show = model(false);
+  text = input('');
+  title = input('');
+  width = input(0);
+  height = input(0);
+  top = input(0);
+  left = input(0);
+  commandsResult = output<any>();
+
+  contextStyle = computed(() => ({
+    position: 'absolute',
+    top: this.top() + 'px',
+    left: this.left() + 'px',
+    width: this.width() + 'px',
+    height: this.height() + 'px',
+    fontWeight: 'bold',
+    pointerEvents: 'auto',
+  }));
+
+  /** Hides the commands overlay and emits the commandsResult event. */
+  click() {
+    this.show.set(false);
+    this.commandsResult.emit({});
+  }
+}

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

@@ -0,0 +1,9 @@
+<div [ngStyle]="contextStyle()" [hidden]="!show()">
+  <ul>
+    @for (command of commands(); track command) {
+      <li class="dropdown-item" (click)="onClick(command)">
+        {{ command }}
+      </li>
+    }
+  </ul>
+</div>

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

@@ -0,0 +1,38 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { NgStyle } from '@angular/common';
+
+@Component({
+  selector: 'context',
+  templateUrl: 'context.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NgStyle],
+})
+export class ContextComponent {
+  show = model(false);
+  mouseevent = input<MouseEvent | null>(null);
+  commands = input<string[] | null>(null);
+  raiseCommand = output<any>();
+
+  contextStyle = computed(() => {
+    const ev = this.mouseevent();
+    if (!ev) return {};
+    return {
+      position: 'absolute',
+      top: ev.clientY + 'px',
+      left: ev.clientX + 'px',
+    };
+  });
+
+  /** Hides the context menu and emits the selected command. */
+  onClick(command: string) {
+    this.show.set(false);
+    this.raiseCommand.emit({ value: command });
+  }
+}

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

@@ -0,0 +1,20 @@
+<!-- section.component -->
+<div [ngClass]="gridThemeClass()">
+  <ag-grid-angular
+    #agGrid
+    [defaultColDef]="defaultColDef"
+    [rowSelection]="rowSelection"
+    [gridOptions]="gridOptions"
+    [columnDefs]="columnDefs()"
+    [rowData]="rowData()"
+    (rowClicked)="onRowClicked($event)"
+    (rowDataChanged)="onRowDataChanged($event)"
+    (gridReady)="onGridReady($event)"
+    [pagination]="true"
+    [paginationAutoPageSize]="true"
+    [suppressPaginationPanel]="loading()!"
+    (filterChanged)="onFilterChanged($event)"
+    [localeText]="localeText">
+  </ag-grid-angular>
+</div>
+<!-- fine section.component -->