@cccteam/ccc-lib 0.0.13 → 0.0.15

package/src/ccc-grid/ccc-grid.component.ts

@@ -0,0 +1,155 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, input, output, TemplateRef } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { CamelCaseToTitlePipe } from '@cccteam/ccc-lib/src/ccc-camel-case-to-title';
+import { ColumnConfig, RecordData } from '@cccteam/ccc-lib/src/types';
+import { GridModule, SelectableMode, SelectableSettings } from '@progress/kendo-angular-grid';
+import { TableButtonComponent } from './table-button/table-button.component';
+
+@Component({
+  selector: 'ccc-grid',
+  standalone: true,
+  imports: [
+    GridModule,
+    CommonModule,
+    TableButtonComponent,
+    CamelCaseToTitlePipe,
+    RouterModule,
+    MatIconButton,
+    MatIconModule,
+    MatTooltipModule,
+  ],
+  template: `
+    <kendo-grid
+      [kendoGridBinding]="rowData()"
+      filterable="menu"
+      [sortable]="true"
+      scrollable="none"
+      [selectable]="selectionMode()"
+      [selectedKeys]="selectedKeys"
+      kendoGridSelectBy="id"
+      (selectedKeysChange)="onSelectedKeysChange($event)">
+      @if (selectionMode() !== false) {
+        <kendo-grid-checkbox-column
+          [width]="40"
+          [showSelectAll]="selectionType() === 'multiple'"></kendo-grid-checkbox-column>
+      }
+      @for (col of columnDefs(); track col.id + col.header) {
+        @if (col.buttonConfig) {
+          <kendo-grid-column
+            [field]="col.id"
+            [filterable]="false"
+            [sortable]="false"
+            [width]="66"
+            [resizable]="col.resizable ?? true">
+            <ng-template kendoGridHeaderTemplate> </ng-template>
+            <ng-template kendoGridCellTemplate let-dataItem>
+              @if (col.buttonConfig.actionType === 'link' && col.buttonConfig.viewRoute) {
+                <a
+                  mat-icon-button
+                  [routerLink]="['/', col.buttonConfig.viewRoute, dataItem['id']]"
+                  [matTooltip]="col.buttonConfig.label || ''"
+                  [matTooltipPosition]="col.tooltipPosition || 'above'">
+                  <mat-icon>{{ col.buttonConfig.icon || 'arrow_forward' }}</mat-icon>
+                </a>
+              } @else {
+                <ccc-table-button
+                  [config]="col.buttonConfig"
+                  [rowData]="dataItem"
+                  [tooltipPosition]="col.tooltipPosition || 'above'"
+                  [viewRoute]="col.buttonConfig.viewRoute || ''"
+                  [id]="dataItem['id']">
+                </ccc-table-button>
+              }
+            </ng-template>
+          </kendo-grid-column>
+        } @else {
+          @if (col.width) {
+            <kendo-grid-column [field]="col.id" [width]="col.width" [resizable]="col.resizable ?? true">
+              <ng-template kendoGridHeaderTemplate>
+                @if (!col.hideHeader) {
+                  <span class="col-header">{{ col.header || col.id | camelCaseToTitle }}</span>
+                }
+              </ng-template>
+              <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem[col.id] }} </ng-template>
+            </kendo-grid-column>
+          } @else {
+            <kendo-grid-column [field]="col.id" [resizable]="col.resizable ?? true">
+              <ng-template kendoGridHeaderTemplate>
+                @if (!col.hideHeader) {
+                  <span class="col-header">{{ col.header || col.id | camelCaseToTitle }}</span>
+                }
+              </ng-template>
+              <ng-template kendoGridCellTemplate let-dataItem>{{ dataItem[col.id] }} </ng-template>
+            </kendo-grid-column>
+          }
+        }
+      }
+      <ng-template kendoGridNoRecordsTemplate>
+        <div style="text-align: center; padding: 20px;">No records found</div>
+      </ng-template>
+    </kendo-grid>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+        height: 100%;
+      }
+      kendo-grid {
+        height: 100%;
+      }
+      .col-header {
+        font-weight: bold;
+      }
+      ccc-table-button {
+        position: relative;
+        z-index: 10;
+      }
+      a[mat-button] {
+        position: relative;
+        z-index: 11;
+      }
+      ::ng-deep .k-grid .k-grid-aria-root {
+        overflow-x: auto; /* Allow horizontal scrolling */
+        overflow-y: hidden; /* Keep vertical behavior as needed */
+      }
+    `,
+  ],
+})
+export class AppGridComponent {
+  /* eslint-disable  @typescript-eslint/no-explicit-any */
+  rowData = input<any[]>([]);
+  columnDefs = input<ColumnConfig[]>([]);
+  masterDetail = input<boolean>(false);
+  detailTemplate = input<TemplateRef<unknown>>();
+  selectionType = input<'multiple' | 'single' | 'none'>('none');
+  selectedRows = output<RecordData[]>();
+
+  public selectedKeys: number[] = [];
+
+  onSelectedKeysChange(keys: number[]): void {
+    this.selectedKeys = keys;
+    const selectedRows = this.rowData().filter((row: any) => keys.includes(row.id));
+    this.selectedRows.emit(selectedRows);
+  }
+
+  selectionMode = computed(() => {
+    if (this.selectionType() === 'none') {
+      return false;
+    } else if (this.selectionType() === 'single') {
+      return {
+        mode: 'single' as SelectableMode,
+        checkboxOnly: true,
+      } as SelectableSettings;
+    } else {
+      return {
+        mode: 'multiple' as SelectableMode,
+        checkboxOnly: true,
+      } as SelectableSettings;
+    }
+  });
+}

