@cccteam/ccc-lib 0.0.13 → 0.0.15

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

@@ -0,0 +1,27 @@
+<div [class]="linkCreateType() ? 'page-container hide' : 'page-container'">
+  <div class="header-container" [class.show-background]="!config().collapsible" [class.indent]="indentTitle()">
+    <h1 class="title">{{ listTitle() }}</h1>
+    @if (showCreateButton()) {
+      <div class="create-button">
+        <button mat-raised-button color="accent" (click)="createResource($event)">
+          <div class="edit-text">
+            <mat-icon>create</mat-icon>
+            <span class="edit-button-text"> {{ createButtonLabel() }} </span>
+          </div>
+        </button>
+      </div>
+    }
+  </div>
+  <div class="resource-container">
+    @if (config().searchable) {
+      <mat-form-field class="search">
+        <input matInput #qry (keyup)="store.searchTokens.set(qry.value)" placeholder="Search" aria-label="Search" />
+        @if (searchableFields() !== '') {
+          <mat-hint>Search {{ searchableFields() }}</mat-hint>
+        }
+        <mat-icon matPrefix>search</mat-icon>
+      </mat-form-field>
+    }
+    <ccc-grid [rowData]="processedRowData()" [columnDefs]="columns()"></ccc-grid>
+  </div>
+</div>

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

