From 6a5869fd3ec0fcd99a8084e5c5cc585e7b3447a6 Mon Sep 17 00:00:00 2001
From: Kamila <kamila.lach1@gmail.com>
Date: Fri, 9 Aug 2024 08:02:43 +0200
Subject: [PATCH] WIP

---
 frontend/components.d.ts                      |   6 ++
 frontend/src/components/Inputs/InputHour.vue  |   2 -
 .../src/components/Inputs/InputUsername.vue   |  19 ++--
 .../src/components/UserSettings/UserName.vue  | 101 +++++++++---------
 frontend/src/pages/Settings.vue               |  57 ++++++----
 5 files changed, 104 insertions(+), 81 deletions(-)

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index 47afcd874..b9927d45f 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -32,6 +32,7 @@ declare module 'vue' {
     BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
     BFormInvalidFeedback: typeof import('bootstrap-vue-next')['BFormInvalidFeedback']
     BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
+    BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
     BImg: typeof import('bootstrap-vue-next')['BImg']
     BInputGroup: typeof import('bootstrap-vue-next')['BInputGroup']
     BLink: typeof import('bootstrap-vue-next')['BLink']
@@ -41,6 +42,7 @@ declare module 'vue' {
     BNavbarBrand: typeof import('bootstrap-vue-next')['BNavbarBrand']
     BNavbarNav: typeof import('bootstrap-vue-next')['BNavbarNav']
     BNavItem: typeof import('bootstrap-vue-next')['BNavItem']
+    BPagination: typeof import('bootstrap-vue-next')['BPagination']
     BPopover: typeof import('bootstrap-vue-next')['BPopover']
     Breadcrumb: typeof import('./src/components/Breadcrumb/breadcrumb.vue')['default']
     BRow: typeof import('bootstrap-vue-next')['BRow']
@@ -78,12 +80,16 @@ declare module 'vue' {
     GddTransactionListFooter: typeof import('./src/components/GddTransactionListFooter.vue')['default']
     GdtAmount: typeof import('./src/components/Template/ContentHeader/GdtAmount.vue')['default']
     GdtTransactionList: typeof import('./src/components/GdtTransactionList.vue')['default']
+    IBiArrowDownCircle: typeof import('~icons/bi/arrow-down-circle')['default']
+    IBiArrowUpCircle: typeof import('~icons/bi/arrow-up-circle')['default']
     IBiBellFill: typeof import('~icons/bi/bell-fill')['default']
     IBiCaretDownFill: typeof import('~icons/bi/caret-down-fill')['default']
+    IBiChatDots: typeof import('~icons/bi/chat-dots')['default']
     IBiCheck: typeof import('~icons/bi/check')['default']
     IBiEye: typeof import('~icons/bi/eye')['default']
     IBiEyeSlash: typeof import('~icons/bi/eye-slash')['default']
     IBiLayers: typeof import('~icons/bi/layers')['default']
+    IBiPencil: typeof import('~icons/bi/pencil')['default']
     IBiPeople: typeof import('~icons/bi/people')['default']
     IBiQuestion: typeof import('~icons/bi/question')['default']
     IBiTrash: typeof import('~icons/bi/trash')['default']
diff --git a/frontend/src/components/Inputs/InputHour.vue b/frontend/src/components/Inputs/InputHour.vue
index ef8f93c0c..760c3b7e5 100644
--- a/frontend/src/components/Inputs/InputHour.vue
+++ b/frontend/src/components/Inputs/InputHour.vue
@@ -27,8 +27,6 @@
     <BFormGroup :label="label" :label-for="labelFor">
       <BFormInput
         v-bind="ariaInput"
-        :modelValue="currentValue"
-        @update:modelValue="currentValue"
         :id="labelFor"
         :model-value="currentValue"
         :name="name"
diff --git a/frontend/src/components/Inputs/InputUsername.vue b/frontend/src/components/Inputs/InputUsername.vue
index f606c35cf..925a24b2d 100644
--- a/frontend/src/components/Inputs/InputUsername.vue
+++ b/frontend/src/components/Inputs/InputUsername.vue
@@ -13,9 +13,9 @@
             :state="validated ? valid : false"
             autocomplete="off"
             data-test="username"
-            @update:modelValue="currentValue = $event"
+            @update:modelValue="updateValue"
           />
-          <BButton size="lg" text="Button" variant="secondary" @click="emitSetIsEdit" append>
+          <BButton size="lg" text="Button" variant="secondary" append @click="emitSetIsEdit">
             <IBiXCircle style="height: 17px; width: 17px" />
           </BButton>
         </BInputGroup>
@@ -27,7 +27,7 @@
             </span>
           </div>
           <div v-else>
-            <!-- {{ errors?.[0] }} -->
+            {{ errors?.[0] }}
           </div>
         </BFormInvalidFeedback>
       </BFormGroup>
@@ -51,19 +51,19 @@ const props = defineProps({
   name: { type: String, default: 'username' },
   label: { type: String, default: 'Username' },
   placeholder: { type: String, default: 'Username' },
-  value: { type: String, required: true },
+  modelValue: { type: String, required: true },
   showAllErrors: { type: Boolean, default: false },
   immediate: { type: Boolean, default: false },
   unique: { type: Boolean, required: true },
 })
 
-const currentValue = ref(props?.value)
+const currentValue = ref(props?.modelValue)
 
 const { errors, valid, validated, ariaInput, ariaMsg } = useForm({
   initialValues: currentValue.value,
 })
 
-const emit = defineEmits(['input', 'set-is-edit'])
+const emit = defineEmits(['update:modelValue', 'set-is-edit'])
 
 const labelFor = computed(() => `${props.name}-input-field`)
 
@@ -71,7 +71,8 @@ const emitSetIsEdit = (bool) => {
   emit('set-is-edit', bool)
 }
 
-watch(currentValue, (newValue) => {
-  emit('input', newValue)
-})
+const updateValue = (e) => {
+  currentValue.value = e
+  emit('update:modelValue', e)
+}
 </script>
diff --git a/frontend/src/components/UserSettings/UserName.vue b/frontend/src/components/UserSettings/UserName.vue
index 57b488f67..813486843 100644
--- a/frontend/src/components/UserSettings/UserName.vue
+++ b/frontend/src/components/UserSettings/UserName.vue
@@ -7,50 +7,54 @@
         data-test="username-input-group"
         :description="$t('settings.emailInfo')"
       >
-        <BFormInput v-model="username" readonly data-test="username-input-readonly" />
+        <BFormInput
+          :model-value="username"
+          readonly
+          data-test="username-input-readonly"
+          @update:modelValue="username = $event"
+        />
       </BFormGroup>
     </div>
     <div v-else>
-      <!-- <validation-observer ref="usernameObserver" v-slot="{ handleSubmit, invalid }">-->
       <div>
-        <!-- <BForm @submit.stop.prevent="handleSubmit(onSubmit)"> -->
-        <BRow class="mb-3">
-          <BCol class="col-12">
-            <input-username
-              v-model="username"
-              :name="$t('form.username')"
-              :placeholder="$t('form.username-placeholder')"
-              :showAllErrors="true"
-              :unique="true"
-              :rules="rules"
-              :isEdit="isEdit"
-              @set-is-edit="setIsEdit"
-              data-test="component-input-username"
-            />
-          </BCol>
-          <BCol class="col-12">
-            <div v-if="!username" class="alert" data-test="username-alert">
-              {{ $t('settings.username.no-username') }}
-            </div>
-          </BCol>
-        </BRow>
-        <BRow class="text-right" v-if="newUsername">
-          <BCol>
-            <div class="text-right" ref="submitButton">
-              <BButton
-                :variant="disabled(invalid) ? 'light' : 'success'"
-                type="submit"
-                :disabled="disabled(invalid)"
-                data-test="submit-username-button"
-              >
-                {{ $t('form.save') }}
-              </BButton>
-            </div>
-          </BCol>
-        </BRow>
-        <!-- </BForm> -->
+        <BForm @submit.prevent="onSubmit">
+          <BRow class="mb-3">
+            <BCol class="col-12">
+              <input-username
+                :model-value="username"
+                :name="$t('form.username')"
+                :placeholder="$t('form.username-placeholder')"
+                :show-all-errors="true"
+                :unique="true"
+                :rules="rules"
+                :is-edit="isEdit"
+                data-test="component-input-username"
+                @set-is-edit="setIsEdit(true)"
+                @update:model-value="username = $event"
+              />
+            </BCol>
+            <BCol class="col-12">
+              <div v-if="!username" class="alert" data-test="username-alert">
+                {{ $t('settings.username.no-username') }}
+              </div>
+            </BCol>
+          </BRow>
+          <BRow v-if="newUsername" class="text-right">
+            <BCol>
+              <div ref="submitButton" class="text-right">
+                <BButton
+                  :variant="disabled(errors) ? 'light' : 'success'"
+                  type="submit"
+                  :disabled="disabled(errors)"
+                  data-test="submit-username-button"
+                >
+                  {{ $t('form.save') }}
+                </BButton>
+              </div>
+            </BCol>
+          </BRow>
+        </BForm>
       </div>
-      <!-- </validation-observer> -->
     </div>
   </div>
 </template>
@@ -59,6 +63,7 @@
 import { ref, computed } from 'vue'
 import { useStore } from 'vuex'
 import { useMutation } from '@vue/apollo-composable'
+import { useI18n } from 'vue-i18n'
 import { BRow, BCol, BFormInput, BFormGroup, BForm, BButton } from 'bootstrap-vue-next'
 import InputUsername from '@/components/Inputs/InputUsername'
 import { updateUserInfos } from '@/graphql/mutations'
@@ -67,9 +72,10 @@ import { useForm } from 'vee-validate'
 
 const store = useStore()
 const { toastError, toastSuccess } = useAppToast()
+const { t } = useI18n()
 
 const isEdit = ref(false)
-const username = ref(store.state.username || '')
+const username = ref(store.state.username || '123')
 const usernameUnique = ref(false)
 const rules = {
   required: true,
@@ -80,13 +86,12 @@ const rules = {
   usernameUnique: true,
 }
 
-const { handleSubmit, invalid } = useForm({
+const { handleSubmit, errors } = useForm({
   initialValues: username.value,
 })
-
 const { mutate: updateUserInfo } = useMutation(updateUserInfos)
 
-const onSubmit = async () => {
+const onSubmit = handleSubmit(async () => {
   try {
     await updateUserInfo({ alias: username.value })
     store.commit('username', username.value)
@@ -94,11 +99,7 @@ const onSubmit = async () => {
   } catch (error) {
     toastError(error.message)
   }
-}
-
-const disabled = (invalid) => {
-  return !newUsername.value || invalid
-}
+})
 
 const setIsEdit = (bool) => {
   username.value = store.state.username
@@ -106,6 +107,10 @@ const setIsEdit = (bool) => {
 }
 
 const newUsername = computed(() => username.value !== store.state.username)
+
+const disabled = (err) => {
+  return !newUsername.value || !!Object.keys(err).length
+}
 </script>
 
 <style>
diff --git a/frontend/src/pages/Settings.vue b/frontend/src/pages/Settings.vue
index 099369f37..01c716ae7 100644
--- a/frontend/src/pages/Settings.vue
+++ b/frontend/src/pages/Settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
-    <BTabs v-model="tabIndex" content-class="mt-3">
+    <BTabs :model-value="tabIndex" content-class="mt-3" @update:modelValue="tabIndex = $event">
       <BTab :title="$t('PersonalDetails')">
         <div class="h2">{{ $t('PersonalDetails') }}</div>
         <div class="my-4 text-small">
@@ -13,7 +13,7 @@
           </BCol>
           <BCol cols="12" md="6" lg="6">
             <BFormGroup :label="$t('form.email')" :description="$t('settings.emailInfo')">
-              <BFormInput :model-value="email" @update:modelValue="email = $event" readonly />
+              <BFormInput :model-value="email" readonly @update:modelValue="email = $event" />
             </BFormGroup>
           </BCol>
         </BRow>
@@ -42,7 +42,7 @@
               />
             </BCol>
           </BRow>
-          <div v-if="!isDisabled" class="mt-4 pt-4 text-center">
+          <div v-if="isButtonVisible" class="mt-4 pt-4 text-center">
             <BButton
               type="submit"
               variant="primary"
@@ -186,12 +186,14 @@
   </div>
 </template>
 <script setup>
+import CONFIG from '../config'
 import { useStore } from 'vuex'
 import { updateUserInfos } from '@/graphql/mutations'
-import CONFIG from '../config'
 import { useRoute } from 'vue-router'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useMutation } from '@vue/apollo-composable'
+import { useI18n } from 'vue-i18n'
+import { useAppToast } from '@/composables/useToast'
 import UserName from '@/components/UserSettings/UserName.vue'
 import UserLanguage from '@/components/LanguageSwitch2.vue'
 import UserPassword from '@/components/UserSettings/UserPassword'
@@ -207,27 +209,28 @@ const props = defineProps({
   transactionCount: { type: Number, default: 0 },
 })
 
+const route = useRoute()
+const { t } = useI18n()
+const { toastError, toastSuccess } = useAppToast()
 const store = useStore()
 const state = store.state
 
-const route = useRoute()
-
-const darkMode = computed(() => state.darkMode)
-const firstName = computed(() => state.firstName)
-const email = computed(() => state.email)
-const newsletterState = computed(() => state.newsletterState)
-const gmsAllowed = computed(() => state.gmsAllowed)
-const humhubAllowed = computed(() => state.humhubAllowed)
-const username = computed(() => state.username || '')
-const lastName = computed(() => state.lastName)
+const darkMode = ref(state.darkMode)
+const firstName = ref(state.firstName || '')
+const email = ref(state.email || '')
+const newsletterState = ref(state.newsletterState)
+const gmsAllowed = ref(state.gmsAllowed)
+const humhubAllowed = ref(state.humhubAllowed)
+const username = ref(state.username || '')
+const lastName = ref(state.lastName || '')
 
 let tabIndex = 0
 if (route.params.tabAlias === 'extern') {
   tabIndex = 1
 }
 
-const isDisabled = computed(() => {
-  return firstName.value === state.firstName && lastName.value === state.lastName
+const isButtonVisible = computed(() => {
+  return firstName.value !== state.firstName || lastName.value !== state.lastName
 })
 
 const isHumhubActivated = computed(() => {
@@ -253,12 +256,13 @@ const onSubmit = async (key) => {
     await updateUserData({
       firstName: firstName.value,
       lastName: lastName.value,
-    }),
-      store.commit('firstName', firstName.value)
+    })
+    store.commit('firstName', firstName.value)
     store.commit('lastName', lastName.value)
-    showUserData.value = true
-    toastSuccess($t('settings.name.change-success'))
-  } catch (error) {}
+    toastSuccess(t('settings.name.change-success'))
+  } catch (error) {
+    toastError(error)
+  }
 }
 
 const gmsStateSwitch = (eventData) => {
@@ -268,6 +272,15 @@ const gmsStateSwitch = (eventData) => {
 const humhubStateSwitch = (eventData) => {
   humhubAllowed.value = eventData
 }
+
+// TODO: watch: {
+//   darkMode(val) {
+//     this.$store.commit('setDarkMode', this.darkMode)
+//     this.toastSuccess(
+//       this.darkMode ? this.$t('settings.modeDark') : this.$t('settings.modeLight'),
+//     )
+//   },
+// },
 </script>
 <style>
 .community-service-tabs {