mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-04-23 22:30:37 +00:00
refactor: enhance site dropdown component structure and improve template syntax
- Updated the HTML structure for better readability and maintainability. - Replaced the ngFor syntax with a more concise @for syntax. - Improved the conditional rendering syntax for loading state. - Removed unused CommonModule import from the component.
This commit is contained in:
@@ -1,26 +1,30 @@
|
||||
<div id="site-dropdown-container" class="adf-site-dropdown-container">
|
||||
<mat-form-field class="adf-sites-dropdown-form-field">
|
||||
<mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
|
||||
<mat-select
|
||||
adf-infinite-select-scroll
|
||||
(scrollEnd)="loadAllOnScroll()"
|
||||
#siteSelect
|
||||
data-automation-id="site-my-files-option"
|
||||
class="adf-site-dropdown-list-element"
|
||||
id="site-dropdown"
|
||||
placeholder="{{placeholder | translate}}"
|
||||
[(value)]="selected"
|
||||
placeholder="{{placeholder | translate}}"
|
||||
(selectionChange)="selectedSite($event)">
|
||||
<mat-select-trigger class="adf-sites-dropdown-select-trigger">
|
||||
{{ selected?.entry.title | translate}}
|
||||
</mat-select-trigger>
|
||||
<mat-option *ngFor="let site of siteList?.list.entries;" [value]="site">
|
||||
{{ site.entry.title | translate}}
|
||||
</mat-option>
|
||||
<mat-option *ngIf="showLoading()" disabled="true" data-automation-id="site-loading">
|
||||
{{ 'ADF_DROPDOWN.LOADING' | translate}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="adf-sites-dropdown-form-field">
|
||||
<mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
|
||||
<mat-select
|
||||
adf-infinite-select-scroll
|
||||
(scrollEnd)="loadAllOnScroll()"
|
||||
#siteSelect
|
||||
data-automation-id="site-my-files-option"
|
||||
class="adf-site-dropdown-list-element"
|
||||
id="site-dropdown"
|
||||
placeholder="{{placeholder | translate}}"
|
||||
[(value)]="selected"
|
||||
placeholder="{{placeholder | translate}}"
|
||||
(selectionChange)="selectedSite($event)">
|
||||
<mat-select-trigger class="adf-sites-dropdown-select-trigger">
|
||||
{{ selected?.entry?.title | translate}}
|
||||
</mat-select-trigger>
|
||||
@for (site of siteList?.list?.entries; track site?.entry?.id) {
|
||||
<mat-option [value]="site">
|
||||
{{ site.entry.title | translate}}
|
||||
</mat-option>
|
||||
}
|
||||
@if (showLoading()) {
|
||||
<mat-option disabled="true" data-automation-id="site-loading">
|
||||
{{ 'ADF_DROPDOWN.LOADING' | translate}}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
@@ -22,11 +22,8 @@ import { MatSelectChange, MatSelectModule } from '@angular/material/select';
|
||||
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
||||
import { TranslatePipe, TranslateService } from '@ngx-translate/core';
|
||||
import { SitesService } from '../../common/services/sites.service';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
|
||||
/* eslint-disable no-shadow */
|
||||
/* eslint-disable @typescript-eslint/naming-convention */
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
|
||||
export const Relations = {
|
||||
Members: 'members',
|
||||
@@ -37,7 +34,7 @@ export type Relations = (typeof Relations)[keyof typeof Relations];
|
||||
|
||||
@Component({
|
||||
selector: 'adf-sites-dropdown',
|
||||
imports: [CommonModule, TranslatePipe, MatFormFieldModule, MatSelectModule, InfiniteSelectScrollDirective],
|
||||
imports: [TranslatePipe, MatFormFieldModule, MatSelectModule, InfiniteSelectScrollDirective],
|
||||
templateUrl: './sites-dropdown.component.html',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-sites-dropdown' }
|
||||
|
||||
Reference in New Issue
Block a user