mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-12 12:33:07 +00:00
[CST-5270] fixed accordion issue and changed it to collapsable
This commit is contained in:
Rezart Vata
@@ -1,63 +1,62 @@
|
||||
<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>
|
||||
</ng-template>
|
||||
<ng-template ngbPanelContent>
|
||||
<div class="ml-4">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<p class="m-1">{{ 'submission.sections.sherpa.publisher.policy.embargo' | translate }}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<p class="m-1" *ngIf="!!version.embargo;else noEmbargo">{{version.embargo.amount}}
|
||||
{{version.embargo.units}}</p>
|
||||
<ng-template #noEmbargo>
|
||||
<p class="m-1">{{ 'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</p>
|
||||
</ng-template>
|
||||
<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>
|
||||
</div>
|
||||
<div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
|
||||
<div class="ml-4">
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<p class="m-1">{{ 'submission.sections.sherpa.publisher.policy.embargo' | translate }}</p>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<p class="m-1" *ngIf="!!version.embargo;else noEmbargo">{{version.embargo.amount}}
|
||||
{{version.embargo.units}}</p>
|
||||
<ng-template #noEmbargo>
|
||||
<p class="m-1">{{ 'submission.sections.sherpa.publisher.policy.noembargo' | translate }}</p>
|
||||
</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>
|
||||
</ng-template>
|
||||
</ngb-panel>
|
||||
</ngb-accordion>
|
||||
<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>
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
@@ -13,4 +13,8 @@ export class ContentAccordionComponent {
|
||||
*/
|
||||
@Input() version: PermittedVersions;
|
||||
|
||||
/**
|
||||
* A boolean representing if div should start collapsed
|
||||
*/
|
||||
public isCollapsed = false;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
<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>
|
||||
</ng-template>
|
||||
<ng-template ngbPanelContent>
|
||||
<div #collapse="ngbCollapse" [ngbCollapse]="isCollapsed">
|
||||
<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>
|
||||
</ng-template>
|
||||
</ngb-panel>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</ngb-accordion>
|
||||
|
||||
</ng-container>
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user