@cccteam/ccc-lib 0.0.13 → 0.0.15

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

@@ -0,0 +1,303 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  OnInit,
+  output,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ActivatedRoute, Data, Router, RouterModule } from '@angular/router';
+import { CamelCaseToTitlePipe } from '@cccteam/ccc-lib/src/ccc-camel-case-to-title';
+import {
+  ChildResourceConfig,
+  DataType,
+  FieldElement,
+  ListViewConfig,
+  RecordData,
+  Resource,
+  RESOURCE_META,
+  ResourceMeta,
+  RootConfig,
+  ViewConfig,
+} from '@cccteam/ccc-lib/src/types';
+import { NotificationService } from '@cccteam/ccc-lib/src/ui-notification-service';
+import { tap } from 'rxjs';
+import { FormStateService } from '../form-state.service';
+import { flattenElements } from '../gui-constants';
+import { CreateOperation } from '../operation-types';
+import { ResourceCacheService } from '../resource-cache.service';
+import { ResourceLayoutComponent } from '../resource-layout/resource-layout.component';
+import { ResourceStore } from '../resource-store.service';
+import { cleanStringForm, metadataTypeCoercion } from '../resources-helpers';
+
+@Component({
+  selector: 'ccc-resource-create',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    RouterModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatDividerModule,
+    ResourceLayoutComponent,
+  ],
+  templateUrl: './resource-create.component.html',
+  styleUrl: './resource-create.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [ResourceStore],
+})
+export class ResourceCreateComponent implements OnInit {
+  activatedRoute = inject(ActivatedRoute);
+  notifications = inject(NotificationService);
+  store = inject(ResourceStore);
+  cache = inject(ResourceCacheService);
+  router = inject(Router);
+  destroyRef = inject(DestroyRef);
+  formState = inject(FormStateService);
+  resourceMeta = inject(RESOURCE_META);
+
+  routeData = toSignal<Data>(this.activatedRoute.data);
+
+  isDirty = signal(false);
+  submitted = signal<boolean>(false);
+  complete = output<boolean>();
+  resourceConfig = input<ChildResourceConfig>();
+  parentData = input<RecordData>({});
+  loadCreatedResource = input<boolean>(false);
+
+  rootConfig = computed(() => {
+    return this.activatedRoute.snapshot.data['config'] as RootConfig;
+  });
+
+  config = computed(() => {
+    const inputConfig = this.resourceConfig() as ViewConfig;
+    if (inputConfig !== undefined) {
+      return inputConfig;
+    }
+    return this.rootConfig().parentConfig as ListViewConfig;
+  });
+
+  indentTitle = computed(() => {
+    if (this.config().collapsible || this.resourceConfig() === undefined) {
+      return false;
+    }
+
+    return true;
+  });
+
+  form = computed(() => {
+    const meta = this.store.resourceMeta();
+    const fg = new FormGroup({});
+    const allElements = flattenElements(this.config().elements);
+
+    for (const field of meta.fields || []) {
+      if (fg.get(field.fieldName)) {
+        continue;
+      }
+
+      let control = new FormControl<DataType>('');
+      if (field.displayType === 'boolean') {
+        control = new FormControl<boolean>(false);
+      }
+
+      const findElement = allElements.find((element) => element.type === 'field' && element.name === field.fieldName);
+      const fieldConfig = findElement as FieldElement | undefined;
+      if (!fieldConfig) {
+        continue;
+      }
+      const fieldDefault = fieldConfig.default;
+      if (field.displayType === 'boolean') {
+        const booleanDefaultValue =
+          fieldDefault?.type == 'static' && typeof fieldDefault?.value === 'boolean' ? fieldDefault.value : null;
+        if (booleanDefaultValue === null) {
+          console.error(
+            `Default value for boolean field, ${field.fieldName}, is null, add a default value to the config`,
+          );
+        }
+        control = new FormControl<boolean | null>(booleanDefaultValue);
+      }
+
+      if (fieldDefault?.type === 'foreignKey' && this.parentData()) {
+        const parentValue = this.parentData()[fieldDefault.parentId];
+        if (parentValue !== undefined) {
+          control.setValue(parentValue);
+        }
+      } else if (fieldDefault?.type == 'static') {
+        const staticDefault = fieldDefault;
+        if (staticDefault.value) {
+          control.setValue(staticDefault.value);
+        }
+      }
+
+      if (fieldConfig.validators.length > 0) {
+        control.setValidators(fieldConfig.validators);
+      }
+
+      if (field.required && !control.hasValidator(Validators.required)) {
+        control.setValidators([Validators.required]);
+      }
+      fg.addControl(field.fieldName, control);
+    }
+    return fg;
+  });
+
+  route = computed(() => {
+    const meta = this.store.resourceMeta();
+    if (!meta) return '';
+    return meta.consolidatedRoute || meta.route;
+  });
+
+  primaryKeys = computed(() => {
+    const meta = this.store.resourceMeta() as ResourceMeta;
+    if (!meta) return [];
+    return meta.fields
+      .filter((field) => field.primaryKey)
+      .sort((a, b) => a.primaryKey!.ordinalPosition - b.primaryKey!.ordinalPosition);
+  });
+
+  hasRequiredPrimaryKey = computed(() => {
+    const meta = this.store.resourceMeta() as ResourceMeta;
+    if (!meta) {
+      return false;
+    }
+    return meta.fields.some((field) => field.primaryKey && field.required);
+  });
+
+  primaryKeyPath = computed(() => {
+    const meta = this.store.resourceMeta();
+    const isConsolidated = meta.consolidatedRoute !== undefined;
+    const pathPrefix = isConsolidated ? '/' + meta.route : '';
+    const keyPath = this.primaryKeys()
+      .map((field) => this.form().get(field.fieldName)?.value)
+      .join('/');
+
+    if (keyPath === '' && pathPrefix === '') {
+      return '/';
+    }
+
+    if (keyPath === '') {
+      return pathPrefix;
+    }
+
+    return pathPrefix + '/' + keyPath;
+  });
+
+  camelCaseToTitlePipe = new CamelCaseToTitlePipe();
+
+  ngOnInit(): void {
+    if (this.resourceMeta(this.config().primaryResource as Resource)) {
+      this.store.resourceName.set(this.config().primaryResource as Resource);
+      this.store.resourceMeta.set(this.resourceMeta(this.config().primaryResource as Resource));
+    }
+  }
+
+  saveForm(): void {
+    if (!this.form().valid) {
+      this.submitted.set(true);
+      this.form().markAllAsTouched();
+      const formElement = document.getElementById('resource-form');
+      const invalidField = formElement?.querySelector('.mdc-text-field--invalid');
+      if (invalidField) {
+        invalidField.scrollIntoView({ behavior: 'smooth' });
+      }
+      return;
+    }
+
+    const resourceMeta = this.store.resourceMeta();
+    if (!resourceMeta) return;
+
+    const cleanedForm = cleanStringForm<Record<string, string>>(this.form());
+    if (cleanedForm === undefined || cleanedForm === null) {
+      return;
+    }
+    const coercedCleanedData = metadataTypeCoercion(cleanedForm, this.store.resourceMeta());
+
+    const cleanedDataWithoutPrimaryKeys = Object.fromEntries(
+      Object.entries(coercedCleanedData).filter(
+        ([key]) => !this.primaryKeys().some((field) => field.fieldName === key),
+      ),
+    );
+
+    const createPatch: CreateOperation = {
+      op: 'add',
+      value: cleanedDataWithoutPrimaryKeys,
+      path: this.primaryKeyPath(),
+    };
+
+    this.cache
+      .createPatch(createPatch, this.route(), this.store.resourceName())
+      .pipe(
+        tap((response) => {
+          this.formState.decrementDirtyForms();
+
+          if (!response) {
+            this.complete.emit(true);
+            return;
+          }
+          const navigationRoutes = this.config().createNavigation;
+          const createIds = (response[this.store.resourceRoute()] as string[]) || [];
+          if (this.loadCreatedResource() && createIds.length === 1) {
+            let route = this.rootConfig().routeData.route;
+            if (this.parentData() || !route) {
+              route = resourceMeta.route;
+            }
+            if (navigationRoutes.length === 0) {
+              this.router.navigate([route, createIds[0]]);
+            } else {
+              if (createIds[0]) {
+                navigationRoutes.push(createIds[0]);
+              }
+              this.router.navigate(navigationRoutes);
+            }
+          } else {
+            this.complete.emit(true);
+          }
+        }),
+      )
+      .subscribe();
+  }
+
+  cancelForm(): void {
+    if (this.form().dirty) {
+      this.formState.decrementDirtyForms();
+    }
+    this.complete.emit(true);
+  }
+
+  constructor() {
+    effect(() => {
+      console.debug('USAGE | New FormGroup subscription for: ', this.config().title);
+
+      this.form()
+        .valueChanges.pipe(
+          tap(() => {
+            const dirty = this.form().dirty;
+
+            if (dirty !== this.isDirty()) {
+              this.isDirty.set(dirty);
+              if (dirty) {
+                this.formState.incrementDirtyForms();
+              } else {
+                this.formState.decrementDirtyForms();
+              }
+            }
+          }),
+          takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe();
+    });
+  }
+}

package/src/ccc-resource/resource-field/base-field.directive.ts

@@ -0,0 +1,102 @@
+import { computed, Directive, inject, Injector, input, signal } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { DataType, FieldElement, FieldMeta, Meta, RecordData, RESOURCE_META, RPCFieldMeta } from '@cccteam/ccc-lib/src/types';
+import { ResourceCacheService } from '../resource-cache.service';
+import { isUUID } from '../resources-helpers';
+
+/*
+ * Base class for all resource input components.
+ */
+@Directive()
+export abstract class BaseInputComponent {
+  injector = inject(Injector);
+  cache = inject(ResourceCacheService);
+  resourceMeta = inject(RESOURCE_META);
+
+  meta = input.required<Meta>();
+  pristineValue = input<DataType | null>();
+  editMode = input.required<'edit' | 'view'>();
+  showField = input<boolean>();
+  fieldConfig = input.required<FieldElement>();
+  fieldClass = input<string>();
+  fieldMeta = input.required<FieldMeta | RPCFieldMeta>();
+  form = input.required<FormGroup>();
+  relatedData = input<RecordData>();
+
+  /**
+   * Resets the field back to its pristine value.
+   */
+  reset(): void {
+    const control = this.form().get(this.fieldConfig().name as string);
+    if (control) {
+      control.setValue(this.pristineValue());
+      control.markAsPristine();
+    }
+  }
+
+  prefixString = computed(() => {
+    const relatedData = this.relatedData();
+
+    let builtPrefix = '';
+    this.fieldConfig().prefixes.forEach((prefix) => {
+      if (typeof prefix === 'string') {
+        builtPrefix += prefix;
+      } else if ('resource' in prefix) {
+        if (!relatedData || !relatedData[prefix.id]) return;
+        const id = relatedData[prefix.id];
+        if (typeof id !== 'string') return;
+        if (!id || !isUUID(id)) return;
+        const prefixResourceMeta = this.resourceMeta(prefix.resource);
+        const resource = this.cache
+          .registerView(signal(prefixResourceMeta.route), signal(prefix.resource), signal(id))
+          ?.value();
+        if (resource && prefix.field in resource) {
+          builtPrefix += resource[prefix.field];
+        }
+      } else if ('field' in prefix) {
+        if (relatedData) {
+          const fieldValue = relatedData[prefix.field];
+          builtPrefix += fieldValue ? fieldValue : '';
+        }
+      }
+    });
+    return builtPrefix;
+  });
+
+  suffixString = computed(() => {
+    const relatedData = this.relatedData();
+
+    let builtSuffix = '';
+    this.fieldConfig().suffixes.forEach((suffix) => {
+      if (typeof suffix === 'string') {
+        builtSuffix += suffix;
+      } else if ('resource' in suffix) {
+        if (!relatedData || !relatedData[suffix.id]) return;
+        const id = relatedData[suffix.id];
+        if (typeof id !== 'string') return;
+        if (!id || !isUUID(id)) return;
+        const suffixResourceMeta = this.resourceMeta(suffix.resource);
+        const resource = this.cache
+          .registerView(signal(suffixResourceMeta.route), signal(suffix.resource), signal(id))
+          ?.value();
+        if (resource && suffix.field in resource) {
+          builtSuffix += resource[suffix.field];
+        }
+      } else if ('field' in suffix) {
+        if (relatedData) {
+          const fieldValue = relatedData[suffix.field];
+          builtSuffix += fieldValue ? fieldValue : '';
+        }
+      }
+    });
+    return builtSuffix;
+  });
+
+  floatLabel = computed(() => {
+    if (this.fieldConfig().prefixes.length > 0 || this.fieldConfig().suffixes.length > 0) {
+      return 'always';
+    } else {
+      return 'auto';
+    }
+  });
+}

package/src/ccc-resource/resource-field/fields/boolean-field/boolean-field.component.html

@@ -0,0 +1,16 @@
+@if (showField()) {
+  <ng-container [formGroup]="form()">
+    <div [class.readonly-field]="editMode() === 'view'">
+      <mat-checkbox
+        class="field checkbox {{ fieldClass() }}"
+        [formControlName]="fieldConfig().name"
+        (keydown.enter)="$event.preventDefault()">
+        {{ fieldConfig().label }}
+      </mat-checkbox>
+    </div>
+  </ng-container>
+} @else {
+  <ng-container [formGroup]="form()">
+    <input type="hidden" [formControlName]="fieldConfig().name" />
+  </ng-container>
+}

package/src/ccc-resource/resource-field/fields/boolean-field/boolean-field.component.spec.ts

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

package/src/ccc-resource/resource-field/fields/boolean-field/boolean-field.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BaseInputComponent } from '../../base-field.directive';
+
+@Component({
+  selector: 'ccc-boolean-field',
+  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule, MatCheckboxModule],
+  templateUrl: './boolean-field.component.html',
+  styleUrl: './boolean-field.component.scss',
+})
+export class BooleanFieldComponent extends BaseInputComponent {}

