@cccteam/ccc-lib 0.0.13 → 0.0.15

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

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

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

@@ -0,0 +1,69 @@
+import { Component, ComponentRef, computed, effect, input, untracked, viewChild, ViewContainerRef } from '@angular/core';
+import { ChildResourceConfig, ComponentConfig, FieldName, RecordData } from '@cccteam/ccc-lib/src/types';
+import { ResourceStore } from '../../ccc-resource/resource-store.service';
+
+@Component({
+  selector: 'ccc-resource-resolver',
+  imports: [],
+  templateUrl: './resource-resolver.component.html',
+  styleUrl: './resource-resolver.component.scss',
+  providers: [ResourceStore],
+})
+export class ResourceResolverComponent {
+  compoundResourceComponent = input.required<ComponentRef<any>>();
+  resourceConfig = input<ChildResourceConfig>();
+
+  config = computed(() => {
+    return this.resourceConfig() as ComponentConfig;
+  });
+
+  dynamicSlot = viewChild.required<ViewContainerRef, ViewContainerRef>('dynamicSlot', { read: ViewContainerRef });
+
+  parentData = input.required<RecordData>();
+
+  constructor() {
+    effect(() => {
+      const parentData = this.parentData();
+      const config = this.config();
+      const params = config?.params;
+      if (params === undefined || config === undefined) return;
+
+      untracked(() => {
+        this.dynamicSlot().clear();
+        const component = config.component;
+        switch (component) {
+          case 'SwitchResolver': {
+            let uuid = '';
+            let caseConfig = {} as ChildResourceConfig;
+            for (const c of params.cases) {
+              if (parentData) {
+                if (parentData[c.parentField] === c.caseId) {
+                  uuid = String(parentData[c.childId]);
+                  caseConfig = c.config;
+                  if ('parentRelation' in caseConfig) {
+                    caseConfig.parentRelation.childKey = '' as FieldName;
+                    caseConfig.parentRelation.parentKey = '' as FieldName;
+                  }
+                  break;
+                }
+              }
+            }
+
+            if (uuid == '') return;
+
+            // Use dynamic import to avoid circular dependency
+            const primaryComponentRef = this.dynamicSlot().createComponent(this.compoundResourceComponent().componentType);
+              primaryComponentRef.setInput('resourceConfig', caseConfig);
+              primaryComponentRef.setInput('uuid', uuid);
+              primaryComponentRef.setInput('parentData', parentData);
+            break;
+          }
+          default:
+            console.warn('Component not found', component);
+            // add default component to dynamic slot
+            break;
+        }
+      });
+    });
+  }
+}

package/src/ccc-resource/resource-store.service.ts

@@ -0,0 +1,93 @@
+import { computed, inject, Injectable, ResourceRef, signal } from '@angular/core';
+import { ColumnConfig, FieldName, FieldSort, RecordData, Resource, ResourceMeta } from '@cccteam/ccc-lib/src/types';
+import { NotificationService } from '@cccteam/ccc-lib/src/ui-notification-service';
+import { ResourceCacheService } from './resource-cache.service';
+
+@Injectable()
+export class ResourceStore {
+  resourceMeta = signal({} as ResourceMeta);
+  resourceName = signal<Resource>('' as Resource);
+  filter = signal<string>('');
+  searchTokens = signal<string>('');
+  sorts = signal<FieldSort[]>([]);
+  listColumns = signal<ColumnConfig[]>([]);
+  requireSearchToDisplayResults = signal(false);
+  uuid = signal<string>('');
+  error = signal<string>('');
+
+  notifications = inject(NotificationService);
+  cache = inject(ResourceCacheService);
+
+  private resourceListRef = signal<ResourceRef<RecordData[]> | undefined>(undefined);
+  listData = computed(() => {
+    const ref = this.resourceListRef();
+    if (ref && ref.status() === 'resolved') {
+      return ref.value();
+    }
+    return [];
+  });
+  private resourceViewRef = signal<ResourceRef<RecordData> | undefined>(undefined);
+  viewData = computed(() => {
+    const ref = this.resourceViewRef();
+    if (ref && ref.status() === 'resolved') {
+      return ref.value();
+    }
+    return {} as RecordData;
+  });
+
+  overrideRoute = signal<string>('');
+  resourceRoute = computed(() => this.resourceMeta()?.route);
+  route = computed(() => {
+    if (this.overrideRoute()) {
+      return this.overrideRoute();
+    }
+    const route = this.resourceRoute();
+    if (route) {
+      return route;
+    }
+    return '';
+  });
+
+  reloadResourceView(): void {
+    this.resourceViewRef()?.reload();
+  }
+
+  resetResourceList(): void {
+    const route = this.route();
+    const name = this.resourceName();
+    if (!route || name === '') return;
+    const columnIds = this.listColumns().flatMap((col) => {
+      return [col.id];
+    });
+    const resourceMeta = this.resourceMeta() as ResourceMeta;
+    if (resourceMeta && resourceMeta.fields.some((field) => field.fieldName === 'id')) {
+      columnIds.push('id' as FieldName);
+    }
+    const uniqueColumns = [...new Set([...columnIds])];
+
+    const ref = this.cache.registerList(
+      this.route,
+      this.resourceName,
+      this.filter,
+      signal(uniqueColumns),
+      this.searchTokens,
+      this.sorts,
+      this.requireSearchToDisplayResults(),
+    );
+    this.resourceListRef.set(ref);
+    this.resourceListRef()?.reload();
+  }
+
+  resetResourceView(): void {
+    const route = this.route();
+    const name = this.resourceName();
+    const uuid = this.uuid();
+
+    if (!route || name === '' || !uuid) return;
+
+    if (this.resourceViewRef() === undefined) {
+      const ref = this.cache.registerView(this.route, this.resourceName, this.uuid);
+      this.resourceViewRef.set(ref);
+    }
+  }
+}

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

