Bugs in settings fixed, profile added

frontend/src/components/SettingsWidget.vue

@@ -1,30 +1,58 @@
 <template>
     <div class="settings-widget">
-        <template v-for="setting in settings">
-            <InputStringWidget v-if="setting.datatype == 'string'" :labelTr="`settings.personal.label.${setting.name}`"
-                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value :list="languagesList()"
-                @input="handleInput(setting.id, $event)" />
-            <DateInputWidget v-else-if="setting.datatype == 'date'" :labelTr="`settings.personal.label.${setting.name}`"
-                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value
-                @input="handleInput(setting.id, $event)" />
-            <SelectDropdownWidget v-else-if="setting.datatype == 'singleselect'"
-                :labelTr="`settings.personal.label.${setting.name}`"
-                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value
-                :list="getSettingOptions(setting.name, setting.options)" @input="handleInput(setting.id, $event)" />
-            <InputNumberWidget v-else-if="setting.datatype == 'int'"
-                :labelTr="`settings.personal.label.${setting.name}`"
-                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToInt(setting.value)" min="0"
-                max="200" @input="handleInput(setting.id, $event)" />
-            <FloatInputWidget v-else-if="setting.datatype == 'float'"
-                :labelTr="`settings.personal.label.${setting.name}`"
-                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToFloat(setting.value)"
-                @input="handleInput(setting.id, $event)" />
-            <CheckboxWidget v-else-if="setting.datatype == 'bool'" :labelTr="`settings.personal.label.${setting.name}`"
-                :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToBool(setting.value)"
-                @input="handleInput(setting.id, $event)" />
-            <div v-else>{{ setting }}
-            </div>
-        </template>
+        <table>
+            <tr v-for="setting in settings" :key="setting.id">
+                <td>
+                    <InputStringWidget v-if="setting.datatype == 'string'"
+                        :labelTr="`settings.personal.label.${setting.name}`"
+                        :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value
+                        :list="languagesList()" @input="handleInput(setting.id, $event)" />
+
+                    <DateInputWidget v-else-if="setting.datatype == 'date'"
+                        :labelTr="`settings.personal.label.${setting.name}`"
+                        :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value
+                        @input="handleInput(setting.id, $event)" />
+
+                    <SelectDropdownWidget v-else-if="setting.datatype == 'singleselect'"
+                        :labelTr="`settings.personal.label.${setting.name}`"
+                        :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value=setting.value
+                        :list="getSettingOptions(setting.name, setting.options)"
+                        @input="handleInput(setting.id, $event)" />
+
+                    <InputNumberWidget v-else-if="setting.datatype == 'int'"
+                        :labelTr="`settings.personal.label.${setting.name}`"
+                        :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToInt(setting.value)"
+                        min="0" max="200" @input="handleInput(setting.id, $event)" />
+
+                    <FloatInputWidget v-else-if="setting.datatype == 'float'"
+                        :labelTr="`settings.personal.label.${setting.name}`"
+                        :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToFloat(setting.value)"
+                        @input="handleInput(setting.id, $event)" />
+
+                    <CheckboxWidget v-else-if="setting.datatype == 'bool'"
+                        :labelTr="`settings.personal.label.${setting.name}`"
+                        :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="convertToBool(setting.value)"
+                        @input="handleInput(setting.id, $event)" />
+
+                    <MultiselectWidget v-else-if="setting.datatype == 'multiselect'"
+                        :labelTr="`settings.personal.label.${setting.name}`"
+                        :tooltipTr="`settings.personal.tooltip.${setting.name}`" :value="setting.value"
+                        :list="getSettingOptions(setting.name, setting.options)"
+                        @input="handleInput(setting.id, $event)" />
+
+                    <div v-else>{{ setting }}</div>
+                    <span v-if="setting.unit">&nbsp;{{ setting.unit }}</span>
+                </td>
+                <td>
+                    <select v-model="setting.visibility.id"
+                        @change="handleVisibilityChange(setting.id, setting.visibility.id)">
+                        <option v-for="visibility in possibleVisibilities" :key="visibility.id" :value="visibility.id">
+                            {{ $t(`settings.visibility.${visibility.description}`) }}
+                        </option>
+                    </select>
+                </td>
+            </tr>
+        </table>
     </div>
 </template>
 
@@ -33,10 +61,11 @@ import apiClient from '@/utils/axios.js';
 import { mapGetters } from 'vuex';
 import InputStringWidget from '@/components/form/InputStringWidget.vue';
 import DateInputWidget from '@/components/form/DateInputWidget.vue';
-import SelectDropdownWidget from '@/components/form/SelectDropdownWidget';
-import InputNumberWidget from '@/components/form/InputNumberWidget';
-import FloatInputWidget from '@/components/form/FloatInputWidget';
-import CheckboxWidget from '@/components/form/CheckboxWidget';
+import SelectDropdownWidget from '@/components/form/SelectDropdownWidget.vue';
+import InputNumberWidget from '@/components/form/InputNumberWidget.vue';
+import FloatInputWidget from '@/components/form/FloatInputWidget.vue';
+import CheckboxWidget from '@/components/form/CheckboxWidget.vue';
+import MultiselectWidget from '@/components/form/MultiselectWidget.vue';
 
 export default {
     name: "SettingsWidget",
@@ -46,7 +75,8 @@ export default {
         SelectDropdownWidget,
         InputNumberWidget,
         FloatInputWidget,
-        CheckboxWidget
+        CheckboxWidget,
+        MultiselectWidget
     },
     props: {
         settingsType: {
@@ -54,6 +84,10 @@ export default {
             required: true
         } 
     }, 
+    data: {
+        settings: [],
+        possibleVisibilities: [],
+    },
     computed: {
         ...mapGetters(['user']),
     }, 
@@ -64,6 +98,8 @@ export default {
         async fetchSettings() {
             if (this.user && this.user.id) {
                 try {
+                    const visibilityResponse = await apiClient.get('/api/settings/visibilities');
+                    this.possibleVisibilities = visibilityResponse.data;
                     const userid = this.user.id;
                     const response = await apiClient.post('/api/settings/filter', {
                         userid: userid,
@@ -73,7 +109,7 @@ export default {
                 } catch (err) {
                     this.settings = [];
                 }
-            } 
+            }
         },
         getSettingOptions(fieldName, options) {
             return options.map((option) => {
@@ -94,6 +130,7 @@ export default {
                     settingId: settingId,
                     value: value
                 });
+                this.fetchSettings();
             } catch (err) {
                 console.error('Error updating setting:', err);
             }
@@ -120,7 +157,17 @@ export default {
             } else {
                 return false;
             }
-        }
+        },
+        async handleVisibilityChange(settingId, visibilityId) {
+            try {
+                await apiClient.post('/api/settings/update-visibility', {
+                    userParamTypeId: settingId,
+                    visibilityId: visibilityId
+                });
+            } catch (err) {
+                console.error('Error updating visibility:', err);
+            }
+        },
     },
     data() {
         return {
@@ -129,3 +176,9 @@ export default {
     }
 };
 </script>
+
+<style lang="scss" scoped>
+    label {
+        float: left;
+    }
+</style>