From 5f74446bf50ac07a3e6ece2b6cf437a2d733f6da Mon Sep 17 00:00:00 2001 From: Enea Jahollari Date: Wed, 10 May 2023 16:27:53 +0200 Subject: [PATCH] [CST-9636] Added jsdoc comments --- ...ccess-control-array-form.component.spec.ts | 8 +- .../access-control-array-form.component.ts | 126 ++++++++++++------ ...s-control-form-container.component.spec.ts | 4 +- ...access-control-form-container.component.ts | 39 +++++- 4 files changed, 124 insertions(+), 53 deletions(-) diff --git a/src/app/shared/access-control-array-form/access-control-array-form.component.spec.ts b/src/app/shared/access-control-array-form/access-control-array-form.component.spec.ts index 7c3ed06be1..b99a0fff8e 100644 --- a/src/app/shared/access-control-array-form/access-control-array-form.component.spec.ts +++ b/src/app/shared/access-control-array-form/access-control-array-form.component.spec.ts @@ -1,6 +1,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { AccessControlArrayFormComponent, AccessControlItemValue } from './access-control-array-form.component'; +import { AccessControlArrayFormComponent } from './access-control-array-form.component'; import { ReactiveFormsModule } from '@angular/forms'; import { SharedBrowseByModule } from '../browse-by/shared-browse-by.module'; import { CommonModule } from '@angular/common'; @@ -26,7 +26,7 @@ fdescribe('AccessControlArrayFormComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(AccessControlArrayFormComponent); component = fixture.componentInstance; - component.dropdownOptions = [{name: 'Option1'}, {name: 'Option2'}]; + component.dropdownOptions = [{name: 'Option1'}, {name: 'Option2'}] as any; fixture.detectChanges(); }); @@ -54,14 +54,14 @@ fdescribe('AccessControlArrayFormComponent', () => { }); it('should set access control item value', () => { - const item: AccessControlItemValue = { itemName: 'item1', startDate: '2022-01-01', endDate: '2022-02-01' }; + const item = { itemName: 'item1', startDate: '2022-01-01', endDate: '2022-02-01' }; component.addAccessControlItem(item.itemName); component.accessControl.controls[0].patchValue(item); expect(component.form.value.accessControl[0]).toEqual(item); }); it('should reset form value', () => { - const item: AccessControlItemValue = { itemName: 'item1', startDate: '2022-01-01', endDate: '2022-02-01' }; + const item = { itemName: 'item1', startDate: '2022-01-01', endDate: '2022-02-01' }; component.addAccessControlItem(item.itemName); component.accessControl.controls[1].patchValue(item); component.reset(); diff --git a/src/app/shared/access-control-array-form/access-control-array-form.component.ts b/src/app/shared/access-control-array-form/access-control-array-form.component.ts index 090b22d94c..60060dec16 100644 --- a/src/app/shared/access-control-array-form/access-control-array-form.component.ts +++ b/src/app/shared/access-control-array-form/access-control-array-form.component.ts @@ -31,7 +31,89 @@ export class AccessControlArrayFormComponent implements OnInit, OnDestroy { ngOnInit(): void { this.addAccessControlItem(); + this.handleValidationOnFormArrayChanges(); + } + /** + * Get the access control form array. + */ + get accessControl() { + return this.form.get('accessControl') as FormArray; + } + + /** + * Add a new access control item to the form. + * Start and end date are disabled by default. + * @param itemName The name of the item to add + */ + addAccessControlItem(itemName: string = null) { + this.accessControl.push(this.fb.group({ + itemName, + startDate: new FormControl({ value: null, disabled: true }), + endDate: new FormControl({ value: null, disabled: true }) + })); + } + + /** + * Remove an access control item from the form. + * @param index + */ + removeAccessControlItem(index: number) { + this.accessControl.removeAt(index); + } + + /** + * Get the value of the form. + * This will be used to read the form value from the parent component. + * @return The form value + */ + getValue() { + return this.form.value; + } + + /** + * Set the value of the form from the parent component. + */ + reset() { + this.accessControl.reset([]); + } + + /** + * Disable the form. + * This will be used to disable the form from the parent component. + * This will also disable all date controls. + */ + disable() { + this.form.disable(); + + // disable all date controls + for (const control of this.accessControl.controls) { + control.get('startDate').disable(); + control.get('endDate').disable(); + } + } + + /** + * Enable the form. + * This will be used to enable the form from the parent component. + * This will also enable all date controls. + */ + enable() { + this.form.enable(); + + // enable date controls + for (const control of this.accessControl.controls) { + control.get('startDate').enable(); + control.get('endDate').enable(); + } + } + + /** + * Handle validation on form array changes. + * This will be used to enable/disable date controls based on the selected item. + * @private + */ + private handleValidationOnFormArrayChanges() { this.accessControl.valueChanges .pipe( distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)), @@ -61,50 +143,6 @@ export class AccessControlArrayFormComponent implements OnInit, OnDestroy { }); } - get accessControl() { - return this.form.get('accessControl') as FormArray; - } - - addAccessControlItem(itemName: string = null) { - this.accessControl.push(this.fb.group({ - itemName, - startDate: new FormControl({ value: null, disabled: true }), - endDate: new FormControl({ value: null, disabled: true }) - })); - } - - removeAccessControlItem(index: number) { - this.accessControl.removeAt(index); - } - - getValue() { - return this.form.value; - } - - reset() { - this.accessControl.reset([]); - } - - disable() { - this.form.disable(); - - // disable all date controls - for (const control of this.accessControl.controls) { - control.get('startDate').disable(); - control.get('endDate').disable(); - } - } - - enable() { - this.form.enable(); - - // enable date controls - for (const control of this.accessControl.controls) { - control.get('startDate').enable(); - control.get('endDate').enable(); - } - } - ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.spec.ts b/src/app/shared/access-control-form-container/access-control-form-container.component.spec.ts index 871e301209..7412b9569f 100644 --- a/src/app/shared/access-control-form-container/access-control-form-container.component.spec.ts +++ b/src/app/shared/access-control-form-container/access-control-form-container.component.spec.ts @@ -3,8 +3,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; import { AccessControlFormContainerComponent } from './access-control-form-container.component'; describe('AccessControlFormContainerComponent', () => { - let component: AccessControlFormContainerComponent; - let fixture: ComponentFixture; + let component: AccessControlFormContainerComponent; + let fixture: ComponentFixture>; beforeEach(async () => { await TestBed.configureTestingModule({ diff --git a/src/app/shared/access-control-form-container/access-control-form-container.component.ts b/src/app/shared/access-control-form-container/access-control-form-container.component.ts index 9efc90a3f2..23ba64c4f6 100644 --- a/src/app/shared/access-control-form-container/access-control-form-container.component.ts +++ b/src/app/shared/access-control-form-container/access-control-form-container.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, Input, NgModule, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, Input, NgModule, OnDestroy, ViewChild } from '@angular/core'; import { concatMap, Observable, shareReplay } from 'rxjs'; import { RemoteData } from '../../core/data/remote-data'; import { Item } from '../../core/shared/item.model'; @@ -30,11 +30,23 @@ import { BulkAccessConditionOptions } from '../../core/config/models/bulk-access styleUrls: [ './access-control-form-container.component.scss' ], exportAs: 'dsAccessControlForm' }) -export class AccessControlFormContainerComponent { +export class AccessControlFormContainerComponent implements OnDestroy { + /** + * Will be used to determine if we need to show the limit changes to specific bitstreams radio buttons + */ @Input() showLimitToSpecificBitstreams = false; + + /** + * The item to which the access control form applies + */ @Input() itemRD: RemoteData; + /** + * Whether to show the submit and cancel button + * We want to hide these buttons when the form is + * used in an accordion, and we want to show buttons somewhere else + */ @Input() showSubmit = true; @ViewChild('bitstreamAccessCmp', { static: true }) bitstreamAccessCmp: AccessControlArrayFormComponent; @@ -57,6 +69,9 @@ export class AccessControlFormContainerComponent { tap(x => console.log('options', x)) ); + /** + * Will be used from a parent component to read the value of the form + */ getFormValue() { return { bitstream: this.bitstreamAccessCmp.getValue(), @@ -65,12 +80,20 @@ export class AccessControlFormContainerComponent { }; } + /** + * Reset the form to its initial state + * This will also reset the state of the child components (bitstream and item access) + */ reset() { this.bitstreamAccessCmp.reset(); this.itemAccessCmp.reset(); this.state = initialState; } + /** + * Submit the form + * This will create a payload file and execute the script + */ submit() { const bitstreamAccess = this.bitstreamAccessCmp.getValue(); const itemAccess = this.itemAccessCmp.getValue(); @@ -89,6 +112,12 @@ export class AccessControlFormContainerComponent { }); } + /** + * Handle the status change of the access control form (item or bitstream) + * This will enable/disable the access control form for the item or bitstream + * @param type The type of the access control form (item or bitstream) + * @param active boolean indicating whether the access control form should be enabled or disabled + */ handleStatusChange(type: 'item' | 'bitstream', active: boolean) { if (type === 'bitstream') { active ? this.bitstreamAccessCmp.enable() : this.bitstreamAccessCmp.disable(); @@ -97,6 +126,11 @@ export class AccessControlFormContainerComponent { } } + /** + * Open the modal to select bitstreams for which to change the access control + * This will open the modal and pass the currently selected bitstreams + * @param item The item for which to change the access control + */ openSelectBitstreamsModal(item: Item) { const ref = this.modalService.open(ItemAccessControlSelectBitstreamsModalComponent); ref.componentInstance.selectedBitstreams = this.state.bitstream.selectedBitstreams; @@ -111,7 +145,6 @@ export class AccessControlFormContainerComponent { }); } - // eslint-disable-next-line @angular-eslint/use-lifecycle-interface ngOnDestroy(): void { this.selectableListService.deselectAll(ITEM_ACCESS_CONTROL_SELECT_BITSTREAMS_LIST_ID); }