package/src/ccc-resource/resource-field/fields/computed-field/computed-field.component.html

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

package/src/ccc-resource/resource-field/fields/computed-field/computed-field.component.spec.ts

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

package/src/ccc-resource/resource-field/fields/computed-field/computed-field.component.ts

@@ -0,0 +1,50 @@
+import { Component, computed, effect, HostBinding, input } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ComputedDisplayFieldElement, RecordData } from '@cccteam/ccc-lib/src/types';
+
+@Component({
+  selector: 'ccc-computed-field',
+  imports: [MatFormFieldModule, MatButtonModule, MatInputModule],
+  templateUrl: './computed-field.component.html',
+  styleUrl: './computed-field.component.scss',
+})
+export class ComputedFieldComponent {
+  fieldConfig = input.required<ComputedDisplayFieldElement>();
+  fieldClass = input<string>();
+  formDataState = input<RecordData>();
+
+  computedValue = computed(() => {
+    try {
+      return this.fieldConfig().calculatedValue(this.formDataState());
+    } catch (e) {
+      console.error('Failed to calculate value for computed field: ', this.fieldConfig().label);
+      console.error(e);
+      return '';
+    }
+  });
+
+  showField = computed(() => {
+    const shouldRender = this.fieldConfig().shouldRender;
+    if (typeof shouldRender === 'boolean') {
+      return shouldRender;
+    }
+
+    try {
+      return shouldRender(this.formDataState());
+    } catch (e) {
+      console.error('Failed to calculate value for should Render function for field: ', this.fieldConfig().label);
+      console.error(e);
+      return true;
+    }
+  });
+
+  @HostBinding('class') class = '';
+
+  constructor() {
+    effect(() => {
+      this.class = this.showField() ? 'col-' + this.fieldConfig()?.cols : 'hidden-field';
+    });
+  }
+}

