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>
<!-- TODO: infinite scroll with 3 selects -->
<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
type="button">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
@@ -121,7 +122,7 @@
</div>
<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 class="position-relative right-addon" role="combobox">
<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>
<!-- TODO: infinite scroll with 3 selects -->
<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
type="button">
<div>{{ constraint.id }}</div>
@@ -154,7 +156,7 @@
</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">
<input formControlName="automatic" hidden id="automatic{{i}}" name="automatic{{i}}"
type="checkbox">
@@ -236,7 +238,8 @@
class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
<!-- TODO: infinite scroll with 3-5 selects -->
<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
type="button">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
@@ -247,14 +250,37 @@
</div>
</div>
</div>
<!-- Main label TODO: update itemfilter dropdown -->
<div class="col">
<ng-container *ngIf="getOutboundPatternControlNames(i)">
<select formControlName="constraint" id="constraint{{i}}" name="constraint{{i}}">
<option value="">{{ 'ldn-new-service.form.label.placeholder.selectedItemFilter' | translate }}</option>
<option *ngFor="let itemFilter of (itemfiltersRD$ | async)?.payload?.page"
[value]="itemFilter.id">{{ itemFilter.id }}</option>
</select>
<ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
<div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
<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>
</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 {AbstractControl, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
import { LDN_SERVICE } from '../ldn-services-model/ldn-service.resource-type';
import { ActivatedRoute, Router } from '@angular/router';
import { LdnServicesService } from '../ldn-services-data/ldn-services-data.service';
import { notifyPatterns } from '../ldn-services-patterns/ldn-service-coar-patterns';
import { animate, state, style, transition, trigger } from '@angular/animations';
import {NgbDropdownConfig, NgbModal} from '@ng-bootstrap/ng-bootstrap';
import { NotificationsService } from '../../../shared/notifications/notifications.service';
import { TranslateService } from '@ngx-translate/core';
import { LdnService } from '../ldn-services-model/ldn-services.model';
import { RemoteData } from 'src/app/core/data/remote-data';
import { Operation } from 'fast-json-patch';
import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
import { LdnItemfiltersService } from '../ldn-services-data/ldn-itemfilters-data.service';
import { Itemfilter } from '../ldn-services-model/ldn-service-itemfilters';
import { PaginatedList } from '../../../core/data/paginated-list.model';
import { Observable } from 'rxjs';
import { PaginationService } from '../../../core/pagination/pagination.service';
import { FindListOptions } from '../../../core/data/find-list-options.model';
import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
import {pattern} from "isbot";
import {ChangeDetectorRef, Component, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';
import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
import {LDN_SERVICE} from '../ldn-services-model/ldn-service.resource-type';
import {ActivatedRoute, Router} from '@angular/router';
import {LdnServicesService} from '../ldn-services-data/ldn-services-data.service';
import {notifyPatterns} from '../ldn-services-patterns/ldn-service-coar-patterns';
import {animate, state, style, transition, trigger} from '@angular/animations';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {NotificationsService} from '../../../shared/notifications/notifications.service';
import {TranslateService} from '@ngx-translate/core';
import {LdnService} from '../ldn-services-model/ldn-services.model';
import {RemoteData} from 'src/app/core/data/remote-data';
import {Operation} from 'fast-json-patch';
import {getFirstCompletedRemoteData} from '../../../core/shared/operators';
import {LdnItemfiltersService} from '../ldn-services-data/ldn-itemfilters-data.service';
import {Itemfilter} from '../ldn-services-model/ldn-service-itemfilters';
import {PaginatedList} from '../../../core/data/paginated-list.model';
import {Observable} from 'rxjs';
import {PaginationService} from '../../../core/pagination/pagination.service';
import {FindListOptions} from '../../../core/data/find-list-options.model';
import {PaginationComponentOptions} from '../../../shared/pagination/pagination-component-options.model';
@Component({
selector: 'ds-ldn-service-form-edit',
@@ -59,16 +58,15 @@ export class LdnServiceFormEditComponent implements OnInit {
@Input() public headerKey: string;
markedForDeletionInboundPattern: number[] = [];
markedForDeletionOutboundPattern: number[] = [];
selectedOutboundPatterns: string[];
selectedInboundItemfilters: string[];
selectedOutboundItemfilters: string[];
selectedInboundPatterns: string[];
protected serviceId: string;
private originalInboundPatterns: any[] = [];
private originalOutboundPatterns: any[] = [];
private deletedInboundPatterns: number[] = [];
private deletedOutboundPatterns: number[] = [];
private modalRef: any;
private service: LdnService;
selectedOutboundPatterns: string[];
selectedInboundItemfilters: any;
selectedInboundPatterns: string[];
constructor(
protected ldnServicesService: LdnServicesService,
@@ -152,8 +150,6 @@ export class LdnServiceFormEditComponent implements OnInit {
outboundPatternsArray.push(patternFormGroup);
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;
const patternArray = (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);
//this.getPatternControlNames(index)
@@ -219,23 +231,12 @@ export class LdnServiceFormEditComponent implements OnInit {
// this.selectedOutboundPatterns = patternValue;
const filterArray = (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);
//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) {
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
toggleAutomatic(i: number) {
const automaticControl = this.formModel.get(`notifyServiceInboundPatterns.${i}.automatic`);
if (automaticControl) {
@@ -388,6 +387,20 @@ export class LdnServiceFormEditComponent implements OnInit {
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 {
if (this.formModel.get(formControlName).dirty) {
patchOperations.push({
@@ -403,8 +416,6 @@ export class LdnServiceFormEditComponent implements OnInit {
const patternsArray = this.formModel.get(formArrayName) as FormArray
for (let i = 0; i < patternsArray.length; i++) {
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) {
// const formArray = this.formModel.get(formArrayName) as FormArray;
//console.warn('inside setValueForControlInOutboundArray', formArray);
@@ -487,5 +486,4 @@ export class LdnServiceFormEditComponent implements OnInit {
//}
}