From a17536ce1e2f79a50db278941c535d26637f8f7c Mon Sep 17 00:00:00 2001 From: Boris Vasilenko Date: Thu, 5 Dec 2024 09:18:45 +0300 Subject: [PATCH 01/19] NAS-132783 / 25.04 / Improve master-detail-view (#11140) * NAS-132783: Improve master-detail-view * NAS-132783: Fix styles --------- Co-authored-by: Boris Vasilenko --- .../master-detail-view.component.html | 26 +++----- .../master-detail-view.component.scss | 59 ++----------------- .../all-targets/all-targets.component.html | 12 ++-- .../all-targets/all-targets.component.scss | 21 +++---- .../target-list/target-list.component.ts | 1 - .../all-instances.component.html | 4 +- .../instance-list.component.html | 10 ++-- .../instance-list.component.scss | 5 +- .../instance-list/instance-list.component.ts | 1 - src/assets/styles/mixins/layout.scss | 1 - 10 files changed, 35 insertions(+), 105 deletions(-) diff --git a/src/app/modules/master-detail-view/master-detail-view.component.html b/src/app/modules/master-detail-view/master-detail-view.component.html index 339ac71bde8..12e82093ecf 100644 --- a/src/app/modules/master-detail-view/master-detail-view.component.html +++ b/src/app/modules/master-detail-view/master-detail-view.component.html @@ -9,25 +9,15 @@ ixDetailsHeight [class.details-container-mobile]="showMobileDetails()" > -
-

-
- - {{ 'Details for' | translate }} -
- - - {{ 'Details for' | translate }} - - - - - +
+ @if(isMobileView()) { + + } +

+

- -
diff --git a/src/app/modules/master-detail-view/master-detail-view.component.scss b/src/app/modules/master-detail-view/master-detail-view.component.scss index 294ee4618b8..9987b20ec39 100644 --- a/src/app/modules/master-detail-view/master-detail-view.component.scss +++ b/src/app/modules/master-detail-view/master-detail-view.component.scss @@ -26,15 +26,14 @@ overflow: auto; } -.header { +.header-container { align-items: center; background: var(--bg1); - color: var(--fg1); + color: var(--fg2); display: flex; - justify-content: space-between; + gap: 8px; margin-bottom: 0; - margin-top: 20px; - padding-bottom: 16px; + padding: 15px 0; position: sticky; top: 0; z-index: 5; @@ -42,57 +41,11 @@ @media (max-width: calc($breakpoint-hidden - 1px)) { border-bottom: solid 1px var(--lines); margin: 0 16px 16px 0; + padding-top: 0; position: static; } -} - -.title { - align-items: center; - color: var(--fg2); - display: flex; - gap: 8px; - min-height: 36px; - width: 100%; - @media (max-width: $breakpoint-tablet) { - align-items: flex-start; - flex-direction: column; - gap: unset; - max-width: 100%; + .header { width: 100%; } - - @media (max-width: calc($breakpoint-hidden - 1px)) { - margin-top: 0; - } - - .mobile-prefix { - align-items: center; - display: none; - - @media (max-width: $breakpoint-hidden) { - display: flex; - max-width: 50%; - opacity: 0.85; - } - - @media (max-width: $breakpoint-tablet) { - max-width: 100%; - width: 100%; - } - } - - .prefix { - display: inline; - - @media (max-width: $breakpoint-hidden) { - display: none; - } - } - - .name { - @media (max-width: $breakpoint-tablet) { - margin-left: 40px; - } - } } diff --git a/src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.html b/src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.html index d43a6ff2e48..c1b393634d1 100644 --- a/src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.html +++ b/src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.html @@ -6,15 +6,15 @@ master [dataProvider]="dataProvider" [isMobileView]="masterDetailView.isMobileView()" - [showMobileDetails]="masterDetailView.showMobileDetails()" (toggleShowMobileDetails)="masterDetailView.toggleShowMobileDetails($event)" > - - {{ dataProvider.expandedRow?.name }} - +
+ + {{ 'Details for' | translate }} + {{ dataProvider.expandedRow?.name }} + - @if (dataProvider.expandedRow; as target) {
} - +
@if (dataProvider.expandedRow) { diff --git a/src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.scss b/src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.scss index f25a72cb30b..ad983bc412b 100644 --- a/src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.scss +++ b/src/app/pages/sharing/iscsi/target/all-targets/all-targets.component.scss @@ -1,15 +1,10 @@ -:host { - &::ng-deep { - .details-container .header { - margin-top: 13px; - } - } -} - -.detail-actions { +.detail-header { + align-items: center; display: flex; - flex-wrap: wrap; - gap: 8px; - justify-content: flex-end; - width: 100%; + justify-content: space-between; + + .detail-actions { + display: flex; + gap: 8px; + } } diff --git a/src/app/pages/sharing/iscsi/target/all-targets/target-list/target-list.component.ts b/src/app/pages/sharing/iscsi/target/all-targets/target-list/target-list.component.ts index eb1df57b8b3..f547d45387a 100644 --- a/src/app/pages/sharing/iscsi/target/all-targets/target-list/target-list.component.ts +++ b/src/app/pages/sharing/iscsi/target/all-targets/target-list/target-list.component.ts @@ -59,7 +59,6 @@ import { SlideInService } from 'app/services/slide-in.service'; }) export class TargetListComponent implements OnInit { readonly isMobileView = input(); - readonly showMobileDetails = input(); readonly toggleShowMobileDetails = output(); readonly dataProvider = input>(); diff --git a/src/app/pages/virtualization/components/all-instances/all-instances.component.html b/src/app/pages/virtualization/components/all-instances/all-instances.component.html index 391454568b1..a36fe8031e2 100644 --- a/src/app/pages/virtualization/components/all-instances/all-instances.component.html +++ b/src/app/pages/virtualization/components/all-instances/all-instances.component.html @@ -9,11 +9,11 @@ - + + {{ 'Details for' | translate }} {{ selectedInstance()?.name }} diff --git a/src/app/pages/virtualization/components/all-instances/instance-list/instance-list.component.html b/src/app/pages/virtualization/components/all-instances/instance-list/instance-list.component.html index c163153394c..c0e5c8d71f9 100644 --- a/src/app/pages/virtualization/components/all-instances/instance-list/instance-list.component.html +++ b/src/app/pages/virtualization/components/all-instances/instance-list/instance-list.component.html @@ -10,12 +10,10 @@

{{ 'Instances' | translate }}

- @if (!showMobileDetails()) { - - } + (); - readonly showMobileDetails = input(); readonly toggleShowMobileDetails = output(); protected readonly searchQuery = signal(''); diff --git a/src/assets/styles/mixins/layout.scss b/src/assets/styles/mixins/layout.scss index 50e2a8f8211..595e80fb421 100644 --- a/src/assets/styles/mixins/layout.scss +++ b/src/assets/styles/mixins/layout.scss @@ -288,7 +288,6 @@ $scrollbar-offset: 20px; display: flex; flex: 1; flex-direction: column; - margin-right: 16px; max-width: $table-width; min-width: $table-min-width; position: relative; From e896f51a5076f1b86b90048abd873f4485c7d075 Mon Sep 17 00:00:00 2001 From: Janek Date: Thu, 5 Dec 2024 10:29:28 +0100 Subject: [PATCH 02/19] Update pl.json (#11145) --- src/assets/i18n/pl.json | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/assets/i18n/pl.json b/src/assets/i18n/pl.json index a5603f771c5..9a4b06c9a6a 100644 --- a/src/assets/i18n/pl.json +++ b/src/assets/i18n/pl.json @@ -5131,17 +5131,17 @@ "{temp}°C (Core #{core})": "", "{temp}°C ({coreCount} cores at {temp}°C)": "", "{threadCount, plural, one {# thread} other {# threads} }": "", - "{type} VDEVs": "", - "{type} at {location}": "", - "{type} widget does not support {size} size.": "", - "{type} widget is not supported.": "", + "{type} VDEVs": "{type} VDEVs", + "{type} at {location}": "{type} w {location}", + "{type} widget does not support {size} size.": "Widżet {type} nie obsługuje rozmiaru {size}", + "{type} widget is not supported.": "Widżet {type} nie jest obsługiwany.", "{type} | {vdevWidth} wide | ": "", - "{usage}% (All Threads)": "", - "{usage}% (Thread #{thread})": "", - "{usage}% ({threadCount} threads at {usage}%)": "", - "{used} of {total} ({used_pct})": "", - "{version} is available!": "", - "{view} on {enclosure}": "", + "{usage}% (All Threads)": "{usage}% Wszystkich wątków)", + "{usage}% (Thread #{thread})": "{usage}% (Wątek #{thread})", + "{usage}% ({threadCount} threads at {usage}%)": "{usage}% ({threadCount} wątków przy {usage}%)", + "{used} of {total} ({used_pct})": "{used} z {total} ({used_pct})", + "{version} is available!": "{version} jest dostępna!", + "{view} on {enclosure}": "{view} na {enclosure}", " seconds.": " sekund", "% of all cores": "% użycia wszytskich rdzeni", "(24 Hours)": "(24 Godziny)", @@ -5216,8 +5216,8 @@ "New Password": "Nowe hasło", "Number of simultaneous file transfers. Enter a number based on the available bandwidth and destination system performance. See rclone --transfers.": "Number of simultaneous file transfers. Enter a number based on the available bandwidth and destination system performance. See rclone --transfers.", "Openstack API key or password. This is the OS_PASSWORD from an OpenStack credentials file.": "Openstack API key or password. This is the OS_PASSWORD from an OpenStack credentials file.", - "Openstack user name for login. This is the OS_USERNAME from an OpenStack credentials file.": "Openstack user name for login. This is the OS_USERNAME from an OpenStack credentials file.", - "Region name - optional (rclone documentation).": "Region name - optional (rclone documentation).", + "Openstack user name for login. This is the OS_USERNAME from an OpenStack credentials file.": "Nazwa użytkownika Openstack do zalogowania. Jest to OS_USERNAME od OpenStack credentials file.", + "Region name - optional (rclone documentation).": "Nazwa regionu - opcjonalnie (rclone documentation).", "Rename": "Zmień nazwę", "Require Kerberos for NFSv4": "Wymagany Kerberos dla NFSv4", "Required unless Enable password login is No. Passwords cannot contain a ?.": "Wymagane, chyba że Enable password login ustawione jest na No. Hasła nie mogą zawierać ?.", @@ -5277,4 +5277,4 @@ "total available": "łącznie dostępne", "{name} Devices": "Urządzenia", "{name} Sessions": "Sesji" -} \ No newline at end of file +} From 8d8fa5633c86a8452158d247bead30f4362da7b6 Mon Sep 17 00:00:00 2001 From: Evgeny Stepanovych Date: Thu, 5 Dec 2024 14:00:16 +0100 Subject: [PATCH 03/19] NAS-132887 / 25.04 / Migrate more inputs to signals (#11144) --- .../gauge-chart/gauge-chart.component.ts | 8 +++-- .../general-dialog.component.ts | 11 +++--- src/app/modules/dialog/dialog.service.ts | 9 ++--- .../cloud-credentials-select.component.html | 8 ++--- .../cloud-credentials-select.component.ts | 16 ++++----- .../ssh-credentials-select.component.html | 8 ++--- .../ssh-credentials-select.component.ts | 8 ++--- .../ix-dynamic-form-item.component.html | 12 +++---- .../ix-dynamic-form-item.component.spec.ts | 20 +++++------ .../ix-dynamic-form-item.component.ts | 16 ++++----- .../ix-button-group.component.html | 20 +++++------ .../ix-button-group.component.ts | 22 +++++++----- .../ix-combobox/ix-combobox.component.html | 18 +++++----- .../ix-combobox/ix-combobox.component.ts | 34 ++++++++++--------- .../ix-select-with-new-option.directive.ts | 3 +- .../basic-search/basic-search.component.html | 2 +- .../basic-search/basic-search.component.ts | 4 +-- .../search-input/search-input.component.html | 6 ++-- .../search-input/search-input.component.ts | 10 +++--- .../search-input1.component.html | 4 +-- .../search-input1/search-input1.component.ts | 17 ++++++---- src/app/modules/ix-icon/ix-icon.component.ts | 9 +++-- .../ix-table-body.component.html | 8 ++--- .../ix-table-body.component.spec.ts | 2 +- .../ix-table-body/ix-table-body.component.ts | 27 +++++++-------- .../ix-table-pager.component.html | 2 +- .../ix-table-pager.component.spec.ts | 6 ++-- .../ix-table-pager.component.ts | 12 +++---- .../directives/ix-body-cell.directive.ts | 19 +++++------ .../directives/ix-table-cell.directive.ts | 6 ++-- .../tree-virtual-scroll-view.component.html | 6 ++-- .../tree-virtual-scroll-view.component.ts | 14 ++++---- ...ee-virtual-scroll-node-outlet.directive.ts | 16 ++++----- src/app/modules/loader/app-loader.service.ts | 4 +-- .../app-loader/app-loader.component.html | 2 +- .../app-loader/app-loader.component.ts | 8 +++-- .../with-loading-state-error.component.ts | 6 ++-- .../with-loading-state.directive.ts | 2 +- .../modules/slide-ins/slide-in.component.html | 4 +-- .../modules/slide-ins/slide-in.component.ts | 8 ++--- .../test-override/test-override.directive.ts | 4 +-- src/app/modules/test-id/test.directive.ts | 2 +- .../view-trivial-permissions.component.html | 2 +- .../view-trivial-permissions.component.ts | 13 +++---- .../smart-test-result-list.component.html | 2 +- .../smart-test-result-list.component.ts | 13 +++---- .../manual-selection-vdev.component.html | 2 +- .../manual-selection-vdev.component.ts | 11 +++--- 48 files changed, 247 insertions(+), 219 deletions(-) diff --git a/src/app/modules/charts/gauge-chart/gauge-chart.component.ts b/src/app/modules/charts/gauge-chart/gauge-chart.component.ts index af2e02d648b..c3cd8426db7 100644 --- a/src/app/modules/charts/gauge-chart/gauge-chart.component.ts +++ b/src/app/modules/charts/gauge-chart/gauge-chart.component.ts @@ -1,5 +1,4 @@ import { - Input, Component, HostBinding, ChangeDetectionStrategy, input, computed, } from '@angular/core'; @@ -46,8 +45,11 @@ export class GaugeChartComponent { }, }); - @Input() @HostBinding('style.height.px') height = defaultHeight; - @Input() @HostBinding('style.width.px') width = defaultWidth; + readonly height = input(defaultHeight); + readonly width = input(defaultWidth); + + @HostBinding('style.height.px') get heightStyle(): number { return this.height(); } + @HostBinding('style.width.px') get widthStyle(): number { return this.width(); } chartOptions: ChartOptions<'doughnut'> = { responsive: true, diff --git a/src/app/modules/dialog/components/general-dialog/general-dialog.component.ts b/src/app/modules/dialog/components/general-dialog/general-dialog.component.ts index 53adfab64cd..751af57604c 100644 --- a/src/app/modules/dialog/components/general-dialog/general-dialog.component.ts +++ b/src/app/modules/dialog/components/general-dialog/general-dialog.component.ts @@ -1,7 +1,9 @@ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; +import { + ChangeDetectionStrategy, Component, Inject, +} from '@angular/core'; import { MatButton } from '@angular/material/button'; import { - MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, + MatDialogRef, MatDialogTitle, MatDialogContent, MatDialogActions, MAT_DIALOG_DATA, } from '@angular/material/dialog'; import { TranslateModule } from '@ngx-translate/core'; import { MarkedIcon } from 'app/modules/ix-icon/icon-marker.util'; @@ -42,9 +44,8 @@ export interface GeneralDialogConfig { ], }) export class GeneralDialogComponent { - @Input() conf: GeneralDialogConfig; - constructor( - public dialogRef: MatDialogRef, + protected dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public conf: GeneralDialogConfig, ) { } } diff --git a/src/app/modules/dialog/dialog.service.ts b/src/app/modules/dialog/dialog.service.ts index 152a4b98723..76e67838c88 100644 --- a/src/app/modules/dialog/dialog.service.ts +++ b/src/app/modules/dialog/dialog.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { MatDialog, MatDialogConfig } from '@angular/material/dialog'; +import { MatDialog } from '@angular/material/dialog'; import { UntilDestroy } from '@ngneat/until-destroy'; import { TranslateService } from '@ngx-translate/core'; import { Observable, of } from 'rxjs'; @@ -100,9 +100,10 @@ export class DialogService { return dialogRef.afterClosed(); } - generalDialog(conf: GeneralDialogConfig, matConfig?: MatDialogConfig): Observable { - const dialogRef = this.matDialog.open(GeneralDialogComponent, matConfig); - dialogRef.componentInstance.conf = conf; + generalDialog(conf: GeneralDialogConfig): Observable { + const dialogRef = this.matDialog.open(GeneralDialogComponent, { + data: conf, + }); return dialogRef.afterClosed(); } diff --git a/src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.html b/src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.html index bca861d8a89..1f3fef6e1eb 100644 --- a/src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.html +++ b/src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.html @@ -1,5 +1,5 @@ \ No newline at end of file + [label]="label()" + [tooltip]="tooltip()" + [required]="required()" +> diff --git a/src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.ts b/src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.ts index 6d68f381ba9..7408a316184 100644 --- a/src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.ts +++ b/src/app/modules/forms/custom-selects/cloud-credentials-select/cloud-credentials-select.component.ts @@ -1,6 +1,6 @@ import { ComponentType } from '@angular/cdk/portal'; import { - Component, Input, forwardRef, inject, ChangeDetectionStrategy, + Component, forwardRef, inject, ChangeDetectionStrategy, input, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { Observable, map } from 'rxjs'; @@ -28,18 +28,18 @@ import { CloudCredentialService } from 'app/services/cloud-credential.service'; imports: [IxSelectComponent], }) export class CloudCredentialsSelectComponent extends IxSelectWithNewOption { - @Input() label: string; - @Input() tooltip: string; - @Input() required: boolean; - @Input() filterByProviders: CloudSyncProviderName[]; + readonly label = input(); + readonly tooltip = input(); + readonly required = input(); + readonly filterByProviders = input(); private cloudCredentialService = inject(CloudCredentialService); fetchOptions(): Observable { return this.cloudCredentialService.getCloudSyncCredentials().pipe( map((options) => { - if (this.filterByProviders) { - options = options.filter((option) => this.filterByProviders.includes(option.provider)); + if (this.filterByProviders()) { + options = options.filter((option) => this.filterByProviders().includes(option.provider)); } return options.map((option) => { return { label: `${option.name} (${cloudSyncProviderNameMap.get(option.provider)})`, value: option.id }; @@ -57,6 +57,6 @@ export class CloudCredentialsSelectComponent extends IxSelectWithNewOption { } override getFormInputData(): { providers: CloudSyncProviderName[] } { - return this.filterByProviders?.length ? { providers: this.filterByProviders } : undefined; + return this.filterByProviders()?.length ? { providers: this.filterByProviders() } : undefined; } } diff --git a/src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.html b/src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.html index bca861d8a89..1f3fef6e1eb 100644 --- a/src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.html +++ b/src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.html @@ -1,5 +1,5 @@ \ No newline at end of file + [label]="label()" + [tooltip]="tooltip()" + [required]="required()" +> diff --git a/src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.ts b/src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.ts index 73ef01bafe5..e1dac7b36b5 100644 --- a/src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.ts +++ b/src/app/modules/forms/custom-selects/ssh-credentials-select/ssh-credentials-select.component.ts @@ -1,7 +1,7 @@ import { ComponentType } from '@angular/cdk/portal'; import { ChangeDetectionStrategy, - Component, Input, forwardRef, inject, + Component, forwardRef, inject, input, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { Observable } from 'rxjs'; @@ -29,9 +29,9 @@ import { KeychainCredentialService } from 'app/services/keychain-credential.serv imports: [IxSelectComponent], }) export class SshCredentialsSelectComponent extends IxSelectWithNewOption { - @Input() label: string; - @Input() tooltip: string; - @Input() required: boolean; + readonly label = input(); + readonly tooltip = input(); + readonly required = input(); private keychainCredentialsService = inject(KeychainCredentialService); diff --git a/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html b/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html index 642550dba58..48c0b4191c6 100644 --- a/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html +++ b/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.html @@ -1,6 +1,6 @@ @if (dynamicSchema) {
@if (!(isHidden$ | async)) { @@ -37,8 +37,8 @@ @@ -65,7 +65,7 @@ [tooltip]="dynamicSchema.tooltip | translate" [itemsSchema]="dynamicSchema.itemsSchema" [required]="dynamicSchema.required" - [isEditMode]="isEditMode" + [isEditMode]="isEditMode()" [canAdd]="!isAllListControlsDisabled" [formArray]="getFormArray" (add)="addControl($event)" @@ -80,14 +80,14 @@ } } - + } diff --git a/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.spec.ts b/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.spec.ts index b5ab839591a..65f457bf8ee 100644 --- a/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.spec.ts +++ b/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.spec.ts @@ -171,7 +171,7 @@ describe('IxDynamicFormItemComponent', () => { expect(spectator.query(IxInputComponent).tooltip).toBe(inputSchema.tooltip); expect(spectator.query('ix-input')).not.toBeHidden(); - const field = spectator.component.dynamicForm.controls.input as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.input as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -191,7 +191,7 @@ describe('IxDynamicFormItemComponent', () => { expect(spectator.query(IxCodeEditorComponent).required).toBe(textSchema.required); expect(spectator.query(IxCodeEditorComponent).tooltip).toBe(textSchema.tooltip); expect(spectator.query('ix-code-editor')).not.toBeHidden(); - const field = spectator.component.dynamicForm.controls.text as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.text as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -213,7 +213,7 @@ describe('IxDynamicFormItemComponent', () => { expect(spectator.query(IxSelectComponent).tooltip).toBe(selectSchema.tooltip); expect(spectator.query('ix-select')).not.toBeHidden(); - const field = spectator.component.dynamicForm.controls.select as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.select as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -234,7 +234,7 @@ describe('IxDynamicFormItemComponent', () => { expect(spectator.query(IxCheckboxComponent).tooltip).toBe(checkboxSchema.tooltip); expect(spectator.query('ix-checkbox')).not.toBeHidden(); - const field = spectator.component.dynamicForm.controls.checkbox as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.checkbox as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -255,7 +255,7 @@ describe('IxDynamicFormItemComponent', () => { expect(spectator.query(IxIpInputWithNetmaskComponent).tooltip).toBe(ipaddrSchema.tooltip); expect(spectator.query('ix-ip-input-with-netmask')).not.toBeHidden(); - const field = spectator.component.dynamicForm.controls.ipaddr as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.ipaddr as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -276,7 +276,7 @@ describe('IxDynamicFormItemComponent', () => { expect(spectator.query(IxExplorerComponent).tooltip).toBe(explorerSchema.tooltip); expect(spectator.query('ix-explorer')).not.toBeHidden(); - const field = spectator.component.dynamicForm.controls.explorer as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.explorer as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -299,7 +299,7 @@ describe('IxDynamicFormItemComponent', () => { expect(spectator.query(IxListComponent).label).toBe(listSchema.title); expect(spectator.query('ix-list')).not.toBeHidden(); - const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -322,7 +322,7 @@ describe('IxDynamicFormItemComponent', () => { expect(item).not.toBeHidden(); }); - const field = spectator.component.dynamicForm.controls.dict as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.dict as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -344,7 +344,7 @@ describe('IxDynamicFormItemComponent', () => { }, }); - const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } @@ -368,7 +368,7 @@ describe('IxDynamicFormItemComponent', () => { }, }); - const field = spectator.component.dynamicForm.controls.list as CustomUntypedFormField; + const field = spectator.component.dynamicForm().controls.list as CustomUntypedFormField; if (!field.hidden$) { field.hidden$ = new BehaviorSubject(false); } diff --git a/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.ts b/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.ts index f4fcf690770..4b1ef65866f 100644 --- a/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.ts +++ b/src/app/modules/forms/ix-dynamic-form/components/ix-dynamic-form/ix-dynamic-form-item/ix-dynamic-form-item.component.ts @@ -1,6 +1,6 @@ import { AsyncPipe } from '@angular/common'; import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, output, + ChangeDetectionStrategy, ChangeDetectorRef, Component, input, Input, OnInit, output, } from '@angular/core'; import { UntypedFormArray, UntypedFormGroup, ReactiveFormsModule } from '@angular/forms'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; @@ -56,9 +56,9 @@ import { TooltipComponent } from 'app/modules/tooltip/tooltip.component'; ], }) export class IxDynamicFormItemComponent implements OnInit { - @Input() dynamicForm: UntypedFormGroup; + readonly dynamicForm = input(); @Input() dynamicSchema: DynamicFormSchemaNode; - @Input() isEditMode: boolean; + readonly isEditMode = input(); readonly addListItem = output(); readonly deleteListItem = output(); @@ -79,7 +79,7 @@ export class IxDynamicFormItemComponent implements OnInit { const dependsOn = this.dynamicSchema?.dependsOn; dependsOn?.forEach((depend) => { - this.dynamicForm?.valueChanges.pipe( + this.dynamicForm()?.valueChanges.pipe( map((changes: Record) => { return changes[depend]; }), @@ -94,20 +94,20 @@ export class IxDynamicFormItemComponent implements OnInit { this.dynamicSchema?.editable !== undefined && !this.dynamicSchema?.editable ) { - this.dynamicForm?.get(this.dynamicSchema.controlName)?.disable(); + this.dynamicForm()?.get(this.dynamicSchema.controlName)?.disable(); } if (this.dynamicSchema?.hidden) { - (this.dynamicForm.controls[this.dynamicSchema.controlName] as CustomUntypedFormField)?.hidden$?.next(true); + (this.dynamicForm().controls[this.dynamicSchema.controlName] as CustomUntypedFormField)?.hidden$?.next(true); } } get getFormArray(): UntypedFormArray { - return this.dynamicForm.controls[this.dynamicSchema.controlName] as UntypedFormArray; + return this.dynamicForm().controls[this.dynamicSchema.controlName] as UntypedFormArray; } get isHidden$(): Subject { - return (this.dynamicForm.controls[this.dynamicSchema.controlName] as CustomUntypedFormField)?.hidden$; + return (this.dynamicForm().controls[this.dynamicSchema.controlName] as CustomUntypedFormField)?.hidden$; } addControl(schema?: ChartSchemaNode[]): void { diff --git a/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.html b/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.html index e5a9d2d32be..447c1b70301 100644 --- a/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.html +++ b/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.html @@ -1,8 +1,8 @@ -@if (label || tooltip) { +@if (label() || tooltip()) { } @@ -12,11 +12,11 @@ [value]="value" [disabled]="isDisabled" [ixTest]="controlDirective.name" - [vertical]="vertical" - [attr.aria-label]="label" + [vertical]="vertical()" + [attr.aria-label]="label()" (change)="onValueChanged($event)" > - @for (option of options | async; track option.label) { + @for (option of options() | async; track option.label) { - -@if (hint) { - {{ hint }} + +@if (hint()) { + {{ hint() }} } diff --git a/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.ts b/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.ts index 3e77c76ea07..2f17e9a2cd0 100644 --- a/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.ts +++ b/src/app/modules/forms/ix-forms/components/ix-button-group/ix-button-group.component.ts @@ -1,6 +1,6 @@ import { AsyncPipe } from '@angular/common'; import { - ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, Input, + ChangeDetectionStrategy, ChangeDetectorRef, Component, HostBinding, input, } from '@angular/core'; import { ControlValueAccessor, NgControl } from '@angular/forms'; import { MatButtonToggleChange, MatButtonToggleGroup, MatButtonToggle } from '@angular/material/button-toggle'; @@ -10,6 +10,7 @@ import { Observable } from 'rxjs'; import { Option } from 'app/interfaces/option.interface'; import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component'; import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component'; +import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive'; import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-override.directive'; import { TestDirective } from 'app/modules/test-id/test.directive'; @@ -29,17 +30,22 @@ import { TestDirective } from 'app/modules/test-id/test.directive'; TranslateModule, TestOverrideDirective, TestDirective, + RegisteredControlDirective, ], }) export class IxButtonGroupComponent implements ControlValueAccessor { - @Input() label: string; - @Input() hint: string; - @Input() tooltip: string; - @Input() required: boolean; - @Input() options: Observable; - @Input() vertical = false; + readonly label = input(); + readonly hint = input(); + readonly tooltip = input(); + readonly required = input(); + readonly options = input>(); + readonly vertical = input(false); + readonly inlineFields = input(false); + @HostBinding('class.inlineFields') - @Input() inlineFields = false; + get inlineFieldsClass(): boolean { + return this.inlineFields(); + } isDisabled = false; value: string; diff --git a/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.html b/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.html index 06e59242086..d787804966d 100644 --- a/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.html +++ b/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.html @@ -1,9 +1,9 @@
- @if (label || tooltip) { + @if (label() || tooltip()) { } @@ -14,9 +14,9 @@ matInput ixRegisteredControl [value]="selectedOption?.label || textContent" - [placeholder]="allowCustomValue ? ('Search or enter value' | translate) : ('Search' | translate)" + [placeholder]="allowCustomValue() ? ('Search or enter value' | translate) : ('Search' | translate)" [disabled]="isDisabled" - [attr.aria-label]="label" + [attr.aria-label]="label()" [matAutocomplete]="auto" [ixTest]="controlDirective.name" [class.has-value]="selectedOption?.label || textContent" @@ -76,9 +76,9 @@
- + - @if (hint) { - {{ hint }} + @if (hint()) { + {{ hint() }} }
diff --git a/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.ts b/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.ts index a66a4d580ce..6bf38f5d8bd 100644 --- a/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.ts +++ b/src/app/modules/forms/ix-forms/components/ix-combobox/ix-combobox.component.ts @@ -1,8 +1,8 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, - Component, + Component, computed, ElementRef, - Input, + input, OnInit, ViewChild, } from '@angular/core'; @@ -29,6 +29,7 @@ import { Option } from 'app/interfaces/option.interface'; import { IxComboboxProvider, IxComboboxProviderManager } from 'app/modules/forms/ix-forms/components/ix-combobox/ix-combobox-provider'; import { IxErrorsComponent } from 'app/modules/forms/ix-forms/components/ix-errors/ix-errors.component'; import { IxLabelComponent } from 'app/modules/forms/ix-forms/components/ix-label/ix-label.component'; +import { RegisteredControlDirective } from 'app/modules/forms/ix-forms/directives/registered-control.directive'; import { IxIconComponent } from 'app/modules/ix-icon/ix-icon.component'; import { TestOverrideDirective } from 'app/modules/test-id/test-override/test-override.directive'; import { TestDirective } from 'app/modules/test-id/test.directive'; @@ -53,20 +54,21 @@ import { TestDirective } from 'app/modules/test-id/test.directive'; TranslateModule, TestOverrideDirective, TestDirective, + RegisteredControlDirective, ], }) export class IxComboboxComponent implements ControlValueAccessor, OnInit { - @Input() label: string; - @Input() hint: string; - @Input() required: boolean; - @Input() tooltip: string; - @Input() allowCustomValue = false; - @Input() set provider(comboboxProvider: IxComboboxProvider) { - this.comboboxProviderHandler = new IxComboboxProviderManager(comboboxProvider); - this.cdr.markForCheck(); - } + readonly label = input(); + readonly hint = input(); + readonly required = input(); + readonly tooltip = input(); + readonly allowCustomValue = input(false); + + readonly provider = input.required(); - private comboboxProviderHandler: IxComboboxProviderManager; + private comboboxProviderHandler = computed(() => { + return new IxComboboxProviderManager(this.provider()); + }); @ViewChild('ixInput') inputElementRef: ElementRef; @ViewChild('auto') autoCompleteRef: MatAutocomplete; @@ -126,7 +128,7 @@ export class IxComboboxComponent implements ControlValueAccessor, OnInit { inputBlurred(): void { this.onTouch(); - if (!this.allowCustomValue && !this.selectedOption) { + if (!this.allowCustomValue() && !this.selectedOption) { this.resetInput(); } } @@ -135,7 +137,7 @@ export class IxComboboxComponent implements ControlValueAccessor, OnInit { this.loading = true; this.cdr.markForCheck(); - this.comboboxProviderHandler?.fetch(filterValue).pipe( + this.comboboxProviderHandler()?.fetch(filterValue).pipe( catchError(() => { this.hasErrorInOptions = true; return EMPTY; @@ -191,7 +193,7 @@ export class IxComboboxComponent implements ControlValueAccessor, OnInit { this.loading = true; this.cdr.markForCheck(); - this.comboboxProviderHandler?.nextPage(this.filterValue !== null || this.filterValue !== undefined ? this.filterValue : '') + this.comboboxProviderHandler()?.nextPage(this.filterValue !== null || this.filterValue !== undefined ? this.filterValue : '') .pipe(untilDestroyed(this)).subscribe((options: Option[]) => { this.loading = false; this.cdr.markForCheck(); @@ -225,7 +227,7 @@ export class IxComboboxComponent implements ControlValueAccessor, OnInit { this.textContent = changedValue; this.filterChanged$.next(changedValue); - if (this.allowCustomValue && !this.options.some((option: Option) => option.value === changedValue)) { + if (this.allowCustomValue() && !this.options.some((option: Option) => option.value === changedValue)) { this.onChange(changedValue); } } diff --git a/src/app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive.ts b/src/app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive.ts index 9857c9b5859..636a6937770 100644 --- a/src/app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive.ts +++ b/src/app/modules/forms/ix-forms/components/ix-select/ix-select-with-new-option.directive.ts @@ -1,6 +1,6 @@ import { ComponentType } from '@angular/cdk/portal'; import { - AfterViewInit, Directive, Input, OnInit, ViewChild, inject, + AfterViewInit, Directive, OnInit, ViewChild, inject, } from '@angular/core'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; import { TranslateService } from '@ngx-translate/core'; @@ -17,7 +17,6 @@ export const addNewIxSelectValue = 'ADD_NEW'; @UntilDestroy() @Directive() export abstract class IxSelectWithNewOption implements OnInit, AfterViewInit { - @Input() disabled: boolean; formComponentIsWide = false; @ViewChild(IxSelectComponent) private ixSelect: IxSelectComponent; diff --git a/src/app/modules/forms/search-input/components/basic-search/basic-search.component.html b/src/app/modules/forms/search-input/components/basic-search/basic-search.component.html index 77b3a302e81..4613a66b2a6 100644 --- a/src/app/modules/forms/search-input/components/basic-search/basic-search.component.html +++ b/src/app/modules/forms/search-input/components/basic-search/basic-search.component.html @@ -13,7 +13,7 @@ (keydown.enter)="runSearch.emit()" /> -@if (allowAdvanced) { +@if (allowAdvanced()) { (); diff --git a/src/app/modules/forms/search-input/components/search-input/search-input.component.html b/src/app/modules/forms/search-input/components/search-input/search-input.component.html index 35e11713cb6..f80e7ece330 100644 --- a/src/app/modules/forms/search-input/components/search-input/search-input.component.html +++ b/src/app/modules/forms/search-input/components/search-input/search-input.component.html @@ -2,8 +2,8 @@ implements OnChanges { - @Input() allowAdvanced = true; - @Input() properties: SearchProperty[] = []; + readonly allowAdvanced = input(true); + readonly properties = input[]>([]); @Input() query: SearchQuery; - @Input() advancedSearchPlaceholder?: string; + readonly advancedSearchPlaceholder = input(); readonly queryChange = output>(); readonly runSearch = output(); @@ -79,7 +79,7 @@ export class SearchInputComponent implements OnChanges { } else if (this.query.isBasicQuery) { this.isInAdvancedMode = false; this.basicQuery = this.query.query; - } else if (this.allowAdvanced) { + } else if (this.allowAdvanced()) { this.isInAdvancedMode = true; this.advancedQuery = (this.query as AdvancedSearchQuery).filters; } diff --git a/src/app/modules/forms/search-input1/search-input1.component.html b/src/app/modules/forms/search-input1/search-input1.component.html index 77535f8e9db..4af04c9e4f6 100644 --- a/src/app/modules/forms/search-input1/search-input1.component.html +++ b/src/app/modules/forms/search-input1/search-input1.component.html @@ -6,9 +6,9 @@ #ixSearchInput matInput ixTest="search" - [maxLength]="maxLength" + [maxLength]="maxLength()" [value]="searchValue" - [disabled]="disabled" + [disabled]="disabled()" [placeholder]="'Search' | translate" (input)="onInput(ixSearchInput.value)" /> diff --git a/src/app/modules/forms/search-input1/search-input1.component.ts b/src/app/modules/forms/search-input1/search-input1.component.ts index 39e4a25492b..05bdaed1b5b 100644 --- a/src/app/modules/forms/search-input1/search-input1.component.ts +++ b/src/app/modules/forms/search-input1/search-input1.component.ts @@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, ElementRef, - HostListener, Input, + HostListener, ViewChild, OnInit, OnChanges, HostBinding, output, + input, } from '@angular/core'; import { MatInputModule } from '@angular/material/input'; import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; @@ -34,16 +35,20 @@ import { TestDirective } from 'app/modules/test-id/test.directive'; ], }) export class SearchInput1Component implements OnInit, OnChanges { - @HostBinding('class.disabled') - @Input() disabled = false; + readonly disabled = input(false); - @Input() value = ''; - @Input() maxLength = 524288; + readonly value = input(''); + readonly maxLength = input(524288); readonly search = output(); @ViewChild('ixSearchInput') input: ElementRef; + @HostBinding('class.disabled') + get disabledClass(): boolean { + return this.disabled(); + } + @HostListener('click') onHostClicked(): void { this.input.nativeElement.focus(); @@ -63,7 +68,7 @@ export class SearchInput1Component implements OnInit, OnChanges { } ngOnInit(): void { - this.searchValue = this.value; + this.searchValue = this.value(); this.handleSearchValueChanges(); } diff --git a/src/app/modules/ix-icon/ix-icon.component.ts b/src/app/modules/ix-icon/ix-icon.component.ts index f4ef52d849d..13b6a05f757 100644 --- a/src/app/modules/ix-icon/ix-icon.component.ts +++ b/src/app/modules/ix-icon/ix-icon.component.ts @@ -4,7 +4,7 @@ import { ChangeDetectionStrategy, Component, ElementRef, HostBinding, - Inject, Input, input, + Inject, input, OnChanges, OnInit, Optional, @@ -42,9 +42,12 @@ export class IxIconComponent extends MatIcon implements OnInit, OnChanges, After /** * Do not apply ordinary 24px size to the icon. */ - @Input() + readonly fullSize = input(false); + @HostBinding('class.full-size') - fullSize = false; + get fullSizeClass(): boolean { + return this.fullSize(); + } readonly name = input(); diff --git a/src/app/modules/ix-table/components/ix-table-body/ix-table-body.component.html b/src/app/modules/ix-table/components/ix-table-body/ix-table-body.component.html index e463ad13820..ecad6fdfdb4 100644 --- a/src/app/modules/ix-table/components/ix-table-body/ix-table-body.component.html +++ b/src/app/modules/ix-table/components/ix-table-body/ix-table-body.component.html @@ -1,4 +1,4 @@ -@for (row of dataProvider.currentPage$ | async; track trackRowByIdentity(row)) { +@for (row of dataProvider().currentPage$ | async; track trackRowByIdentity(row)) { @@ -48,7 +48,7 @@ @@ -57,7 +57,7 @@ } } -@if (isLoading) { +@if (isLoading()) {