Refactor/admin single user view (#314)

* feat(dashboard/admin/single-user-view): Added new user details form card

* feat: I don't know what I added, but I need to work on other things

* refactor(dashboard/admin-single-user-view): remove old user edit card and dependencies

* bug-introduce(dashboard/admin-single-user-view): bug where v-if in inputspan breaks the page

* fix(dashboard/admin-single-user-view): fixed a v-if breaking the entire page

* feat(dashboard/admin-single-user-view): form now auto fills user info

* feat(dashboard/admin-single-user-view): fixed up styling of single user view

* refactor(dashboard/components): removed change info component

* feat(dashboard/admin-single-user-view): redid a little styling of the User info card and the balance card

* fix(dashboard/admin-single-user-view): type check errors

* feat(dashboard/admin-single-user-view): added proper placeholders to forms

* refactor(dashboard/user-edit-form): small code improvements

* fix(dashboard/user-edit-form): nickname cannot be null error, even though it is allowed

* fix(dashboard/admin-single-user-view): fixed some type-check issues

apps/dashboard/package.json

@@ -49,6 +49,7 @@
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/tsconfig": "^0.5.1",
+    "axios": "^1.6.8",
     "eslint": "^8.50.0",
     "eslint-plugin-github-commit-hash": "^1.0.3",
     "eslint-plugin-import": "^2.27.5",
@@ -58,7 +59,6 @@
     "prettier": "^3.1.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.12",
-    "vue-tsc": "^2.0.29",
-    "axios": "^1.6.8"
+    "vue-tsc": "^2.0.29"
   }
 }

apps/dashboard/src/components/FormCard.vue

@@ -1,7 +1,7 @@
 <template>
   <CardComponent :header="header">
     <template #topAction>
-      <div v-if="showEdit">
+      <div v-if="showEdit" class="mx-2">
         <div v-if="!edit">
           <Button
               severity="primary"

apps/dashboard/src/components/FormInput.vue

@@ -19,7 +19,6 @@ import { ref, watch, onMounted, type PropType } from 'vue';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Calendar from 'primevue/calendar';
-import type { Ref } from "vue";
 import ErrorSpan from "@/components/ErrorSpan.vue";
 
 const props = defineProps({

apps/dashboard/src/components/InputSpan.vue

@@ -28,7 +28,6 @@
                 :placeholder="placeholder"
                 v-model="internalValue as number"
                 :disabled="disabled"/>
-
       <InputNumber v-if="type === 'percentage'"
                    mode="decimal"
                    :min="0.0"
@@ -37,11 +36,16 @@
                    v-model="internalValue as number"
                    :disabled="disabled"
                    suffix="%"/>
-
       <InputSwitch v-if="type === 'boolean'"
                    v-model="internalValue as boolean"
                    :disabled="disabled"/>
-
+      <Dropdown v-if="type === 'usertype'"
+                :options="userTypes"
+                optionLabel="name"
+                optionValue="value"
+                v-model="internalValue as number"
+                :placeholder="placeholder"
+                :disabled="disabled"/>
     </span>
     <div class="flex justify-content-end">
       <ErrorSpan :error="errors"/>
@@ -58,6 +62,8 @@ import ErrorSpan from "@/components/ErrorSpan.vue";
 import CalendarString from "@/components/CalendarString.vue";
 
 import type { HintedString } from "primevue/ts-helpers";
+import InputNumber from "primevue/inputnumber";
+import { userTypes } from "@/utils/validation-schema";
 
 const props = defineProps({
   label: {
@@ -100,7 +106,8 @@ const props = defineProps({
 const emit = defineEmits(['update:value']);
 
 const stringInputs = ['text', 'textarea'];
-const numberInputs = ['currency', 'percentage', 'number'];
+
+const numberInputs = ['currency', 'number', 'usertype', 'percentage'];
 const booleanInputs = ['boolean'];
 
 const initialValue = () => {

apps/dashboard/src/locales/en.json

@@ -275,7 +275,8 @@
     "pointOfSaleCreated": "Successfully created point of sale.",
     "waiveFinesSuccess": "Successfully waived fines.",
     "waiveFinesRejected": "Canceled waiving fines.",
-    "canceled": "Canceled"
+    "canceled": "Canceled",
+    "userUpdated": "Successfully updated user."
   },
   "termsOfService": {
     "acceptFirst": "Accept the Terms of Service",
@@ -324,7 +325,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",

apps/dashboard/src/locales/nl.json

@@ -276,7 +276,8 @@
     "pointOfSaleCreated": "Point of sale is successvol aangemaakt.",
     "waiveFinesSuccess": "Boetes zijn succesvol kwijtgescholden.",
     "waiveFinesRejected": "Boetes zijn succesvol afgewezen.",
-    "canceled": "Geannuleerd"
+    "canceled": "Geannuleerd",
+    "userUpdated": "Gebruiker is succesvol geüpdatet."
   },
   "termsOfService": {
     "acceptFirst": "Accepteer de Voorwaarden",
@@ -325,7 +326,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": {

apps/dashboard/src/main.ts

@@ -81,6 +81,7 @@ app.component('ToggleButton', ToggleButton);
 app.component('Steps', Steps);
 app.component('Calendar', Calendar);
 app.component('ConfirmDialog', ConfirmDialog);
+app.component('InputSwitch', InputSwitch);
 
 populateStoresFromToken(apiService).then(() => {
     app.mount('#app');

apps/dashboard/src/mixins/pendingPayoutsMixin.ts

@@ -1,5 +1,5 @@
 // src/mixins/pendingPayoutsMixin.ts
-import { computed, type ComputedRef, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { usePayoutStore } from '@/stores/payout.store';
 import { useUserStore } from '@sudosos/sudosos-frontend-common';
 import { UserRole } from '@/utils/rbacUtils';

apps/dashboard/src/modules/admin/components/users/AdminUserInfoCard.vue

@@ -0,0 +1,62 @@
+<template>
+  <FormCard :header="t('userDetails.userInformation')"
+            @update:modelValue="edit = $event"
+            @save="formSubmit"
+            :enableEdit="true"
+  >
+      <div class="flex flex-column justify-content-between gap-2">
+        <UserEditForm :user="props.user" :form="form" :edit="edit" @update:edit="edit = $event"/>
+      </div>
+  </FormCard>
+</template>
+
+<script setup lang="ts">
+import FormCard from "@/components/FormCard.vue";
+import { onMounted, type PropType, ref, watch } from "vue";
+import type { UserResponse } from "@sudosos/sudosos-client";
+import { schemaToForm } from "@/utils/formUtils";
+import { updateUserDetailsObject, userTypes } from "@/utils/validation-schema";
+import UserEditForm from "@/modules/admin/components/users/forms/UserEditForm.vue";
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+
+const props = defineProps({
+  user: {
+    type: Object as PropType<UserResponse>,
+    required: true
+  }
+});
+
+const edit = ref(false);
+
+const form = schemaToForm(updateUserDetailsObject);
+
+const formSubmit = () => {
+  form.submit();
+};
+
+const updateFieldValues = (p: UserResponse) => {
+  if (!p) return;
+  const values = {
+    ...p,
+    userType: userTypes.value.find(ut => ut.name === p.type)?.value || undefined,
+    isActive: p.active,
+  };
+  form.context.resetForm({ values });
+};
+
+watch(() => props.user, (newValue: UserResponse) => {
+  updateFieldValues(newValue);
+});
+
+onMounted(() => {
+  if (props.user) {
+    updateFieldValues(props.user);
+  }
+});
+</script>
+
+<style scoped lang="scss">
+
+</style>