package/src/ccc-resource/resource-field/fields/date-field/date-field.component.html

@@ -0,0 +1,22 @@
+@if (showField()) {
+  <div [class.readonly-field]="editMode() === 'view'">
+    <mat-form-field class="field {{ fieldClass() }}" [formGroup]="form()" [subscriptSizing]="'dynamic'">
+      <mat-label>{{ fieldConfig().label }}</mat-label>
+      <input
+        matInput
+        [readonly]="editMode() === 'view'"
+        [matDatepicker]="picker"
+        type="text"
+        (keydown.enter)="$event.preventDefault()"
+        [formControlName]="fieldConfig().name" />
+      @if (editMode() === 'edit') {
+        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+      }
+      <mat-datepicker #picker></mat-datepicker>
+    </mat-form-field>
+  </div>
+} @else {
+  <ng-container [formGroup]="form()">
+    <input type="hidden" [formControlName]="fieldConfig().name" />
+  </ng-container>
+}

package/src/ccc-resource/resource-field/fields/date-field/date-field.component.spec.ts

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

package/src/ccc-resource/resource-field/fields/date-field/date-field.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { BaseInputComponent } from '../../base-field.directive';
+
+@Component({
+  selector: 'ccc-date-field',
+  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule],
+  templateUrl: './date-field.component.html',
+  styleUrl: './date-field.component.scss',
+})
+export class DateFieldComponent extends BaseInputComponent {}