@cccteam/ccc-lib 0.0.13 → 0.0.15

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

@@ -0,0 +1,112 @@
+<div [class.hidden-field]="!showField()">
+  @if (showEmptyField()) {
+    <ccc-empty-readonly-field [label]="fieldConfig().label"></ccc-empty-readonly-field>
+  } @else {
+    @switch (fieldMeta().displayType) {
+      @case ('date') {
+        <ccc-date-field
+          [form]="form()"
+          [fieldConfig]="fieldConfig()"
+          [editMode]="mode()"
+          [fieldClass]="fieldClass()"
+          [meta]="meta()"
+          [pristineValue]="pristineValue()"
+          [relatedData]="data()"
+          [fieldMeta]="fieldMeta()"
+          [showField]="showField()">
+        </ccc-date-field>
+      }
+
+      @case ('civildate') {
+        <ccc-date-field
+          [form]="form()"
+          [fieldConfig]="fieldConfig()"
+          [editMode]="mode()"
+          [fieldClass]="fieldClass()"
+          [meta]="meta()"
+          [pristineValue]="pristineValue()"
+          [relatedData]="data()"
+          [fieldMeta]="fieldMeta()"
+          [showField]="showField()">
+        </ccc-date-field>
+      }
+
+      @case ('number') {
+        <ccc-number-field
+          [form]="form()"
+          [fieldConfig]="fieldConfig()"
+          [editMode]="mode()"
+          [fieldClass]="fieldClass()"
+          [meta]="meta()"
+          [pristineValue]="pristineValue()"
+          [relatedData]="data()"
+          [fieldMeta]="fieldMeta()"
+          [showField]="showField()">
+        </ccc-number-field>
+      }
+
+      @case ('boolean') {
+        <ng-container *ngTemplateOutlet="booleanFragment"></ng-container>
+      }
+      @case ('nullboolean') {
+        <ng-container *ngTemplateOutlet="booleanFragment"></ng-container>
+      }
+
+      @case ('enumerated') {
+        <ccc-enumerated-field
+          [form]="form()"
+          [fieldConfig]="fieldConfig()"
+          [editMode]="mode()"
+          [fieldClass]="fieldClass()"
+          [meta]="meta()"
+          [pristineValue]="pristineValue()"
+          [relatedData]="data()"
+          [fieldMeta]="fieldMeta()"
+          [showField]="showField()">
+        </ccc-enumerated-field>
+      }
+
+      @default {
+        <ccc-text-field
+          [form]="form()"
+          [fieldConfig]="fieldConfig()"
+          [editMode]="mode()"
+          [fieldClass]="fieldClass()"
+          [meta]="meta()"
+          [pristineValue]="pristineValue()"
+          [relatedData]="data()"
+          [fieldMeta]="fieldMeta()"
+          [showField]="showField()">
+        </ccc-text-field>
+      }
+    }
+  }
+</div>
+
+<ng-template #booleanFragment>
+  @if (booleanEditDisplayType() === 'boolean') {
+    <ccc-boolean-field
+      [form]="form()"
+      [fieldConfig]="fieldConfig()"
+      [editMode]="mode()"
+      [fieldClass]="fieldClass()"
+      [meta]="meta()"
+      [pristineValue]="pristineValue()"
+      [relatedData]="data()"
+      [fieldMeta]="fieldMeta()"
+      [showField]="showField()">
+    </ccc-boolean-field>
+  } @else if (booleanEditDisplayType() === 'nullboolean') {
+    <ccc-nullboolean-field
+      [form]="form()"
+      [fieldConfig]="fieldConfig()"
+      [editMode]="mode()"
+      [fieldClass]="fieldClass()"
+      [meta]="meta()"
+      [pristineValue]="pristineValue()"
+      [relatedData]="data()"
+      [fieldMeta]="fieldMeta()"
+      [showField]="showField()">
+    </ccc-nullboolean-field>
+  }
+</ng-template>

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

@@ -0,0 +1,7 @@
+.checkbox {
+  margin-top: 10px;
+}
+
+.dirty-input {
+  background-color: #00617f26;
+}

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

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

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

