merged object and data preview

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firestitch/activity",
   "title": "Activity",
-  "version": "18.0.4",
+  "version": "18.0.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/Firestitch/ngx-activity"

playground/app/components/activities/activities.component.html

@@ -1,14 +1,16 @@
 <fs-activities>
   <ng-template
-      fsActivityObject
-      let-object="object"
+      fsActivityPreview
+      [activityType]="'crmLeadStatus'"
+      let-data="data"
       let-activity="activity">
-    {{ object.name }}
+    !{{ data.name }}!
   </ng-template>
   <ng-template
-      fsActivityData
+      fsActivityPreview
+      [activityType]="'crmLeadDate'"
       let-data="data"
       let-activity="activity">
-    {{ data.value }}
+    {{ data | json }}
   </ng-template>
 </fs-activities>

playground/app/playground.module.ts

@@ -4,7 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule, Routes } from '@angular/router';
 
 
-import { FsActivitiesComponent, FsActivityDataDirective, FsActivityObjectDirective } from '@firestitch/activity';
+import { FsActivitiesComponent, FsActivityPreviewDirective } from '@firestitch/activity';
 import { FS_API_REQUEST_INTERCEPTOR } from '@firestitch/api';
 import { FsExampleModule } from '@firestitch/example';
 import { FsHtmlEditorModule } from '@firestitch/html-editor';
@@ -38,8 +38,7 @@ const routes: Routes = [
       activationKey: '2J1B10dD7F6F5A3F3I3cWHNGGDTCWHId1Eb1Oc1Yh1b2Ld1POkE3D3F3C9A4E5A3G3B2G2==',
     }),
     FsActivitiesComponent,
