settings page WIP

vue3/src/components/settings/AccountSettings.vue

@@ -0,0 +1,60 @@
+<template>
+    <v-form>
+        <p class="text-h6">{{ $t('Profile') }}</p>
+        <v-divider class="mb-3"></v-divider>
+        <v-text-field :label="$t('Username')" v-model="user.username" disabled :hint="$t('theUsernameCannotBeChanged')" persistent-hint></v-text-field>
+
+        <!--                    <v-label>Avatar</v-label><br/>-->
+        <!--                    <v-avatar class="mt-3 mb-3" style="height: 10vh; width: 10vh" color="info">V</v-avatar> Feature coming in a future Version of Tandoor.-->
+
+        <v-text-field :label="$t('First_name')" v-model="user.firstName"></v-text-field>
+        <v-text-field :label="$t('Last_name')" v-model="user.lastName"></v-text-field>
+        <v-btn color="success" prepend-icon="$save" @click="save()">{{ $t('Save') }}</v-btn>
+
+        <p class="text-h6 mt-3">{{ $t('Account') }}</p>
+        <v-divider class="mb-3"></v-divider>
+        <v-btn color="primary" class="mt-1" href="/accounts/email/" target="_blank">{{ $t('Manage_Emails') }}</v-btn>
+        <br/>
+        <v-btn color="primary" class="mt-1" href="/accounts/password/change/" target="_blank">{{ $t('Change_Password') }}</v-btn>
+        <br/>
+        <v-btn color="primary" class="mt-1" href="/accounts/social/connections/" target="_blank">{{ $t('Social_Authentication') }}</v-btn>
+        <br/>
+    </v-form>
+</template>
+
+
+<script setup lang="ts">
+
+import {onMounted, ref} from "vue";
+import {ApiApi, User} from "@/openapi";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+
+
+const user = ref({} as User)
+
+onMounted(() => {
+    let api = new ApiApi()
+
+    api.apiUserRetrieve({id: useUserPreferenceStore().userSettings.user}).then(r => {
+        user.value = r
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+})
+
+function save(){
+    let api = new ApiApi()
+    api.apiUserPartialUpdate({id: user.value.id!, patchedUser: user.value}).then(r =>  {
+        user.value = r
+        useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+    })
+}
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/settings/CosmeticSettings.vue

@@ -0,0 +1,92 @@
+<template>
+    <v-form>
+        <p class="text-h6">{{ $t('Cosmetic') }}</p>
+        <v-divider class="mb-3"></v-divider>
+
+        <v-select
+            :label="$t('Language')"
+            v-model="$i18n.locale"
+            :items="availableLocalizations"
+            item-title="language"
+            item-value="code"
+            @update:model-value="updateLanguage()"
+        ></v-select>
+
+        <v-label>{{$t('Nav_Color')}}</v-label>
+        <v-color-picker v-model="useUserPreferenceStore().userSettings.navBgColor" mode="hex" :modes="['hex']" show-swatches :swatches="[['#ddbf86'],['#b98766'],['#b55e4f'],['#82aa8b'],['#385f84']]"></v-color-picker>
+
+        <v-checkbox :label="$t('Show_Logo')" :hint="$t('Show_Logo_Help')" persistent-hint v-model="useUserPreferenceStore().userSettings.navShowLogo"></v-checkbox>
+        <v-checkbox :label="$t('Sticky_Nav')" :hint="$t('Sticky_Nav_Help')" persistent-hint v-model="useUserPreferenceStore().userSettings.navSticky"></v-checkbox>
+
+        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
+
+        <p class="text-h6 mt-3">{{ $t('Preferences') }}</p>
+        <v-divider class="mb-3"></v-divider>
+
+        <v-text-field v-model="useUserPreferenceStore().userSettings.defaultUnit" :label="$t('Default_Unit')"></v-text-field>
+        <v-text-field v-model="useUserPreferenceStore().userSettings.ingredientDecimals" :label="$t('Decimals')"></v-text-field>
+
+        <v-select
+            :label="$t('DefaultPage')"
+            v-model="useUserPreferenceStore().userSettings.defaultPage"
+            :items="availableDefaultPages"
+            item-title="label"
+            item-value="page"
+        ></v-select>
+
+        <v-checkbox :label="$t('Use_Fractions')" :hint="$t('Use_Fractions_Help')" persistent-hint v-model="useUserPreferenceStore().userSettings.useFractions"></v-checkbox>
+        <v-checkbox :label="$t('Comments_setting')" v-model="useUserPreferenceStore().userSettings.comments"></v-checkbox>
+        <v-checkbox :label="$t('left_handed')" :hint="$t('left_handed_help')" persistent-hint v-model="useUserPreferenceStore().userSettings.leftHanded"></v-checkbox>
+        <v-checkbox :label="$t('show_step_ingredients_setting')" :hint="$t('show_step_ingredients_setting_help')" persistent-hint v-model="useUserPreferenceStore().userSettings.showStepIngredients"></v-checkbox>
+        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
+    </v-form>
+</template>
+
+
+<script setup lang="ts">
+
+
+import {onMounted, ref} from "vue";
+import {ApiApi, Localization} from "@/openapi";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import {useI18n} from "vue-i18n";
+import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+
+const {locale, t} = useI18n()
+
+const availableLocalizations = ref([] as Localization[])
+const availableDefaultPages = ref([
+    {page: 'SEARCH', label: t('Search')},
+    {page: 'SHOPPING', label: t('Shopping_list')},
+    {page: 'PLAN', label: t('Meal_Plan')},
+    {page: 'BOOKS', label: t('Books')},
+])
+
+
+onMounted(() => {
+    const api = new ApiApi()
+
+    api.apiLocalizationList().then(r => {
+        availableLocalizations.value = r
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+})
+
+/**
+ * update the django language cookie
+ * this is used by django to inject the language into the template which in turn
+ * sets the frontend language in i18n.ts when the frontend is initialized
+ */
+function updateLanguage() {
+    const expires = new Date();
+    expires.setTime(expires.getTime() + (100 * 365 * 24 * 60 * 60 * 1000));
+    document.cookie = `django_language=${locale.value}; expires=${expires.toUTCString()}; path=/`;
+    location.reload()
+}
+
+</script>
+
+<style scoped>
+
+</style>