targo-frontend/src/stores/ui-store.ts

83 lines
3.1 KiB
TypeScript

import { defineStore } from 'pinia';
import { Notify, LocalStorage, useQuasar, Dark } from 'quasar';
import { computed, ref } from 'vue';
import { Preferences } from 'src/modules/profile/models/preferences.models';
import { ProfileService } from 'src/modules/profile/services/profile-service';
import { useI18n, type ComposerTranslation } from 'vue-i18n';
export const useUiStore = defineStore('ui', () => {
const q = useQuasar();
const { locale } = useI18n();
const is_left_drawer_open = ref(false);
const focus_next_component = ref(false);
const is_mobile_mode = computed(() => q.screen.lt.md);
const user_preferences = ref<Preferences>(new Preferences);
const toggleRightDrawer = () => {
is_left_drawer_open.value = !is_left_drawer_open.value;
};
const getUserPreferences = async () => {
try {
const local_user_preferences = LocalStorage.getItem<Preferences>('user_preferences');
if (local_user_preferences !== null) {
if (local_user_preferences.id !== -1) {
Object.assign(user_preferences.value, local_user_preferences);
setPreferences();
return;
}
}
const response = await ProfileService.getUserPreferences();
if (response.success && response.data) {
LocalStorage.setItem('user_preferences', response.data);
Object.assign(user_preferences.value, response.data);
setPreferences();
}
} catch (error) {
user_preferences.value = new Preferences;
console.error('Could not retrieve user preferences: ', error);
}
};
const updateUserPreferences = async (t: ComposerTranslation) => {
try {
if (user_preferences.value.id === -1) return;
const response = await ProfileService.updateUserPreferences(user_preferences.value);
if (response.success && response.data) {
Object.assign(user_preferences.value, response.data);
LocalStorage.setItem('user_preferences', response.data);
setPreferences();
Notify.create({ message: t('profile.preferences.update_successful'), color: 'accent' });
return;
}
} catch (error) {
console.error('Could not update user preferences: ', error);
}
Notify.create({ message: t('profile.preferences.update_failed'), color: 'negative' })
};
const setPreferences = () => {
if (user_preferences.value !== undefined) {
// if user_preferences.value.is_dark_mode === null
Dark.set(user_preferences.value.is_dark_mode ?? "auto");
locale.value = user_preferences.value.display_language;
}
}
return {
is_mobile_mode,
focus_next_component,
is_left_drawer_open,
user_preferences,
toggleRightDrawer,
getUserPreferences,
updateUserPreferences,
};
});