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:
Denys Vuika
2026-02-27 11:48:25 +00:00
parent 478482b3b6
commit 4fc599522c
2 changed files with 30 additions and 29 deletions

View File

@@ -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>

View File

@@ -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' }