From e667ec4f2f1428ab0998bc801500fc966d1512c4 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eromano@users.noreply.github.com>
Date: Wed, 23 Oct 2019 12:23:11 +0100
Subject: [PATCH] [AAE-174]  Show radio box in text box when read only (#5182)

* show radio box in text box when read only

* show radio box in text box when read only
---
 .../radio-buttons/radio-buttons.widget.html   |  4 +--
 .../radio-buttons.widget.spec.ts              | 35 ++++++++++++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html b/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html
index 5bcdc3efa5..fc1e74a8be 100644
--- a/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html
+++ b/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html
@@ -2,12 +2,11 @@
      [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id">
     <div class="adf-radio-button-container">
         <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
-        <mat-radio-group class="adf-radio-group" [(ngModel)]="field.value">
+        <mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" *ngIf="!field.readOnly">
             <mat-radio-button
                 [id]="field.id + '-' + opt.id"
                 [name]="field.id"
                 [value]="opt.id"
-                [disabled]="field.readOnly"
                 [checked]="field.value === opt.id"
                 (change)="onOptionClick(opt.id)"
                 color="primary"
@@ -15,6 +14,7 @@
                 {{opt.name}}
             </mat-radio-button>
         </mat-radio-group>
+        <display-text-widget *ngIf="field.readOnly" [field]="field"></display-text-widget>
     </div>
     <error-widget [error]="field.validationSummary" ></error-widget>
     <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
diff --git a/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts b/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts
index 7df6fc7178..a7bc65598d 100644
--- a/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts
+++ b/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.spec.ts
@@ -134,10 +134,15 @@ describe('RadioButtonsWidgetComponent', () => {
         let fixture: ComponentFixture<RadioButtonsWidgetComponent>;
         let element: HTMLElement;
         let stubFormService: FormService;
-        const restOption: FormFieldOption[] = [{ id: 'opt-1', name: 'opt-name-1' }, {
-            id: 'opt-2',
-            name: 'opt-name-2'
-        }];
+        const restOption: FormFieldOption[] = [
+            {
+                id: 'opt-1',
+                name: 'opt-name-1'
+            },
+            {
+                id: 'opt-2',
+                name: 'opt-name-2'
+            }];
 
         beforeEach(async(() => {
             fixture = TestBed.createComponent(RadioButtonsWidgetComponent);
@@ -149,6 +154,28 @@ describe('RadioButtonsWidgetComponent', () => {
             fixture.destroy();
         });
 
+        describe('and radioButton is readonly', () => {
+
+            beforeEach(async(() => {
+                stubFormService = fixture.debugElement.injector.get(FormService);
+                radioButtonWidget.field = new FormFieldModel(new FormModel({ taskId: 'task-id' }), {
+                    id: 'radio-id',
+                    name: 'radio-name',
+                    type: FormFieldTypes.RADIO_BUTTONS,
+                    readOnly: true
+                });
+                radioButtonWidget.field.isVisible = true;
+                const fakeContainer = new ContainerModel(radioButtonWidget.field);
+                radioButtonWidget.field.form.fields.push(fakeContainer);
+                fixture.detectChanges();
+            }));
+
+            it('should show radio buttons as text when is readonly', async(() => {
+                expect(element.querySelector('display-text-widget')).toBeDefined();
+            }));
+
+        });
+
         describe('and radioButton is populated via taskId', () => {
 
             beforeEach(async(() => {