hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

CST-12455 Code refactor and new dropdowns implementation

Browse Source
This commit is contained in:
Mattia Vianelli
2023-11-15 16:05:53 +01:00
parent d8e7487eff
commit 00bf0d34b1
24 changed files with 936 additions and 989 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -87,7 +87,8 @@
<div class="row mb-1">
<div class="col">
<div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown>
<div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic" id="additionalInboundPattern{{i}}"
ngbDropdown placement="bottom">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
@@ -95,17 +96,12 @@
(click)="inboundPatternDropdown.open();"
[readonly]="true"
[value]="selectedInboundPatterns"
class="form-control w-100 scrollable-dropdown-input"
class="form-control w-80 scrollable-dropdown-input"
formControlName="pattern"
id="inboundPatternDropdownButton"
ngbDropdownAnchor
type="text"
/>
<!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
<div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
<div
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()"
@@ -137,10 +133,6 @@
ngbDropdownAnchor
type="text"
/>
<div>{{ selectedInboundItemfilters ? ('ldn-service.form.pattern.' + selectedInboundItemfilters + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
<div
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()"
@@ -266,10 +258,6 @@
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()"

1
src/app/admin/admin-ldn-services/ldn-service-form-edit/ldn-service-form-edit.component.scss
View File

@@ -99,6 +99,7 @@ textarea {
font-size: 0.7em;
color: #888;
}
.toggle-switch {
cursor: pointer;
margin-top: 3px;

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

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import {LdnServiceFormEditComponent} from './ldn-service-form-edit.component';
import {ChangeDetectorRef, EventEmitter} from '@angular/core';
import { ReactiveFormsModule, FormBuilder } from '@angular/forms';
import {FormBuilder, ReactiveFormsModule} from '@angular/forms';
import {ActivatedRoute, Router} from '@angular/router';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {TranslateModule, TranslateService} from '@ngx-translate/core';

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

@@ -202,13 +202,9 @@ export class LdnServiceFormEditComponent implements OnInit {
selectOutboundPattern(patternValue: string, index: number): void {
// 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})
//console.log(patternArray);
//this.getPatternControlNames(index)
}
selectOutboundItemFilter(filterValue: string, index: number) {
@@ -218,42 +214,17 @@ export class LdnServiceFormEditComponent implements OnInit {
}
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)
}
selectInboundItemFilter(filterValue: string, index: number): void {
// 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})
//console.log(patternArray);
//this.getPatternControlNames(index)
}
getOutboundPatternControlNames(index: number) {
const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index]?.value
console.log(patternArrayValue)
return patternArrayValue
}
getInboundPatternControlNames(index: number) {
const patternArrayValue = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]?.value
console.log(patternArrayValue)
return patternArrayValue
}
//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) {
@@ -478,12 +449,4 @@ export class LdnServiceFormEditComponent implements OnInit {
automatic: '',
});
}
//setValueForControlInOutboundArray(formArrayName: string, index: number, value: string) {
// const formArray = this.formModel.get(formArrayName) as FormArray;
//console.warn('inside setValueForControlInOutboundArray', formArray);
//formArray.at(index).setValue(value);
//}
}

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

