[CST-5270] fixed accordion issue and changed it to collapsable

src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html

@@ -1,16 +1,16 @@
-<ngb-accordion #acc="ngbAccordion" [activeIds]="'version'">
-    <ngb-panel id="version">
-        <ng-template ngbPanelTitle>
-            <span class="float-left section-title" tabindex="0">
-                {{version.articleVersion | titlecase}} {{ 'submission.sections.sherpa.publisher.policy.version' |
-                translate }}
-            </span>
-            <div class="d-inline-block float-right">
-                <span *ngIf="acc.isExpanded('version')" class="fas fa-chevron-up fa-fw"></span>
-                <span *ngIf="!acc.isExpanded('version')" class="fas fa-chevron-down fa-fw"></span>
+<div class="mb-3 border-bottom" data-test="collapse">
+    <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+        <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+            [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+            {{version.articleVersion | titlecase}} {{ 'submission.sections.sherpa.publisher.policy.version' | translate
+            }}
+        </button>
+        <div class="d-inline-block">
+            <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+            <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
         </div>
-        </ng-template>
-        <ng-template ngbPanelContent>
+    </div>
+    <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
         <div class="ml-4">
             <div class="row">
                 <div class="col-4">
@@ -58,6 +58,5 @@
                 </div>
             </div>
         </div>
-        </ng-template>
-    </ngb-panel>
-</ngb-accordion>
+    </div>
+</div>

src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.spec.ts

@@ -1,4 +1,4 @@
-import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateLoaderMock } from '../../../../shared/mocks/translate-loader.mock';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
@@ -23,7 +23,7 @@ describe('ContentAccordionComponent', () => {
             useClass: TranslateLoaderMock
           }
         }),
-        NgbAccordionModule
+        NgbCollapseModule
       ],
       declarations: [ContentAccordionComponent]
     })
@@ -42,10 +42,6 @@ describe('ContentAccordionComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should show accordion', () => {
-    expect(de.query(By.css('ngb-accordion'))).toBeTruthy();
-  });
-
   it('should show 5 rows', () => {
     expect(de.queryAll(By.css('.row')).length).toEqual(5);
   });

src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.ts

@@ -13,4 +13,8 @@ export class ContentAccordionComponent {
    */
   @Input() version: PermittedVersions;
 
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = false;
 }

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html

@@ -7,56 +7,56 @@
     </button>
 </div>
 
-<ngb-accordion *ngVar="(sherpaPoliciesData$ | async)?.sherpaResponse as sherpaData" #acc="ngbAccordion">
+<ng-container *ngVar="(sherpaPoliciesData$ | async)?.sherpaResponse as sherpaData">
     <ng-container *ngIf="!hasNoData()">
         <ng-container *ngFor="let journal of sherpaData.journals;let j=index;">
-            <ngb-panel id="publication-information-{{j}}">
-                <ng-template ngbPanelTitle>
-                    <span class="float-left section-title"
-                        tabindex="0">{{'submission.sections.sherpa.publication.information'
-                        | translate}}</span>
-                    <div class="d-inline-block float-right">
-                        <span *ngIf="acc.isExpanded('publication-information-'+j)"
-                            class="fas fa-chevron-up fa-fw"></span>
-                        <span *ngIf="!acc.isExpanded('publication-information-'+j)"
-                            class="fas fa-chevron-down fa-fw"></span>
+            <div class="mb-3 border-bottom" data-test="collapse">
+                <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+                    <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+                        [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+                        {{'submission.sections.sherpa.publication.information' | translate}}
+                    </button>
+                    <div class="d-inline-block">
+                        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+                        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
                     </div>
-                </ng-template>
-                <ng-template ngbPanelContent>
+                </div>
+                <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
                     <ds-publication-information [journal]="journal"></ds-publication-information>
-                </ng-template>
-            </ngb-panel>
-            <ng-container *ngFor="let policy of journal.policies; let p=index;">
-                <ngb-panel id="publisher-policy-{{j}}-{{p}}">
-                    <ng-template ngbPanelTitle>
-                        <span class="float-left section-title"
-                            tabindex="0">{{'submission.sections.sherpa.publisher.policy'
-                            | translate}}</span>
-                        <div class="d-inline-block float-right">
-                            <span *ngIf="acc.isExpanded('publisher-policy-'+j+'-'+p)"
-                                class="fas fa-chevron-up fa-fw"></span>
-                            <span *ngIf="!acc.isExpanded('publisher-policy-'+j+'-'+p)"
-                                class="fas fa-chevron-down fa-fw"></span>
                 </div>
-                    </ng-template>
-                    <ng-template ngbPanelContent>
+            </div>
+            <div *ngFor="let policy of journal.policies; let p=index;" class="mb-3 border-bottom" data-test="collapse">
+                <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+                    <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+                        [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+                        {{'submission.sections.sherpa.publisher.policy' | translate}}
+                    </button>
+                    <div class="d-inline-block">
+                        <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+                        <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+                    </div>
+                </div>
+                <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
                     <ds-publisher-policy [policy]="policy"></ds-publisher-policy>
-                    </ng-template>
-                </ngb-panel>
-            </ng-container>
-        </ng-container>
-        <ngb-panel id="metadata">
-            <ng-template ngbPanelTitle>
-                <span class="section-title" tabindex="0">{{'submission.sections.sherpa.record.information'
-                    | translate}}</span>
-                <div class="d-inline-block float-right">
-                    <span *ngIf="acc.isExpanded('metadata')" class="fas fa-chevron-up fa-fw"></span>
-                    <span *ngIf="!acc.isExpanded('metadata')" class="fas fa-chevron-down fa-fw"></span>
                 </div>
-            </ng-template>
-            <ng-template ngbPanelContent>
-                <ds-metadata-information [metadata]="sherpaData.metadata"></ds-metadata-information>
-            </ng-template>
-        </ngb-panel>
+            </div>
+        </ng-container>
+
+        <div class="mb-3 border-bottom" data-test="collapse">
+            <div class="w-100 d-flex justify-content-between collapse-toggle" (click)="collapse.toggle()">
+                <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
+                    [attr.aria-expanded]="!collapse.collapsed" aria-controls="collapseExample">
+                    {{'submission.sections.sherpa.record.information' | translate}}
+                </button>
+                <div class="d-inline-block">
+                    <span *ngIf="collapse.collapsed" class="fas fa-chevron-down"></span>
+                    <span *ngIf="!collapse.collapsed" class="fas fa-chevron-up"></span>
+                </div>
+            </div>
+            <div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
+                <ds-metadata-information [metadata]="sherpaData.metadata"></ds-metadata-information>
+            </div>
+        </div>
+    </ng-container>
+
 </ng-container>
-</ngb-accordion>

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.spec.ts

@@ -1,5 +1,5 @@
 import { SharedModule } from './../../../shared/shared.module';
-import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { SubmissionServiceStub } from '../../../shared/testing/submission-service.stub';
 import { SherpaDataResponse } from '../../../shared/mocks/section-sherpa-policies.service.mock';
 import { ComponentFixture, inject, TestBed, fakeAsync, tick } from '@angular/core/testing';
@@ -59,7 +59,7 @@ describe('SubmissionSectionSherpaPoliciesComponent', () => {
               useClass: TranslateLoaderMock
             }
           }),
-          NgbAccordionModule,
+          NgbCollapseModule,
           SharedModule
         ],
         declarations: [SubmissionSectionSherpaPoliciesComponent],
