AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New UX Part 1.5 (#3105)

Browse source
This commit is contained in:
Joe Milazzo 2024-08-11 06:10:46 -05:00 • committed by GitHub
parent c188e0f23b
commit ac21b04fa4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
239 changed files with 1626 additions and 776 deletions
Download patch file Download diff file Expand all files Collapse all files

43
UI/Web/src/app/admin/manage-media-settings/manage-media-settings.component.ts
View file

@ -1,7 +1,7 @@
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, inject, OnInit} from '@angular/core';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, OnInit} from '@angular/core';
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {ToastrService} from 'ngx-toastr';
import {take} from 'rxjs';
import {debounceTime, distinctUntilChanged, filter, switchMap, take, tap} from 'rxjs';
import {SettingsService} from '../settings.service';
import {ServerSettings} from '../_models/server-settings';
import {DirectoryPickerComponent, DirectoryPickerResult} from '../_modals/directory-picker/directory-picker.component';
@ -20,7 +20,7 @@ import {
import {allEncodeFormats} from '../_models/encode-format';
import {ManageMediaIssuesComponent} from '../manage-media-issues/manage-media-issues.component';
import {NgFor, NgIf, NgTemplateOutlet} from '@angular/common';
import {translate, TranslocoDirective, TranslocoService} from "@ngneat/transloco";
import {translate, TranslocoDirective, TranslocoService} from "@jsverse/transloco";
import {allCoverImageSizes} from '../_models/cover-image-size';
import {pageLayoutModes} from "../../_models/preferences/preferences";
import {PageLayoutModePipe} from "../../_pipes/page-layout-mode.pipe";
@ -28,6 +28,7 @@ import {SettingItemComponent} from "../../settings/_components/setting-item/sett
import {EncodeFormatPipe} from "../../_pipes/encode-format.pipe";
import {CoverImageSizePipe} from "../../_pipes/cover-image-size.pipe";
import {ConfirmService} from "../../shared/confirm.service";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
@Component({
selector: 'app-manage-media-settings',
@ -47,6 +48,7 @@ export class ManageMediaSettingsComponent implements OnInit {
private readonly settingsService = inject(SettingsService);
private readonly toastr = inject(ToastrService);
private readonly modalService = inject(NgbModal);
private readonly destroyRef = inject(DestroyRef);
protected readonly allEncodeFormats = allEncodeFormats;
protected readonly allCoverImageSizes = allCoverImageSizes;
@ -61,33 +63,46 @@ export class ManageMediaSettingsComponent implements OnInit {
this.settingsForm.addControl('encodeMediaAs', new FormControl(this.serverSettings.encodeMediaAs, [Validators.required]));
this.settingsForm.addControl('bookmarksDirectory', new FormControl(this.serverSettings.bookmarksDirectory, [Validators.required]));
this.settingsForm.addControl('coverImageSize', new FormControl(this.serverSettings.coverImageSize, [Validators.required]));
// Automatically save settings as we edit them
this.settingsForm.valueChanges.pipe(
distinctUntilChanged(),
debounceTime(100),
filter(_ => this.settingsForm.valid),
takeUntilDestroyed(this.destroyRef),
switchMap(_ => {
const data = this.packData();
return this.settingsService.updateServerSettings(data);
}),
tap(settings => {
this.serverSettings = settings;
this.resetForm();
this.cdRef.markForCheck();
})
).subscribe();
this.cdRef.markForCheck();
});
}
resetForm() {
this.settingsForm.get('encodeMediaAs')?.setValue(this.serverSettings.encodeMediaAs);
this.settingsForm.get('bookmarksDirectory')?.setValue(this.serverSettings.bookmarksDirectory);
this.settingsForm.get('coverImageSize')?.setValue(this.serverSettings.coverImageSize);
this.settingsForm.get('encodeMediaAs')?.setValue(this.serverSettings.encodeMediaAs, {onlySelf: true, emitEvent: false});
this.settingsForm.get('bookmarksDirectory')?.setValue(this.serverSettings.bookmarksDirectory, {onlySelf: true, emitEvent: false});
this.settingsForm.get('coverImageSize')?.setValue(this.serverSettings.coverImageSize, {onlySelf: true, emitEvent: false});
this.settingsForm.markAsPristine();
this.cdRef.markForCheck();
}
saveSettings() {
packData() {
const modelSettings = Object.assign({}, this.serverSettings);
modelSettings.encodeMediaAs = parseInt(this.settingsForm.get('encodeMediaAs')?.value, 10);
modelSettings.bookmarksDirectory = this.settingsForm.get('bookmarksDirectory')?.value;
modelSettings.coverImageSize = parseInt(this.settingsForm.get('coverImageSize')?.value, 10);
this.settingsService.updateServerSettings(modelSettings).pipe(take(1)).subscribe(async (settings: ServerSettings) => {
this.serverSettings = settings;
this.resetForm();
this.toastr.success(this.translocoService.translate('toasts.server-settings-updated'));
}, (err: any) => {
console.error('error: ', err);
});
return modelSettings;
}
async resetToDefaults() {
if (!await this.confirmService.confirm(translate('toasts.confirm-reset-server-settings'))) return;