@cccteam/ccc-lib 0.0.13 → 0.0.15

package/src/ccc-resource/concat-fns.ts

@@ -0,0 +1,162 @@
+export const concatFunctions = {
+  'space-concat': spaceConcat,
+  'hyphen-concat': hyphenConcat,
+  'space-hyphen-concat': spaceHyphenConcat,
+  'hyphen-space-concat': hyphenSpaceConcat,
+};
+
+/**
+ * Concatenates the strings corresponding to the given keys in the resource,
+ * using a space separator.
+ * @param resource A record mapping keys to string values.
+ * @param args Keys of the resource to concatenate.
+ * @returns Concatenated string.
+ * @example
+ * const resource = { foo: 'foo', bar: 'bar', baz: 'baz' };
+ * spaceConcat(resource, 'foo', 'bar', 'baz'); // returns 'foo bar baz'
+ */
+export function spaceConcat(resource: Record<string, string>, ...args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return resource[args[0] ?? ''] ?? '';
+  return args.map((arg) => resource[arg] ?? '').join(' ');
+}
+
+/**
+ * Concatenates the strings corresponding to the given keys in the resource,
+ * using a hyphen separator.
+ * @param resource A record mapping keys to string values.
+ * @param args Keys of the resource to concatenate.
+ * @returns Concatenated string.
+ * @example
+ * const resource = { foo: 'foo', bar: 'bar', baz: 'baz' };
+ * hyphenConcat(resource, 'foo', 'bar', 'baz'); // returns 'foo - bar - baz'
+ */
+export function hyphenConcat(resource: Record<string, string>, ...args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return resource[args[0] ?? ''] ?? '';
+  return args.map((arg) => resource[arg] ?? '').join(' - ');
+}
+
+/**
+ * Concatenates the given strings so that all but the last are joined with a space,
+ * and the last string is appended with a " - " separator.
+ * @param resource A mapping of keys to string values.
+ * @param args Keys of strings to concatenate.
+ * @returns Concatenated string.
+ * @example spaceHyphenConcat(resource, 'foo', 'bar', 'baz') => 'foo bar - baz'
+ */
+export function spaceHyphenConcat(resource: Record<string, string>, ...args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return resource[args[0] || ''] || '';
+
+  const initialPart = args
+    .slice(0, -1)
+    .map((arg) => resource[arg] || '')
+    .join(' ');
+
+  const lastPart = resource[args[args.length - 1] || ''] || '';
+
+  return `${initialPart} - ${lastPart}`;
+}
+
+/**
+ * Concatenates the given strings so that all but the first are joined with a space,
+ * and the first string is appended with a " - " separator.
+ * @param resource A mapping of keys to string values.
+ * @param args Keys of strings to concatenate.
+ * @returns Concatenated string.
+ * @example spaceHyphenConcat(resource, 'foo', 'bar', 'baz') => 'foo - bar baz'
+ */
+export function hyphenSpaceConcat(resource: Record<string, string>, ...args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return resource[args[0] || ''] || '';
+
+  const initialPart = args[0] !== undefined ? resource[args[0]] || '' : '';
+
+  const lastPart = args
+    .slice(1, args.length)
+    .map((arg) => resource[arg] || '')
+    .join(' ');
+
+  return `${initialPart} - ${lastPart}`;
+}
+
+/**
+ * Concatenates the strings using a space separator.
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example
+ * spaceConcatWithoutResource(['foo', 'bar', 'baz']); // returns 'foo bar baz'
+ */
+export function spaceConcatWithoutResource(args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return args[0] ?? '';
+  return args.map((arg) => arg ?? '').join(' ');
+}
+
+/**
+ * Concatenates the strings using a hyphen separator.
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example
+ * hyphenConcatWithoutResource(['foo', 'bar', 'baz']); // returns 'foo - bar - baz'
+ */
+export function hyphenConcatWithoutResource(args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return args[0] || '';
+  return args.join(' - ');
+}
+
+/**
+ * Concatenates the given strings so that all but the last are joined with a space,
+ * and the last string is appended with a " - " separator.
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example spaceHyphenConcatWithoutResource(['foo', 'bar', 'baz']) => 'foo bar - baz'
+ */
+export function spaceHyphenConcatWithoutResource(args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return args[0] || '';
+
+  const initialPart = args
+    .slice(0, -1)
+    .map((arg) => arg || '')
+    .join(' ');
+
+  const lastPart = args[args.length - 1] || '';
+
+  return `${initialPart} - ${lastPart}`;
+}
+
+/**
+ * Concatenates the given strings so that all but the first are joined with a space,
+ * and the first string is appended with a " - " separator.
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example hyphenSpaceConcatWithoutResource(['foo', 'bar', 'baz']) => 'foo - bar baz'
+ */
+export function hyphenSpaceConcatWithoutResource(args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return args[0] || '';
+
+  const initialPart = args[0] || '';
+
+  const lastPart = args
+    .slice(1, args.length)
+    .map((arg) => arg || '')
+    .join(' ');
+
+  return `${initialPart} - ${lastPart}`;
+}
+
+/**
+ * Concatenates the given strings without any space,
+ * @param args Strings to concatenate.
+ * @returns Concatenated string.
+ * @example noSpaceConcatWithoutResource(['foo', 'bar', 'baz']) => 'foobarbaz'
+ */
+export function noSpaceConcatWithoutResource(args: string[]): string {
+  if (args.length === 0) return '';
+  if (args.length === 1) return args[0] || '';
+  return args.join('');
+}

