@cccteam/ccc-lib 0.0.15 → 0.0.16

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

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

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

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

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

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

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