diff --git a/src/views/Admin/SettingsView.vue b/src/views/Admin/SettingsView.vue index 3f5b6a8f1..96c0272d0 100644 --- a/src/views/Admin/SettingsView.vue +++ b/src/views/Admin/SettingsView.vue @@ -178,11 +178,12 @@ - {{ - t("Save instance settings") - }} + {{ t("Save instance settings") }} @@ -556,6 +560,7 @@ import { } from "@/utils/image"; import { useDefaultMaxSize } from "@/composition/config"; import { CONFIG } from "@/graphql/config"; +import { OptionsProp } from "@oruga-ui/oruga-next"; const defaultAdminSettings: IAdminSettings = { instanceName: "", @@ -581,10 +586,19 @@ const defaultAdminSettings: IAdminSettings = { externalLinks: [], }; -const { onResult: onAdminSettingsResult } = useQuery<{ +const { + onResult: onAdminSettingsResult, + onError: onAdminSettingsError, + loading: onAdminSettingsLoading, +} = useQuery<{ adminSettings: IAdminSettings; }>(ADMIN_SETTINGS); +onAdminSettingsError((error) => { + console.error(error); + alert(`Error when loading ADMIN_SETTINGS: ${error.message}`); +}); + const { refetch: refetchConfig } = useQuery(CONFIG); const adminSettings = ref(); @@ -607,9 +621,17 @@ const { file: instanceFaviconFile } = instanceFavicon; const defaultPicture = initWrappedMedia(); const { file: defaultPictureFile } = defaultPicture; -const { result: languageResult } = useQuery<{ languages: ILanguage[] }>( - LANGUAGES -); +const { + result: languageResult, + onError: onLanguageError, + loading: languageLoading, +} = useQuery<{ languages: ILanguage[] }>(LANGUAGES); + +onLanguageError((error) => { + console.error(error); + alert(`Error when loading LANGUAGES: ${error.message}`); +}); + const languages = computed(() => languageResult.value?.languages); const { t } = useI18n({ useScope: "global" }); @@ -618,6 +640,7 @@ useHead({ }); const settingsToWrite = ref(defaultAdminSettings); +const instanceLanguages = ref([]); watch(adminSettings, () => { // We need to use structuredClone to clone deep properties of adminSettings (like externalLinks) @@ -627,6 +650,27 @@ watch(adminSettings, () => { } }); +watch([adminSettings, languages], ([newAdminSettings, newLanguages]) => { + // We need both ADMIN_SETTINGS and LANGUAGES queries to be finished + if (!newAdminSettings || !newLanguages) return; + + // Initialize instanceLanguages with adminSettings received values + const languageCodes = [...(adminSettings.value?.instanceLanguages ?? [])]; + instanceLanguages.value = languageCodes + .map((code) => languageForCode(code)) + .filter((language) => language) as string[]; +}); + +watch(instanceLanguages, async (newInstanceLanguages) => { + const newFilteredInstanceLanguages = newInstanceLanguages + .map((language) => { + return codeForLanguage(language); + }) + .filter((code) => code !== undefined) as string[]; + + settingsToWrite.value.instanceLanguages = newFilteredInstanceLanguages; +}); + const addLink = () => { settingsToWrite.value.externalLinks.push({ url: "", @@ -639,7 +683,7 @@ const deleteLink = (index: number) => { settingsToWrite.value.externalLinks.splice(index, 1); }; -const filteredLanguages = ref([]); +const filteredLanguages = ref>([]); const registrationsMode = computed({ get() { @@ -667,26 +711,6 @@ const registrationsMode = computed({ }, }); -const instanceLanguages = computed({ - get() { - const languageCodes = [...(adminSettings.value?.instanceLanguages ?? [])]; - return languageCodes - .map((code) => languageForCode(code)) - .filter((language) => language) as string[]; - }, - set(newInstanceLanguages: string[]) { - const newFilteredInstanceLanguages = newInstanceLanguages - .map((language) => { - return codeForLanguage(language); - }) - .filter((code) => code !== undefined) as string[]; - settingsToWrite.value = { - ...settingsToWrite.value, - instanceLanguages: newFilteredInstanceLanguages, - }; - }, -}); - const notifier = inject("notifier"); const {