@@ -0,0 +1,133 @@
+@if (useExpansionPanel()) {
+  <div class="resource-view">
+    <mat-expansion-panel [@.disabled]="true" [disabled]="!config().collapsible" [expanded]="!config().collapsible">
+      @if (config().title) {
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <h1 class="title">
+              {{ config().title }}
+            </h1>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+      } @else {
+        <div class="no-title-exp-panel-padding"></div>
+      }
+      <div class="header-container">
+        <div class="state-buttons">
+          @if (editMode() === 'view') {
+            <div class="edit-button">
+              <button mat-raised-button color="accent" (click)="setEditMode('edit')">
+                <div class="button-text">
+                  <mat-icon>edit</mat-icon>
+                  <span class="mode-text"> Edit </span>
+                </div>
+              </button>
+            </div>
+          }
+          @if (editMode() === 'edit') {
+            @if (form().dirty) {
+              <div class="unsaved message">You have unsaved changes!</div>
+            }
+            @if (shouldShowDelete()) {
+              <button mat-raised-button color="primary" (click)="deleteResource()">Delete</button>
+            }
+            @if (displayFormInvalidMessage()) {
+              <div class="invalid message">Please complete or fix required fields.</div>
+            }
+            <button mat-raised-button color="primary" (click)="resetForm()">Cancel</button>
+            <button mat-raised-button color="accent" (click)="saveForm()" [disabled]="form().pristine">Save</button>
+          }
+        </div>
+      </div>
+      <div class="resource-container" [class.form-edit-mode]="editMode() === 'edit'">
+        <form [formGroup]="form()">
+          <div class="resource row">
+            @for (element of config().elements; track element) {
+              @if (element.type === 'section' || element.type === 'computedDisplayField') {
+                <ccc-resource-layout-template
+                  [element]="element"
+                  [meta]="store.resourceMeta()"
+                  [fieldClass]="config().fieldClass"
+                  [editMode]="editMode()"
+                  [relatedData]="relatedData()"
+                  [form]="form()">
+                </ccc-resource-layout-template>
+              } @else if (element.type === 'field') {
+                <ccc-resource-layout-template
+                  [element]="element"
+                  [meta]="store.resourceMeta()"
+                  [fieldClass]="config().fieldClass"
+                  [pristineValue]="pristineFormValues[element.name]"
+                  [editMode]="editMode()"
+                  [relatedData]="relatedData()"
+                  [form]="form()">
+                </ccc-resource-layout-template>
+              }
+            }
+          </div>
+        </form>
+      </div>
+      <ng-template #createSlot></ng-template>
+      <ng-template #primarySlot></ng-template>
+    </mat-expansion-panel>
+  </div>
+} @else {
+  <div class="page-container">
+    <div class="header-container">
+      <div class="state-buttons">
+        @if (editMode() === 'view') {
+          <div class="edit-button">
+            <button mat-raised-button color="accent" (click)="setEditMode('edit')">
+              <div class="button-text">
+                <mat-icon>edit</mat-icon>
+                <span class="mode-text"> Edit </span>
+              </div>
+            </button>
+          </div>
+        }
+        @if (editMode() === 'edit') {
+          @if (form().dirty) {
+            <div class="unsaved message">You have unsaved changes!</div>
+          }
+          @if (shouldShowDelete()) {
+            <button mat-raised-button color="primary" (click)="deleteResource()">Delete</button>
+          }
+          @if (!form().valid && displayFormInvalidMessage()) {
+            <div class="invalid message">Please complete or fix required fields.</div>
+          }
+          <button mat-raised-button color="primary" (click)="resetForm()">Cancel</button>
+          <button mat-raised-button color="accent" (click)="saveForm()" [disabled]="form().pristine">Save</button>
+        }
+      </div>
+    </div>
+
+    <div class="resource-container base-container-bg" [class.form-edit-mode]="editMode() === 'edit'">
+      <form [formGroup]="form()">
+        <div class="resource row">
+          @for (element of config().elements; track element) {
+            @if (element.type === 'section' || element.type === 'computedDisplayField' || element.type === 'padding') {
+              <ccc-resource-layout-template
+                [element]="element"
+                [meta]="store.resourceMeta()"
+                [fieldClass]="config().fieldClass"
+                [editMode]="editMode()"
+                [relatedData]="relatedData()"
+                [form]="form()">
+              </ccc-resource-layout-template>
+            } @else {
+              <ccc-resource-layout-template
+                [element]="element"
+                [meta]="store.resourceMeta()"
+                [fieldClass]="config().fieldClass"
+                [pristineValue]="pristineFormValues[element.name]"
+                [editMode]="editMode()"
+                [relatedData]="relatedData()"
+                [form]="form()">
+              </ccc-resource-layout-template>
+            }
+          }
+        </div>
+      </form>
+    </div>
+  </div>
+}

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

