hazza/yel-dspace-angular
1
0
Fork 0
forked from hazza/dspace-angular
Code Pull Requests Activity

CST-12455 Edit page logic is working now finishing up the styling for the page

Browse Source
This commit is contained in:
Mattia Vianelli
2023-11-15 12:48:53 +01:00
parent 35c45850e7
commit 778a06724b
2 changed files with 483 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.html
View File

@@ -108,7 +108,8 @@
class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div> class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
<!-- TODO: infinite scroll with 3 selects --> <!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu> <div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
<button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" *ngFor="let pattern of inboundPatterns; let internalIndex = index" <button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
*ngFor="let pattern of inboundPatterns; let internalIndex = index"
ngbDropdownItem ngbDropdownItem
type="button"> type="button">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div> <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
@@ -121,7 +122,7 @@
</div> </div>
<div class="col"> <div class="col">
<ng-container *ngIf="getInboundPatternControlNames(i)"> <ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
<div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown> <div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
<div class="position-relative right-addon" role="combobox"> <div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle" <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
@@ -142,7 +143,8 @@
class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div> class="small-text">{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
<!-- TODO: infinite scroll with 3 selects --> <!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu> <div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
<button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()" *ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index" <button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
ngbDropdownItem ngbDropdownItem
type="button"> type="button">
<div>{{ constraint.id }}</div> <div>{{ constraint.id }}</div>
@@ -154,7 +156,7 @@
</div> </div>
<div <div
[style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value ? 'visible' : 'hidden'" [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern ? 'visible' : 'hidden'"
class="col-sm-1"> class="col-sm-1">
<input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}" <input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
type="checkbox"> type="checkbox">
@@ -236,7 +238,8 @@
class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div> class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
<!-- TODO: infinite scroll with 3-5 selects --> <!-- TODO: infinite scroll with 3-5 selects -->
<div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu> <div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
<button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" *ngFor="let pattern of outboundPatterns; let internalIndex = index" <button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
*ngFor="let pattern of outboundPatterns; let internalIndex = index"
ngbDropdownItem ngbDropdownItem
type="button"> type="button">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div> <div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
@@ -247,14 +250,37 @@
</div> </div>
</div> </div>
</div> </div>
<!-- Main label TODO: update itemfilter dropdown -->
<div class="col"> <div class="col">
<ng-container *ngIf="getOutboundPatternControlNames(i)"> <ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
<select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}"> <div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
<option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option> <div class="position-relative right-addon" role="combobox">
<option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page" <i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
[value]="itemFilter.id">{{ itemFilter.id }}</option> ngbDropdownToggle></i>
</select> <input
(click)="outboundItemfilterDropdown.open();"
[readonly]="true"
[value]="selectedOutboundItemfilters"
class="form-control w-100 scrollable-dropdown-input"
formControlName="constraint"
id="outboundItemfilterDropdown"
ngbDropdownAnchor
type="text"
/>
<div>{{ selectedOutboundItemfilters ? ('ldn-service.form.pattern.' + selectedOutboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
<div
class="small-text">{{ selectedOutboundItemfilters ? ('ldn-service.form.pattern.' + selectedOutboundItemfilters + '.description' | translate) : ('' | translate) }}</div>
<!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
<button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
ngbDropdownItem
type="button">
<div>{{ constraint.id }}</div>
</button>
</div>
</div>
</div>
</ng-container> </ng-container>
</div> </div>

116
src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.ts
View File

@@ -1,25 +1,24 @@
import { ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild } from '@angular/core'; import {ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {AbstractControl, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms'; import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type'; import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
import { ActivatedRoute, Router } from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service'; import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns'; import {notifyPatterns} from '../ldn-services-patterns/ldn-service-coar-patterns';
import { animate, state, style, transition, trigger } from '@angular/animations'; import {animate, state, style, transition, trigger} from '@angular/animations';
import {NgbDropdownConfig, NgbModal} from '@ng-bootstrap/ng-bootstrap'; import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { NotificationsService } from '../../../shared/notifications/notifications.service'; import {NotificationsService} from '../../../shared/notifications/notifications.service';
import { TranslateService } from '@ngx-translate/core'; import {TranslateService} from '@ngx-translate/core';
import { LdnService } from '../ldn-services-model/ldn-services.model'; import {LdnService} from '../ldn-services-model/ldn-services.model';
import { RemoteData } from 'src/app/core/data/remote-data'; import {RemoteData} from 'src/app/core/data/remote-data';
import { Operation } from 'fast-json-patch'; import {Operation} from 'fast-json-patch';
import { getFirstCompletedRemoteData } from '../../../core/shared/operators'; import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service'; import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters'; import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
import { PaginatedList } from '../../../core/data/paginated-list.model'; import {PaginatedList} from '../../../core/data/paginated-list.model';
import { Observable } from 'rxjs'; import {Observable} from 'rxjs';
import { PaginationService } from '../../../core/pagination/pagination.service'; import {PaginationService} from '../../../core/pagination/pagination.service';
import { FindListOptions } from '../../../core/data/find-list-options.model'; import {FindListOptions} from '../../../core/data/find-list-options.model';
import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model'; import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
import {pattern} from "isbot";
@Component({ @Component({
selector: 'ds-ldn-service-form-edit', selector: 'ds-ldn-service-form-edit',
@@ -59,16 +58,15 @@ export class LdnServiceFormEditComponent implements OnInit {
@Input() public headerKey: string; @Input() public headerKey: string;
markedForDeletionInboundPattern: number[] = []; markedForDeletionInboundPattern: number[] = [];
markedForDeletionOutboundPattern: number[] = []; markedForDeletionOutboundPattern: number[] = [];
selectedOutboundPatterns: string[];
selectedInboundItemfilters: string[];
selectedOutboundItemfilters: string[];
selectedInboundPatterns: string[];
protected serviceId: string; protected serviceId: string;
private originalInboundPatterns: any[] = [];
private originalOutboundPatterns: any[] = [];
private deletedInboundPatterns: number[] = []; private deletedInboundPatterns: number[] = [];
private deletedOutboundPatterns: number[] = []; private deletedOutboundPatterns: number[] = [];
private modalRef: any; private modalRef: any;
private service: LdnService; private service: LdnService;
selectedOutboundPatterns: string[];
selectedInboundItemfilters: any;
selectedInboundPatterns: string[];
constructor( constructor(
protected ldnServicesService: LdnServicesService, protected ldnServicesService: LdnServicesService,
@@ -152,8 +150,6 @@ export class LdnServiceFormEditComponent implements OnInit {
outboundPatternsArray.push(patternFormGroup); outboundPatternsArray.push(patternFormGroup);
this.cdRef.detectChanges(); this.cdRef.detectChanges();
}); });
this.originalInboundPatterns = [...this.service.notifyServiceInboundPatterns];
this.originalOutboundPatterns = [...this.service.notifyServiceOutboundPatterns];
} }
}, },
); );
@@ -209,7 +205,23 @@ export class LdnServiceFormEditComponent implements OnInit {
// this.selectedOutboundPatterns = patternValue; // this.selectedOutboundPatterns = patternValue;
const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray) const patternArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray)) console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
patternArray.controls[index].patchValue({pattern: patternValue} ) patternArray.controls[index].patchValue({pattern: patternValue})
//console.log(patternArray);
//this.getPatternControlNames(index)
}
selectOutboundItemFilter(filterValue: string, index: number) {
const filterArray = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray)
console.log((this.formModel.get('notifyServiceOutboundPatterns') as FormArray))
filterArray.controls[index].patchValue({constraint: filterValue})
}
selectInboundPattern(patternValue: string, index: number): void {
// this.selectedOutboundPatterns = patternValue;
const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
patternArray.controls[index].patchValue({pattern: patternValue})
//console.log(patternArray); //console.log(patternArray);
//this.getPatternControlNames(index) //this.getPatternControlNames(index)
@@ -219,23 +231,12 @@ export class LdnServiceFormEditComponent implements OnInit {
// this.selectedOutboundPatterns = patternValue; // this.selectedOutboundPatterns = patternValue;
const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray) const filterArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray)) console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
filterArray.controls[index].patchValue({constraint: filterValue} ) filterArray.controls[index].patchValue({constraint: filterValue})
//console.log(patternArray); //console.log(patternArray);
//this.getPatternControlNames(index) //this.getPatternControlNames(index)
} }
selectInboundPattern(patternValue: string, index: number): void {
// this.selectedOutboundPatterns = patternValue;
const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray)
console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
patternArray.controls[index].patchValue({pattern: patternValue} )
//console.log(patternArray);
//this.getPatternControlNames(index)
}
getOutboundPatternControlNames(index: number) { getOutboundPatternControlNames(index: number) {
const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
@@ -253,8 +254,6 @@ export class LdnServiceFormEditComponent implements OnInit {
//TODO: make a method that checks if user selected one value for the //TODO: make a method that checks if user selected one value for the
toggleAutomatic(i: number) { toggleAutomatic(i: number) {
const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`); const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
if (automaticControl) { if (automaticControl) {
@@ -388,6 +387,20 @@ export class LdnServiceFormEditComponent implements OnInit {
this.markedForDeletionOutboundPattern = []; this.markedForDeletionOutboundPattern = [];
} }
setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
console.log(formArrayName)
const formArray = this.formModel.get(formArrayName) as FormArray;
console.warn('inside setValueForControlInOutboundArray', formArray);
formArray.at(index).setValue(value);
}
setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
console.log(formArrayName)
const formArray = this.formModel.get(formArrayName) as FormArray;
console.warn('inside setValueForControlInInboundArray', formArray);
formArray.at(index).setValue(value);
}
private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void { private createReplaceOperation(patchOperations: any[], formControlName: string, path: string): void {
if (this.formModel.get(formControlName).dirty) { if (this.formModel.get(formControlName).dirty) {
patchOperations.push({ patchOperations.push({
@@ -403,8 +416,6 @@ export class LdnServiceFormEditComponent implements OnInit {
const patternsArray = this.formModel.get(formArrayName) as FormArray const patternsArray = this.formModel.get(formArrayName) as FormArray
for (let i = 0; i < patternsArray.length; i++) { for (let i = 0; i < patternsArray.length; i++) {
const patternGroup = patternsArray.at(i) as FormGroup; const patternGroup = patternsArray.at(i) as FormGroup;
@@ -468,18 +479,6 @@ export class LdnServiceFormEditComponent implements OnInit {
}); });
} }
setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
console.log(formArrayName)
const formArray = this.formModel.get(formArrayName) as FormArray;
console.warn('inside setValueForControlInOutboundArray', formArray);
formArray.at(index).setValue(value);
}
setValueForControlInInboundArray(formArrayName: string, index: number, value: string) {
console.log(formArrayName)
const formArray = this.formModel.get(formArrayName) as FormArray;
console.warn('inside setValueForControlInInboundArray', formArray);
formArray.at(index).setValue(value);
}
//setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) { //setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
// const formArray = this.formModel.get(formArrayName) as FormArray; // const formArray = this.formModel.get(formArrayName) as FormArray;
//console.warn('inside setValueForControlInOutboundArray', formArray); //console.warn('inside setValueForControlInOutboundArray', formArray);
@@ -487,5 +486,4 @@ export class LdnServiceFormEditComponent implements OnInit {
//} //}
} }