hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-12 12:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Rezart Vata
2022-05-18 16:44:20 +02:00
parent 8498504b93
commit a03557fcad
7 changed files with 122 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
import { SharedModule } from './../../../shared/shared.module'; 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 { SubmissionServiceStub } from '../../../shared/testing/submission-service.stub';
import { SherpaDataResponse } from '../../../shared/mocks/section-sherpa-policies.service.mock'; import { SherpaDataResponse } from '../../../shared/mocks/section-sherpa-policies.service.mock';
import { ComponentFixture, inject, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { ComponentFixture, inject, TestBed, fakeAsync, tick } from '@angular/core/testing';
@@ -59,7 +59,7 @@ describe('SubmissionSectionSherpaPoliciesComponent', () => {
useClass: TranslateLoaderMock useClass: TranslateLoaderMock
} }
}), }),
NgbAccordionModule, NgbCollapseModule,
SharedModule SharedModule
], ],
declarations: [SubmissionSectionSherpaPoliciesComponent], declarations: [SubmissionSectionSherpaPoliciesComponent],
@@ -88,14 +88,6 @@ describe('SubmissionSectionSherpaPoliciesComponent', () => {
expect(component).toBeTruthy(); 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', () => { it('should show refresh button', () => {
expect(de.query(By.css('.refresh-container > button'))).toBeTruthy(); expect(de.query(By.css('.refresh-container > button'))).toBeTruthy();
}); });

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

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

6
src/app/submission/submission.module.ts
View File

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