@cccteam/ccc-lib 0.0.13 → 0.0.15

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

@@ -0,0 +1,71 @@
+<ng-container [formGroup]="form()">
+  @if (showField()) {
+    @let options = availableEnumOptions();
+    @if (editMode() === 'edit') {
+      <div class="enumerated-field-container">
+        <mat-form-field class="field {{ fieldClass() }}" [subscriptSizing]="'dynamic'">
+          <mat-label>{{ fieldConfig().label }}</mat-label>
+          @if (fieldConfig().enumeratedConfig.searchable) {
+            <input
+              #input
+              type="text"
+              placeholder="Search"
+              matInput
+              [matAutocomplete]="auto"
+              [formControlName]="fieldConfig().name"
+              (input)="search(input.value)" />
+            <mat-autocomplete
+              (optionSelected)="select($event.option.value)"
+              #auto="matAutocomplete"
+              [displayWith]="getDisplayText">
+              @for (option of options; track option.id) {
+                <mat-option [value]="option.id">{{ option?.display }}</mat-option>
+              }
+            </mat-autocomplete>
+          } @else {
+            <mat-select
+              [formControlName]="fieldConfig().name"
+              (keydown.enter)="$event.preventDefault()"
+              (selectionChange)="select($event.value)"
+              [ariaReadOnly]="editMode() === 'view'">
+              @for (option of options; track option.id) {
+                @if (option?.id === form().get(this.fieldConfig().name)?.value) {
+                  <mat-option [value]="option?.id" selected>{{ option?.display }}</mat-option>
+                } @else {
+                  <mat-option [value]="option?.id">{{ option?.display }}</mat-option>
+                }
+              }
+            </mat-select>
+          }
+        </mat-form-field>
+      </div>
+    } @else {
+      <div class="enumerated-field-container readonly-field">
+        <mat-form-field class="field {{ fieldClass() }}" [subscriptSizing]="'dynamic'">
+          <mat-label>{{ fieldConfig().label }}</mat-label>
+          <input
+            id="{{ fieldConfig().name }}-readonly-input-text"
+            matInput
+            (keydown.enter)="$event.preventDefault()"
+            [readonly]="true"
+            type="text"
+            [required]="hasRequiredValidator()"
+            [value]="singleEnumDisplayText()" />
+        </mat-form-field>
+        @if (viewDetails()) {
+          <a
+            mat-icon-button
+            color="accent"
+            [matTooltip]="tooltipMessage()"
+            matTooltipPosition="below"
+            [routerLink]="['/', route(), form().get(this.fieldConfig().name)?.value]">
+            <mat-icon>arrow_forward</mat-icon>
+          </a>
+        }
+      </div>
+      <input class="display-none" [formControlName]="fieldConfig().name" />
+    }
+  } @else {
+    <input class="display-none" [formControlName]="fieldConfig().name" />
+  }
+</ng-container>

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

@@ -0,0 +1,9 @@
+.enumerated-field-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+}
+
+.display-none {
+  display: none;
+}

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

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

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

