fix readonly attach file scenarios (#5365)

lib/core/i18n/en.json

@@ -26,6 +26,7 @@
       "REMOVE_FILE": "Remove",
       "UPLOAD": "UPLOAD",
       "REQUIRED": "*Required",
+      "NO_FILE_ATTACHED" : "No file attached",
       "VALIDATOR": {
         "INVALID_NUMBER": "Use a different number format",
         "INVALID_DATE": "Use a different date format",

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html

@@ -1,6 +1,6 @@
 <div class="adf-attach-widget {{field.className}}"
-    [class.adf-invalid]="!field.isValid"
+     [class.adf-invalid]="!field.isValid"
-    [class.adf-readonly]="field.readOnly">
+     [class.adf-readonly]="field.readOnly">
     <label class="adf-label" [attr.for]="field.id">{{field.name}}
         <span *ngIf="isRequired()">*</span>
     </label>
@@ -10,26 +10,27 @@
                 {{ 'FORM.FIELD.UPLOAD' | translate }}
                 <mat-icon>file_upload</mat-icon>
                 <input #uploadFiles
-                        [multiple]="multipleOption"
+                       [multiple]="multipleOption"
-                        type="file"
+                       type="file"
-                        [id]="field.id"
+                       [id]="field.id"
-                        (change)="onAttachFileChanged($event)"/>
+                       (change)="onAttachFileChanged($event)"/>
             </a>
         </div>
         <div class="adf-attach-widget__menu-upload" *ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
             <button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id">
-                    {{ 'FORM.FIELD.UPLOAD' | translate }}
+                {{ 'FORM.FIELD.UPLOAD' | translate }}
-                    <mat-icon>attach_file</mat-icon>
+                <mat-icon>attach_file</mat-icon>
             </button>
             <mat-menu #menu="matMenu" class="adf-attach-widget__menu-content">
                 <div *ngIf="isContentSourceSelected()">
                     <button mat-menu-item
                             id="attach-{{field.params?.fileSource?.name}}"
-                           (click)="uploadFileFromCS()">
+                            (click)="uploadFileFromCS()">
-                           {{field.params?.fileSource?.name}}
+                        {{field.params?.fileSource?.name}}
-                            <mat-icon>
+                        <mat-icon>
-                                <img alt="alfresco" class="adf-attach-widget__image-logo" src="../assets/images/alfresco-flower.svg">
+                            <img alt="alfresco" class="adf-attach-widget__image-logo"
-                            </mat-icon>
+                                 src="../assets/images/alfresco-flower.svg">
+                        </mat-icon>
                     </button>
                 </div>
             </mat-menu>
@@ -53,12 +54,12 @@
             </button>
             <mat-menu #fileActionMenu="matMenu" xPosition="before">
                 <button id="{{'file-'+file?.id+'-show-file'}}"
-                    mat-menu-item (click)="onAttachFileClicked(file)">
+                        mat-menu-item (click)="onAttachFileClicked(file)">
                     <mat-icon>image</mat-icon>
                     <span>{{ 'FORM.FIELD.SHOW_FILE' | translate }}</span>
                 </button>
                 <button id="{{'file-'+file?.id+'-download-file'}}"
-                    mat-menu-item (click)="downloadContent(file)">
+                        mat-menu-item (click)="downloadContent(file)">
                     <mat-icon>file_download</mat-icon>
                     <span>{{ 'FORM.FIELD.DOWNLOAD_FILE' | translate }}</span>
                 </button>
@@ -71,6 +72,10 @@
             </mat-menu>
         </mat-list-item>
     </mat-list>
+    <div *ngIf="!hasFile && field.readOnly" id="{{'adf-attach-empty-list-'+field.id}}">
+        {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}
+    </div>
+
 </div>
 
 <error-widget [error]="field.validationSummary"></error-widget>

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts

@@ -234,6 +234,56 @@ describe('AttachFileCloudWidgetComponent', () => {
         });
     }));
 
+    describe('when is readonly', () => {
+
+        it('should show empty list message when there are no file', async(() => {
+            widget.field = new FormFieldModel(new FormModel(), {
+                type: FormFieldTypes.UPLOAD,
+                readOnly: true,
+                value: []
+            });
+            widget.field.id = 'empty-test';
+            widget.field.params = <FormFieldMetadata> onlyLocalParams;
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#adf-attach-empty-list-empty-test')).not.toBeNull();
+            });
+        }));
+
+        it('should not show empty list message when there are files', async(() => {
+            widget.field = new FormFieldModel(new FormModel(), {
+                type: FormFieldTypes.UPLOAD,
+                readOnly: true,
+                value: [fakePngAnswer]
+            });
+            widget.field.id = 'fill-test';
+            widget.field.params = <FormFieldMetadata> onlyLocalParams;
+            fixture.detectChanges();
+            fixture.whenStable().then(() => {
+                expect(element.querySelector('#adf-attach-empty-list-fill-test')).toBeNull();
+            });
+        }));
+
+        it('should not show remove button when there are files attached', async(() => {
+            widget.field = new FormFieldModel(new FormModel(), {
+                type: FormFieldTypes.UPLOAD,
+                readOnly: true,
+                value: [fakePngAnswer]
+            });
+            widget.field.id = 'fill-test';
+            widget.field.params = <FormFieldMetadata> onlyLocalParams;
+
+            fixture.detectChanges();
+            const menuButton: HTMLButtonElement = <HTMLButtonElement> (
+                fixture.debugElement.query(By.css('#file-1155-option-menu'))
+                    .nativeElement
+            );
+            menuButton.click();
+            fixture.detectChanges();
+            expect(fixture.debugElement.query(By.css('#file-1155-remove'))).toBeNull();
+        }));
+    });
+
     describe('when a file is uploaded', () => {
         beforeEach(async(() => {
             widget.field = new FormFieldModel(new FormModel(), {

lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html

@@ -34,6 +34,11 @@
                        (change)="onFileChanged($event)"/>
             </button>
         </div>
+
+        <div *ngIf="!hasFile && field.readOnly">
+            {{ 'FORM.FIELD.NO_FILE_ATTACHED' | translate }}
+        </div>
+
     </div>
     <error-widget [error]="field.validationSummary"></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>