work on settings component

vue3/src/components/inputs/ModelSelect.vue

@@ -1,8 +1,9 @@
 <template>
-    <v-input>
+    <v-input :hint="hint" persistent-hint :label="label">
 
-        <!--TODO resolve-on-load false for now, race condition with model class, make prop once better solution is found -->
-        <!-- TODO strange behavior/layering issues with appendTo body, find soltion to make it work -->
+        <!-- TODO resolve-on-load false for now, race condition with model class, make prop once better solution is found -->
+        <!-- TODO strange behavior/layering issues with appendTo body, find solution to make it work -->
+        <!-- TODO label is not showing for some reason -->
 
         <Multiselect
             :id="id"
@@ -23,9 +24,9 @@
             :can-clear="canClear"
             :can-deselect="canClear"
             :limit="limit"
-            placeholder="TODO ADD LOCALIZED PLACEHOLDER"
-            noOptionsText="TODO ADD LOCALIZED NO-OPTIONS"
-            noResultsText="TODO ADD LOCALIZED NO-RESULTS"
+            :placeholder="$t('Search')"
+            :noOptionsText="$t('No_Results')"
+            :noResultsText="$t('No_Results')"
         />
 
     </v-input>
@@ -59,6 +60,9 @@ const props = defineProps({
     noOptionsText: {type: String, default: undefined},
     noResultsText: {type: String, default: undefined},
 
+    label: {type: String, default: ''},
+    hint: {type: String, default: ''},
+
     // not verified
     search_on_load: {type: Boolean, default: false},
 

vue3/src/components/settings/ShoppingSettings.vue

@@ -1,10 +1,59 @@
 <template>
     <v-form>
-        <p class="text-h6">{{ $t('Cosmetic') }}</p>
+        <p class="text-h6">{{ $t('Shopping_list') }}</p>
         <v-divider class="mb-3"></v-divider>
 
+        <ModelSelect :hint="$t('shopping_share_desc')" :label="$t('shopping_share')" model="User" :allow-create="false"
+                     v-model="useUserPreferenceStore().userSettings.shoppingShare" item-label="displayName"
+                     mode="tags"></ModelSelect>
 
-        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">{{$t('Save')}}</v-btn>
+        <v-number-input
+            class="mt-2"
+            :label="$t('shopping_auto_sync')"
+            :hint="$t('shopping_auto_sync_desc')"
+            persistent-hint
+            controlVariant="split"
+            v-model="useUserPreferenceStore().userSettings.shoppingAutoSync"
+            :step="useUserPreferenceStore().serverSettings.shoppingMinAutosyncInterval"
+            min="0"
+        >
+            <template #append>
+                <v-btn @click="useUserPreferenceStore().userSettings.shoppingAutoSync = 0">{{$t('Disable')}}</v-btn>
+            </template>
+        </v-number-input>
+
+        <v-checkbox :label="$t('mealplan_autoadd_shopping')" :hint="$t('mealplan_autoadd_shopping_desc')" persistent-hint v-model="useUserPreferenceStore().userSettings.mealplanAutoaddShopping"></v-checkbox>
+        <v-checkbox :label="$t('mealplan_autoexclude_onhand')" :hint="$t('mealplan_autoexclude_onhand_desc')" persistent-hint v-model="useUserPreferenceStore().userSettings.mealplanAutoexcludeOnhand"></v-checkbox>
+        <v-checkbox :label="$t('mealplan_autoinclude_related')" :hint="$t('mealplan_autoinclude_related_desc')" persistent-hint v-model="useUserPreferenceStore().userSettings.mealplanAutoincludeRelated"></v-checkbox>
+        <v-checkbox :label="$t('shopping_add_onhand')" :hint="$t('shopping_add_onhand_desc')" persistent-hint v-model="useUserPreferenceStore().userSettings.shoppingAddOnhand"></v-checkbox>
+        <v-checkbox :label="$t('filter_to_supermarket')" :hint="$t('filter_to_supermarket_desc')" persistent-hint v-model="useUserPreferenceStore().userSettings.filterToSupermarket"></v-checkbox>
+
+        <v-number-input
+            class="mt-2"
+            :label="$t('default_delay')"
+            :hint="$t('default_delay_desc')"
+            persistent-hint
+            controlVariant="split"
+            v-model="useUserPreferenceStore().userSettings.defaultDelay"
+            min="1"
+        ></v-number-input>
+
+        <v-number-input
+            class="mt-2"
+            :label="$t('shopping_recent_days')"
+            :hint="$t('shopping_recent_days_desc')"
+            persistent-hint
+            controlVariant="split"
+            v-model="useUserPreferenceStore().userSettings.shoppingRecentDays"
+            min="0"
+        ></v-number-input>
+
+        <v-text-field :label="$t('csv_delim_label')" :hint="$t('csv_delim_help')" persistent-hint v-model="useUserPreferenceStore().userSettings.csvDelim"></v-text-field>
+        <v-text-field :label="$t('csv_prefix_label')" :hint="$t('csv_prefix_help')" persistent-hint v-model="useUserPreferenceStore().userSettings.csvPrefix"></v-text-field>
+
+        <v-btn class="mt-3" color="success" @click="useUserPreferenceStore().updateUserSettings()" prepend-icon="$save">
+            {{ $t('Save') }}
+        </v-btn>
     </v-form>
 </template>
 
@@ -12,8 +61,9 @@
 <script setup lang="ts">
 
 
-
 import {useUserPreferenceStore} from "@/stores/UserPreferenceStore";
+import ModelSelect from "@/components/inputs/ModelSelect.vue";
+import {VNumberInput} from 'vuetify/labs/VNumberInput' //TODO remove once component is out of labs
 </script>
 
 <style scoped>

vue3/src/components/settings/UserSpaceSettings.vue

@@ -31,7 +31,7 @@ onMounted(() => {
     const api = new ApiApi()
 
     api.apiSpaceList().then(r => {
-        spaces.value = r
+        spaces.value = r.results
     }).catch(err => {
         useMessageStore().addError(ErrorMessageType.FETCH_ERROR, err)
     })