@@ -88,14 +88,6 @@ describe('SubmissionSectionSherpaPoliciesComponent', () => {
       expect(component).toBeTruthy();
     });
 
-    it('should show accordions', () => {
-      expect(de.query(By.css('ngb-accordion'))).toBeTruthy();
-    });
-
-    it('should show expanded accordion', () => {
-      expect(component.acc.first.isExpanded('publication-information-0')).toBeTrue();
-    });
-
     it('should show refresh button', () => {
       expect(de.query(By.css('.refresh-container > button'))).toBeTruthy();
     });

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.ts

@@ -27,8 +27,6 @@ import { debounce, debounceTime, timeInterval } from 'rxjs/operators';
 @renderSectionFor(SectionsType.SherpaPolicies)
 export class SubmissionSectionSherpaPoliciesComponent extends SectionModelComponent {
 
-  @ViewChildren('acc', { emitDistinctChangesOnly: true }) acc: QueryList<any>;
-
   /**
    * The accesses section data
    * @type {WorkspaceitemSectionAccessesObject}
@@ -47,6 +45,11 @@ export class SubmissionSectionSherpaPoliciesComponent extends SectionModelCompon
    */
   protected subs: Subscription[] = [];
 
+  /**
+   * A boolean representing if div should start collapsed
+   */
+  public isCollapsed = false;
+
   /**
    * Initialize instance variables
    *
@@ -74,17 +77,6 @@ export class SubmissionSectionSherpaPoliciesComponent extends SectionModelCompon
       .forEach((subscription) => subscription.unsubscribe());
   }
 
-  /**
-   * Expand all primary accordions
-   */
-  ngAfterViewInit() {
-    if (this.acc) {
-      this.acc.forEach(accordion => {
-        accordion.expandAll();
-      });
-    }
-  }
-
 
   /**
    * Initialize all instance variables and retrieve collection default access conditions
@@ -98,18 +90,6 @@ export class SubmissionSectionSherpaPoliciesComponent extends SectionModelCompon
           this.sherpaPoliciesData$.next(sherpaPolicies);
         })
     );
-
-    this.subs.push(
-      this.sherpaPoliciesData$.pipe(
-        debounceTime(500)
-      ).subscribe((sherpaPolicies: WorkspaceitemSectionSherpaPoliciesObject) => {
-        if (this.acc) {
-          this.acc.forEach(accordion => {
-            accordion.expandAll();
-          });
-        }
-      })
-    );
   }
 
   /**

src/app/submission/submission.module.ts

@@ -50,7 +50,7 @@ import { ThemedSubmissionEditComponent } from './edit/themed-submission-edit.com
 import { ThemedSubmissionSubmitComponent } from './submit/themed-submission-submit.component';
 import { ThemedSubmissionImportExternalComponent } from './import-external/themed-submission-import-external.component';
 import { FormModule } from '../shared/form/form.module';
-import { NgbAccordionModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { SubmissionSectionAccessesComponent } from './sections/accesses/section-accesses.component';
 import { SubmissionAccessesConfigService } from '../core/config/submission-accesses-config.service';
 import { SectionAccessesService } from './sections/accesses/section-accesses.service';
@@ -113,8 +113,8 @@ const DECLARATIONS = [
     JournalEntitiesModule.withEntryComponents(),
     ResearchEntitiesModule.withEntryComponents(),
     FormModule,
-    NgbAccordionModule,
-    NgbModalModule
+    NgbModalModule,
+    NgbCollapseModule,
   ],
   declarations: DECLARATIONS,
   exports: DECLARATIONS,