@@ -0,0 +1,67 @@
+.page-container {
+  position: relative;
+  margin: 10px 0 0 0;
+}
+
+.header-container {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.create-button {
+  margin-top: auto;
+  margin-bottom: auto;
+  padding-left: 10px;
+}
+
+.edit-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .edit {
+    color: #003b49;
+  }
+
+  .mat-icon {
+    margin-right: 8px;
+  }
+}
+
+.edit-button-text {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.exp-panel-add-element-btn {
+  margin-right: 10px;
+  transform: scale(1.2);
+}
+
+.hide {
+  display: none;
+}
+
+.show-background {
+  background-color: #ffffff;
+  padding-bottom: 20px;
+}
+
+.indent {
+  padding-left: 20px;
+}
+
+.search {
+  width: 100%;
+}

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

@@ -0,0 +1,376 @@
+import {
+  Component,
+  computed,
+  effect,
+  inject,
+  Injector,
+  input,
+  OnInit,
+  output,
+  ResourceRef,
+  runInInjectionContext,
+  signal,
+} from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { AppGridComponent } from '@cccteam/ccc-lib/src/ccc-grid';
+import { ChildResourceConfig, ColumnConfig, FieldName, ListViewConfig, RecordData, Resource, RESOURCE_META, RootConfig } from '@cccteam/ccc-lib/src/types';
+import {
+  hyphenConcatWithoutResource,
+  hyphenSpaceConcatWithoutResource,
+  noSpaceConcatWithoutResource,
+  spaceConcatWithoutResource,
+  spaceHyphenConcatWithoutResource,
+} from '../concat-fns';
+import { applyFormatting, formatDateString } from '../format-fns';
+import { ResourceCacheService } from '../resource-cache.service';
+import { ResourceStore } from '../resource-store.service';
+
+@Component({
+  standalone: true,
+  imports: [
+    AppGridComponent,
+    RouterModule,
+    MatIconModule,
+    MatButtonModule,
+    MatExpansionModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+    MatInputModule,
+  ],
+  selector: 'ccc-resource-list',
+  templateUrl: './resource-list.component.html',
+  styleUrls: ['./resource-list.component.scss'],
+  providers: [ResourceStore],
+})
+export class ResourceListComponent implements OnInit {
+  router = inject(Router);
+  store = inject(ResourceStore);
+  injector = inject(Injector);
+  activatedRoute = inject(ActivatedRoute);
+  cache = inject(ResourceCacheService);
+  resourceMeta = inject(RESOURCE_META);
+
+  hideCreateButton = input<boolean>(true);
+  createMode = output<boolean>();
+  resourceConfig = input<ChildResourceConfig>();
+  viewRoute = input<string>();
+  filter = input<string>('');
+  linkCreateType = input<boolean>(false);
+  isRootList = input<boolean>(true);
+
+  showCreateButton = computed(() => {
+    const config = this.config();
+    if (config.createTitle !== '' && !config.collapsible && !this.hideCreateButton()) {
+      return true;
+    }
+    if (config.createConfig && Object.keys(config.createConfig).length !== 0) {
+      return true;
+    }
+    return false;
+  });
+
+  searchableFields = computed(() => {
+    const meta = this.meta();
+    if (!meta) return '';
+    return `over fields of ${meta.route}`;
+    // TODO: implement searchable fields based on resource meta
+    // return meta.searchableFields.join(', ') || '';
+  });
+
+  relatedData = input<RecordData>();
+  parentId = input<string>();
+
+  routeConfig = computed(() => {
+    return this.activatedRoute.snapshot.data['config'] as RootConfig;
+  });
+
+  config = computed(() => {
+    return this.resourceConfig() as ListViewConfig;
+  });
+
+  viewRouteFallback = computed(() => {
+    if (this.viewRoute()) {
+      return this.viewRoute();
+    }
+
+    return this.resourceMeta(this.config().primaryResource).route;
+  });
+
+  listTitle = computed(() => {
+    if (this.config()?.collapsible) return '';
+    return this.config().title || '';
+  });
+
+  indentTitle = computed(() => {
+    if (this.config() === undefined) {
+      return false;
+    }
+
+    return true;
+  });
+
+  createButtonLabel = computed(() => {
+    return this.config().createButtonLabel || 'Create';
+  });
+
+  meta = computed(() => {
+    const config = this.config();
+    return this.resourceMeta(config.overrideResource || config.primaryResource);
+  });
+  resourceWatchList: ResourceRef<RecordData[]>[] = [];
+  primaryKeys = computed(() => {
+    const meta = this.meta();
+    if (!meta) {
+      return [];
+    }
+    return meta.fields.filter((field) => field.primaryKey !== undefined);
+  });
+  columns = computed(() => {
+    const config = this.config();
+    const idCols = [];
+    for (const pk of this.primaryKeys()) {
+      if (pk.required) {
+        continue;
+      }
+      idCols.push({
+        id: pk.fieldName as FieldName,
+        hidden: true,
+      });
+    }
+
+    const cols = [...idCols, ...config.listColumns];
+    const columns: ColumnConfig[] = [];
+    const usedIds = new Set<string>();
+
+    // preset all resource list caches so a value is available for the valueGetter
+    for (const col of cols) {
+      if (!('additionalIds' in col)) {
+        continue;
+      }
+      col.additionalIds.forEach((id) => {
+        if (id.resource === undefined) {
+          return;
+        }
+        const resource = signal(id.resource as Resource);
+        const ref = this.cache.registerList(resource, resource);
+        if (!this.resourceWatchList.includes(ref)) this.resourceWatchList.push(ref);
+      });
+    }
+
+    for (const col of cols) {
+      const indexId = this.getUniqueId(col.id, usedIds) as FieldName;
+      usedIds.add(indexId);
+
+      if (col.hidden) {
+        continue;
+      }
+
+      if ('additionalIds' in col) {
+        columns.push({
+          id: indexId,
+          header: col.header,
+          width: col.width,
+          resizable: col.resizable,
+          valueGetter: (data) => {
+            const concatArray: string[] = [];
+
+            col.additionalIds.forEach((additionalCol) => {
+              if (!additionalCol.resource) {
+                concatArray.push(data[additionalCol.id]);
+              } else {
+                const resource = signal(additionalCol.resource as Resource);
+                const resourceRef = this.cache.registerList(resource, resource);
+                for (const res of resourceRef.value()) {
+                  if (res[additionalCol.id] === data[col.id] && res['id'] !== undefined && additionalCol.field) {
+                    const value = res[additionalCol.field];
+                    if (col.formatType && typeof value === 'string') {
+                      concatArray.push(formatDateString(col.formatType, value));
+                    } else if (value) {
+                      concatArray.push(value as string);
+                    }
+                  }
+                }
+              }
+            });
+
+            if (concatArray.length === 0) {
+              return col.emptyDataValue as string;
+            }
+
+            switch (col.concatFn) {
+              case 'space-concat':
+                return spaceConcatWithoutResource(concatArray);
+              case 'space-hyphen-concat':
+                return spaceHyphenConcatWithoutResource(concatArray);
+              case 'hyphen-space-concat':
+                return hyphenSpaceConcatWithoutResource(concatArray);
+              case 'no-space-concat':
+                return noSpaceConcatWithoutResource(concatArray);
+              default: {
+                // default case is hyphen-concat
+                return hyphenConcatWithoutResource(concatArray);
+              }
+            }
+          },
+        });
+      } else {
+        columns.push({
+          id: indexId,
+          header: col.header,
+          width: col.width,
+          resizable: col.resizable,
+          valueFormatter: (params) => {
+            if (col.formatType) {
+              const retValue = applyFormatting(col.formatType, params);
+              return retValue || col.emptyDataValue;
+            }
+            return params || col.emptyDataValue;
+          },
+        });
+      }
+    }
+
+    if (this.config().showViewButton) {
+      let route = '';
+      const isRootList = this.isRootList() === undefined;
+
+      if (this.viewRouteFallback() && isRootList) {
+        route = this.viewRouteFallback() || '';
+      } else {
+        let viewResource = this.config().viewResource;
+        if (!viewResource || viewResource === '') {
+          viewResource = this.config().primaryResource;
+        }
+
+        const meta = this.resourceMeta(viewResource as Resource);
+        if (meta !== undefined) {
+          route = meta.route;
+        }
+      }
+
+      columns.push({
+        id: 'view' as FieldName,
+        header: 'View',
+        hideHeader: true,
+        buttonConfig: {
+          label: 'View',
+          icon: 'arrow_forward',
+          viewRoute: route,
+          actionType: 'link',
+        },
+      });
+    }
+
+    return columns;
+  });
+
+  processedRowData = computed(() => {
+    for (const ref of this.resourceWatchList) {
+      ref.value();
+    }
+    const data = this.store.listData();
+    if (!data) return [];
+    const columns = this.columns();
+
+    return data.map((row) => {
+      const updatedRow = { ...row };
+      for (const col of columns) {
+        if (typeof col.valueGetter === 'function') {
+          updatedRow[col.id] = col.valueGetter(row);
+        } else {
+          updatedRow[col.id] = row[col.id];
+        }
+
+        if (typeof col.valueFormatter === 'function') {
+          updatedRow[col.id] = col.valueFormatter(updatedRow[col.id]);
+        }
+      }
+      return updatedRow;
+    });
+  });
+
+  filters = computed(() => {
+    const configFilter = this.config().filter?.(this.relatedData()) || '';
+    const inputFilter = this.filter();
+    if (inputFilter && configFilter) {
+      return `(${inputFilter}),(${configFilter})`;
+    }
+    if (inputFilter) {
+      return `(${inputFilter})`;
+    }
+    return configFilter || '';
+  });
+
+  createResource(event: MouseEvent): void {
+    event.stopPropagation();
+    this.createMode.emit(true);
+  }
+
+  parentKey = computed(() => {
+    if (this.relatedData() === undefined || this.childKey() === undefined) {
+      return '';
+    }
+    const parent = this.config().parentRelation?.parentKey;
+    return this.relatedData()?.[parent] || '';
+  });
+
+  childKey = computed(() => {
+    if (!this.config().parentRelation) {
+      return '';
+    }
+    return this.config().parentRelation?.childKey as string;
+  });
+
+  private getUniqueId(baseId: string, usedIds: Set<string>): string {
+    if (!usedIds.has(baseId)) {
+      return baseId;
+    }
+
+    let counter = 1;
+    let newId = `${baseId}_${counter}`;
+    while (usedIds.has(newId)) {
+      counter++;
+      newId = `${baseId}_${counter}`;
+    }
+    return newId;
+  }
+
+  ngOnInit(): void {
+    const primaryResource = this.config().primaryResource;
+    if (this.meta()) {
+      this.store.resourceName.set(primaryResource);
+      this.store.resourceMeta.set(this.meta());
+      this.store.listColumns.set(this.config().listColumns || []);
+      this.store.requireSearchToDisplayResults.set(this.config().requireSearchToDisplayResults || false);
+      this.store.sorts.set(this.config().sorts || []);
+    }
+
+    runInInjectionContext(this.injector, () => {
+      this.config().listColumns.forEach((element) => {
+        if (!('additionalIds' in element)) return;
+        element.additionalIds.forEach((id) => {
+          if (id.resource === undefined) return;
+          const meta = this.resourceMeta(id.resource);
+          if (meta === undefined) return;
+          const route = signal(meta.route);
+          const resource = signal(id.resource);
+          const ref = this.cache.registerList(route, resource);
+          this.resourceWatchList.push(ref);
+        });
+      });
+
+      effect(() => {
+        this.filter();
+        this.relatedData();
+        this.store.filter.set(this.filters());
+        this.store.resetResourceList();
+      });
+    });
+  }
+}

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

@@ -0,0 +1,71 @@
+@if (config().collapsible) {
+  <div class="page-container">
+    <mat-expansion-panel
+      #expPanel
+      [@.disabled]="true"
+      disabled="{{ !config().collapsible }}"
+      expanded="{{ !config().collapsible }}">
+      @if (config().collapsible || config().title) {
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            <h1 class="title">
+              {{ config().title }}
+            </h1>
+          </mat-panel-title>
+          @if (config().createTitle !== '') {
+            <button
+              mat-icon-button
+              class="exp-panel-add-element-btn"
+              color="accent"
+              (click)="createResource($event)"
+              matTooltip="{{ config().createButtonLabel }}"
+              matTooltipPosition="above">
+              <mat-icon color="accent">add_circle</mat-icon>
+            </button>
+          }
+        </mat-expansion-panel-header>
+      } @else {
+        <div class="no-title-exp-panel-padding"></div>
+      }
+
+      @if (create()) {
+        <ccc-resource-create
+          [resourceConfig]="createConfig()"
+          [parentData]="parentData()"
+          [loadCreatedResource]="config().createType === 'link'"
+          (complete)="makeCreatePatches()">
+        </ccc-resource-create>
+      }
+
+      <ccc-resource-list
+        [viewRoute]="rootConfig().routeData.route"
+        [resourceConfig]="config()"
+        [filter]="filter()"
+        [hideCreateButton]="create()"
+        [relatedData]="parentData()"
+        [parentId]="parentId()"
+        [linkCreateType]="createLinkType()"
+        [isRootList]="isRootList()"
+        (createMode)="create.set($event)"></ccc-resource-list>
+    </mat-expansion-panel>
+  </div>
+} @else {
+  @if (create()) {
+    <ccc-resource-create
+      [resourceConfig]="createConfig()"
+      [parentData]="parentData()"
+      [loadCreatedResource]="config().createType === 'link'"
+      (complete)="makeCreatePatches()">
+    </ccc-resource-create>
+  }
+  <ccc-resource-list
+    [viewRoute]="rootConfig().routeData.route"
+    [resourceConfig]="config()"
+    [filter]="filter()"
+    [hideCreateButton]="create()"
+    [relatedData]="parentData()"
+    [parentId]="parentId()"
+    (createMode)="create.set($event)"
+    [isRootList]="isRootList()"
+    [linkCreateType]="createLinkType()"></ccc-resource-list>
+}

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

@@ -0,0 +1,9 @@
+.page-container {
+  position: relative;
+  margin: 10px 0 0 0;
+}
+
+.exp-panel-add-element-btn {
+  margin-right: 10px;
+  transform: scale(1.2);
+}

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

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

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

@@ -0,0 +1,103 @@
+import { Component, computed, inject, Injector, input, 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 { ActivatedRoute, Router } from '@angular/router';
+import { ListViewConfig, RecordData, RootConfig } from '@cccteam/ccc-lib/src/types';
+import { ResourceCacheService } from '../resource-cache.service';
+import { ResourceCreateComponent } from '../resource-create/resource-create.component';
+import { ResourceListComponent } from '../resource-list/resource-list.component';
+
+@Component({
+  selector: 'ccc-resource-list-create',
+  templateUrl: './resource-list-create.component.html',
+  styleUrl: './resource-list-create.component.scss',
+  imports: [
+    MatExpansionModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatButtonModule,
+    ResourceCreateComponent,
+    ResourceListComponent,
+  ],
+})
+export class ResourceListCreateComponent {
+  injector = inject(Injector);
+  cache = inject(ResourceCacheService);
+
+  route = inject(ActivatedRoute);
+  router = inject(Router);
+  create = signal<boolean>(false);
+  parentId = input<string>();
+  parentData = input<RecordData>({});
+  searchParams = input<Record<string, string>[]>([]);
+  resourceConfig = input<ListViewConfig>();
+  isRootList = input<boolean>(true);
+
+  childKey = computed(() => {
+    if (!this.config().parentRelation) {
+      return '';
+    }
+    return this.config().parentRelation?.childKey as string;
+  });
+
+  filter = computed(() => {
+    const filters = [];
+    if (this.childKey() !== '' && this.parentKey() !== '') {
+      filters.push(`${this.childKey()}:eq:${this.parentKey()}`);
+    }
+    return filters.join(',');
+  });
+
+  parentKey = computed(() => {
+    if (this.parentData() === undefined || this.childKey() === undefined) {
+      return '';
+    }
+    const parent = this.config().parentRelation?.parentKey;
+    return this.parentData()?.[parent] || '';
+  });
+
+  config = computed(() => {
+    const inputConfig = this.resourceConfig();
+    if (inputConfig) {
+      return inputConfig as ListViewConfig;
+    }
+    return this.rootConfig().parentConfig as ListViewConfig;
+  });
+
+  expPanel = viewChild<MatExpansionPanel, MatExpansionPanel>('expPanel', { read: MatExpansionPanel });
+
+  rootConfig = computed(() => {
+    return this.route.snapshot.data['config'] as RootConfig;
+  });
+
+  createLinkType = computed(() => {
+    return this.config().createType === 'link' && this.create();
+  });
+
+  createConfig = computed(() => {
+    const config = this.config();
+    if (Object.keys(config.createConfig).length !== 0) {
+      return config.createConfig;
+    }
+    return config;
+  });
+
+  createResource(event: MouseEvent): void {
+    event.stopPropagation();
+    this.create.set(true);
+
+    if (this.expPanel() && this.expPanel()?.closed) {
+      this.expPanel()?.open();
+    }
+  }
+
+  makeCreatePatches(): void {
+    if (this.create()) {
+      const resource = this.config().primaryResource;
+      this.cache.updateResourceInCache(resource, 'list');
+      this.create.set(false);
+    }
+  }
+}

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

@@ -0,0 +1 @@
+<ng-template #dynamicSlot></ng-template>