55 lines
2.3 KiB
HTML
55 lines
2.3 KiB
HTML
<div class="region-container">
|
|
<div class="loading-shade" *ngIf="isLoading">
|
|
<mat-spinner diameter="50"></mat-spinner>
|
|
</div>
|
|
<div class="region-selection-container">
|
|
<!-- Available Regions Listbox -->
|
|
<div class="available-regions">
|
|
<h3>Available Regions</h3>
|
|
|
|
<mat-selection-list [multiple]="false" hideSingleSelectionIndicator>
|
|
<mat-list-option *ngFor="let region of regions" [value]="region" [disabled]="isRegionSelected(region)"
|
|
(click)="onAvailableRegionSelection(availableoption)" #availableoption>
|
|
{{region.name}}
|
|
</mat-list-option>
|
|
</mat-selection-list>
|
|
</div>
|
|
|
|
<!-- Controls -->
|
|
<div class="controls">
|
|
<div class="action-buttons">
|
|
<button mat-raised-button color="primary" type="button" (click)="addRegion()" class="icon-end">
|
|
<mat-icon>keyboard_double_arrow_right</mat-icon>
|
|
<span> Add</span>
|
|
</button>
|
|
<button mat-raised-button type="button" (click)="removeRegion()">
|
|
<mat-icon>keyboard_double_arrow_left</mat-icon>
|
|
<span> Remove</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Selected Regions -->
|
|
<div class="selected-regions">
|
|
<div class="regions">
|
|
<h3>Selected Regions</h3>
|
|
<mat-selection-list [multiple]="false" hideSingleSelectionIndicator>
|
|
<mat-list-option *ngFor="let region of selectedRegions" [value]="region"
|
|
(click)="onRegionSelection(selectedoption)" #selectedoption>
|
|
{{region.name}}
|
|
</mat-list-option>
|
|
<mat-list-item *ngIf="selectedRegions.length === 0">
|
|
<span class="empty-message">No regions selected</span>
|
|
</mat-list-item>
|
|
</mat-selection-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button mat-raised-button color="primary" type="submit" (click)="onSubmit()"
|
|
[disabled]="changeInProgress || selectedRegions.length === 0">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div> |