@cccteam/ccc-lib 0.0.13 → 0.0.15

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

@@ -0,0 +1,354 @@
+import { Location } from '@angular/common';
+import {
+  Component,
+  computed,
+  DestroyRef,
+  effect,
+  inject,
+  Injector,
+  input,
+  OnInit,
+  output,
+  signal,
+  WritableSignal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { sparseFormData } from '@cccteam/ccc-lib/src/auth-forms';
+import {
+  AlertLevel,
+  DataType,
+  FieldElement,
+  ListViewConfig,
+  RecordData,
+  Resource,
+  RESOURCE_META,
+  ResourceMeta,
+  RootConfig,
+  RPCConfig,
+  ViewConfig,
+} from '@cccteam/ccc-lib/src/types';
+import { NotificationService } from '@cccteam/ccc-lib/src/ui-notification-service';
+import { filter, tap } from 'rxjs';
+import { FormStateService } from '../form-state.service';
+import { civildateCoercion, flattenElements } from '../gui-constants';
+import { DeleteOperation, UpdateOperation } from '../operation-types';
+import { ResourceCacheService } from '../resource-cache.service';
+import { ResourceLayoutComponent } from '../resource-layout/resource-layout.component';
+import { ResourceStore } from '../resource-store.service';
+import { metadataTypeCoercion } from '../resources-helpers';
+
+@Component({
+  selector: 'ccc-resource-view',
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    RouterModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatDividerModule,
+    ResourceLayoutComponent,
+    MatExpansionPanel,
+    MatExpansionPanelHeader,
+    MatExpansionPanelTitle,
+  ],
+  templateUrl: './resource-view.component.html',
+  styleUrl: './resource-view.component.scss',
+  providers: [ResourceStore],
+})
+export class ResourceViewComponent implements OnInit {
+  location = inject(Location);
+  router = inject(Router);
+  activatedRoute = inject(ActivatedRoute);
+  notifications = inject(NotificationService);
+  store = inject(ResourceStore);
+  cache = inject(ResourceCacheService);
+  injector = inject(Injector);
+  destroyRef = inject(DestroyRef);
+  formState = inject(FormStateService);
+  dialog = inject(MatDialog);
+
+  editMode: WritableSignal<'edit' | 'view'> = signal('view');
+  uuid = input.required<string>();
+  config = input.required<ViewConfig | ListViewConfig>();
+  relatedData = input<RecordData>({});
+  compoundResourceView = input<boolean>(false);
+  isDirty = signal(false);
+
+  displayFormInvalidMessage = signal<boolean>(false);
+  deleted = output<boolean>();
+
+  resourceMeta = inject(RESOURCE_META);
+
+  rootConfig = computed(() => {
+    return this.activatedRoute.snapshot.data['config'] as RootConfig;
+  });
+
+  shouldShowDelete = computed(() => {
+    const config = this.config();
+    if (config) {
+      return config.primaryResource !== this.rootConfig().parentConfig.primaryResource;
+    }
+    return config === undefined;
+  });
+
+  inlineRpcConfigs = computed(() => {
+    const config = this.config();
+    if (config) {
+      return config.rpcConfigs?.filter((rpc: RPCConfig) => rpc.placement === 'inline');
+    }
+    return [];
+  });
+
+  endRpcConfigs = computed(() => {
+    const config = this.config();
+    if (config) {
+      return config.rpcConfigs?.filter((rpc: RPCConfig) => rpc.placement === 'end');
+    }
+    return [];
+  });
+
+  useExpansionPanel = computed(() => {
+    const config = this.config();
+    // TODO: Investigate why we're doing this check, it's weird because viewType is not part of the input configs
+    if (config && 'viewType' in config && config.viewType !== 'View') {
+      return false;
+    }
+
+    return config.collapsible || !this.compoundResourceView();
+  });
+
+  resourceConfigRouteSnapshot = computed(() => {
+    return (
+      this.config() ||
+      (this.activatedRoute.snapshot.data['config'] as RootConfig)?.parentConfig ||
+      ({} as ViewConfig | ListViewConfig)
+    );
+  });
+
+  emptyFormGroup = new FormGroup({});
+
+  form = computed(() => {
+    const meta = this.store.resourceMeta();
+    const resourceData = this.store.viewData();
+    const config = this.config();
+
+    if (meta === undefined || resourceData === undefined || config === undefined) {
+      return this.emptyFormGroup;
+    }
+
+    const fg = new FormGroup({});
+    const pristineValues: Record<string, DataType | null> = {};
+    const allElements = flattenElements(config.elements);
+
+    for (const field of meta.fields || []) {
+      const isFieldNameRegistered = fg.get(field.fieldName) !== null;
+      if (isFieldNameRegistered) {
+        continue;
+      }
+
+      const findConfig = allElements.find((element) => element.type === 'field' && element.name === field.fieldName);
+      const fieldConfig = findConfig as FieldElement | undefined;
+      if (!fieldConfig) {
+        continue;
+      }
+
+      let value: DataType | null = null;
+      const stringValue = resourceData?.[field.fieldName] ? String(resourceData[field.fieldName]) : '';
+
+      if (field.displayType === 'civildate' && stringValue) {
+        value = civildateCoercion(stringValue);
+      } else if (resourceData[field.fieldName] !== undefined) {
+        value = resourceData[field.fieldName];
+      }
+
+      const control = new FormControl(value);
+
+      if (fieldConfig.validators.length > 0) {
+        control.setValidators(fieldConfig.validators);
+      }
+
+      fg.addControl(field.fieldName, control);
+      pristineValues[field.fieldName] = value;
+    }
+    this.pristineFormValues = pristineValues;
+
+    return fg;
+  });
+
+  pristineFormValues: Record<string, DataType | null> = {};
+
+  route = computed(() => {
+    const meta = this.store.resourceMeta();
+    if (!meta) return '';
+    return meta.consolidatedRoute || meta.route;
+  });
+
+  primaryKeys = computed(() => {
+    const meta = this.store.resourceMeta() as ResourceMeta;
+    if (!meta) return [];
+    return meta.fields
+      .filter((field) => field.primaryKey)
+      .sort((a, b) => a.primaryKey!.ordinalPosition - b.primaryKey!.ordinalPosition);
+  });
+
+  primaryKeyPath = computed(() => {
+    const meta = this.store.resourceMeta();
+    const isConsolidated = !!meta.consolidatedRoute;
+    let resourceIdentifier = '';
+    if (isConsolidated) {
+      resourceIdentifier = '/' + String(meta.route);
+    }
+    return (
+      resourceIdentifier +
+      '/' +
+      this.primaryKeys()
+        .map((field) => this.store.viewData()[field.fieldName])
+        .join('/')
+    );
+  });
+
+  ngOnInit(): void {
+    if (this.resourceMeta(this.config().primaryResource as Resource)) {
+      this.store.resourceName.set(this.config().primaryResource as Resource);
+      this.store.resourceMeta.set(this.resourceMeta(this.config().primaryResource as Resource));
+    }
+
+    this.store.uuid.set(this.relatedId());
+    this.store.resetResourceView();
+    this.inlineRpcConfigs();
+    this.endRpcConfigs();
+  }
+
+  setEditMode(mode: 'edit' | 'view'): void {
+    if (mode === 'view') {
+      const changeData = sparseFormData(this.form(), this.pristineFormValues);
+      if (Object.keys(changeData).length !== 0) {
+        this.notifications.addGlobalNotification({
+          message: 'You have unsaved changes.',
+          link: '',
+          level: AlertLevel.ERROR,
+        });
+        return;
+      }
+      this.editMode.set('view');
+    } else if (mode === 'edit') {
+      this.editMode.set('edit');
+    }
+  }
+
+  saveForm(): void {
+    if (!this.form().valid) {
+      this.displayFormInvalidMessage.set(true);
+      this.form().markAllAsTouched();
+      return;
+    }
+
+    this.displayFormInvalidMessage.set(false);
+
+    const resourceMeta = this.store.resourceMeta();
+    if (!resourceMeta) return;
+
+    const sparseData = sparseFormData(this.form(), this.pristineFormValues);
+    const coercedSparseData = metadataTypeCoercion(sparseData, resourceMeta);
+
+    const updatePatch: UpdateOperation = {
+      op: 'patch',
+      value: coercedSparseData,
+      path: this.primaryKeyPath(),
+    };
+
+    this.pristineFormValues = this.form().getRawValue();
+
+    if (Object.keys(coercedSparseData).length === 0) return;
+    this.cache
+      .makePatches([updatePatch], this.route(), this.store.resourceName())
+      .pipe(
+        tap(() => {
+          this.form().markAsPristine();
+          this.setEditMode('view');
+          this.formState.decrementDirtyForms();
+          this.store.reloadResourceView();
+        }),
+      )
+      .subscribe();
+  }
+
+  resetForm(): void {
+    this.form().reset();
+    this.form().patchValue(this.pristineFormValues);
+    this.setEditMode('view');
+    if (this.form().dirty) {
+      this.formState.decrementDirtyForms();
+    }
+  }
+
+  deleteResource(): void {
+    const deletePatch: DeleteOperation = {
+      op: 'remove',
+      value: {},
+      path: this.primaryKeyPath(),
+    };
+
+    this.cache
+      .makePatches([deletePatch], this.route(), this.store.resourceName())
+      .pipe(
+        tap(() => {
+          this.cache.updateResourceInCache(this.store.resourceName(), 'list');
+          this.deleted.emit(true);
+        }),
+        filter(() => this.compoundResourceView()),
+        tap(() => {
+          this.location.back();
+        }),
+      )
+      .subscribe();
+  }
+
+  relatedId(): string {
+    const relatedData = this.relatedData();
+    const config = this.config();
+    if (config.parentRelation?.parentKey) {
+      return String(relatedData[config.parentRelation.parentKey]);
+    }
+    return this.uuid();
+  }
+
+  constructor() {
+    effect(() => {
+      console.debug('USAGE | New FormGroup subscription for: ', this.config().title);
+
+      this.form()
+        .valueChanges.pipe(
+          tap(() => {
+            const dirty = this.form().dirty;
+            if (dirty !== this.isDirty()) {
+              this.isDirty.set(dirty);
+              if (dirty) {
+                this.formState.incrementDirtyForms();
+              } else {
+                this.formState.decrementDirtyForms();
+              }
+            }
+          }),
+          takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe();
+    });
+
+    effect(() => {
+      this.uuid();
+      this.store.uuid.set(this.relatedId());
+    });
+  }
+}

package/src/ccc-resource/resources-helpers.ts

@@ -0,0 +1,262 @@
+import { inject, ModelSignal } from '@angular/core';
+import { AbstractControl, FormArray, FormControl, FormGroup } from '@angular/forms';
+import { Route } from '@angular/router';
+import type { Resource } from '@cccteam/ccc-lib/src/internal-types';
+import { RESOURCE_META } from '@cccteam/ccc-lib/src/internal-types';
+import {
+  ConfigElement,
+  DataType,
+  FieldElement,
+  MenuItem,
+  MethodMeta,
+  PristineData,
+  RecordData,
+  ResourceMeta,
+  RootConfig,
+  RouteResourceData,
+  RPCRecordData,
+  ViewConfig,
+} from '@cccteam/ccc-lib/src/types';
+import { format, isValid } from 'date-fns';
+import { dirtyFormDeactivateGuard } from './can-deactivate.guard';
+import { civildateCoercion, flattenElements } from './gui-constants';
+import { ResourceBaseComponent } from './resource-base/resource-base.component';
+
+/**
+ * Recursively cleans a FormGroup or FormArray, removing controls with empty string values.
+ * Similar to sparseFormData, but doesn't compare to an initial state
+ * @param control - The FormGroup or FormArray to clean.
+ * @returns A cleaned object with non-empty values.
+ */
+export function cleanStringForm<T>(control: AbstractControl): T | undefined {
+  if (control instanceof FormGroup) {
+    const cleanedGroup: Record<string, unknown> = {};
+    for (const key of Object.keys(control.controls)) {
+      const childControl = control.get(key);
+      if (childControl) {
+        const cleanedValue = cleanStringForm(childControl);
+        if (cleanedValue !== undefined && cleanedValue !== null && cleanedValue !== '') {
+          cleanedGroup[key] = cleanedValue;
+        }
+      }
+    }
+    return cleanedGroup as T;
+  } else if (control instanceof FormArray) {
+    const cleanedArray = control.controls
+      .map((childControl) => cleanStringForm(childControl))
+      .filter((item) => item !== undefined && item !== null && item !== '');
+    return cleanedArray as unknown as T;
+  } else {
+    return control.value !== '' ? control.value : undefined;
+  }
+}
+
+export const createFormGroup = (
+  meta: ResourceMeta,
+  resourceData: RecordData,
+  config: ViewConfig,
+  formDataState?: ModelSignal<RecordData>,
+): {
+  formGroup: FormGroup;
+  pristineFormValues: PristineData;
+} => {
+  const fg = new FormGroup({});
+  const pristineValues: Record<string, DataType | null> = {};
+  const allElements = flattenElements(config.elements);
+
+  for (const field of meta.fields || []) {
+    const isFieldNameRegistered = fg.get(field.fieldName) !== null;
+    if (isFieldNameRegistered) {
+      continue;
+    }
+
+    const findConfig = allElements.find((element) => element.type === 'field' && element.name === field.fieldName);
+    const fieldConfig = findConfig as FieldElement | undefined;
+    if (!fieldConfig) {
+      continue;
+    }
+
+    let value: DataType | null = null;
+    const stringValue = resourceData?.[field.fieldName] ? String(resourceData[field.fieldName]) : '';
+
+    if (field.displayType === 'civildate' && stringValue) {
+      value = civildateCoercion(stringValue);
+    } else if (resourceData[field.fieldName] !== undefined) {
+      value = resourceData[field.fieldName];
+    }
+
+    const control = new FormControl(value);
+
+    if (fieldConfig.validators.length > 0) {
+      control.setValidators(fieldConfig.validators);
+    }
+
+    fg.addControl(field.fieldName, control);
+    pristineValues[field.fieldName] = value;
+  }
+  // todo: swap this with a manual subscription where the form data is subscribed to and
+  // is dstroyed once the form is destroyed, similar to gui/src/app/components/Resource/resource-view/resource-view.component.ts
+  // constructor effect
+  console.log(formDataState);
+  // formDataState && formDataState.set(pristineValues);
+
+  return {
+    formGroup: fg,
+    pristineFormValues: pristineValues,
+  };
+};
+
+export const resourceRoutes = (config: RootConfig): Route => {
+  const resourceMeta = inject(RESOURCE_META);
+  const meta = resourceMeta(config.parentConfig.primaryResource as Resource);
+  if (!meta) {
+    return {} as Route;
+  }
+
+  if (config.nav) {
+    if (config.routeData.route) {
+      addToNavItems(config.nav, config.routeData.route);
+    } else {
+      addToNavItems(config.nav, meta.route);
+    }
+  }
+
+  if (config.routeData.route) {
+    const baseRoute: Route = {
+      path: config.routeData.route,
+      data: { config: config } satisfies RouteResourceData,
+      component: ResourceBaseComponent,
+      children: [
+        {
+          path: '',
+          loadComponent: () =>
+            import(`./resource-list-create/resource-list-create.component`).then(
+              (mod) => mod.ResourceListCreateComponent,
+            ),
+          canDeactivate: [dirtyFormDeactivateGuard],
+        },
+      ],
+    };
+    if (config.routeData.hasViewRoute !== false) {
+      baseRoute.children?.push({
+        path: ':uuid',
+        loadComponent: () =>
+          import(`./compound-resource/compound-resource.component`).then((mod) => mod.CompoundResourceComponent),
+        canDeactivate: [dirtyFormDeactivateGuard],
+      });
+      return baseRoute;
+    }
+  }
+
+  return {
+    path: meta.route,
+    data: { config: config } as RouteResourceData,
+    component: ResourceBaseComponent,
+    children: [
+      {
+        path: ':uuid',
+        loadComponent: () =>
+          import(`./compound-resource/compound-resource.component`).then((mod) => mod.CompoundResourceComponent),
+        canDeactivate: [dirtyFormDeactivateGuard],
+      },
+      {
+        path: '',
+        loadComponent: () =>
+          import(`./resource-list-create/resource-list-create.component`).then(
+            (mod) => mod.ResourceListCreateComponent,
+          ),
+        canDeactivate: [dirtyFormDeactivateGuard],
+      },
+    ],
+  } satisfies Route;
+};
+
+export const generatedNavItems = [] as MenuItem[];
+export const generatedNavGroups = [] as string[];
+
+function addToNavItems(
+  nav: {
+    navItem: MenuItem;
+    group?: string;
+  },
+  route: string,
+): void {
+  nav.navItem.route = [route];
+
+  if (!nav.group) {
+    generatedNavItems.push(nav.navItem);
+    return;
+  }
+
+  if (!generatedNavGroups.includes(nav.group)) {
+    generatedNavGroups.push(nav.group);
+  }
+
+  let groupItem = generatedNavItems.find((item) => item.label === nav.group);
+
+  if (!groupItem) {
+    groupItem = { label: nav.group, children: [] };
+    generatedNavItems.push(groupItem);
+  }
+
+  groupItem.children = groupItem.children || [];
+  groupItem.children.push(nav.navItem);
+
+  generatedNavItems.sort((a, b) => (a.label > b.label ? -1 : 1));
+}
+
+/**
+ * Recursive function to extract nested field names from a config.
+ * @param elements - The elements to extract field names from.
+ * @returns - An array of field names.
+ */
+export function extractFieldNames(elements: ConfigElement[]): string[] {
+  const fields: string[] = [];
+  for (const element of elements) {
+    if (element.type === 'section') {
+      fields.push(...extractFieldNames(element.children));
+    } else if (element.type === 'field') {
+      fields.push(element.name as string);
+    }
+  }
+  return fields;
+}
+
+/**
+ * Checks if a string is a valid UUID (versions 1-5) according to RFC 4122.
+ *
+ * @param str - The string to validate.
+ * @returns `true` if the string is a valid UUID, otherwise `false`.
+ */
+export function isUUID(str: string): boolean {
+  const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+  return uuidRegex.test(str);
+}
+
+/**
+ * Coerces metadata types in a record according to the metadata.
+ *
+ * @param record - The record to coerce.
+ * @param meta - The metadata (resource or method).
+ * @returns The coerced record.
+ */
+export function metadataTypeCoercion(record: RecordData, meta: ResourceMeta): RecordData;
+export function metadataTypeCoercion(record: RPCRecordData, meta: MethodMeta): RPCRecordData;
+export function metadataTypeCoercion(
+  record: RecordData | RPCRecordData,
+  meta: ResourceMeta | MethodMeta,
+): RecordData | RPCRecordData {
+  if (!meta?.fields) return record;
+
+  const displayTypeByField = new Map(meta.fields.map((f) => [f.fieldName, f.displayType]));
+
+  for (const [key, value] of Object.entries(record)) {
+    const displayType = displayTypeByField.get(key);
+    if (displayType === 'civildate' && value && isValid(value)) {
+      const date = value as Date;
+      record[key] = format(date, 'yyyy-MM-dd');
+    }
+  }
+
+  return record;
+}

package/src/ccc-resource/utils/validator-utils.ts

@@ -0,0 +1,6 @@
+import { ValidatorFn } from '@angular/forms';
+import { ResourceValidatorFn } from '@cccteam/ccc-lib/src/types';
+
+export function createResourceValidator(validator: ValidatorFn): ResourceValidatorFn {
+  return validator as ResourceValidatorFn;
+}

package/{fesm2022/cccteam-ccc-lib.mjs → src/index.ts}

@@ -1,23 +1,44 @@
+/*
+ * Public API Surface of ccc-lib
+ */
+
+// Auth service
+export * from '@cccteam/ccc-lib/src/auth-service';
+
+// UI Core service
+export * from '@cccteam/ccc-lib/src/ui-core-service';
+
+// Auth directives
 export * from '@cccteam/ccc-lib/src/auth-has-permission';
+
+// Auth forms
 export * from '@cccteam/ccc-lib/src/auth-forms';
+
+// Auth guards
 export * from '@cccteam/ccc-lib/src/auth-authentication-guard';
 export * from '@cccteam/ccc-lib/src/auth-authorization-guard';
-export * from '@cccteam/ccc-lib/src/auth-service';
+
+// Util
 export * from '@cccteam/ccc-lib/src/util-request-options';
-export * from '@cccteam/ccc-lib/src/auth-state';
+
+// Types
 export * from '@cccteam/ccc-lib/src/types';
+
+// Ui components
 export * from '@cccteam/ccc-lib/src/ui-alert';
 export * from '@cccteam/ccc-lib/src/ui-sidenav';
+
+// Ui interceptor
 export * from '@cccteam/ccc-lib/src/ui-interceptor';
+
+// Ui services
 export * from '@cccteam/ccc-lib/src/ui-notification-service';
-export * from '@cccteam/ccc-lib/src/ui-core-state';
 
-/*
- * Public API Surface of ccc-lib
- */
-// Auth directives
+// Resources
+export * from '@cccteam/ccc-lib/src/ccc-resource';
 
-/**
- * Generated bundle index. Do not edit.
- */
-//# sourceMappingURL=cccteam-ccc-lib.mjs.map
+// Camel case pipe
+export * from '@cccteam/ccc-lib/src/ccc-camel-case-to-title';
+
+// Grid
+export * from '@cccteam/ccc-lib/src/ccc-grid';

package/src/internal-types/index.ts

@@ -0,0 +1 @@
+export * from '@cccteam/ccc-lib/src/types';

package/src/internal-types/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "./index.ts"
+  }
+}