Disabled add section button when no options are available

This commit is contained in:
Giuseppe Digilio
2019-02-21 10:44:35 +01:00
parent b71e7fa8f2
commit c73b4c71bf
3 changed files with 17 additions and 6 deletions

View File

@@ -5,6 +5,7 @@
[ngClass]="{'w-100': windowService.isXs()}">
<button class="btn btn-outline-primary dropdown-toggle"
id="sectionControls"
[disabled]="!(hasSections$ | async)"
[ngClass]="{'w-100': (windowService.isXs() | async)}"
ngbDropdownToggle>
{{ 'submission.sections.general.add-more' | translate }} <i class="fa fa-plus" aria-hidden="true"></i>
@@ -13,10 +14,10 @@
class="sections-dropdown-menu"
aria-labelledby="sectionControls"
[ngClass]="{'w-100': (windowService.isXs() | async)}">
<button class="dropdown-item disabled" *ngIf="(sectionList | async)?.length == 0">
<button class="dropdown-item disabled" *ngIf="!(hasSections$ | async)">
{{ 'submission.sections.general.no-sections' | translate }}
</button>
<button class="dropdown-item" *ngFor="let listItem of (sectionList | async)" (click)="addSection(listItem.id)">
<button class="dropdown-item" *ngFor="let listItem of (sectionList$ | async)" (click)="addSection(listItem.id)">
{{'submission.sections.'+listItem.header | translate }}
</button>
</div>

View File

@@ -130,13 +130,18 @@ describe('SubmissionFormSectionAddComponent Component', () => {
fixture.detectChanges();
comp.sectionList.subscribe((list) => {
comp.sectionList$.subscribe((list) => {
expect(list).toEqual(mockAvailableSections);
})
});
comp.hasSections$.subscribe((hasSections) => {
expect(hasSections).toEqual(true);
})
});
it('should call addSection', () => {
submissionServiceStub.getDisabledSectionsList.and.returnValue(observableOf(mockAvailableSections));
comp.addSection(mockAvailableSections[1].id);
fixture.detectChanges();

View File

@@ -6,6 +6,7 @@ import { SectionsService } from '../../sections/sections.service';
import { HostWindowService } from '../../../shared/host-window.service';
import { SubmissionService } from '../../submission.service';
import { SectionDataObject } from '../../sections/models/section-data.model';
import { map } from 'rxjs/operators';
@Component({
selector: 'ds-submission-form-section-add',
@@ -16,7 +17,8 @@ export class SubmissionFormSectionAddComponent implements OnInit {
@Input() collectionId: string;
@Input() submissionId: string;
public sectionList: Observable<SectionDataObject[]>;
public sectionList$: Observable<SectionDataObject[]>;
public hasSections$: Observable<boolean>;
constructor(private sectionService: SectionsService,
private submissionService: SubmissionService,
@@ -24,7 +26,10 @@ export class SubmissionFormSectionAddComponent implements OnInit {
}
ngOnInit() {
this.sectionList = this.submissionService.getDisabledSectionsList(this.submissionId);
this.sectionList$ = this.submissionService.getDisabledSectionsList(this.submissionId);
this.hasSections$ = this.sectionList$.pipe(
map((list: SectionDataObject[]) => list.length > 0)
)
}
addSection(sectionId) {