From 52c4976fcf4ee255a3af68ff9778e4f5c4f84bd4 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 11 Aug 2020 16:07:53 +0200 Subject: Use ng select for multiselect --- .../user-video-settings.component.html | 10 ++--- .../user-video-settings.component.scss | 4 ++ .../user-video-settings.component.ts | 45 ++++++++++++++-------- 3 files changed, 39 insertions(+), 20 deletions(-) (limited to 'client/src/app/shared/shared-user-settings') diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.html b/client/src/app/shared/shared-user-settings/user-video-settings.component.html index bb9f59070..655b49e18 100644 --- a/client/src/app/shared/shared-user-settings/user-video-settings.component.html +++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.html @@ -30,11 +30,11 @@
- + +
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss index 430250b87..d6a17703a 100644 --- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss +++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss @@ -19,6 +19,10 @@ input[type=submit] { margin-bottom: 30px; } +my-select-checkbox { + @include ng-select(340px); +} + .form-group-select { margin-bottom: 30px; } diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts index 4e4539936..eb340e24d 100644 --- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts +++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts @@ -1,10 +1,9 @@ import { pick } from 'lodash-es' -import { SelectItem } from 'primeng/api' import { forkJoin, Subject, Subscription } from 'rxjs' import { first } from 'rxjs/operators' import { Component, Input, OnDestroy, OnInit } from '@angular/core' import { AuthService, Notifier, ServerService, User, UserService } from '@app/core' -import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' +import { FormReactive, FormValidatorService, ItemSelectCheckboxValue, SelectOptionsItem } from '@app/shared/shared-forms' import { I18n } from '@ngx-translate/i18n-polyfill' import { UserUpdateMe } from '@shared/models' import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type' @@ -20,10 +19,12 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, @Input() notifyOnUpdate = true @Input() userInformationLoaded: Subject - languageItems: SelectItem[] = [] + languageItems: SelectOptionsItem[] = [] defaultNSFWPolicy: NSFWPolicyType formValuesWatcher: Subscription + private allLanguagesGroup: string + constructor ( protected formValidatorService: FormValidatorService, private authService: AuthService, @@ -36,6 +37,8 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, } ngOnInit () { + this.allLanguagesGroup = this.i18n('All languages') + let oldForm: any this.buildForm({ @@ -51,13 +54,15 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, this.serverService.getConfig(), this.userInformationLoaded.pipe(first()) ]).subscribe(([ languages, config ]) => { - this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ] + const group = this.allLanguagesGroup + + this.languageItems = [ { label: this.i18n('Unknown language'), id: '_unknown', group } ] this.languageItems = this.languageItems - .concat(languages.map(l => ({ label: l.label, value: l.id }))) + .concat(languages.map(l => ({ label: l.label, id: l.id, group }))) - const videoLanguages = this.user.videoLanguages - ? this.user.videoLanguages - : this.languageItems.map(l => l.value) + const videoLanguages: ItemSelectCheckboxValue[] = this.user.videoLanguages + ? this.user.videoLanguages.map(l => ({ id: l })) + : [ { group } ] this.defaultNSFWPolicy = config.instance.defaultNSFWPolicy @@ -71,10 +76,12 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, if (this.reactiveUpdate) { oldForm = { ...this.form.value } + this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => { const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k]) oldForm = { ...this.form.value } - this.updateDetails([updatedKey]) + + this.updateDetails([ updatedKey ]) }) } }) @@ -91,16 +98,24 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit, const autoPlayNextVideo = this.form.value['autoPlayNextVideo'] let videoLanguages: string[] = this.form.value['videoLanguages'] + if (Array.isArray(videoLanguages)) { - if (videoLanguages.length === this.languageItems.length) { - videoLanguages = null // null means "All" - } else if (videoLanguages.length > 20) { - this.notifier.error('Too many languages are enabled. Please enable them all or stay below 20 enabled languages.') + if (videoLanguages.length > 20) { + this.notifier.error(this.i18n('Too many languages are enabled. Please enable them all or stay below 20 enabled languages.')) return - } else if (videoLanguages.length === 0) { - this.notifier.error('You need to enabled at least 1 video language.') + } + + if (videoLanguages.length === 0) { + this.notifier.error(this.i18n('You need to enable at least 1 video language.')) return } + + if ( + videoLanguages.length === this.languageItems.length || + (videoLanguages.length === 1 && videoLanguages[0] === this.allLanguagesGroup) + ) { + videoLanguages = null // null means "All" + } } let details: UserUpdateMe = { -- cgit v1.2.3