@cccteam/ccc-lib 0.0.15 → 0.0.16

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

@@ -1,303 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,16 +0,0 @@
-@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

@@ -1,22 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,13 +0,0 @@
-@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

@@ -1,23 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,22 +0,0 @@
-@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

@@ -1,22 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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 {}