@@ -0,0 +1,207 @@
+import { ChangeDetectionStrategy, Component, computed, inject, signal, untracked } from '@angular/core';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { defaultEmptyFieldValue, EnumeratedConfig, FieldElement, Resource } from '@cccteam/ccc-lib/src/types';
+import { concatFunctions, hyphenConcat } from '../../../concat-fns';
+import { BaseInputComponent } from '../../base-field.directive';
+
+@Component({
+  selector: 'ccc-enumerated-field',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    ReactiveFormsModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    RouterModule,
+    MatAutocompleteModule,
+  ],
+  templateUrl: './enumerated-field.component.html',
+  styleUrl: './enumerated-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EnumeratedFieldComponent extends BaseInputComponent {
+  activatedRoute = inject(ActivatedRoute);
+  router = inject(Router);
+  reloadSignal = signal(false);
+
+  query = signal('');
+
+  resource = computed(() => {
+    if (this.fieldConfig()?.enumeratedConfig?.overrideResource) {
+      return this.fieldConfig()?.enumeratedConfig?.overrideResource;
+    }
+    return this.fieldMeta()?.enumeratedResource as Resource;
+  });
+
+  tooltipMessage = computed(() => {
+    const label = this.fieldConfig().label;
+    return 'View ' + label + ' details';
+  });
+
+  route = computed(() => {
+    const resource = this.fieldMeta()?.enumeratedResource;
+    return this.resourceMeta(resource as Resource)?.route;
+  });
+
+  viewDetails = computed(() => {
+    return this.editMode() === 'view' && this.fieldConfig().enumeratedConfig.viewDetails === true;
+  });
+
+  sorts = computed(() => {
+    return this.fieldConfig().enumeratedConfig.sorts;
+  });
+
+  singleEnumResourceRef = computed(() => {
+    this.editMode();
+    if (this.showField() === false) {
+      return undefined;
+    }
+
+    const route = this.route();
+    const resource = this.resource();
+
+    this.reloadSignal();
+    const fieldValue = this.form().get(this.fieldConfig().name)?.value;
+
+    if (fieldValue && route && resource) {
+      return untracked(() => this.cache.registerView(this.route, this.resource, signal(fieldValue)));
+    }
+    return undefined;
+  });
+
+  enumResourceRef = computed(() => {
+    if (this.showField() === false) return undefined;
+    const enumeratedMeta = this.resourceMeta(this.resource() as Resource);
+    const filter = this.fieldConfig().enumeratedConfig?.filter?.(this.relatedData()) || '';
+    return this.cache.registerList(
+      signal(enumeratedMeta.route),
+      this.resource,
+      signal(filter),
+      signal([]),
+      this.query,
+      this.sorts,
+    );
+  });
+
+  singleEnumDisplayText = computed(() => {
+    const showField = this.showField();
+    if (showField === false) {
+      return undefined;
+    }
+
+    const form = this.form();
+    const fieldConfig = this.fieldConfig();
+    const singleEnumResourceRef = this.singleEnumResourceRef();
+
+    if (form === undefined || fieldConfig === undefined || singleEnumResourceRef === undefined) {
+      return defaultEmptyFieldValue;
+    }
+
+    const record = singleEnumResourceRef.value();
+    if (record === undefined) {
+      return defaultEmptyFieldValue;
+    }
+
+    const enumeratedValues = this.toEnumerated(record as Record<string, string>, fieldConfig);
+    return enumeratedValues.display;
+  });
+
+  hasRequiredValidator = computed(() => {
+    const form = this.form();
+    const fieldConfig = this.fieldConfig();
+
+    if (form === undefined || fieldConfig === undefined) {
+      return false;
+    }
+
+    const control = form.get(fieldConfig.name);
+    if (!control) {
+      return false;
+    }
+
+    return control.hasValidator(Validators.required);
+  });
+
+  singleEnumValue = computed(() => {
+    if (this.showField() === false) return undefined;
+    const currentValue = this.form().get(this.fieldConfig().name)?.value;
+    const record = this.singleEnumResourceRef()?.value();
+    if (!currentValue) return [];
+    if (!record) return [];
+    return [this.toEnumerated(record as Record<string, string>, this.fieldConfig())];
+  });
+
+  listEnumValues = computed(() => {
+    if (this.showField() === false) return [];
+    const currentValue = this.singleEnumValue();
+    const records = this.enumResourceRef()?.value();
+    if (!records || !records.length) return currentValue || [];
+    return records.map((record) => this.toEnumerated(record as Record<string, string>, this.fieldConfig()));
+  });
+
+  availableEnumOptions = computed(() => {
+    if (this.editMode() === 'edit') {
+      return this.listEnumValues();
+    }
+    return this.singleEnumValue();
+  });
+
+  toEnumerated(resource: Record<string, string>, element: FieldElement): { id: string; display: string } {
+    const enumeratedConfig = element.enumeratedConfig as EnumeratedConfig;
+    const displayFields =
+      this.editMode() === 'edit' && enumeratedConfig.listDisplay.length > 0
+        ? enumeratedConfig.listDisplay
+        : enumeratedConfig.viewDisplay;
+    const concat =
+      this.editMode() === 'edit'
+        ? enumeratedConfig.listConcatFn || enumeratedConfig.viewConcatFn
+        : enumeratedConfig.viewConcatFn;
+
+    const concatFunction = concatFunctions[concat] || hyphenConcat;
+
+    return {
+      id: resource['id'] ?? '',
+      display: concatFunction(resource, ...displayFields),
+    };
+  }
+
+  getDisplayText = (value: string | Record<string, string> | null): string => {
+    if (!value) return '';
+
+    if (typeof value === 'string') {
+      const option = this.availableEnumOptions()?.find((o) => o.id === value);
+      return option ? option['display'] || this.formatDisplay(option) : '';
+    }
+
+    return value['display'] || this.formatDisplay(value);
+  };
+
+  private formatDisplay(resource: Record<string, string>): string {
+    return this.toEnumerated(resource, this.fieldConfig()).display;
+  }
+
+  search(value: string): void {
+    this.query.set(value);
+  }
+
+  select(value: string): void {
+    this.form().patchValue({ name: this.fieldConfig().name, value });
+    this.form().markAsDirty();
+    this.form().markAsTouched();
+    this.reloadSignal.update((prev) => !prev);
+  }
+}

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

