sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Feature/migrate slide toggle components to angular material 15 (#1840)

Browse Source 
* Upgrade @angular/material

* Change MatSlideToggle to MatCheckbox

* Update changelog
This commit is contained in:
Thomas Kaul
2023-04-09 09:33:36 +02:00
committed by GitHub
parent 24716f0561
commit a57fdfb2bb
9 changed files with 33 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/client/src/app/components/admin-overview/admin-overview.component.ts
View File

@@ -1,5 +1,5 @@
import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { MatLegacySlideToggleChange as MatSlideToggleChange } from '@angular/material/legacy-slide-toggle';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { CacheService } from '@ghostfolio/client/services/cache.service';
import { DataService } from '@ghostfolio/client/services/data.service';
import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -166,14 +166,14 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
}
}
public onReadOnlyModeChange(aEvent: MatSlideToggleChange) {
public onReadOnlyModeChange(aEvent: MatCheckboxChange) {
this.putAdminSetting({
key: PROPERTY_IS_READ_ONLY_MODE,
value: aEvent.checked ? true : undefined
});
}
public onEnableUserSignupModeChange(aEvent: MatSlideToggleChange) {
public onEnableUserSignupModeChange(aEvent: MatCheckboxChange) {
this.putAdminSetting({
key: PROPERTY_IS_USER_SIGNUP_ENABLED,
value: aEvent.checked ? undefined : false

8
apps/client/src/app/components/admin-overview/admin-overview.html
View File

@@ -101,21 +101,21 @@
<div class="d-flex my-3">
<div class="w-50" i18n>User Signup</div>
<div class="w-50">
<mat-slide-toggle
<mat-checkbox
color="primary"
[checked]="info.globalPermissions.includes(permissions.createUserAccount)"
(change)="onEnableUserSignupModeChange($event)"
></mat-slide-toggle>
></mat-checkbox>
</div>
</div>
<div *ngIf="hasPermissionToToggleReadOnlyMode" class="d-flex my-3">
<div class="w-50" i18n>Read-only Mode</div>
<div class="w-50">
<mat-slide-toggle
<mat-checkbox
color="primary"
[checked]="info?.isReadOnlyMode"
(change)="onReadOnlyModeChange($event)"
></mat-slide-toggle>
></mat-checkbox>
</div>
</div>
<div *ngIf="hasPermissionForSystemMessage" class="d-flex my-3">

4
apps/client/src/app/components/admin-overview/admin-overview.module.ts
View File

@@ -3,8 +3,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
import { CacheService } from '@ghostfolio/client/services/cache.service';
import { GfValueModule } from '@ghostfolio/ui/value';
@@ -18,9 +18,9 @@ import { AdminOverviewComponent } from './admin-overview.component';
FormsModule,
GfValueModule,
MatButtonModule,
MatCheckboxModule,
MatCardModule,
MatSelectModule,
MatSlideToggleModule,
ReactiveFormsModule
],
providers: [CacheService],

15
apps/client/src/app/pages/account/account-page.component.ts
View File

@@ -5,11 +5,8 @@ import {
OnInit,
ViewChild
} from '@angular/core';
import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
import {
MatLegacySlideToggle as MatSlideToggle,
MatLegacySlideToggleChange as MatSlideToggleChange
} from '@angular/material/legacy-slide-toggle';
import {
MatSnackBar,
MatSnackBarRef,
@@ -39,7 +36,7 @@ import { CreateOrUpdateAccessDialog } from './create-or-update-access-dialog/cre
})
export class AccountPageComponent implements OnDestroy, OnInit {
@ViewChild('toggleSignInWithFingerprintEnabledElement')
signInWithFingerprintElement: MatSlideToggle;
signInWithFingerprintElement: MatCheckbox;
public accesses: Access[];
public appearancePlaceholder = $localize`Auto`;
@@ -215,7 +212,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
});
}
public onExperimentalFeaturesChange(aEvent: MatSlideToggleChange) {
public onExperimentalFeaturesChange(aEvent: MatCheckboxChange) {
this.dataService
.putUserSetting({ isExperimentalFeatures: aEvent.checked })
.pipe(takeUntil(this.unsubscribeSubject))
@@ -280,7 +277,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
}
}
public onRestrictedViewChange(aEvent: MatSlideToggleChange) {
public onRestrictedViewChange(aEvent: MatCheckboxChange) {
this.dataService
.putUserSetting({ isRestrictedView: aEvent.checked })
.pipe(takeUntil(this.unsubscribeSubject))
@@ -298,7 +295,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
});
}
public onSignInWithFingerprintChange(aEvent: MatSlideToggleChange) {
public onSignInWithFingerprintChange(aEvent: MatCheckboxChange) {
if (aEvent.checked) {
this.registerDevice();
} else {
@@ -314,7 +311,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
}
}
public onViewModeChange(aEvent: MatSlideToggleChange) {
public onViewModeChange(aEvent: MatCheckboxChange) {
this.dataService
.putUserSetting({ viewMode: aEvent.checked === true ? 'ZEN' : 'DEFAULT' })
.pipe(takeUntil(this.unsubscribeSubject))

16
apps/client/src/app/pages/account/account-page.html
View File

@@ -88,12 +88,12 @@
</div>
</div>
<div class="pl-1 w-50">
<mat-slide-toggle
<mat-checkbox
color="primary"
[checked]="user.settings.isRestrictedView"
[disabled]="!hasPermissionToUpdateUserSettings"
(change)="onRestrictedViewChange($event)"
></mat-slide-toggle>
></mat-checkbox>
</div>
</div>
<div class="d-flex mt-4 py-1">
@@ -226,23 +226,23 @@
</div>
</div>
<div class="pl-1 w-50">
<mat-slide-toggle
<mat-checkbox
color="primary"
[checked]="user.settings.viewMode === 'ZEN'"
[disabled]="!hasPermissionToUpdateViewMode"
(change)="onViewModeChange($event)"
></mat-slide-toggle>
></mat-checkbox>
</div>
</div>
<div class="align-items-center d-flex mt-4 py-1">
<div class="pr-1 w-50" i18n>Sign in with fingerprint</div>
<div class="pl-1 w-50">
<mat-slide-toggle
<mat-checkbox
#toggleSignInWithFingerprintEnabledElement
color="primary"
[disabled]="!hasPermissionToUpdateUserSettings"
(change)="onSignInWithFingerprintChange($event)"
></mat-slide-toggle>
></mat-checkbox>
</div>
</div>
<div
@@ -256,12 +256,12 @@
</div>
</div>
<div class="pl-1 w-50">
<mat-slide-toggle
<mat-checkbox
color="primary"
[checked]="user.settings.isExperimentalFeatures"
[disabled]="!hasPermissionToUpdateUserSettings"
(change)="onExperimentalFeaturesChange($event)"
></mat-slide-toggle>
></mat-checkbox>
</div>
</div>
<div class="align-items-center d-flex mt-4 py-1">

4
apps/client/src/app/pages/account/account-page.module.ts
View File

@@ -3,10 +3,10 @@ import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
import { RouterModule } from '@angular/router';
import { GfPortfolioAccessTableModule } from '@ghostfolio/client/components/access-table/access-table.module';
import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
@@ -28,10 +28,10 @@ import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-di
GfValueModule,
MatButtonModule,
MatCardModule,
MatCheckboxModule,
MatDialogModule,
MatFormFieldModule,
MatSelectModule,
MatSlideToggleModule,
ReactiveFormsModule,
RouterModule
]