@cccteam/ccc-lib 0.0.13 → 0.0.15

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

@@ -0,0 +1,143 @@
+import { NgComponentOutlet } from '@angular/common';
+import {
+  Component,
+  ComponentRef,
+  computed,
+  effect,
+  inject,
+  Injector,
+  input,
+  OnInit,
+  output,
+  signal,
+  viewChild
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule, MatExpansionPanel } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ArrayConfig, ColumnConfig, RecordData, RESOURCE_META, ViewConfig } from '@cccteam/ccc-lib/src/types';
+import { ResourceCacheService } from '../resource-cache.service';
+import { ResourceCreateComponent } from '../resource-create/resource-create.component';
+import { ResourceStore } from '../resource-store.service';
+
+@Component({
+  selector: 'ccc-resource-array-view',
+  templateUrl: './resource-array-view.component.html',
+  styleUrl: './resource-array-view.component.scss',
+  imports: [
+    MatButtonModule,
+    MatExpansionModule,
+    MatIconModule,
+    MatTooltipModule,
+    ResourceCreateComponent,
+    NgComponentOutlet,
+  ],
+  providers: [ResourceStore],
+})
+export class ResourceArrayViewComponent implements OnInit {
+  store = inject(ResourceStore);
+  cache = inject(ResourceCacheService);
+  injector = inject(Injector);
+  resourceMeta = inject(RESOURCE_META);
+
+  resourceConfig = input.required<ArrayConfig>();
+  parentData = input<RecordData>({});
+  expPanel = viewChild<MatExpansionPanel, MatExpansionPanel>('expPanel', { read: MatExpansionPanel });
+
+  emptyOneToOne = output<boolean>();
+
+  createMode = signal(false);
+  compoundResourceComponent = input.required<ComponentRef<any>>();
+
+  showCreateButton = computed(() => {
+    const list = this.store.listData();
+    const resourceConfig = this.resourceConfig();
+    const iteratedConfig = resourceConfig.iteratedConfig;
+    if (list && resourceConfig?.viewType === 'OneToOne') {
+      this.emptyOneToOne.emit(list.length === 0);
+      return list.length === 0;
+    }
+    if ('createTitle' in iteratedConfig && iteratedConfig.createTitle !== '') {
+      return true;
+    }
+    return false;
+  });
+
+  createConfig = computed(() => {
+    const config = this.resourceConfig();
+    if (config.createConfig && Object.keys(config.createConfig).length !== 0) {
+      return config.createConfig as ViewConfig;
+    }
+    if (config.iteratedConfig && Object.keys(config.iteratedConfig).length !== 0) {
+      return config.iteratedConfig as ViewConfig;
+    }
+    return config;
+  });
+
+  resourceListRoute = computed(() => {
+    const config = this.resourceConfig();
+    const meta = this.resourceMeta(config.connectorResource || config.primaryResource);
+    return meta.route;
+  });
+
+  setCreateMode(value: boolean): void {
+    this.createMode.set(value);
+    if (value && this.expPanel && this.expPanel()?.closed) {
+      this.expPanel()?.open();
+    }
+  }
+
+  ngOnInit(): void {
+    this.store.resourceName.set(this.resourceConfig().primaryResource);
+    const meta = this.resourceMeta(this.resourceConfig().primaryResource);
+    this.store.resourceMeta.set(meta);
+    this.store.overrideRoute.set(this.resourceListRoute());
+    const columnArray = [];
+    if (this.resourceConfig().connectorField !== '') {
+      columnArray.push({ id: this.resourceConfig().connectorField });
+    } else {
+      columnArray.push({ id: 'id' } as ColumnConfig);
+    }
+    this.store.listColumns.set(columnArray);
+    this.store.sorts.set(this.resourceConfig().sorts);
+  }
+
+  constructor() {
+    effect(() => {
+      const parentData = this.parentData();
+      const resourceConfig = this.resourceConfig();
+
+      if (resourceConfig && 'listFilter' in resourceConfig && parentData) {
+        const filter = resourceConfig.listFilter(parentData);
+
+        this.store.filter.set(filter);
+        this.store.resetResourceList();
+      }
+    });
+  }
+
+  createResource(event: MouseEvent): void {
+    event.stopPropagation();
+    const expPanel = this.expPanel();
+
+    if (!expPanel) {
+      this.setCreateMode(true);
+      return;
+    }
+    this.setCreateMode(true);
+    if (expPanel.closed) {
+      expPanel.open();
+    }
+  }
+
+  onResourceDeleted(): void {
+    this.setCreateMode(false);
+  }
+
+  onCreateCompleted(): void {
+    this.cache.updateResourceInCache(this.store.resourceName(), 'list');
+
+    this.setCreateMode(false);
+  }
+}

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

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

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ResourceCacheService } from '../resource-cache.service';
+
+@Component({
+  selector: 'ccc-resource-base',
+  imports: [RouterModule],
+  providers: [ResourceCacheService],
+  template: '<router-outlet></router-outlet>',
+})
+export class ResourceBaseComponent {}

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

