basic meal plan settings

vue3/src/components/dialogs/ModelEditorDialog.vue

@@ -3,6 +3,7 @@
         <access-token-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.AccessToken"></access-token-editor>
         <invite-link-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.InviteLink"></invite-link-editor>
         <user-space-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.UserSpace"></user-space-editor>
+        <meal-type-editor :item="item" @create="createEvent" @save="saveEvent" @delete="deleteEvent" dialog @close="dialog = false" v-if="model == SupportedModels.MealType"></meal-type-editor>
     </v-dialog>
 </template>
 
@@ -14,11 +15,13 @@ import AccessTokenEditor from "@/components/model_editors/AccessTokenEditor.vue"
 import {AccessToken, Food} from "@/openapi";
 import InviteLinkEditor from "@/components/model_editors/InviteLinkEditor.vue";
 import UserSpaceEditor from "@/components/model_editors/UserSpaceEditor.vue";
+import MealTypeEditor from "@/components/model_editors/MealTypeEditor.vue";
 
 enum SupportedModels {
     AccessToken = 'AccessToken',
     InviteLink = 'InviteLink',
     UserSpace = 'UserSpace',
+    MealType = 'MealType',
 }
 
 const emit = defineEmits(['create', 'save', 'delete'])

vue3/src/components/model_editors/MealTypeEditor.vue

@@ -0,0 +1,114 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ $t(OBJ_LOCALIZATION_KEY) }}
+            <v-btn class="float-right" icon="$close" variant="plain" @click="emit('close')" v-if="dialog"></v-btn>
+        </v-card-title>
+        <v-card-text>
+            <v-form>
+                <v-text-field v-model="editingObj.name" :label="$t('Name')"></v-text-field>
+                <v-time-picker v-model="editingObj.time"></v-time-picker>
+                <v-color-picker v-model="editingObj.color"></v-color-picker>
+            </v-form>
+        </v-card-text>
+        <v-card-actions>
+            <v-btn color="delete" prepend-icon="$delete" v-if="isUpdate">{{ $t('Delete') }}
+                <delete-confirm-dialog :object-name="objectName" @delete="deleteObject"></delete-confirm-dialog>
+            </v-btn>
+            <v-btn color="save" prepend-icon="$save" @click="saveObject">{{ isUpdate ? $t('Save') : $t('Create') }}</v-btn>
+        </v-card-actions>
+    </v-card>
+</template>
+
+<script setup lang="ts">
+
+import {computed, onMounted, ref} from "vue";
+import {ApiApi, MealType} from "@/openapi";
+import DeleteConfirmDialog from "@/components/dialogs/DeleteConfirmDialog.vue";
+import {useI18n} from "vue-i18n";
+import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
+import {useClipboard} from "@vueuse/core";
+import {VTimePicker} from 'vuetify/labs/VTimePicker' // TODO remove once out of labs
+
+
+const {t} = useI18n()
+const {copy} = useClipboard()
+
+const emit = defineEmits(['create', 'save', 'delete', 'close'])
+
+const props = defineProps({
+    item: {type: {} as MealType, required: true},
+    dialog: {type: Boolean, default: false}
+})
+
+const OBJ_LOCALIZATION_KEY = 'Meal_Type'
+const editingObj = ref({} as MealType)
+const loading = ref(false)
+
+// object specific data (for selects/display)
+
+
+/**
+ * checks if given object has ID property to determine if it needs to be updated or created
+ */
+const isUpdate = computed(() => {
+    return editingObj.value.id !== undefined
+})
+
+/**
+ * display name for object in headers/delete dialog/...
+ */
+const objectName = computed(() => {
+    return isUpdate ? `${t(OBJ_LOCALIZATION_KEY)} ${editingObj.value.token}` : `${t(OBJ_LOCALIZATION_KEY)} (${t('New')})`
+})
+
+onMounted(() => {
+    if (props.item != null) {
+        editingObj.value = props.item
+    } else {
+
+    }
+})
+
+/**
+ * saves the edited object in the database
+ */
+async function saveObject() {
+    let api = new ApiApi()
+    if (isUpdate.value) {
+        api.apiMealTypeUpdate({id: editingObj.value.id, mealType: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('save', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        })
+    } else {
+        api.apiMealTypeCreate({mealType: editingObj.value}).then(r => {
+            editingObj.value = r
+            emit('create', r)
+            useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
+        }).catch(err => {
+            useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
+        })
+    }
+}
+
+/**
+ * deletes the editing object from the database
+ */
+async function deleteObject() {
+    let api = new ApiApi()
+    api.apiMealTypeDestroy({id: editingObj.value.id}).then(r => {
+        editingObj.value = {} as MealType
+        emit('delete', editingObj.value)
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.DELETE_ERROR, err)
+    })
+}
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/components/settings/MealPlanSettings.vue

