refactor(webui): use reworked client-settings API

This commit is contained in:
Gauthier Roebroeck 2025-02-06 10:50:50 +08:00
parent 0b37257be7
commit 05f73f0d1f
6 changed files with 51 additions and 41 deletions

View file

@ -176,6 +176,7 @@ import {
import {coverBase64} from '@/types/image'
import {ReadListDto} from '@/types/komga-readlists'
import OneShotActionsMenu from '@/components/menus/OneshotActionsMenu.vue'
import {CLIENT_SETTING} from '@/types/komga-clientsettings'
export default Vue.extend({
name: 'ItemCard',
@ -274,7 +275,7 @@ export default Vue.extend({
},
computed: {
isStretch(): boolean {
return this.$store.getters.getClientSettingPosterStretch
return this.$store.getters.getClientSettings[CLIENT_SETTING.WEBUI_POSTER_STRETCH]?.value === 'true'
},
canReadPages(): boolean {
return this.$store.getters.mePageStreaming && this.computedItem.type() === ItemTypes.BOOK

View file

@ -2,31 +2,32 @@ import {AxiosInstance} from 'axios'
import _Vue from 'vue'
import KomgaSettingsService from '@/services/komga-settings.service'
import {Module} from 'vuex'
import {LibraryDto} from '@/types/komga-libraries'
import {CLIENT_SETTING, ClientSettingDto} from '@/types/komga-clientsettings'
import {ClientSettingDto} from '@/types/komga-clientsettings'
let service = KomgaSettingsService
let service: KomgaSettingsService
const vuexModule: Module<any, any> = {
state: {
clientSettings: [] as ClientSettingDto[],
clientSettingsGlobal: {} as Record<string, ClientSettingDto>,
clientSettingsUser: {} as Record<string, ClientSettingDto>,
},
getters: {
getClientSettingByKey: (state) => (key: string) => {
return state.clientSettings.find((it: ClientSettingDto) => it.key === key)
},
getClientSettingPosterStretch(state): boolean {
return state.clientSettings.find((it: ClientSettingDto) => it.key === CLIENT_SETTING.WEBUI_POSTER_STRETCH)?.value === 'true'
getClientSettings(state): Record<string, ClientSettingDto> {
return {...state.clientSettingsGlobal, ...state.clientSettingsUser}
},
},
mutations: {
setClientSettings(state, settings) {
state.clientSettings = settings
setClientSettingsGlobal(state, settings) {
state.clientSettingsGlobal = settings
},
setClientSettingsUser(state, settings) {
state.clientSettingsUser = settings
},
},
actions: {
async getClientSettings({commit}) {
commit('setClientSettings', await service.getClientSettings())
commit('setClientSettingsGlobal', await service.getClientSettingsGlobal())
commit('setClientSettingsUser', await service.getClientSettingsUser())
},
},
}

View file

@ -36,11 +36,11 @@ export default class KomgaSettingsService {
}
}
async getClientSettings(): Promise<ClientSettingDto[]> {
async getClientSettingsGlobal(): Promise<Record<string, ClientSettingDto>> {
try {
return (await this.http.get(`${API_CLIENT_SETTINGS}/list`)).data
return (await this.http.get(`${API_CLIENT_SETTINGS}/global/list`)).data
} catch (e) {
let msg = 'An error occurred while trying to retrieve client settings'
let msg = 'An error occurred while trying to retrieve global client settings'
if (e.response.data.message) {
msg += `: ${e.response.data.message}`
}
@ -48,9 +48,21 @@ export default class KomgaSettingsService {
}
}
async updateClientSettingGlobal(setting: ClientSettingGlobalUpdateDto) {
async getClientSettingsUser(): Promise<Record<string, ClientSettingDto>> {
try {
await this.http.put(`${API_CLIENT_SETTINGS}/global`, setting)
return (await this.http.get(`${API_CLIENT_SETTINGS}/user/list`)).data
} catch (e) {
let msg = 'An error occurred while trying to retrieve user client settings'
if (e.response.data.message) {
msg += `: ${e.response.data.message}`
}
throw new Error(msg)
}
}
async updateClientSettingGlobal(settings: Record<string, ClientSettingGlobalUpdateDto>) {
try {
await this.http.patch(`${API_CLIENT_SETTINGS}/global`, settings)
} catch (e) {
let msg = 'An error occurred while trying to update global client setting'
if (e.response.data.message) {
@ -60,9 +72,9 @@ export default class KomgaSettingsService {
}
}
async updateClientSettingUser(setting: ClientSettingUserUpdateDto) {
async updateClientSettingUser(settings: Record<string, ClientSettingUserUpdateDto>) {
try {
await this.http.put(`${API_CLIENT_SETTINGS}/user`, setting)
await this.http.patch(`${API_CLIENT_SETTINGS}/user`, settings)
} catch (e) {
let msg = 'An error occurred while trying to update user client setting'
if (e.response.data.message) {

View file

@ -1,18 +1,14 @@
export interface ClientSettingDto {
key: string,
value: string,
allowUnauthorized?: boolean,
userId?: string,
}
export interface ClientSettingGlobalUpdateDto {
key: string,
value: string,
allowUnauthorized: boolean,
}
export interface ClientSettingUserUpdateDto {
key: string,
value: string,
}

View file

@ -160,7 +160,7 @@ export default Vue.extend({
unclaimed: false,
oauth2Providers: [] as OAuth2ClientDto[],
locales: this.$i18n.availableLocales.map((x: any) => ({text: this.$i18n.t('common.locale_name', x), value: x})),
clientSettings: [] as ClientSettingDto[],
clientSettings: {} as Record<string, ClientSettingDto>,
}
},
validations: {
@ -173,12 +173,12 @@ export default Vue.extend({
hideLogin(): boolean {
return !this.unclaimed
&& this.oauth2Providers.length > 0
&& (this.clientSettings.find(x => x.key == CLIENT_SETTING.WEBUI_OAUTH2_HIDE_LOGIN)?.value === 'true')
&& (this.clientSettings[CLIENT_SETTING.WEBUI_OAUTH2_HIDE_LOGIN]?.value === 'true')
},
autoOauth2Login(): boolean {
return !this.unclaimed
&& this.oauth2Providers.length == 1
&& (this.clientSettings.find(x => x.key == CLIENT_SETTING.WEBUI_OAUTH2_AUTO_LOGIN)?.value === 'true')
&& (this.clientSettings[CLIENT_SETTING.WEBUI_OAUTH2_AUTO_LOGIN]?.value === 'true')
&& !this.$route.query.error
&& !this.$route.query.logout
},
@ -250,7 +250,7 @@ export default Vue.extend({
},
async mounted() {
this.getClaimStatus()
this.clientSettings = await this.$komgaSettings.getClientSettings()
this.clientSettings = await this.$komgaSettings.getClientSettingsGlobal()
this.oauth2Providers = await this.$komgaOauth2.getProviders()
if (this.$route.query.error) this.showSnack(convertErrorCodes(this.$route.query.error.toString()))
if (this.hideLogin && this.autoOauth2Login) this.oauth2Login(this.oauth2Providers[0])

View file

@ -57,7 +57,7 @@
import Vue from 'vue'
import ConfirmationDialog from '@/components/dialogs/ConfirmationDialog.vue'
import FileBrowserDialog from '@/components/dialogs/FileBrowserDialog.vue'
import {CLIENT_SETTING, ClientSettingDto} from '@/types/komga-clientsettings'
import {CLIENT_SETTING, ClientSettingDto, ClientSettingGlobalUpdateDto} from '@/types/komga-clientsettings'
export default Vue.extend({
name: 'UISettings',
@ -91,32 +91,32 @@ export default Vue.extend({
methods: {
async refreshSettings() {
await this.$store.dispatch('getClientSettings')
this.form.oauth2HideLogin = this.$store.getters.getClientSettingByKey(CLIENT_SETTING.WEBUI_OAUTH2_HIDE_LOGIN)?.value === 'true'
this.form.oauth2AutoLogin = this.$store.getters.getClientSettingByKey(CLIENT_SETTING.WEBUI_OAUTH2_AUTO_LOGIN)?.value === 'true'
this.form.posterStretch = this.$store.getters.getClientSettingByKey(CLIENT_SETTING.WEBUI_POSTER_STRETCH)?.value === 'true'
this.form.oauth2HideLogin = this.$store.state.komgaSettings.clientSettingsGlobal[CLIENT_SETTING.WEBUI_OAUTH2_HIDE_LOGIN]?.value === 'true'
this.form.oauth2AutoLogin = this.$store.state.komgaSettings.clientSettingsGlobal[CLIENT_SETTING.WEBUI_OAUTH2_AUTO_LOGIN]?.value === 'true'
this.form.posterStretch = this.$store.state.komgaSettings.clientSettingsGlobal[CLIENT_SETTING.WEBUI_POSTER_STRETCH]?.value === 'true'
this.$v.form.$reset()
},
async saveSettings() {
let newSettings = {} as Record<string, ClientSettingGlobalUpdateDto>
if (this.$v.form?.oauth2HideLogin?.$dirty)
await this.$komgaSettings.updateClientSettingGlobal({
key: CLIENT_SETTING.WEBUI_OAUTH2_HIDE_LOGIN,
newSettings[CLIENT_SETTING.WEBUI_OAUTH2_HIDE_LOGIN] = {
value: this.form.oauth2HideLogin ? 'true' : 'false',
allowUnauthorized: true,
})
}
if (this.$v.form?.oauth2AutoLogin?.$dirty)
await this.$komgaSettings.updateClientSettingGlobal({
key: CLIENT_SETTING.WEBUI_OAUTH2_AUTO_LOGIN,
newSettings[CLIENT_SETTING.WEBUI_OAUTH2_AUTO_LOGIN] = {
value: this.form.oauth2AutoLogin ? 'true' : 'false',
allowUnauthorized: true,
})
}
if (this.$v.form?.posterStretch?.$dirty)
await this.$komgaSettings.updateClientSettingGlobal({
key: CLIENT_SETTING.WEBUI_POSTER_STRETCH,
newSettings[CLIENT_SETTING.WEBUI_POSTER_STRETCH] = {
value: this.form.posterStretch ? 'true' : 'false',
allowUnauthorized: false,
})
}
await this.$komgaSettings.updateClientSettingGlobal(newSettings)
await this.refreshSettings()
},