@@ -0,0 +1,232 @@
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { inject, Injectable, Injector, ResourceRef, signal, Signal, untracked } from '@angular/core';
+import { rxResource } from '@angular/core/rxjs-interop';
+import { Router } from '@angular/router';
+import type { FieldSort, RecordData, Resource } from '@cccteam/ccc-lib/src/internal-types';
+import { AlertLevel, API_URL } from '@cccteam/ccc-lib/src/internal-types';
+import { CreateNotificationMessage } from '@cccteam/ccc-lib/src/types';
+import { NotificationService } from '@cccteam/ccc-lib/src/ui-notification-service';
+import { catchError, Observable, of, tap } from 'rxjs';
+import { Operation } from './operation-types';
+
+@Injectable()
+export class ResourceCacheService {
+  cache = new Map<string, ResourceRef<RecordData[] | RecordData>>();
+  http = inject(HttpClient);
+  notifications = inject(NotificationService);
+  injector = inject(Injector);
+  router = inject(Router);
+  apiUrl = inject(API_URL);
+
+  registerView(route: Signal<string>, resource: Signal<Resource>, uuid: Signal<string>): ResourceRef<RecordData> {
+    const cacheKey = this.createCacheKey(resource(), 'view', uuid(), []);
+    if (this.cache.has(cacheKey)) {
+      return this.cache.get(cacheKey) as ResourceRef<RecordData>;
+    }
+
+    return untracked(() => {
+      const resourceRef = rxResource({
+        injector: this.injector,
+        params: () => ({
+          route: route(),
+          uuid: uuid(),
+        }),
+        stream: ({ params }) => {
+          if (!params.route || !params.uuid || uuid() === 'undefined') return of({} as RecordData);
+          return this.http.get<RecordData>(this.routes.resource(this.apiUrl, String(params.route), uuid() || ''));
+        },
+      }) as ResourceRef<RecordData>;
+
+      this.cache.set(cacheKey, resourceRef);
+      return resourceRef;
+    });
+  }
+
+  registerList(
+    route: Signal<string>,
+    resource: Signal<Resource>,
+    filter: Signal<string> = signal(''),
+    columns: Signal<string[]> = signal([]),
+    searchTokens: Signal<string> = signal(''),
+    sorts: Signal<FieldSort[]> = signal([]),
+    defaultEmpty = false,
+  ): ResourceRef<RecordData[]> {
+    const cacheKey = this.createCacheKey(resource(), 'list', filter(), columns());
+    if (this.cache.has(cacheKey)) {
+      const resourceRef = this.cache.get(cacheKey) as ResourceRef<RecordData[]>;
+      return resourceRef as ResourceRef<RecordData[]>;
+    }
+
+    return untracked(() => {
+      const resourceRef = rxResource({
+        defaultValue: [] as RecordData[],
+        injector: this.injector,
+        params: () => ({
+          route: route(),
+          filter: filter(),
+          columns: columns(),
+          searchTokens: searchTokens(),
+          sorts: sorts(),
+        }),
+        stream: ({ params }) => {
+          if (!params.route) return of([] as RecordData[]);
+          if (defaultEmpty && (!params.searchTokens || params.searchTokens.trim() === '')) {
+            return of([] as RecordData[]);
+          }
+          return this.list<RecordData>(
+            String(params.route),
+            params.filter,
+            params.columns,
+            params.searchTokens,
+            params.sorts,
+          );
+        },
+      }) as ResourceRef<RecordData[]>;
+      this.cache.set(cacheKey, resourceRef);
+      return resourceRef;
+    });
+  }
+
+  createCacheKey(resource: Resource, type: 'view' | 'list', params: string, columns: string[] = []): string {
+    const normalizedColumns = columns.map((col) => col || '').sort((a, b) => a.localeCompare(b));
+    return `${resource}:${type}:${JSON.stringify(params)}:${JSON.stringify(normalizedColumns)}`;
+  }
+
+  /**
+   *
+   * @param resource
+   * @returns void
+   * @description This method tries to update the resource by exact name in the cache by calling the reload method on it.
+   */
+  updateResourceInCache(resource: Resource, type: 'view' | 'list'): void {
+    this.cache.forEach((resourceRef, key) => {
+      const [cachedResource, cachedType] = key.split(':');
+      if (cachedResource === resource && cachedType === type) {
+        resourceRef.reload();
+      }
+    });
+  }
+
+  /**
+   *
+   * @param resource
+   * @returns void
+   * @description This method tries to update any resource that includes the resource name in the cache by calling the reload method on it.
+   * For example, updating ResourceTest will update both ResourceTest and ResourceTestRelatedResourceFoobar.
+   */
+  updateResourceGroupInCache(resource: Resource): void {
+    this.cache.forEach((resourceRef, key) => {
+      const [cachedResource] = key.split(':');
+      if (cachedResource?.includes(resource)) {
+        resourceRef.reload();
+      }
+    });
+  }
+
+  routes = {
+    resources: (rootUrl: string, resources: string): string => `${rootUrl}/${resources}`,
+    resource: (rootUrl: string, resources: string, uuid: string): string => `${rootUrl}/${resources}/${uuid}`,
+    method: (rootUrl: string, method: string): string => `${rootUrl}/${method}`,
+  };
+
+  makePatches(operations: Operation[], route: string, resource: Resource): Observable<Record<string, unknown>> {
+    return this.patchMultiple(String(route), operations).pipe(
+      tap(() => {
+        this.notifications.addGlobalNotification({
+          message: `${resource} updated successfully`,
+          level: AlertLevel.SUCCESS,
+          duration: 5000,
+          link: '',
+        } satisfies CreateNotificationMessage);
+      }),
+      catchError((error) => {
+        this.notifications.addGlobalNotification({
+          message: `${resource} failed to update: ${error}`,
+          level: AlertLevel.ERROR,
+          duration: 5000,
+          link: '',
+        } satisfies CreateNotificationMessage);
+        return of({});
+      }),
+    );
+  }
+
+  createPatch(operation: Operation, route: string, resource: Resource): Observable<Record<string, unknown>> {
+    return this.patchMultiple(String(route), [operation]).pipe(
+      tap(() => {
+        this.notifications.addGlobalNotification({
+          message: `${resource} created successfully`,
+          level: AlertLevel.SUCCESS,
+          duration: 5000,
+          link: '',
+        } satisfies CreateNotificationMessage);
+      }),
+      catchError((error) => {
+        this.notifications.addGlobalNotification({
+          message: `${resource} failed to create: ${error}`,
+          level: AlertLevel.ERROR,
+          duration: 5000,
+          link: '',
+        } satisfies CreateNotificationMessage);
+        return of({});
+      }),
+    );
+  }
+
+  private patchMultiple(resourceRoute: string, data: Operation[]): Observable<Record<string, unknown>> {
+    return this.http.patch<Record<string, unknown>>(this.routes.resources(this.apiUrl, resourceRoute), data);
+  }
+
+  private list<T>(
+    resourceRoute: string,
+    filter?: string,
+    columns?: string[],
+    searchTokens?: string,
+    sort?: FieldSort[],
+  ): Observable<T[]> {
+    const paramsObj: Record<string, string> = {};
+    if (filter && filter.trim() !== '') paramsObj['filter'] = filter;
+    if (columns && columns.length > 0) paramsObj['columns'] = columns.join(',');
+    if (searchTokens && searchTokens.trim() !== '') paramsObj['SearchTokens'] = searchTokens;
+    if (sort && sort.length > 0) {
+      paramsObj['sort'] = sort.map((s) => `${s.field}:${s.direction}`).join(',');
+    }
+    const params = new HttpParams({ fromObject: paramsObj });
+    return this.http.get<T[]>(this.routes.resources(this.apiUrl, resourceRoute), { params });
+  }
+
+  // rpcCall<T>(rpcConfig: RPCConfig, body: T): Observable<T> {
+  //   const methodData = methodMeta(rpcConfig.method);
+  //   if (!methodData) {
+  //     console.error('Method not found in methodMap:', rpcConfig.method);
+  //     return of({} as T);
+  //   }
+
+  //   return this.http.post<T>(this.routes.method(this.apiUrl, methodData.route), body).pipe(
+  //     tap(() => {
+  //       this.notifications.addGlobalNotification({
+  //         message: rpcConfig.successMessage ? rpcConfig.successMessage : `${rpcConfig.method} called successfully`,
+  //         level: AlertLevel.SUCCESS,
+  //         duration: 5000,
+  //         link: '',
+  //       } satisfies CreateNotificationMessage);
+  //       if (rpcConfig.afterMethodRedirect) {
+  //         if (typeof rpcConfig.afterMethodRedirect === 'string') {
+  //           this.router.navigate([rpcConfig.afterMethodRedirect]);
+  //         } else {
+  //           this.router.navigate(rpcConfig.afterMethodRedirect);
+  //         }
+  //       }
+  //     }),
+  //     catchError((error) => {
+  //       this.notifications.addGlobalNotification({
+  //         message: error,
+  //         level: AlertLevel.ERROR,
+  //         duration: 5000,
+  //         link: '',
+  //       } satisfies CreateNotificationMessage);
+  //       return of();
+  //     }),
+  //   );
+  // }
+}

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

