From 79cc372ed548e76b8b8287ce91bf3293ede2082f Mon Sep 17 00:00:00 2001
From: amohammedalfresco <abdul.mohammed@alfresco.com>
Date: Thu, 21 Oct 2021 17:19:18 +0100
Subject: [PATCH] Adjust table visualization

---
 .../attach-file-cloud-widget.component.html        | 14 ++++++++++----
 .../attach-file-cloud-widget.component.scss        |  3 ++-
 .../attach-file-cloud-widget.component.ts          |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
index 0e8e674005..85bc9cfd89 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
@@ -17,15 +17,21 @@
 <div id="adf-attach-widget-readonly-list">
     <table mat-table [dataSource]="fileData" class="mat-elevation-z8" *ngIf="hasFile">
 
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef> File Name </th>
+        <ng-container matColumnDef="icon">
+            <th mat-header-cell *matHeaderCellDef></th>
             <td mat-cell *matCellDef="let element">
                 <mat-icon mat-list-icon class="adf-datatable-selected" *ngIf="selectedNode && element.id === selectedNode.id" (click)="onRowClicked(element)">
                     check_circle
                 </mat-icon>
                 <img mat-list-icon class="adf-attach-widget__icon" *ngIf="!selectedNode || element.id !== selectedNode.id" [id]="'file-'+element?.id+'-icon'" (click)="onRowClicked(element)"
-                        [src]="element.content ? getIcon(element.content.mimeType) : getIcon(element['mimeType'])" [alt]="mimeTypeIcon"
-                        role="button" tabindex="0" />
+                     [src]="element.content ? getIcon(element.content.mimeType) : getIcon(element['mimeType'])" [alt]="mimeTypeIcon"
+                     role="button" tabindex="0" />
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef> File Name </th>
+            <td mat-cell *matCellDef="let element">
                 <span matLine id="{{'file-'+element?.id}}" role="button" tabindex="0" class="adf-file" (click)="onRowClicked(element)">{{element.name}}</span>
             </td>
         </ng-container>
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
index 8ecbcd51a8..3ae3c951bb 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
@@ -101,5 +101,6 @@ table {
     font-weight: bold;
 }
 
-.mat-line {
+.adf-datatable-selected {
+    padding: 6px;
 }
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts
index d23714e395..fe4a6d6c85 100644
--- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts
+++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts
@@ -71,7 +71,7 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i
 
     contentModelProps = [ 'cm:versionLabel', 'cm:versionType'];
     fileData = [];
-    displayedColumns = ['name', ...this.contentModelProps, 'action'];
+    displayedColumns = ['icon', 'name', ...this.contentModelProps, 'action'];
 
     _nodesApi: NodesApi;
     get nodesApi(): NodesApi {