@cccteam/ccc-lib 0.0.15 → 0.0.16

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

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

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

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

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

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

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

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

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