@@ -77,31 +77,31 @@
<div class="row mb-1">
<div class="col">
<div ngbDropdown #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}">
<div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown>
<div class="position-relative right-addon" role="combobox">
<i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
aria-hidden="true">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle>
</i>
<input
formControlName="pattern"
type="text"
[readonly]="true"
ngbDropdownAnchor
class="form-control w-100 scrollable-dropdown-input"
[value]="selectedInboundPatterns"
(click)="inboundPatternDropdown.open();"
[readonly]="true"
[value]="selectedInboundPatterns"
class="form-control w-100 scrollable-dropdown-input"
formControlName="pattern"
id="inboundPatternDropdownButton"
ngbDropdownAnchor
type="text"
/>
<!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
<div>{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.inboundPattern' | translate) }}</div>
<div class="small-text">{{ selectedInboundPatterns ? ('ldn-service.form.pattern.' + selectedInboundPatterns + '.description' | translate) : ('' | translate) }}</div>
<!-- TODO: infinite scroll with 3 selects -->
<div ngbDropdownMenu aria-labelledby="inboundPatternDropdownButton">
<button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns; let internalIndex = index" (click)="selectInboundPattern(pattern, i); $event.stopPropagation()">
<div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
<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>
<div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
<div
class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
</button>
</div>
</div>
@@ -143,7 +143,9 @@
</ng-container>
</div>
<div [style.visibility]="formModel.get('notifyServiceInboundPatterns')['controls'][i]?.value?.pattern ? 'visible' : 'hidden'" class="col-sm-1">
<div
[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">
<div (click)="toggleAutomatic(i)"
@@ -193,29 +195,33 @@
<!-- Input elements in a separate row -->
<div class="row mb-1">
<div class="col">
<div ngbDropdown #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}">
<div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown>
<div class="position-relative right-addon" role="combobox">
<i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
aria-hidden="true"></i>
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
<input
formControlName="pattern"
type="text"
[readonly]="true"
ngbDropdownAnchor
class="form-control w-100 scrollable-dropdown-input"
[value]="selectedOutboundPatterns"
(click)="outboundPatternDropdown.open();"
[readonly]="true"
[value]="selectedOutboundPatterns"
class="form-control w-100 scrollable-dropdown-input"
formControlName="pattern"
id="outboundPatternDropdownButton"
ngbDropdownAnchor
type="text"
/>
<!-- Main label TODO: remove after developing done cause it will pick the selected value to show -->
<div>{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.label' | translate) : ('ldn-new-service.form.label.placeholder.outboundPattern' | translate) }}</div>
<div class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
<div
class="small-text">{{ selectedOutboundPatterns ? ('ldn-service.form.pattern.' + selectedOutboundPatterns + '.description' | translate) : ('' | translate) }}</div>
<!-- TODO: infinite scroll with 3 selects -->
<div ngbDropdownMenu aria-labelledby="outboundPatternDropdownButton">
<button type="button" ngbDropdownItem *ngFor="let pattern of outboundPatterns" (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()">
<div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
<button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
*ngFor="let pattern of outboundPatterns" ngbDropdownItem
type="button">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
<div class="small-text">{{ 'ldn-service.form.pattern.'+pattern+'.description' | translate }}</div>
<div
class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
</button>
</div>
</div>

7
src/app/admin/admin-ldn-services/ldn-service-form/ldn-service-form.component.spec.ts
View File

@@ -59,7 +59,12 @@ describe('LdnServiceFormComponent', () => {
{provide: NotificationsService, useValue: notificationsService},
{provide: TranslateService, useValue: translateServiceStub},
{provide: Router, useValue: new RouterStub()},
{ provide: NgbModal, useValue: { open: () => {/*comment*/ } } },
{
provide: NgbModal, useValue: {
open: () => {/*comment*/
}
}
},
FormBuilder
],
declarations: [LdnServiceFormComponent]

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

@@ -36,8 +36,6 @@ export class LdnServiceFormComponent implements OnInit {
formModel: FormGroup;
@ViewChild('confirmModal', {static: true}) confirmModal: TemplateRef<any>;
@ViewChild('resetFormModal', {static: true}) resetFormModal: TemplateRef<any>;
//public inboundPatterns: object[] = notifyPatterns;
//public outboundPatterns: object[] = notifyPatterns;
public inboundPatterns: string[] = notifyPatterns;
public outboundPatterns: string[] = notifyPatterns;
itemfiltersRD$: Observable<RemoteData<PaginatedList<Itemfilter>>>;
@@ -207,18 +205,12 @@ export class LdnServiceFormComponent implements OnInit {
const patternArray = (this.formModel.get('notifyServiceInboundPatterns') as FormArray).controls[index]
console.log((this.formModel.get('notifyServiceInboundPatterns') as FormArray))
patternArray.patchValue({pattern: patternValue})
//console.log(patternArray);
//this.getPatternControlNames(index)
}
selectInboundItemFilter(filterValue: string, index: number): void {
// 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})
//console.log(patternArray);
//this.getPatternControlNames(index)
}
selectOutboundItemFilter(filterValue: string, index: number) {
@@ -227,19 +219,10 @@ export class LdnServiceFormComponent implements OnInit {
filterArray.controls[index].patchValue({constraint: filterValue})
}
getPatternControlNames(index: number) {
const patternArrayValue = (this.formModel.get('notifyServiceOutboundPatterns') as FormArray).controls[index].value
return patternArrayValue
}
private sendBack() {
this.router.navigateByUrl('admin/ldn/services');
}
//selectInboundPattern(pattern: string, index: number): void {
//this.selectedInboundPatterns = pattern;
//}
private createOutboundPatternFormGroup(): FormGroup {
return this.formBuilder.group({

3
src/app/admin/admin-ldn-services/ldn-services-directory/ldn-services-directory.component.html
View File

@@ -28,7 +28,8 @@
<td>{{ ldnService.description }}</td>
<td>
<span (click)="toggleStatus(ldnService, ldnServicesService)"
[ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }" [title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
[ngClass]="{ 'status-enabled': ldnService.enabled, 'status-disabled': !ldnService.enabled }"
[title]="ldnService.enabled ? ('ldn-service.overview.table.clickToDisable' | translate) : ('ldn-service.overview.table.clickToEnable' | translate)"
class="status-indicator">
{{ ldnService.enabled ? ('ldn-service.overview.table.enabled' | translate) : ('ldn-service.overview.table.disabled' | translate) }}
</span>