-    FsActivityObjectDirective,
-    FsActivityDataDirective,
+    FsActivityPreviewDirective,
   ],
   declarations: [
     AppComponent,

playground/assets/activities.json

@@ -443,12 +443,12 @@
     "subjectObjectClass": null,
     "color": null,
     "icon": "playlist_add_check",
-    "type": "crmLeadStatus"  }  ,
+    "type": "crmLeadDate"  }  ,
   "concreteActivityObject": {
     "id": 88605,
     "parentAttributeId": null,
     "name": "Something else",
-    "class": "crmLeadStatus",
+    "class": "crmLeadDate",
     "backgroundColor": "#1E78D9",
     "guid": "l08699e62982b351ac573bfc39390b497",
     "imageTime": null,

src/app/components/activities/activities.component.html

@@ -46,7 +46,7 @@
         <div class="previous-object">
           <ng-container
             [ngTemplateOutlet]="objectPreview"
-            [ngTemplateOutletContext]="{ activity: activity, object: activity.concretePreviousActivityObject }">
+            [ngTemplateOutletContext]="{ activity: activity, data: activity.concretePreviousActivityObject }">
           </ng-container>
           <mat-icon>
             east
@@ -56,7 +56,7 @@
       <ng-container *ngIf="activity.concreteActivityObject">
         <ng-container
           [ngTemplateOutlet]="objectPreview"
-          [ngTemplateOutletContext]="{ activity: activity, object: activity.concreteActivityObject }">
+          [ngTemplateOutletContext]="{ activity: activity, data: activity.concreteActivityObject }">
         </ng-container>
       </ng-container>
       <ng-container *ngIf="!activity.concreteActivityObject && !activity.concretePreviousActivityObject">
@@ -80,9 +80,9 @@
           #dataPreview
           let-activity="activity"
           let-data="data">
-        @if (this.activityData) {
+        @if (this.activityPreviews) {
           <ng-container
-            [ngTemplateOutlet]="this.activityData"
+            [ngTemplateOutlet]="this.activityPreviews[activity.activityType.type].templateRef"
             [ngTemplateOutletContext]="{ activity: activity, data: data }">
           </ng-container>
         } @else {
@@ -92,14 +92,14 @@
       <ng-template
           #objectPreview
           let-activity="activity"
-          let-object="object">
-        @if (this.activityObject) {
+          let-data="data">
+        @if (this.activityPreviews[activity.activityType.type]) {
           <ng-container
-            [ngTemplateOutlet]="this.activityObject"
-            [ngTemplateOutletContext]="{ activity: activity, object: object }">
+            [ngTemplateOutlet]="this.activityPreviews[activity.activityType.type].templateRef"
+            [ngTemplateOutletContext]="{ activity: activity, data: data }">
           </ng-container>
         } @else {
-          {{ object.name }}
+          {{ data?.name }}
         }
       </ng-template>
     </div>

src/app/components/activities/activities.component.ts

@@ -3,11 +3,11 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ContentChild,
+  ContentChildren,
   inject,
   Input,
   OnInit,
-  TemplateRef,
+  QueryList,
 } from '@angular/core';
 
 import { MatButtonModule } from '@angular/material/button';
@@ -21,7 +21,7 @@ import { FsPrompt } from '@firestitch/prompt';
 
 import { switchMap } from 'rxjs/operators';
 
-import { FsActivityDataDirective, FsActivityObjectDirective } from '../../directives';
+import { FsActivityPreviewDirective } from '../../directives';
 import { FsActivityObjectTypeComponent } from '../activity-object-type';
 
 
@@ -45,18 +45,23 @@ import { FsActivityObjectTypeComponent } from '../activity-object-type';
 })
 export class FsActivitiesComponent implements OnInit {
 
-  @Input() public apiPath: string = '';
+  @Input() public apiPath: string = 'activities';
 
-  @ContentChild(FsActivityObjectDirective, { read: TemplateRef })
-  public activityObject: TemplateRef<FsActivityObjectDirective>;
+  @ContentChildren(FsActivityPreviewDirective)
+  public set setActivityObjects(templates: QueryList<FsActivityPreviewDirective>) {
+    this.activityPreviews = templates.toArray()
+      .reduce((acc, template) => {
+        acc[template.activityType] = template;
 
-  @ContentChild(FsActivityDataDirective, { read: TemplateRef })
-  public activityData: TemplateRef<FsActivityDataDirective>;
+        return acc;
+      }, {});
+  }
 
   public filterConfig: FilterConfig;
   public activities = [];
   public actions;
   public maxActivityId;
+  public activityPreviews: { [key: string]: FsActivityPreviewDirective } = {};
 
   private _api = inject(FsApi);
   private _prompt = inject(FsPrompt);
@@ -83,7 +88,7 @@ export class FsActivitiesComponent implements OnInit {
     })
       .pipe(
         switchMap(() => this._api.delete(
-          `${this.apiPath}activities/${activity.id}`,
+          `${this.apiPath}/${activity.id}`,
         )),
       )
       .subscribe(() => {
@@ -96,7 +101,7 @@ export class FsActivitiesComponent implements OnInit {
 
   private _load(): void {
     this._api
-      .get(`${this.apiPath}activities`, {
+      .get(`${this.apiPath}`, {
         activityTypes: true,
         creatorObjects: true,
         concreteObjects: true,

src/app/directives/activity-preview.directive.ts

@@ -0,0 +1,24 @@
+import { Directive, inject, Input, TemplateRef } from '@angular/core';
+
+
+@Directive({
+  selector: '[fsActivityPreview]',
+  standalone: true,
+})
+export class FsActivityPreviewDirective {
+
+  @Input() public activityType: any;
+
+  public templateRef = inject(TemplateRef);
+
+  public static ngTemplateContextGuard(
+    directive: FsActivityPreviewDirective,
+    context: any,
+  ): context is {
+    data: any,
+    activity: any
+  } {
+    return true;
+  }
+
+}

src/app/directives/index.ts

@@ -1,2 +1,2 @@
-export * from './activity-data.directive';
-export * from './activity-object.directive';
+export * from './activity-preview.directive';
+

src/public_api.ts

@@ -1,5 +1,4 @@
 export { FsActivitiesComponent } from './app/components/activities/activities.component';
 export { FsActivityObjectTypeComponent } from './app/components/activity-object-type/activity-object-type.component';
-export { FsActivityDataDirective } from './app/directives/activity-data.directive';
-export { FsActivityObjectDirective } from './app/directives/activity-object.directive';
+export { FsActivityPreviewDirective } from './app/directives/activity-preview.directive';