@@ -0,0 +1,38 @@
+<ng-container [formGroup]="form()">
+  @if (showField()) {
+    @let options = availableEnumOptions();
+    @if (editMode() === 'edit') {
+      <mat-form-field class="field {{ fieldClass() }}" [subscriptSizing]="'dynamic'">
+        <mat-label>{{ fieldConfig().label }}</mat-label>
+        <mat-select
+          [formControlName]="fieldConfig().name"
+          (keydown.enter)="$event.preventDefault()"
+          [canSelectNullableOptions]="true"
+          [ariaReadOnly]="editMode() === 'view'">
+          @for (option of options; track option[0]) {
+            @if (option[0] === currentValue()) {
+              <mat-option [value]="option[0]" selected>{{ option[1] }}</mat-option>
+            } @else {
+              <mat-option [value]="option[0]">{{ option[1] }}</mat-option>
+            }
+          }
+        </mat-select>
+      </mat-form-field>
+    } @else {
+      <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"
+            [required]="hasRequiredValidator()"
+            [value]="currentDisplayText()" />
+        </mat-form-field>
+      </div>
+    }
+  } @else {
+    <input class="display-none" [formControlName]="fieldConfig().name" />
+  }
+</ng-container>

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

@@ -0,0 +1,3 @@
+.display-none {
+  display: none;
+}

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

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

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

