[CST-9636] Refactor access control array form to accept dropdown options

src/app/shared/access-control-array-form/access-control-array-form.component.html

@@ -7,7 +7,7 @@
       <div>
         <select id="accesscontroloption" formControlName="itemName" class="form-control">
           <option value=""></option>
-          <option *ngFor="let option of (dropdownData$ | async)" [value]="option.name">
+          <option *ngFor="let option of dropdownOptions" [value]="option.name">
             {{ option.name }}
           </option>
         </select>
@@ -20,7 +20,7 @@
             placeholder="yyyy-mm-dd"
             name="dp"
             formControlName="startDate"
-            [minDate]="control | maxStartDate: (dropdownData$ | async)"
+            [minDate]="control | maxStartDate: dropdownOptions"
             ngbDatepicker
             #d="ngbDatepicker"
           />
@@ -40,7 +40,7 @@
             placeholder="yyyy-mm-dd"
             name="dp"
             formControlName="endDate"
-            [maxDate]="control | maxEndDate: (dropdownData$ | async)"
+            [maxDate]="control | maxEndDate: dropdownOptions"
             ngbDatepicker
             #d1="ngbDatepicker"
           />

src/app/shared/access-control-array-form/access-control-array-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, NgModule, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, NgModule, OnDestroy, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormArray, FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { SharedBrowseByModule } from '../browse-by/shared-browse-by.module';
@@ -7,21 +7,11 @@ import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
 import { ControlMaxStartDatePipe } from './control-max-start-date.pipe';
 import { ControlMaxEndDatePipe } from './control-max-end-date.pipe';
 