package/src/ccc-grid/index.ts

@@ -0,0 +1,3 @@
+export * from './ccc-grid.component';
+export * from './table-button/table-button.component';
+

package/src/ccc-grid/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}

package/src/ccc-grid/table-button/table-button.component.html

@@ -0,0 +1,16 @@
+<span
+  [matTooltip]="disabled() ? config().disabledLabel : config().label"
+  [matTooltipPosition]="tooltipPosition()"
+  class="parent">
+  @if (config().actionType === 'link') {
+    <a [routerLink]="viewRoute()">
+      <button mat-icon-button [disabled]="disabled()" [color]="config().color">
+        <mat-icon>{{ config().icon }}</mat-icon>
+      </button>
+    </a>
+  } @else if (config().actionType === 'function') {
+    <button mat-icon-button (click)="callAction()" [disabled]="disabled()" [color]="color()">
+      <mat-icon>{{ config().icon }}</mat-icon>
+    </button>
+  }
+</span>

package/src/ccc-grid/table-button/table-button.component.scss

@@ -0,0 +1,5 @@
+.parent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}

package/src/ccc-grid/table-button/table-button.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableButtonComponent } from './table-button.component';
+
+xdescribe('TableButtonComponent', () => {
+  let component: TableButtonComponent<null>;
+  let fixture: ComponentFixture<TableButtonComponent<null>>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TableButtonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TableButtonComponent<null>);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/ccc-grid/table-button/table-button.component.ts

@@ -0,0 +1,49 @@
+import { Component, computed, input, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule, TooltipPosition } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { ActionButtonConfig } from '@cccteam/ccc-lib/src/types';
+
+@Component({
+  selector: 'ccc-table-button',
+  standalone: true,
+  imports: [MatButtonModule, MatIconModule, MatTooltipModule, RouterModule],
+  templateUrl: './table-button.component.html',
+  styleUrl: './table-button.component.scss',
+})
+export class TableButtonComponent<T> {
+  config = input.required<ActionButtonConfig>();
+
+  rowData = input.required<T>();
+  tooltipPosition = input<TooltipPosition>('above' as TooltipPosition);
+  color = input<string>('');
+  disabled = signal<boolean>(false);
+  viewRoute = input<string>('');
+  id = input<string>('');
+
+  link = computed(() => {
+    const viewRoute = this.viewRoute();
+    const id = this.id();
+
+    if (!viewRoute || !id) {
+      return '';
+    }
+
+    if (!viewRoute.startsWith('/')) {
+      return `${viewRoute}/${id}`;
+    }
+
+    return `${viewRoute}/${id}`;
+  });
+
+  callAction(): void {
+    const rowData = this.rowData();
+    const action = this.config().action;
+    if (rowData && action !== undefined) {
+      const id = 'id' as keyof T;
+      const idVal = rowData[id] as string;
+      action({ id: idVal });
+    }
+  }
+}

package/src/ccc-resource/can-deactivate.guard.ts

@@ -0,0 +1,41 @@
+import { inject } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { CanDeactivateFn, UrlTree } from '@angular/router';
+import { firstValueFrom, Observable, tap } from 'rxjs';
+import { FormStateService } from './form-state.service';
+import { LeavePageConfirmationModalComponent } from './leave-page-confirmation-modal/leave-page-confirmation-modal.component';
+
+export type CanDeactivateType = Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree;
+
+export interface CanComponentDeactivate {
+  canDeactivate: () => CanDeactivateType;
+}
+
+export const dirtyFormDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = async (_, __, ___, nextState) => {
+  const dialog = inject(MatDialog);
+  const formStateService = inject(FormStateService);
+
+  if (nextState?.url === '/login') {
+    return true;
+  }
+
+  if (!formStateService.isDirty()) {
+    return true;
+  }
+
+  const existingDialog = dialog.openDialogs.find(
+    (d) => d.componentInstance instanceof LeavePageConfirmationModalComponent,
+  );
+
+  const dialogRef = existingDialog ?? dialog.open(LeavePageConfirmationModalComponent, { delayFocusTrap: false });
+
+  const result = dialogRef.afterClosed().pipe(
+    tap((value) => {
+      if (value === true) {
+        formStateService.resetDirtyForms();
+      }
+    }),
+  );
+
+  return firstValueFrom(result);
+};

package/src/ccc-resource/compound-resource/compound-resource.component.html

@@ -0,0 +1,57 @@
+<div class="page-container">
+  <div class="header-container">
+    <div class="title" [class.title-without-back]="title()">
+      @if (title() !== '') {
+        <h1>{{ title() }}</h1>
+      }
+    </div>
+  </div>
+
+  @if (hasElements() || configs().length > 0) {
+    <div class="resource-container" [class.empty-elements]="!hasElements()">
+      @let primaryConfigRef = primaryConfig();
+      @if (primaryConfigRef.type === 'View' || primaryConfigRef.type === 'ListView') {
+        <ccc-resource-view
+          [uuid]="uuid()"
+          [config]="primaryConfigRef"
+          [relatedData]="resolvedData()"
+          [compoundResourceView]="true">
+        </ccc-resource-view>
+      }
+
+      @for (config of configs(); track config) {
+        @let hasrelatedConfigs = 'relatedConfigs' in config && config.relatedConfigs.length > 0;
+        @if (hasrelatedConfigs) {
+          <ccc-compound-resource
+            [uuid]="primaryConfigParentId()"
+            [parentData]="resolvedData()"
+            [resourceConfig]="config">
+          </ccc-compound-resource>
+        } @else if (config.type === 'ListView') {
+          <ccc-resource-list-create
+            [resourceConfig]="config"
+            [parentData]="resolvedData()"
+            [isRootList]="false"
+            [parentId]="primaryConfigParentId()">
+          </ccc-resource-list-create>
+        } @else if (config.type === 'Array') {
+          <ccc-resource-array-view
+            [resourceConfig]="config"
+            [parentData]="store.viewData()"
+            [compoundResourceComponent]="componentRef">
+          </ccc-resource-array-view>
+        } @else if (config.type === 'View') {
+          <ccc-resource-view
+            [uuid]="primaryConfigParentId()"
+            [config]="config"
+            [relatedData]="resolvedData()"></ccc-resource-view>
+        } @else if (config.type === 'Component') {
+          <ccc-resource-resolver 
+            [parentData]="resolvedData()" 
+            [resourceConfig]="config" 
+            [compoundResourceComponent]="componentRef"> </ccc-resource-resolver>
+        }
+      }
+    </div>
+  }
+</div>

package/src/ccc-resource/compound-resource/compound-resource.component.scss

@@ -0,0 +1,86 @@
+.page-container {
+  position: relative;
+}
+
+.header-container {
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  top: 0;
+  z-index: 11;
+  background: transparent;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.title-without-back {
+  margin-left: 48px;
+  height: 48px;
+}
+
+.message {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.state-buttons {
+  display: flex;
+  flex-direction: row;
+  margin-bottom: auto;
+  justify-content: right;
+  flex-grow: 1;
+  gap: 20px;
+  margin-right: 32px;
+}
+
+.mode-text {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.resource {
+  margin: 10px;
+}
+
+.mat-input-element:disabled[readonly] {
+  color: currentColor;
+}
+
+.unsaved {
+  color: #f44336;
+}
+
+.edit-button {
+  margin-top: auto;
+  margin-bottom: auto;
+  padding-left: 10px;
+}
+
+.button-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .edit {
+    color: #003b49;
+  }
+
+  .mat-icon {
+    margin-right: 8px;
+  }
+}
+
+.empty-elements {
+  padding-top: 30px;
+}
+
+.rpc-buttons-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding-bottom: 10px;
+}

package/src/ccc-resource/compound-resource/compound-resource.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CompoundResourceComponent } from './compound-resource.component';
+
+xdescribe('CompoundResourceComponent', () => {
+  let component: CompoundResourceComponent;
+  let fixture: ComponentFixture<CompoundResourceComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CompoundResourceComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(CompoundResourceComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/ccc-resource/compound-resource/compound-resource.component.ts

@@ -0,0 +1,158 @@
+import { CommonModule, Location } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ComponentRef,
+  computed,
+  effect,
+  inject,
+  Injector,
+  input,
+  OnInit,
+  signal
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { ChildResourceConfig, ParentResourceConfig, RecordData, Resource, RESOURCE_META, RootConfig } from '@cccteam/ccc-lib/src/types';
+import { ResourceArrayViewComponent } from '../resource-array-view/resource-array-view.component';
+import { ResourceListCreateComponent } from '../resource-list-create/resource-list-create.component';
+import { ResourceResolverComponent } from '../resource-resolver/resource-resolver.component';
+import { ResourceStore } from '../resource-store.service';
+import { ResourceViewComponent } from '../resource-view/resource-view.component';
+
+@Component({
+  selector: 'ccc-compound-resource',
+  templateUrl: './compound-resource.component.html',
+  styleUrl: './compound-resource.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatIconModule,
+    RouterModule,
+    MatButtonModule,
+    ResourceViewComponent,
+    ResourceListCreateComponent,
+    ResourceArrayViewComponent,
+    ResourceResolverComponent,
+    CommonModule,
+    RouterModule,
+  ],
+  providers: [ResourceStore],
+})
+export class CompoundResourceComponent implements OnInit {
+  location = inject(Location);
+  route = inject(ActivatedRoute);
+  store = inject(ResourceStore);
+  injector = inject(Injector);
+  componentRef = this.injector.get(ComponentRef<CompoundResourceComponent>);
+  resourceMeta = inject(RESOURCE_META);
+
+  resourceConfig = input<ParentResourceConfig | ChildResourceConfig>();
+  isArrayChild = input<boolean>(false);
+  uuid = input.required<string>();
+  parentData = input<RecordData>();
+
+  rootConfig = computed(() => this.route.snapshot.data['config'] as RootConfig);
+
+  emptyOneToOne = signal(false);
+
+  hasElements = computed(() => {
+    const config = this.primaryConfig();
+    return config && (config.type === 'ListView' || config.type === 'View') && config.elements.length > 0;
+  });
+
+  primaryConfigParentId = computed(() => {
+    const config = this.primaryConfig();
+    const data = this.resolvedData();
+    if (config.type === 'View' || config.type === 'ListView') {
+      const parentKey = config.parentRelation?.parentKey;
+      if (parentKey !== '') {
+        return String(data[parentKey]);
+      }
+    }
+    return this.uuid();
+  });
+
+  primaryConfig = computed(() => {
+    const config = this.resourceConfig();
+    if (config) {
+      return config;
+    }
+    return this.rootConfig().parentConfig;
+  });
+
+  title = computed(() => {
+    if (this.isArrayChild()) {
+      return '';
+    }
+    const config = this.primaryConfig();
+    if (config.type !== 'Component') {
+      return config.title;
+    }
+    return '';
+  });
+
+  isRootConfig = computed(() => {
+    return this.resourceConfig() === undefined;
+  });
+
+  configs = computed(() => {
+    if (this.hasElements() && this.emptyOneToOne()) {
+      return [];
+    }
+
+    if (this.isRootConfig()) {
+      return this.rootConfig().relatedConfigs;
+    }
+
+    const config = this.primaryConfig();
+    if (config.type === 'ListView' || config.type === 'View') {
+      return config.relatedConfigs;
+    }
+    return [];
+  });
+
+  rpcConfigs = computed(() => (this.isRootConfig() ? this.rootConfig().rpcConfigs : undefined));
+  hasRpcConfigs = computed(() => !!this.rpcConfigs() && this.rpcConfigs()!.length > 0);
+
+  resolvedData = computed(() => {
+    if (this.store.viewData()) {
+      return this.store.viewData() as RecordData;
+    }
+
+    return this.parentData() || ({} as RecordData);
+  });
+
+  ngOnInit(): void {
+    const resource = this.primaryConfig().primaryResource as Resource;
+    const meta = this.resourceMeta(resource);
+
+    if (meta) {
+      this.store.resourceName.set(resource);
+      this.store.resourceMeta.set(meta);
+    }
+  }
+
+  constructor() {
+    effect(() => {
+      this.store.uuid.set(this.primaryConfigParentId());
+
+      const c = this.primaryConfig();
+      if (c.type === 'View') {
+        this.store.resetResourceView();
+      } else if (c.type === 'ListView') {
+        this.store.resetResourceList();
+        this.store.resetResourceView();
+      }
+    });
+  }
+
+  handleEmptyOneToOne(value: boolean): void {
+    this.emptyOneToOne.set(value);
+  }
+
+  goBack(): void {
+    this.location.back();
+  }
+}