@cccteam/ccc-lib 0.0.15 → 0.0.16

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

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

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

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

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-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();
-  });
-});