@@ -0,0 +1,87 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { RouterModule } from '@angular/router';
+import { NullBoolean } from '@cccteam/ccc-lib/src/types';
+import { BaseInputComponent } from '../../base-field.directive';
+
+@Component({
+  selector: 'ccc-nullboolean-field',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    ReactiveFormsModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    RouterModule,
+    MatAutocompleteModule,
+  ],
+  templateUrl: './nullboolean-field.component.html',
+  styleUrl: './nullboolean-field.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NullBooleanFieldComponent extends BaseInputComponent {
+  availableEnumOptions = computed(() => {
+    const fieldConfig = this.fieldConfig();
+    if (fieldConfig === undefined) {
+      return;
+    }
+    const valueMap = new Map<NullBoolean, string>();
+
+    Object.values(fieldConfig.nullBooleanConfig.displayValues).forEach((value) => {
+      valueMap.set(value.value, value.label);
+    });
+
+    return valueMap;
+  });
+
+  currentValue = computed(() => {
+    const form = this.form();
+    const fieldConfig = this.fieldConfig();
+
+    if (form === undefined || fieldConfig === undefined) {
+      return;
+    }
+
+    return form.get(fieldConfig.name)?.value;
+  });
+
+  currentDisplayText = computed(() => {
+    const value = this.currentValue();
+    const availableOptions = this.availableEnumOptions();
+
+    if (availableOptions === undefined || value === undefined) {
+      return;
+    }
+
+    return availableOptions.get(value);
+  });
+
+  hasRequiredValidator = computed(() => {
+    const form = this.form();
+    const fieldConfig = this.fieldConfig();
+
+    if (form === undefined || fieldConfig === undefined) {
+      return false;
+    }
+
+    const control = form.get(fieldConfig.name);
+    if (control === null) {
+      return false;
+    }
+
+    return control.hasValidator(Validators.required);
+  });
+}

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

@@ -0,0 +1,23 @@
+@if (showField()) {
+  <div [class.readonly-field]="editMode() === 'view'">
+    <mat-form-field
+      class="field {{ fieldClass() }}"
+      [formGroup]="form()"
+      [subscriptSizing]="'dynamic'"
+      [floatLabel]="floatLabel()">
+      <mat-label>{{ fieldConfig().label }}</mat-label>
+      <span matTextPrefix class="prefix">{{ prefixString() }}</span>
+      <span matTextSuffix class="suffix">{{ suffixString() }}</span>
+      <input
+        matInput
+        (keydown.enter)="$event.preventDefault()"
+        [readonly]="editMode() === 'view'"
+        type="number"
+        [formControlName]="fieldConfig().name" />
+    </mat-form-field>
+  </div>
+} @else {
+  <ng-container [formGroup]="form()">
+    <input type="hidden" [formControlName]="fieldConfig().name" />
+  </ng-container>
+}

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

@@ -0,0 +1,6 @@
+.prefix,
+.suffix {
+  font-style: italic;
+  color: gray;
+  padding-right: 5px;
+}

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

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

package/src/ccc-resource/resource-field/fields/number-field/number-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-number-field',
+  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, ReactiveFormsModule],
+  templateUrl: './number-field.component.html',
+  styleUrl: './number-field.component.scss',
+})
+export class NumberFieldComponent extends BaseInputComponent {}

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

@@ -0,0 +1,29 @@
+@if (showField()) {
+  <div [class.readonly-field]="editMode() === 'view'">
+    <mat-form-field
+      class="field {{ fieldClass() }}"
+      [formGroup]="form()"
+      [subscriptSizing]="'dynamic'"
+      [floatLabel]="floatLabel()">
+      <mat-label>{{ fieldConfig().label }}</mat-label>
+      <span matTextPrefix class="prefix">{{ prefixString() }}</span>
+      <span matTextSuffix class="suffix">{{ suffixString() }}</span>
+      <input
+        matInput
+        (keydown.enter)="$event.preventDefault()"
+        [readonly]="editMode() === 'view'"
+        type="text"
+        [formControlName]="fieldConfig().name"
+        [class.dirty-input]="form().get(fieldConfig().name)?.dirty" />
+      @if (editMode() === 'edit' && form().get(fieldConfig().name)?.dirty) {
+        <button matSuffix mat-icon-button (click)="reset()" tabindex="-1">
+          <mat-icon>refresh</mat-icon>
+        </button>
+      }
+    </mat-form-field>
+  </div>
+} @else {
+  <ng-container [formGroup]="form()">
+    <input type="hidden" [formControlName]="fieldConfig().name" />
+  </ng-container>
+}

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

@@ -0,0 +1,6 @@
+.prefix,
+.suffix {
+  font-style: italic;
+  color: gray;
+  padding-right: 5px;
+}

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

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

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

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