@@ -0,0 +1,31 @@
+<div class="page-container">
+  <div class="header-container">
+    <div class="title" [class.indent]="indentTitle()">
+      <h1>{{ config().title }}</h1>
+    </div>
+
+    <div class="state-buttons">
+      @if (!form().valid && submitted()) {
+        <div class="invalid message">Please complete or fix required fields.</div>
+      }
+      <button mat-raised-button color="primary" (click)="cancelForm()">Cancel</button>
+      <button mat-raised-button color="accent" (click)="saveForm()" [disabled]="form().pristine">Save</button>
+    </div>
+  </div>
+
+  <div class="resource-container">
+    <form [formGroup]="form()">
+      <div class="resource row">
+        @for (element of config().elements; track element) {
+          <ccc-resource-layout-template
+            [element]="element"
+            [meta]="store.resourceMeta()"
+            [fieldClass]="config().fieldClass"
+            [relatedData]="parentData()"
+            editMode="edit"
+            [form]="form()"></ccc-resource-layout-template>
+        }
+      </div>
+    </form>
+  </div>
+</div>

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

@@ -0,0 +1,130 @@
+.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;
+}
+
+.page-container {
+  position: relative;
+}
+
+.header-container {
+  margin: 20px 20px 0px 20px;
+  display: flex;
+  flex-direction: row;
+  top: 0;
+  z-index: 11;
+  background: transparent;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.indent {
+  padding-left: 20px;
+}
+
+.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;
+}
+
+.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;
+}

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

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