@@ -0,0 +1,150 @@
+.container {
+  border: 1px solid #8e8e8e;
+  border-radius: 5px;
+  position: relative;
+  margin-bottom: 20px;
+  padding-top: 10px;
+}
+
+.label {
+  position: absolute;
+  top: -15px;
+  left: 20px;
+  height: 20px;
+  background-color: #ffffff;
+  margin: 0px 10px 0px 10px;
+  padding: 0px 10px 0px 10px;
+  text-align: center;
+  z-index: 10;
+  font-weight: 500;
+  font:
+    18px 'Roboto',
+    sans-serif;
+}
+
+.padding {
+  width: 100px;
+}
+
+.page-container {
+  position: relative;
+}
+
+.header-container {
+  display: flex;
+  flex-direction: row;
+  top: 0;
+  z-index: 11;
+  background: transparent;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.message {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.state-buttons {
+  display: flex;
+  flex-direction: row;
+  margin-top: auto;
+  margin-bottom: auto;
+  justify-content: right;
+  flex-grow: 1;
+  gap: 20px;
+  margin-right: 20px;
+}
+
+.mode-text {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.resource {
+  margin: 10px;
+}
+
+.section h2 {
+  font-size: 1.5em;
+  border-bottom: 2px solid #ccc;
+  padding-bottom: 8px;
+
+  margin-bottom: 100px;
+}
+.section {
+  margin-top: 15px;
+}
+
+.divider {
+  margin: 16px 0;
+}
+
+.section-elements {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.mat-input-element:disabled[readonly] {
+  color: currentColor;
+}
+
+.unsaved {
+  color: #f44336;
+}
+
+.edit-button {
+  margin-top: auto;
+  margin-bottom: auto;
+  padding-left: 10px;
+}
+
+.button-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .edit {
+    color: #003b49;
+  }
+
+  .mat-icon {
+    margin-right: 8px;
+  }
+}
+
+.shaded {
+  background-color: #e9e9e9;
+}
+
+.rounded {
+  border-radius: 8px;
+}
+
+.dotted-outline {
+  border: 1px dotted #ccc;
+  padding: 8px;
+}
+
+.margin-top {
+  margin-top: 50px;
+}
+
+.resource-view {
+  display: flex;
+  flex-direction: column;
+  min-height: 36px;
+  padding: 10px 0 0 0;
+}
+
+.no-title-exp-panel-padding {
+  padding: 10px;
+}
+
+.base-container-bg {
+  background-color: var(--ccc-background-color);
+}

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

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