From 0a016b29ed61fb40ff5fb7effe7c7acd6fdc7b45 Mon Sep 17 00:00:00 2001
From: CodeNamedRobin <robinvandijke2002@gmail.com>
Date: Wed, 28 Aug 2024 15:10:05 +0200
Subject: [PATCH] feat(dashboard/admin-single-user-view): added proper
 placeholders to forms

---
 apps/dashboard/src/locales/en.json               |  3 ++-
 apps/dashboard/src/locales/nl.json               |  3 ++-
 .../admin/components/users/AdminUserInfoCard.vue |  2 +-
 .../components/users/forms/UserEditForm.vue      | 16 ++++++++--------
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/apps/dashboard/src/locales/en.json b/apps/dashboard/src/locales/en.json
index 4a6226fd..b8927389 100644
--- a/apps/dashboard/src/locales/en.json
+++ b/apps/dashboard/src/locales/en.json
@@ -323,7 +323,8 @@
     "Usertype": "Usertype",
     "passwordUpdated": "Password successfully updated",
     "updatedUserInfo": "Succesfully updated user info.",
-    "userInfoUpdated": "User information successfully updated"
+    "userInfoUpdated": "User information successfully updated",
+    "userInformation": "User information"
   },
   "contact": {
     "Contact": "Contact",
diff --git a/apps/dashboard/src/locales/nl.json b/apps/dashboard/src/locales/nl.json
index 1b1b3ad0..e125ef14 100644
--- a/apps/dashboard/src/locales/nl.json
+++ b/apps/dashboard/src/locales/nl.json
@@ -324,7 +324,8 @@
     "Usertype": "Gebruikerstype",
     "passwordUpdated": "Wachtwoord is succesvol geüpdatet",
     "updatedUserInfo": "Profiel is succesvol geüpdatet.",
-    "userInfoUpdated": "Profiel is succesvol aangepast"
+    "userInfoUpdated": "Profiel is succesvol aangepast",
+    "userInformation": "Gebruikersinformatie"
   },
   "validation": {
     "number": {
diff --git a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
index 187b65b7..d7f4bef6 100644
--- a/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
+++ b/apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <FormCard :header="$t('userDetails.User Information')"
+  <FormCard :header="$t('userDetails.userInformation')"
             @update:modelValue="edit = $event"
             @save="formSubmit"
             :enableEdit="true"
diff --git a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
index aaab969a..2b7389f3 100644
--- a/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
+++ b/apps/dashboard/src/modules/admin/components/users/forms/UserEditForm.vue
@@ -6,7 +6,7 @@
                @update:value="form.context.setFieldValue('firstName', $event)"
                :errors="form.context.errors.value.firstName"
                :disabled="!edit"
-               id="name" placeholder="John" type="text" />
+               id="name" :placeholder="$t('userDetails.First name')" type="text" />
     <InputSpan :label="$t('userDetails.Last name')"
                :value="form.model.lastName?.value.value"
                :attributes="form.model.lastName?.attr.value"
@@ -20,7 +20,7 @@
                @update:value="form.context.setFieldValue('nickname', $event)"
                :errors="form.context.errors.value.nickname"
                :disabled="!edit"
-               id="name" placeholder="Nick" type="text" />
+               id="name" :placeholder="$t('userDetails.Nickname')" type="text" />
     <!-- Use user.value.type instead of user.type -->
     <InputSpan
         v-if="!(props.user?.type === 'MEMBER')"
@@ -30,34 +30,34 @@
                @update:value="form.context.setFieldValue('email', $event)"
                :errors="form.context.errors.value.email"
                :disabled="!edit"
-               id="name" placeholder="john.doe@example.com" type="text" />
+               id="name" placeholder="first.last@example.com" type="text" />
     <InputSpan :label="$t('userDetails.Usertype')"
                :value="form.model.userType?.value.value"
                :attributes="form.model.userType?.attr.value"
                @update:value="form.context.setFieldValue('userType', $event)"
                :errors="form.context.errors.value.userType"
-               id="name" placeholder="Typey McTypeface" type="usertype" disabled/>
+               id="name" :placeholder="$t('userDetails.Usertype')" type="usertype" disabled/>
     <InputSpan :label="$t('userDetails.Active')"
                :value="form.model.isActive?.value.value"
                :attributes="form.model.isActive?.attr.value"
                @update:value="form.context.setFieldValue('isActive', $event)"
                :errors="form.context.errors.value.isActive"
                :disabled="!edit"
-               id="name" placeholder="Typey McTypeface" type="boolean"/>
+               id="name" :placeholder="$t('userDetails.Active')" type="boolean"/>
     <InputSpan :label="$t('profile.ofAge')"
                :value="form.model.ofAge?.value.value"
                :attributes="form.model.ofAge?.attr.value"
                @update:value="form.context.setFieldValue('ofAge', $event)"
                :errors="form.context.errors.value.ofAge"
                :disabled="!edit"
-               id="name" placeholder="Typey McTypeface" type="boolean"/>
+               id="name" :placeholder="$t('profile.ofAge')" type="boolean"/>
     <InputSpan :label="$t('profile.canGoIntoDebt')"
                :value="form.model.canGoIntoDebt?.value.value"
                :attributes="form.model.canGoIntoDebt?.attr.value"
                @update:value="form.context.setFieldValue('canGoIntoDebt', $event)"
                :errors="form.context.errors.value.canGoIntoDebt"
                :disabled="!edit"
-               id="name" placeholder="Typey McTypeface" type="boolean"/>
+               id="name" :placeholder="$t('profile.canGoIntoDebt')" type="boolean"/>
   </div>
 </template>
 
@@ -68,7 +68,7 @@ import { useToast } from "primevue/usetoast";
 import { type Form, setSubmit } from "@/utils/formUtils";
 import apiService from "@/services/ApiService";
 import type { UpdateUserRequest, UserResponse } from "@sudosos/sudosos-client";
-import {onBeforeMount, onMounted, type PropType, type Ref, ref} from "vue";
+import { type PropType } from "vue";
 import * as yup from "yup";
 import { updateUserDetailsObject } from "@/utils/validation-schema";
 import { handleError } from "@/utils/errorUtils";