-import { distinctUntilChanged, map, shareReplay, takeUntil, tap } from 'rxjs/operators';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
-import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { AccessesConditionOption } from '../../core/config/models/config-accesses-conditions-options.model';
-import { RemoteData } from '../../core/data/remote-data';
-import { BulkAccessConditionOptions } from '../../core/config/models/bulk-access-condition-options.model';
-import { BulkAccessConfigDataService } from '../../core/config/bulk-access-config-data.service';
 
 
-// will be used on the form value
-export interface AccessControlItemValue {
-  itemName: string | null; // item name
-  startDate?: string;
-  endDate?: string;
-}
-
 @Component({
   selector: 'ds-access-control-array-form',
   templateUrl: './access-control-array-form.component.html',
@@ -29,6 +19,7 @@ export interface AccessControlItemValue {
   exportAs: 'accessControlArrayForm'
 })
 export class AccessControlArrayFormComponent implements OnInit, OnDestroy {
+  @Input() dropdownOptions: AccessesConditionOption[] = [];
 
   private destroy$ = new Subject<void>();
 
@@ -36,27 +27,9 @@ export class AccessControlArrayFormComponent implements OnInit, OnDestroy {
     accessControl: this.fb.array([])
   });
 
-  constructor(private bulkAccessConfigService: BulkAccessConfigDataService,
+  constructor(private fb: FormBuilder) {}
-              private fb: FormBuilder) {
-  }
-
-  dropdownData$ = this.bulkAccessConfigService.findByPropertyName('default').pipe(
-    getFirstCompletedRemoteData(),
-    map((configRD: RemoteData<BulkAccessConditionOptions>) => configRD.hasSucceeded ? configRD.payload : null),
-    shareReplay(1),
-    tap(console.log)
-  );
 
   ngOnInit(): void {
-    // console.log(this.dropdownOptions);
-/*    if (this.accessControlItems.length === 0) {
-      this.addAccessControlItem();
-    } else {
-      for (const item of this.accessControlItems) {
-        this.addAccessControlItem(item.itemName);
-      }
-    }*/
-
     this.addAccessControlItem();
 
     this.accessControl.valueChanges

src/app/shared/access-control-form-container/access-control-form-container.component.html

@@ -48,7 +48,10 @@
             </div>
           </div>
 
-          <ds-access-control-array-form #itemAccessCmp></ds-access-control-array-form>
+          <ds-access-control-array-form
+            #itemAccessCmp
+            [dropdownOptions]="(dropdownData$ | async)?.itemAccessConditionOptions || []">
+          </ds-access-control-array-form>
 
         </div>
         <div class="col-12 col-md-6">
@@ -125,23 +128,24 @@
           </div>
 
           <div class="mt-3">
-            <h5>
+            <h5>{{'access-control-access-conditions' | translate}}</h5>
-              {{'access-control-access-conditions' | translate}}
-            </h5>
 
             <div class="alert alert-warning">
               {{'access-control-no-access-conditions-warning-message' | translate}}
             </div>
           </div>
 
-          <ds-access-control-array-form #bitstreamAccessCmp></ds-access-control-array-form>
+          <ds-access-control-array-form
+            #bitstreamAccessCmp
+            [dropdownOptions]="(dropdownData$ | async)?.bitstreamAccessConditionOptions || []">
+          </ds-access-control-array-form>
 
         </div>
       </div>
 
-      <hr *ngIf="!hideSubmit">
+      <hr *ngIf="showSubmit">
 
-      <div *ngIf="!hideSubmit" class="d-flex justify-content-end">
+      <div *ngIf="showSubmit" class="d-flex justify-content-end">
         <button class="btn btn-lg btn-outline-primary mr-3" (click)="reset()">
           {{ 'access-control-reset' | translate }}
         </button>

src/app/shared/access-control-form-container/access-control-form-container.component.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, Input, NgModule, ViewChild } from '@angular/core';
-import { concatMap } from 'rxjs';
+import { concatMap, Observable, shareReplay } from 'rxjs';
 import { RemoteData } from '../../core/data/remote-data';
 import { Item } from '../../core/shared/item.model';
 import {
@@ -9,7 +9,7 @@ import {
 import { BulkAccessControlService } from './bulk-access-control.service';
 import { SelectableListService } from '../object-list/selectable-list/selectable-list.service';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
-import { take } from 'rxjs/operators';
+import { map, take, tap } from 'rxjs/operators';
 import { CommonModule } from '@angular/common';
 import { ListableObject } from '../object-collection/shared/listable-object.model';
 import { SharedModule } from '../shared.module';
@@ -21,6 +21,8 @@ import {
   ItemAccessControlSelectBitstreamsModalComponent
 } from './item-access-control-select-bitstreams-modal/item-access-control-select-bitstreams-modal.component';
 import { BulkAccessConfigDataService } from '../../core/config/bulk-access-config-data.service';
+import { getFirstCompletedRemoteData } from '../../core/shared/operators';
+import { BulkAccessConditionOptions } from '../../core/config/models/bulk-access-condition-options.model';
 
 @Component({
   selector: 'ds-access-control-form-container',
@@ -28,12 +30,12 @@ import { BulkAccessConfigDataService } from '../../core/config/bulk-access-confi
   styleUrls: [ './access-control-form-container.component.scss' ],
   exportAs: 'dsAccessControlForm'
 })
-export class AccessControlFormContainerComponent<T extends DSpaceObject> implements OnInit {
+export class AccessControlFormContainerComponent<T extends DSpaceObject> {
 
   @Input() showLimitToSpecificBitstreams = false;
   @Input() itemRD: RemoteData<T>;
 
-  @Input() hideSubmit = false;
+  @Input() showSubmit = true;
 
   @ViewChild('bitstreamAccessCmp', { static: true }) bitstreamAccessCmp: AccessControlArrayFormComponent;
   @ViewChild('itemAccessCmp', { static: true }) itemAccessCmp: AccessControlArrayFormComponent;
@@ -48,16 +50,12 @@ export class AccessControlFormContainerComponent<T extends DSpaceObject> impleme
 
   state = initialState;
 
-/*  dropdownData$ = this.bulkAccessConfigService.findByPropertyName('default').pipe(
+  dropdownData$: Observable<BulkAccessConditionOptions> = this.bulkAccessConfigService.findByPropertyName('default').pipe(
     getFirstCompletedRemoteData(),
     map((configRD: RemoteData<BulkAccessConditionOptions>) => configRD.hasSucceeded ? configRD.payload : null),
     shareReplay(1),
-    tap(console.log)
+    tap(x => console.log('options', x))
-  );*/
+  );
-
-/*  dropdownData$ = this.bulkAccessControlService.dropdownData$.pipe(
-    shareReplay(1)
-  );*/
 
   getFormValue() {
     return {