@@ -1,19 +1,101 @@
 <template>
     <v-form>
-        <p class="text-h6">{{ $t('Cosmetic') }}</p>
+        <p class="text-h6">{{ $t('Meal_Plan') }}</p>
         <v-divider class="mb-3"></v-divider>
 
+        <ModelSelect :hint="$t('plan_share_desc')" :label="$t('Share')" model="User" :allow-create="false"
+                     v-model="useUserPreferenceStore().userSettings.planShare" item-label="displayName"
+                     mode="tags"></ModelSelect>
+
+        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{ $t('Save') }}</v-btn>
+
+        <p class="text-h6 mt-2">{{ $t('DeviceSettings') }}</p>
+        <v-divider></v-divider>
+        <p class="text-subtitle-2 mb-2">{{ $t('DeviceSettingsHelp') }}</p>
+
+        <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_displayPeriod" :label="$t('Period')" :hint="$t('Plan_Period_To_Show')" :items="MEALPLAN_PERIODS"
+                  persistent-hint></v-select>
+        <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_displayPeriodCount" :label="$t('Periods')" :hint="$t('Plan_Show_How_Many_Periods')"
+                  :items="MEALPLAN_PERIOD_COUNTS" persistent-hint></v-select>
+
+        <v-select v-model="useUserPreferenceStore().deviceSettings.mealplan_startingDayOfWeek" :label="$t('Starting_Day')" :hint="$t('Starting_Day')"
+                  :items="MEALPLAN_STARTING_DAYS" persistent-hint></v-select>
+
+        <v-checkbox v-model="useUserPreferenceStore().deviceSettings.mealplan_displayWeekNumbers" :label="$t('Week_Numbers')" :hint="$t('Show_Week_Numbers')"
+                    persistent-hint></v-checkbox>
+
+        <p class="text-h6 mt-2">{{ $t('Meal_Types') }}
+            <v-btn prepend-icon="$create" color="create" size="small" class="float-right">
+                {{ $t('New') }}
+                <model-editor-dialog model="MealType" @create="item => mealTypes.push(item)" @delete="deleteMealType"></model-editor-dialog>
+            </v-btn>
+
+        </p>
+        <v-divider></v-divider>
+
+        <v-list class="mt-2">
+            <v-list-item v-for="mt in mealTypes">
+                <v-avatar :color="mt.color"></v-avatar>
+                {{ mt.name }}
+                <template #append>
+                    <v-btn color="edit">
+                        <v-icon icon="$edit"></v-icon>
+                        <model-editor-dialog model="MealType" :item="mt" @delete="deleteMealType"></model-editor-dialog>
+                    </v-btn>
+                </template>
+            </v-list-item>
+        </v-list>
 
-        <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 {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import ModelSelect from "@/components/inputs/ModelSelect.vue";
+import {useI18n} from "vue-i18n";
+import {onMounted, ref} from "vue";
+import {ApiApi, MealType} from "@/openapi";
+import {ErrorMessageType, useMessageStore} from "@/stores/MessageStore";
+import ModelEditorDialog from "@/components/dialogs/ModelEditorDialog.vue";
+
+const {t} = useI18n()
+
+const MEALPLAN_PERIODS = ref([
+    {title: t("Week"), value: "week"},
+    {title: t("Month"), value: "month"},
+    {title: t("Year"), value: "year"},
+])
+const MEALPLAN_STARTING_DAYS = ref([
+    {title: t("Sunday"), value: 0},
+    {title: t("Monday"), value: 1},
+    {title: t("Tuesday"), value: 2},
+    {title: t("Wednesday"), value: 3},
+    {title: t("Thursday"), value: 4},
+    {title: t("Friday"), value: 5},
+    {title: t("Saturday"), value: 6},
+])
+const MEALPLAN_PERIOD_COUNTS = ref([1, 2, 3, 4])
+
+const mealTypes = ref([] as MealType[])
+
+onMounted(() => {
+    const api = new ApiApi()
+    api.apiMealTypeList().then(r => {
+        mealTypes.value = r.results
+    }).catch(err => {
+        useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
+    })
+})
+
+/**
+ * delete mealtype from client list (database handled by editor)
+ * @param mealType to delete from list
+ */
+function deleteMealType(mealType: MealType){
+    mealTypes.value.splice(mealTypes.value.indexOf(mealType), 1)
+}
+
 </script>
 
 <style scoped>