@@ -0,0 +1,214 @@
+import { NgTemplateOutlet } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  HostBinding,
+  input,
+  Signal,
+  untracked,
+} from '@angular/core';
+import { FormGroup, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { DataType, FieldElement, FieldMeta, Meta, RecordData, ValidDisplayTypes } from '@cccteam/ccc-lib/src/types';
+import { EmptyReadonlyFieldComponent } from '../empty-readonly-field/empty-readonly-field.component';
+import { validatorsPresent } from '../gui-constants';
+import { BooleanFieldComponent } from './fields/boolean-field/boolean-field.component';
+import { DateFieldComponent } from './fields/date-field/date-field.component';
+import { EnumeratedFieldComponent } from './fields/enumerated-field/enumerated-field.component';
+import { NullBooleanFieldComponent } from './fields/nullboolean-field/nullboolean-field.component';
+import { NumberFieldComponent } from './fields/number-field/number-field.component';
+import { TextFieldComponent } from './fields/text-field/text-field.component';
+
+@Component({
+  selector: 'ccc-resource-field',
+  imports: [
+    DateFieldComponent,
+    BooleanFieldComponent,
+    TextFieldComponent,
+    NumberFieldComponent,
+    EnumeratedFieldComponent,
+    MatFormFieldModule,
+    EmptyReadonlyFieldComponent,
+    NullBooleanFieldComponent,
+    NgTemplateOutlet,
+  ],
+  templateUrl: './resource-field.component.html',
+  styleUrl: './resource-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ResourceFieldComponent {
+  fieldConfig = input.required<FieldElement>();
+  meta = input.required<Meta>();
+  fieldClass = input<string>();
+  editMode = input<'edit' | 'view'>('edit');
+  form = input.required<FormGroup>();
+  formDataState = input<RecordData>();
+  pristineValue = input<DataType | null>();
+  data = input<RecordData>();
+  previouslyNulled: boolean | null = null;
+
+  fieldMeta: Signal<FieldMeta> = computed(() => {
+    return (
+      (this.meta().fields?.find((field) => field.fieldName === this.fieldConfig().name) as FieldMeta) ||
+      ({} as FieldMeta)
+    );
+  });
+
+  mode = computed(() => {
+    if (this.fieldConfig().readOnly) {
+      return 'view';
+    }
+    return this.editMode();
+  });
+
+  showField = computed(() => {
+    const shouldRender = this.fieldConfig().shouldRender;
+    const conditionallyNull = this.fieldConfig().nullIfConditionallyHidden;
+    const isForeignKeyDefault = this.fieldConfig().default?.type === 'foreignKey';
+
+    if (typeof shouldRender === 'boolean') {
+      return shouldRender && !isForeignKeyDefault;
+    }
+    const formValues = this.formDataState();
+    if (!formValues) {
+      return true;
+    }
+
+    console.debug('Field: ', this.fieldConfig().name, ' | Values to be used in showField calculation ', formValues);
+
+    try {
+      const showField = shouldRender(formValues) && !isForeignKeyDefault;
+
+      if (!conditionallyNull) {
+        return showField;
+      }
+
+      const formControlName = this.fieldConfig()?.name;
+      const control = this.form()?.controls[formControlName];
+      const pristineFieldValue = this.data()?.[formControlName];
+      const previouslyNulled = this.previouslyNulled;
+
+      untracked(() => {
+        if (!showField && !previouslyNulled) {
+          this.previouslyNulled = true;
+          control?.setValue(null);
+        }
+
+        if (showField && previouslyNulled) {
+          this.previouslyNulled = false;
+          control?.setValue(pristineFieldValue);
+        }
+      });
+
+      return showField;
+    } catch (e) {
+      console.error('Failed to calculate value for should Render function for field: ', this.fieldConfig().name);
+      console.error(e);
+      return true;
+    }
+  });
+
+  showEmptyField = computed(() => {
+    const editMode = this.mode();
+    const showField = this.showField();
+
+    if (!showField || editMode === 'edit') {
+      return false;
+    }
+
+    const form = this.form();
+    const config = this.fieldConfig();
+    const meta = this.fieldMeta();
+    if (form === undefined || config === undefined || meta === undefined) {
+      return false;
+    }
+
+    if (meta.displayType === 'nullboolean') {
+      return false;
+    }
+
+    const value = form.get(config.name)?.value;
+    // TODO: In phase 3 of visual updates, allow control of which
+    // values can trigger the empty field display on a per field basis
+    if (value === null || value === '') {
+      return true;
+    }
+
+    return false;
+  });
+
+  @HostBinding('class') class = '';
+
+  booleanEditDisplayType: Signal<BooleanDisplayTypes> = computed(() => {
+    const fieldConfig = this.fieldConfig();
+    const fieldMeta = this.fieldMeta();
+    const form = this.form();
+
+    if (fieldConfig === undefined || fieldMeta === undefined || form === undefined) {
+      return 'boolean';
+    }
+
+    const control = form.get(fieldConfig.name);
+    if (control === null) {
+      console.warn("Unable to find control for field '" + fieldConfig.name + "' to determine boolean display type");
+      return 'boolean';
+    }
+
+    // Frontend forcing users to make a choice displays nullboolean to
+    // trigger form validation - users must interact and explicitly
+    // choose a true or false value
+    if (control.hasValidator(Validators.required) || fieldMeta.displayType === 'nullboolean') {
+      return 'nullboolean';
+    }
+
+    return 'boolean';
+  });
+
+  constructor() {
+    effect(() => {
+      this.class = this.showField() ? 'col-' + this.fieldConfig()?.cols : 'hidden-field';
+    });
+
+    effect(() => {
+      const getValidators = this.fieldConfig().validators;
+
+      if (typeof getValidators !== 'function') {
+        return;
+      }
+
+      const formValues = this.formDataState();
+
+      if (!formValues) {
+        return;
+      }
+
+      console.debug('Field: ', this.fieldConfig().name, ' | Values to be used in validators calculation ', formValues);
+
+      try {
+        const newValidators = getValidators(formValues);
+
+        const formControlName = this.fieldConfig().name;
+        const control = this.form().get(formControlName);
+
+        if (control === null) {
+          throw new Error(`Control with name ${this.fieldConfig().name} not found during forceRequired calculation`);
+        }
+
+        const addValidators = !validatorsPresent(control, newValidators);
+
+        if (addValidators) {
+          control.setValidators(newValidators);
+          control.updateValueAndValidity();
+        }
+      } catch (e) {
+        console.error('Failed to calculate value for forceRequired function for field: ', this.fieldConfig().name);
+        console.error(e);
+        return;
+      }
+    });
+  }
+}
+
+type BooleanDisplayTypes = Extract<ValidDisplayTypes, 'boolean' | 'nullboolean'>;

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

@@ -0,0 +1,73 @@
+<div class="section {{ parentClass() }}" [class.hidden-field]="!showLayout()">
+  @let parentElement = element();
+  @if (children().length > 0) {
+    <div
+      class="section-elements dense-1 resource-layout-container"
+      [class]="layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'">
+      @if (parentElement.type !== 'padding' && parentElement.label !== '') {
+        <div class="label">{{ parentElement.label }}</div>
+      }
+      @for (elementField of children(); track elementField) {
+        @let childElement = elementField;
+        @if (childElement.type === 'section') {
+          @if (layoutNestingDepth() < maxLayoutNestingDepth) {
+            <ccc-resource-layout-template
+              [layoutNestingDepth]="layoutNestingDepth() + 1"
+              [element]="childElement"
+              [meta]="meta()"
+              [fieldClass]="fieldClass()"
+              [editMode]="editMode()"
+              [form]="form()"
+              [formDataState]="formDataState()"
+              [pristineValue]="pristineValue()"
+              [relatedData]="relatedData()"
+              [parentClass]="parentClass()">
+            </ccc-resource-layout-template>
+          }
+        } @else if (childElement.type === 'field') {
+          <ccc-resource-field
+            [meta]="meta()"
+            [fieldClass]="fieldClass()"
+            [fieldConfig]="childElement"
+            [editMode]="editMode()"
+            [form]="form()"
+            [formDataState]="formDataState()"
+            [pristineValue]="pristineValue()"
+            [data]="relatedData()">
+          </ccc-resource-field>
+        } @else if (childElement.type === 'computedDisplayField') {
+          <ccc-computed-field
+            [fieldClass]="fieldClass()"
+            [fieldConfig]="childElement"
+            [formDataState]="formDataState()"></ccc-computed-field>
+        } @else if (childElement.type === 'padding') {
+          <ccc-padding-element [paddingElement]="childElement"></ccc-padding-element>
+        }
+      }
+    </div>
+  } @else {
+    @if (parentElement.type === 'field') {
+      <div
+        class="section-elements dense-1 resource-layout-container"
+        [class]="layoutNestingDepth() % 2 === 0 ? 'resource-layout-container-even' : 'resource-layout-container-odd'">
+        <ccc-resource-field
+          [meta]="meta()"
+          [fieldClass]="fieldClass()"
+          [fieldConfig]="parentElement"
+          [editMode]="editMode()"
+          [form]="form()"
+          [formDataState]="formDataState()"
+          [pristineValue]="pristineValue()"
+          [data]="relatedData()">
+        </ccc-resource-field>
+      </div>
+    } @else if (parentElement.type === 'computedDisplayField') {
+      <ccc-computed-field
+        [fieldClass]="fieldClass()"
+        [fieldConfig]="parentElement"
+        [formDataState]="formDataState()"></ccc-computed-field>
+    } @else if (parentElement.type === 'padding') {
+      <ccc-padding-element [paddingElement]="parentElement"></ccc-padding-element>
+    }
+  }
+</div>

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

@@ -0,0 +1,26 @@
+.section {
+  margin-top: 15px;
+}
+
+.section-elements {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 4px;
+}
+
+.label {
+  position: absolute;
+  top: -15px;
+  left: 20px;
+  height: 20px;
+  background-color: var(--layout-label-background-color);
+  border-radius: 8px;
+  margin: 0px 10px 0px 10px;
+  padding: 0px 10px 0px 10px;
+  text-align: center;
+  z-index: 10;
+  font-weight: 500;
+  font:
+    18px 'Roboto',
+    sans-serif;
+}

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

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

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

@@ -0,0 +1,176 @@
+import { Component, computed, effect, HostBinding, input, model, OnInit, untracked } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ConfigElement, DataType, FieldElement, Meta, RecordData } from '@cccteam/ccc-lib/src/types';
+import { flattenElements, maxLayoutNestingDepth } from '../gui-constants';
+import { PaddingElementComponent } from '../padding-element/padding-element.component';
+import { ComputedFieldComponent } from '../resource-field/fields/computed-field/computed-field.component';
+import { ResourceFieldComponent } from '../resource-field/resource-field.component';
+
+@Component({
+  selector: 'ccc-resource-layout-template',
+  imports: [PaddingElementComponent, ResourceFieldComponent, ComputedFieldComponent],
+  templateUrl: './resource-layout.component.html',
+  styleUrls: ['./resource-layout.component.scss'],
+})
+export class ResourceLayoutComponent implements OnInit {
+  element = input.required<ConfigElement>();
+  meta = input.required<Meta>();
+  fieldClass = input<string>();
+  editMode = input.required<'edit' | 'view'>();
+  form = input.required<FormGroup>();
+  formDataState = model<RecordData>();
+  pristineValue = input<DataType | null>('');
+  relatedData = input<RecordData>();
+  parentClass = input<string>();
+  layoutNestingDepth = input<number>(1);
+
+  maxLayoutNestingDepth = maxLayoutNestingDepth;
+
+  children = computed(() => {
+    const element = this.element();
+    if (element.type === 'section') {
+      return element.children;
+    }
+    return [];
+  });
+
+  layoutChildrenConfig = computed(() => {
+    return flattenElements(this.children());
+  });
+  previouslyNulled = false;
+
+  nullIfConditionallyHidden = computed(() => {
+    const element = this.element();
+    if (element.type === 'field') {
+      return element.nullIfConditionallyHidden;
+    }
+    if (element.type === 'section') {
+      return element.nullAllChildrenIfConditionallyHidden;
+    }
+    return false;
+  });
+
+  showLayout = computed(() => {
+    const element = this.element();
+    const shouldRender = element.shouldRender;
+    const conditionallyNull = this.nullIfConditionallyHidden();
+    const form = this.form();
+    const label = 'label' in element ? element.label : 'padding';
+    const isForeignKeyDefault = element.type === 'field' && element.default?.type === 'foreignKey';
+
+    if (typeof shouldRender === 'boolean') {
+      return shouldRender && !isForeignKeyDefault;
+    }
+
+    const formValues = this.formDataState();
+    if (!formValues) {
+      return true;
+    }
+
+    console.debug('Layout: ', label, ' | Values to be used in showLayout calculation ', formValues);
+    try {
+      const showLayout = shouldRender(formValues) && !isForeignKeyDefault;
+
+      if (!conditionallyNull) {
+        return showLayout;
+      }
+      const previouslyNulled = this.previouslyNulled;
+
+      untracked(() => {
+        this.layoutChildrenConfig().forEach((configElement) => {
+          const isFormControl = configElement.type === 'field';
+          if (!isFormControl) {
+            return;
+          }
+
+          const control = form?.controls[configElement.name];
+          const pristineFieldValue = this.relatedData()?.[configElement.name];
+
+          if (!showLayout && !previouslyNulled) {
+            this.previouslyNulled = true;
+            control?.setValue(null);
+          }
+
+          if (showLayout && previouslyNulled) {
+            this.previouslyNulled = false;
+            control?.setValue(pristineFieldValue);
+          }
+        });
+      });
+
+      return showLayout;
+    } catch (e) {
+      console.error('Failed to calculate value for should Render function for layout: ', label);
+      console.error(e);
+      return true;
+    }
+  });
+
+  @HostBinding('class') class = '';
+
+  constructor() {
+    // TODO: Remove this effect once Angular supports signals in Reactive forms to obtain changes to form values.
+    // This effect has been necessary because translating from Observables to Signals, specifically via an input signal
+    // doesn't have a clean solution
+
+    effect((onCleanup) => {
+      const element = this.element();
+      if (element === undefined) {
+        return;
+      }
+      const currentForm = this.form();
+      const shouldRender = element.shouldRender;
+      const nestingDepth = this.layoutNestingDepth();
+      const layoutChildren = this.layoutChildrenConfig();
+      const label = 'label' in element ? element.label : 'padding';
+      if (!this.shouldInitializeFormData(currentForm, nestingDepth, shouldRender, layoutChildren)) {
+        return;
+      }
+      console.debug('USAGE | New subscription for formValuesSignal created for layout: ', label);
+
+      this.formDataState.set(currentForm.getRawValue());
+      const subscription = currentForm.valueChanges.subscribe((value) => {
+        this.formDataState.set(value);
+      });
+
+      onCleanup(() => {
+        console.debug('USAGE | Unsubscribing from valueChanges for layout: ', label);
+        subscription.unsubscribe();
+      });
+    });
+  }
+
+  ngOnInit(): void {
+    this.class = 'col-' + this.element().cols;
+  }
+
+  shouldInitializeFormData(
+    form: FormGroup,
+    layoutNestingDepth: number,
+    shouldRender: ConfigElement['shouldRender'],
+    layoutChildren: ConfigElement[],
+  ): boolean {
+    const childrenNeedFormDataState = layoutChildren.some((config) => {
+      const shouldRenderIsFunction = typeof config.shouldRender === 'function';
+      const isComputedField = config.type === 'computedDisplayField';
+      let validatorsIsFunction = false;
+
+      const castConfig = config as FieldElement;
+      if (castConfig.validators && typeof castConfig.validators === 'function') {
+        validatorsIsFunction = true;
+      }
+
+      return shouldRenderIsFunction || isComputedField || validatorsIsFunction;
+    });
+
+    if (!form || layoutNestingDepth > 1) {
+      return false;
+    }
+
+    if (!childrenNeedFormDataState && typeof shouldRender !== 'function') {
+      return false;
+    }
+
+    return true;
+  }
+}

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

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