@cccteam/ccc-lib 0.0.15 → 0.0.16

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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-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

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

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

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

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

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