[ACS-5601] Add adf dynamic component to custom name column

Alfresco · Oct 2, 2023 · 8941c11 · 8941c11
1 parent 3ba2f14
commit 8941c11
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 10 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "@alfresco/adf-content-services": "6.4.0-6341205853",
     "@alfresco/adf-core": "6.4.0-6341205853",
     "@alfresco/adf-extensions": "6.4.0-6341205853",
+    "@alfresco/adf-process-services": "6.4.0-6341205853",
     "@alfresco/eslint-plugin-eslint-angular": "6.4.0-6341205853",
     "@alfresco/js-api": "7.1.0-1349",
     "@angular/animations": "14.1.3",

diff --git a/...ca-content/src/lib/components/dl-custom-components/name-column/name-column.component.html b/...ca-content/src/lib/components/dl-custom-components/name-column/name-column.component.html
@@ -21,7 +21,10 @@
   </div>
   <div class="aca-name-column-badges">
     <ng-container *ngFor="let badge of badges">
-      <adf-icon class="adf-datatable-cell-badge" [title]="badge.tooltip | translate" [value]="badge.icon" (click)="onBadgeClick(badge)"></adf-icon>
+      <adf-dynamic-component  *ngIf="badge.component; else iconBadge" [id]="badge.component" [data]="{ node: node }"></adf-dynamic-component>
+      <ng-template #iconBadge>
+        <adf-icon  class="adf-datatable-cell-badge" [title]="badge.tooltip | translate" [value]="badge.icon" (click)="onBadgeClick(badge)"></adf-icon>
+      </ng-template>
     </ng-container>
   </div>
 </div>
diff --git a/...ca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss b/...ca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss
@@ -1,17 +1,13 @@
-.adf-datatable-content-cell.adf-name-column.aca-custom-name-column {
-  position: unset;
-}
-
-.adf-datatable-list .adf-datatable-link:hover .aca-name-column-badges {
-  color: var(--adf-theme-foreground-text-color);
-}
-
 .aca-custom-name-column {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
 
+  .aca-name-column-badges {
+    display: flex;
+  }
+
   .aca-name-column-container {
     aca-locked-by {
       display: flex;
@@ -27,3 +23,11 @@
     }
   }
 }
+
+.adf-datatable-content-cell.adf-name-column.aca-custom-name-column {
+  position: unset;
+}
+
+.adf-datatable-list .adf-datatable-link:hover .aca-name-column-badges {
+  color: var(--adf-theme-foreground-text-color);
+}
diff --git a/.../aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.ts b/.../aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.ts
@@ -32,10 +32,11 @@ import { LockedByComponent, isLocked, AppExtensionService, Badge } from '@alfres
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { IconModule } from '@alfresco/adf-core';
+import { ExtensionsModule } from '@alfresco/adf-extensions';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, TranslateModule, LockedByComponent, ContentPipeModule, IconModule],
+  imports: [CommonModule, TranslateModule, LockedByComponent, ContentPipeModule, IconModule, ExtensionsModule],
   selector: 'aca-custom-name-column',
   templateUrl: './name-column.component.html',
   styleUrls: ['./name-column.component.scss'],

diff --git a/projects/aca-shared/package.json b/projects/aca-shared/package.json
@@ -8,6 +8,7 @@
       "@alfresco/adf-content-services": "^6.4.0-6341205853",
       "@alfresco/adf-core": "^6.4.0-6341205853",
       "@alfresco/adf-extensions": "^6.4.0-6341205853",
+      "@alfresco/adf-process-services": "^6.4.0-6341205853",
       "@alfresco/js-api": "^7.1.0-1349",
       "@angular/animations": "^14.1.3",
       "@angular/common": "^14.1.3",