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

CST-12455 Working dropdowns with scroll showing only 4 values + improvement for form input fields

Browse Source
This commit is contained in:
Mattia Vianelli
2023-11-16 18:25:09 +01:00
parent 3a6f57d34d
commit 7831bcbfae
2 changed files with 71 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,7 +19,8 @@
<input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
[placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
name="name"
type="text">
type="text"
class="form-control">
</div>
<div class="mb-4">
@@ -30,7 +31,7 @@
<div class="mb-2 d-flex flex-column">
<label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
<textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
formControlName="description" id="description" name="description"></textarea>
formControlName="description" id="description" name="description" class="form-control"></textarea>
</div>
<div class="mb-4">
@@ -43,7 +44,8 @@
<input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
[placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
name="url"
type="text">
type="text"
class="form-control">
</div>
<div class="mb-4">
@@ -57,7 +59,8 @@
[placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
id="ldnUrl"
name="ldnUrl"
type="text">
type="text"
class="form-control">
</div>
<div class="mb-4">
@@ -90,7 +93,7 @@
<div class="row mb-1">
<div class="col">
<div #inboundPatternDropdown="ngbDropdown" class="w-80" display="dynamic" id="additionalInboundPattern{{i}}"
ngbDropdown placement="bottom">
ngbDropdown placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
@@ -104,11 +107,13 @@
type="text"
/>
<!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu>
<button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()"
<div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
<div class="scrollable-menu" role="listbox">
<button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
*ngFor="let pattern of inboundPatterns; let internalIndex = index"
ngbDropdownItem
type="button">
type="button"
[title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
<div
class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
@@ -117,10 +122,12 @@
</div>
</div>
</div>
</div>
<div class="col">
<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
placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
@@ -135,8 +142,9 @@
type="text"
/>
<!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
<button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
<div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
<div class="scrollable-menu" role="listbox">
<button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
ngbDropdownItem
type="button">
@@ -145,6 +153,7 @@
</div>
</div>
</div>
</div>
</ng-container>
</div>
@@ -213,7 +222,7 @@
<div class="row mb-1">
<div class="col">
<div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown
placement="bottom">
placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
@@ -228,11 +237,13 @@
type="text"
/>
<!-- TODO: infinite scroll with 3-5 selects -->
<div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
<button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
<div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
<div class="scrollable-menu" role="listbox">
<button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
*ngFor="let pattern of outboundPatterns; let internalIndex = index"
ngbDropdownItem
type="button">
type="button"
[title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
<div
class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
@@ -241,9 +252,11 @@
</div>
</div>
</div>
</div>
<div class="col">
<ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
<div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown>
<div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
@@ -258,8 +271,9 @@
type="text"
/>
<!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
<button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
<div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
<div class="scrollable-menu" role="listbox">
<button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
ngbDropdownItem
type="button">
@@ -268,6 +282,7 @@
</div>
</div>
</div>
</div>
</ng-container>
</div>

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

@@ -4,12 +4,13 @@
<h2 class="flex-grow-1">{{ 'ldn-create-service.title' | translate }}</h2>
</div>
<!-- In the name section -->
<div class="mb-2">
<div class="mb-2 ">
<label for="name">{{ 'ldn-new-service.form.label.name' | translate }}</label>
<input [class.invalid-field]="formModel.get('name').invalid && formModel.get('name').touched"
[placeholder]="'ldn-new-service.form.placeholder.name' | translate" formControlName="name" id="name"
name="name"
type="text">
type="text"
class="form-control">
</div>
<div class="mb-4">
@@ -20,7 +21,7 @@
<div class="mb-2 d-flex flex-column">
<label for="description">{{ 'ldn-new-service.form.label.description' | translate }}</label>
<textarea [placeholder]="'ldn-new-service.form.placeholder.description' | translate"
formControlName="description" id="description" name="description"></textarea>
formControlName="description" id="description" name="description" class="form-control"></textarea>
</div>
<div class="mb-4">
@@ -33,7 +34,8 @@
<input [class.invalid-field]="formModel.get('url').invalid && formModel.get('url').touched"
[placeholder]="'ldn-new-service.form.placeholder.url' | translate" formControlName="url" id="url"
name="url"
type="text">
type="text"
class="form-control">
</div>
<div class="mb-4">
@@ -47,7 +49,8 @@
[placeholder]="'ldn-new-service.form.placeholder.ldnUrl' | translate" formControlName="ldnUrl"
id="ldnUrl"
name="ldnUrl"
type="text">
type="text"
class="form-control">
</div>
<div class="mb-4">
@@ -80,7 +83,7 @@
<div class="row mb-1">
<div class="col">
<div #inboundPatternDropdown="ngbDropdown" class="w-100" id="additionalInboundPattern{{i}}" ngbDropdown
placement="bottom">
placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle>
@@ -96,12 +99,13 @@
ngbDropdownAnchor
type="text"
/>
<!-- 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"
<div aria-labelledby="inboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
<div class="scrollable-menu" role="listbox">
<button (click)="selectInboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
*ngFor="let pattern of inboundPatterns"
ngbDropdownItem
type="button">
type="button"
[title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
<div
class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
@@ -110,12 +114,13 @@
</div>
</div>
</div>
</div>
<div class="col">
<ng-container *ngIf="!!(formModel.get('notifyServiceInboundPatterns')['controls'][i].value.pattern)">
<div #inboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
placement="bottom">
placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
@@ -130,8 +135,9 @@
type="text"
/>
<!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu>
<button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation()"
<div aria-labelledby="inboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
<div class="scrollable-menu" role="listbox">
<button (click)="selectInboundItemFilter(constraint.id, i); $event.stopPropagation() " class="dropdown-item collection-item text-truncate w-100"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
ngbDropdownItem
type="button">
@@ -140,6 +146,7 @@
</div>
</div>
</div>
</div>
</ng-container>
</div>
@@ -198,7 +205,7 @@
<div class="row mb-1">
<div class="col">
<div #outboundPatternDropdown="ngbDropdown" class="w-100" id="additionalOutboundPattern{{i}}" ngbDropdown
placement="bottom">
placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
@@ -213,10 +220,12 @@
type="text"
/>
<!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu>
<button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()"
<div aria-labelledby="outboundPatternDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
<div class="scrollable-menu" role="listbox">
<button (click)="selectOutboundPattern(pattern, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
*ngFor="let pattern of outboundPatterns" ngbDropdownItem
type="button">
type="button"
[title]="'ldn-service.form.pattern.' + pattern + '.description' | translate">
<div>{{ 'ldn-service.form.pattern.' + pattern + '.label' | translate }}</div>
<div
class="small-text">{{ 'ldn-service.form.pattern.' + pattern + '.description' | translate }}</div>
@@ -225,11 +234,12 @@
</div>
</div>
</div>
</div>
<div class="col">
<ng-container *ngIf="!!(formModel.get('notifyServiceOutboundPatterns')['controls'][i].value.pattern)">
<div #outboundItemfilterDropdown="ngbDropdown" class="w-100" id="constraint{{i}}" ngbDropdown
placement="bottom">
placement="bottom-start">
<div class="position-relative right-addon" role="combobox">
<i aria-hidden="true" class="position-absolute scrollable-dropdown-toggle"
ngbDropdownToggle></i>
@@ -244,8 +254,9 @@
type="text"
/>
<!-- TODO: infinite scroll with 3 selects -->
<div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu>
<button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()"
<div aria-labelledby="outboundItemfilterDropdownButton" ngbDropdownMenu class="dropdown-menu scrollable-dropdown-menu w-100 " >
<div class="scrollable-menu" role="listbox">
<button (click)="selectOutboundItemFilter(constraint.id, i); $event.stopPropagation()" class="dropdown-item collection-item text-truncate w-100"
*ngFor="let constraint of (itemfiltersRD$ | async)?.payload?.page; let internalIndex = index"
ngbDropdownItem
type="button">
@@ -254,6 +265,7 @@
</div>
</div>
</div>
</div>
</ng-container>
</div>