package/src/ccc-resource/empty-readonly-field/empty-readonly-field.component.html

@@ -0,0 +1,12 @@
+<div class="readonly-field">
+  <mat-form-field class="field" [subscriptSizing]="'dynamic'">
+    <mat-label>{{ label() }}</mat-label>
+    <input
+      matInput
+      (keydown.enter)="$event.preventDefault()"
+      [readonly]="true"
+      type="text"
+      [value]="displayValue"
+      id="{{ label() }}-readonly-input-text" />
+  </mat-form-field>
+</div>

package/src/ccc-resource/empty-readonly-field/empty-readonly-field.component.spec.ts

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

package/src/ccc-resource/empty-readonly-field/empty-readonly-field.component.ts

@@ -0,0 +1,17 @@
+import { Component, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { defaultEmptyFieldValue } from '@cccteam/ccc-lib/src/types';
+
+@Component({
+  selector: 'ccc-empty-readonly-field',
+  imports: [MatFormFieldModule, MatButtonModule, MatInputModule],
+  templateUrl: './empty-readonly-field.component.html',
+  styleUrl: './empty-readonly-field.component.scss',
+})
+export class EmptyReadonlyFieldComponent {
+  label = input.required<string>();
+
+  displayValue = defaultEmptyFieldValue;
+}

package/src/ccc-resource/form-state.service.ts

@@ -0,0 +1,24 @@
+import { computed, Injectable, signal } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FormStateService {
+  dirtyForms = signal(0);
+
+  incrementDirtyForms(): void {
+    this.dirtyForms.set(this.dirtyForms() + 1);
+  }
+
+  decrementDirtyForms(): void {
+    this.dirtyForms.set(this.dirtyForms() - 1);
+  }
+
+  resetDirtyForms(): void {
+    this.dirtyForms.set(0);
+  }
+
+  isDirty = computed(() => {
+    return this.dirtyForms() > 0;
+  });
+}

package/src/ccc-resource/format-fns.ts

@@ -0,0 +1,49 @@
+import { FormatType } from '@cccteam/ccc-lib/src/types';
+import { format, isValid, parseISO } from 'date-fns';
+
+export type FormatterFn = (value: string) => string;
+
+export const simpleSlashDateFormatter = (value: string): string => {
+  if (!value) return '';
+  const parsedDate = parseISO(value.toString());
+
+  if (isValid(parsedDate)) {
+    return format(parsedDate, 'M/d/yyyy');
+  }
+
+  console.error('Applying simpleSlashDateFormatter to invalid date value:', value);
+  return value.toString();
+};
+
+export const ValueFormatters: Record<FormatType, FormatterFn> = {
+  ['simpleSlashDateFormat']: simpleSlashDateFormatter,
+};
+
+export function applyFormatting(formatString: string, value: string): string {
+  if (!value) return '';
+  if (formatString in ValueFormatters) {
+    return ValueFormatters[formatString as FormatType](value);
+  }
+
+  //default to formatting as a date with provided format string
+  const parsedDate = parseISO(value.toString());
+
+  if (isValid(parsedDate)) {
+    return format(parsedDate, formatString);
+  }
+
+  return value.toString();
+}
+
+export function formatDateString(formatString: string, value: string): string {
+  if (!value) return '';
+
+  //default to formatting as a date with provided format string
+  const parsedDate = parseISO(value.toString());
+
+  if (isValid(parsedDate)) {
+    return format(parsedDate, formatString);
+  }
+
+  return value.toString();
+}

package/src/ccc-resource/gui-constants.ts

@@ -0,0 +1,88 @@
+import { AbstractControl, ValidationErrors, Validators } from '@angular/forms';
+import { ConfigElement, ResourceValidatorFn } from '@cccteam/ccc-lib/src/types';
+import { isDate } from 'date-fns';
+import { formatInTimeZone } from 'date-fns-tz';
+import { isNumber } from 'lodash-es';
+import { createResourceValidator } from './utils/validator-utils';
+
+export const maxConfigElementRecursionDepth = 240;
+export const maxLayoutNestingDepth = 48;
+
+/** Returns a flat array of nested elements by recursively traversing
+ * through the elements graph */
+export const flattenElements: (elements: ConfigElement[], depth?: number) => ConfigElement[] = (
+  elements: ConfigElement[],
+  depth = 0,
+) => {
+  depth++;
+  if (!elements || elements.length === 0 || depth > maxConfigElementRecursionDepth) {
+    return [];
+  }
+  return elements.reduce((acc, element) => {
+    if (element.type === 'section') {
+      return acc.concat(element, flattenElements(element.children, depth));
+    }
+    return acc.concat(element);
+  }, [] as ConfigElement[]);
+};
+
+export const civildateCoercion = (value: string): Date => {
+  if (value === undefined || value === '') {
+    return new Date(value);
+  }
+  return new Date(formatInTimeZone(new Date(value), 'UTC', 'yyyy-MM-dd HH:mm:ss'));
+};
+
+const currentOrFutureDateValidator = (control: AbstractControl): ValidationErrors | null => {
+  if (!control.value) {
+    return null; // Let "REQUIRED" validator handle empty values
+  }
+
+  if (!isDate(control.value)) {
+    return { errorMsg: 'Value must be a valid date' };
+  }
+
+  const selectedDate = new Date(control.value);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+
+  if (selectedDate >= today) {
+    return null;
+  }
+
+  return { errorMsg: 'Date must be greater than or equal to the current date' };
+};
+
+const positiveNumberValidator = (control: AbstractControl): ValidationErrors | null => {
+  if (!control.value && control.value !== 0) {
+    return null; // Let "REQUIRED" validator handle "empty" values
+  }
+
+  if (isNumber(control.value) && control.value > 0) {
+    return null;
+  }
+
+  return { errorMsg: 'Value must be a positive number' };
+};
+
+/**
+ * This object stores every possible validator used across the application
+ * Add all validators that are used in configs to this object
+ *
+ * Available validators that may be added: min, max, required, requiredTrue,
+ *    email, minLength, maxLength, pattern, nullValidator
+ */
+export const resourceValidators = Object.freeze({
+  REQUIRED: createResourceValidator(Validators.required),
+  EMAIL: createResourceValidator(Validators.email),
+  CURRENT_OR_FUTURE_DATE: createResourceValidator(currentOrFutureDateValidator),
+  POSITIVE_NUMBER: createResourceValidator(positiveNumberValidator),
+
+  // Add any additional validators here. They may be defined in
+  // a different file if they are too large. E.g.:
+  // MIN_LENGTH_3: createResourceValidator(Validators.minLength(3)),
+});
+
+export const validatorsPresent = (control: AbstractControl, validatorResources: ResourceValidatorFn[]): boolean => {
+  return validatorResources.every((validator) => control.hasValidator(validator));
+};

package/src/ccc-resource/index.ts

@@ -0,0 +1,23 @@
+export * from './can-deactivate.guard';
+export * from './compound-resource/compound-resource.component';
+export * from './concat-fns';
+export * from './empty-readonly-field/empty-readonly-field.component';
+export * from './form-state.service';
+export * from './format-fns';
+export * from './gui-constants';
+export * from './leave-page-confirmation-modal/leave-page-confirmation-modal.component';
+export * from './padding-element/padding-element.component';
+export * from './resource-array-view/resource-array-view.component';
+export * from './resource-base/resource-base.component';
+export * from './resource-cache.service';
+export * from './resource-create/resource-create.component';
+export * from './resource-field/base-field.directive';
+export * from './resource-field/resource-field.component';
+export * from './resource-layout/resource-layout.component';
+export * from './resource-list-create/resource-list-create.component';
+export * from './resource-list/resource-list.component';
+export * from './resource-resolver/resource-resolver.component';
+export * from './resource-store.service';
+export * from './resource-view/resource-view.component';
+export * from './resources-helpers';
+

package/src/ccc-resource/leave-page-confirmation-modal/leave-page-confirmation-modal.component.html

@@ -0,0 +1,8 @@
+<div mat-dialog-title>You have unsaved changes, are you sure you want to leave?</div>
+<mat-dialog-content>
+  <p>Any unsaved changes will be lost.</p>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+  <button mat-raised-button color="warn" [mat-dialog-close]="false">Cancel</button>
+  <button mat-raised-button color="accent" [mat-dialog-close]="true">Confirm</button>
+</mat-dialog-actions>

package/src/ccc-resource/leave-page-confirmation-modal/leave-page-confirmation-modal.component.spec.ts

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

package/src/ccc-resource/leave-page-confirmation-modal/leave-page-confirmation-modal.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogActions, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+
+@Component({
+  selector: 'ccc-leave-page-confirmation-modal',
+  imports: [MatDialogModule, MatFormFieldModule, MatDialogActions, MatButtonModule],
+  templateUrl: './leave-page-confirmation-modal.component.html',
+  styleUrls: ['./leave-page-confirmation-modal.component.scss'],
+})
+export class LeavePageConfirmationModalComponent {}

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

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

package/src/ccc-resource/operation-types.ts

@@ -0,0 +1,19 @@
+export type PatchOperation = 'add' | 'patch' | 'remove';
+
+export interface Operation {
+  op: PatchOperation;
+  value?: Record<string, unknown>;
+  path: string;
+}
+
+export interface CreateOperation extends Operation {
+  op: 'add';
+}
+
+export interface UpdateOperation extends Operation {
+  op: 'patch';
+}
+
+export interface DeleteOperation extends Operation {
+  op: 'remove';
+}

package/src/ccc-resource/padding-element/padding-element.component.html

@@ -0,0 +1 @@
+<div class="padding-container"></div>

package/src/ccc-resource/padding-element/padding-element.component.scss

@@ -0,0 +1,3 @@
+.padding-container {
+  height: 52px;
+}

package/src/ccc-resource/padding-element/padding-element.component.spec.ts

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

package/src/ccc-resource/padding-element/padding-element.component.ts

@@ -0,0 +1,20 @@
+import { Component, HostBinding, input, OnInit } from '@angular/core';
+import { PaddingElement } from '@cccteam/ccc-lib/src/types';
+
+@Component({
+  selector: 'ccc-padding-element',
+  imports: [],
+  templateUrl: './padding-element.component.html',
+  styleUrls: ['./padding-element.component.scss'],
+})
+export class PaddingElementComponent implements OnInit {
+  paddingElement = input.required<PaddingElement>();
+
+  @HostBinding('class') class = 'col-6';
+
+  ngOnInit(): void {
+    if (this.paddingElement().cols) {
+      this.class = 'col-' + this.paddingElement()?.cols;
+    }
+  }
+}

package/src/ccc-resource/resource-array-view/resource-array-view.component.html

@@ -0,0 +1,81 @@
+@if (resourceConfig().title !== '') {
+  <div class="resource-array-view">
+    <mat-expansion-panel
+      #expPanel
+      [@.disabled]="true"
+      [disabled]="!resourceConfig().collapsible"
+      [expanded]="!resourceConfig().collapsible">
+      <mat-expansion-panel-header>
+        @if (resourceConfig().title) {
+          <mat-panel-title>
+            <h1 class="title">
+              {{ resourceConfig().title }}
+            </h1>
+          </mat-panel-title>
+        }
+        @if (showCreateButton()) {
+          <button
+            mat-icon-button
+            class="exp-panel-add-element-btn"
+            color="accent"
+            (click)="createResource($event)"
+            [matTooltip]="resourceConfig().createButtonLabel"
+            matTooltipPosition="above">
+            <mat-icon color="accent">add_circle</mat-icon>
+          </button>
+        }
+      </mat-expansion-panel-header>
+
+      @if (!resourceConfig().collapsible && !resourceConfig().title) {
+        <div class="no-title-exp-panel-padding"></div>
+      }
+
+      @if (createMode()) {
+        <ccc-resource-create
+          [resourceConfig]="createConfig()"
+          [parentData]="parentData()"
+          (complete)="onCreateCompleted()">
+        </ccc-resource-create>
+      }
+      @for (resource of store.listData(); track resource['id']; let i = $index) {
+        @let resourceId = (resource[resourceConfig().connectorField] || resource['id']) + '';
+
+        @if (parentData() && resourceConfig().iteratedConfig && resourceId && i + 1 <= resourceConfig().limit) {
+        <ng-container *ngComponentOutlet="compoundResourceComponent().componentType;
+          inputs: { 
+            uuid: resourceId, 
+            parentData: parentData(), 
+            isArrayChild: true, 
+            resourceConfig: resourceConfig().iteratedConfig 
+          }">
+        </ng-container>
+        }
+      }
+
+      @if (store.listData().length === 0) {
+        <div>No records found</div>
+      }
+    </mat-expansion-panel>
+  </div>
+} @else {
+  @if (createMode()) {
+    <ccc-resource-create [resourceConfig]="createConfig()" [parentData]="parentData()" (complete)="onCreateCompleted()">
+    </ccc-resource-create>
+  }
+  @for (resource of store.listData(); track resource['id']; let i = $index) {
+    @if (parentData() && resourceConfig().iteratedConfig && resource['id'] && i + 1 <= resourceConfig().limit) {
+      <ng-container *ngComponentOutlet="compoundResourceComponent().componentType;
+        inputs: { 
+          uuid: resource['id'] + '', 
+          parentData: parentData(), 
+          isArrayChild: true, 
+          resourceConfig: resourceConfig().iteratedConfig 
+        }">
+      </ng-container>
+    }
+  }
+
+  @if (store.listData().length === 0) {
+    <div>No records found</div>
+  }
+}

package/src/ccc-resource/resource-array-view/resource-array-view.component.scss

@@ -0,0 +1,21 @@
+.resource-array-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 36px;
+  padding: 10px 0 0 0;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.exp-panel-add-element-btn {
+  margin-right: 10px;
+  transform: scale(1.2);
+}
+
+.no-title-exp-panel-padding {
+  padding: 10px;
+}

package/src/ccc-resource/resource-array-view/resource-array-view.component.spec.ts

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