update

src/components/userBlock.vue

@@ -4,43 +4,45 @@
       {{ $t(title) }}
     </template>
     <template #footer>
-      <q-btn
-        rounded color="primary"
-        class="w100 q-mt-md q-mb-xs fix-disabled-btn"
-        @click = "onSubmit"
-        >
-        {{ $t(btnText) }}
-      </q-btn>
+      <div class="w100 q-pa-md">
+        <q-btn
+          rounded color="primary"
+          class="w100 fix-disabled-btn"
+          @click = "onSubmit"
+          >
+          {{ $t(btnText) }}
+        </q-btn>
+      </div>
     </template>
 
     <pn-scroll-list>
       <div class="flex column items-center q-pa-md q-pb-sm">
         <div class="relative-position">
           <pn-auto-avatar
-            :img="modelValue.photo"
+            :img="userMod.photo"
             :name="tname"
             size="100px"
             class="q-pb-lg"
             :style="!userStatus ? {} : { filter: 'grayscale(100%)'}"
           />
-        <div
-          v-if="userStatus"
-          class="absolute-center text-h4 text-bold q-pa-sm text-center"
-          :class ="'status-' + userStatus.status"
-          >
-          {{ $t(userStatus.text) }}
-        </div>
+          <div
+            v-if="userStatus"
+            class="absolute-center text-h4 text-bold q-pa-sm text-center"
+            :class ="'status-' + userStatus.status"
+            >
+            {{ $t(userStatus.text) }}
+          </div>
         </div>
         <div class="flex row items-start justify-center no-wrap q-pb-lg">
           <div class="flex column justify-center">
             <div class="text-bold q-pr-xs text-center" align="center">{{ tname }}</div>
-            <div caption class="text-blue text-caption" align="center" v-if="modelValue.username">{{ modelValue.username }}</div>
+            <div caption class="text-blue text-caption" align="center" v-if="user?.username">{{ user.username }}</div>
           </div>
         </div>
 
         <div class="q-gutter-y-lg w100">
           <q-input
-            v-model.trim="modelValue.fullname"
+            v-model.trim="userMod.fullname"
             dense
             filled
             class = "w100"
@@ -48,7 +50,7 @@
           />
 
           <q-select
-            v-model="modelValue.company_id"
+            v-model="userMod.company_id"
             :options="displayCompanies"
             dense
             filled
@@ -84,7 +86,7 @@
           </q-select>
 
           <q-input
-            v-model.trim="modelValue.department"
+            v-model.trim="userMod.department"
             dense
             filled
             class = "w100 q-pt-sm"
@@ -92,7 +94,7 @@
           />
 
           <q-input
-            v-model.trim="modelValue.role"
+            v-model.trim="userMod.role"
             dense
             filled
             class = "w100 q-pt-sm"
@@ -100,7 +102,7 @@
           />
 
           <q-input
-            v-model.trim="modelValue.phone"
+            v-model.trim="userMod.phone"
             dense
             filled
             class = "w100 q-pt-sm"
@@ -111,7 +113,7 @@
           </q-input>
 
           <q-input
-            v-model.trim="modelValue.email"
+            v-model.trim="userMod.email"
             dense
             filled
             class = "w100 q-pt-sm"
@@ -129,30 +131,31 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
+  import { computed, reactive } from 'vue'
   import { useCompaniesStore } from 'stores/companies'
   import { useI18n } from 'vue-i18n'
-  import { convertEmptyStringsToNull } from 'src/utils/helpers'
+  import { removeNullKeys } from 'utils/helpers'
   import type { User } from 'types/User'
 
-
   const { t } = useI18n()
 
-  const modelValue = defineModel<User>({
-    required: true
-  })
-
-  defineProps<{
+  const props = defineProps<{
     title: string,
-    btnText: string
+    btnText: string,
+    user?: User
   }>()
   
   const emit = defineEmits(['update'])
 
-  function onSubmit() {
-    const cleanedData = convertEmptyStringsToNull(modelValue.value)
-    emit('update', cleanedData)
-  }
+  const userMod = reactive({
+    fullname: props.user?.fullname ?? '',
+    company_id: props.user?.company_id ?? null,
+    department: props.user?.department ?? '',
+    role: props.user?.role ?? '',
+    phone: props.user?.phone ?? '',
+    email: props.user?.email ?? '',
+    photo: props.user?.photo ?? null
+  })
 
   const companiesStore = useCompaniesStore()
   const companies = computed(() => companiesStore.companies)
@@ -171,18 +174,31 @@
   ])
 
   const tname = computed(() => 
-    [modelValue.value?.firstname, modelValue.value?.lastname]
+    [props.user?.firstname, props.user?.lastname]
         .filter(Boolean)
         .join(' ')
   )
 
   const userStatus = computed(() => {
-    if (modelValue.value.is_blocked) return { status: 'blocked', text: 'user_block__user_blocked' }
-    if (modelValue.value.is_leave) return { status: 'leave', text: 'user_block__user_leave' }
-    if (!modelValue.value.is_terms_accepted) return { status: 'pending', text: 'user_block__user_pending' }
+    if (props.user?.is_blocked) return { status: 'blocked', text: 'user_block__user_blocked' }
+    if (props.user?.is_leave) return { status: 'leave', text: 'user_block__user_leave' }
+    if (!props.user?.is_terms_accepted) return { status: 'pending', text: 'user_block__user_pending' }
     return null
   })
 
+   function onSubmit() {
+    const outData = {
+      fullname: userMod.fullname ?? (typeof props.user?.fullname === 'string' ? '' : null),
+      company_id: userMod.company_id,
+      department: userMod.department ?? (typeof props.user?.department === 'string' ? '' : null),
+      role: userMod.role ?? (typeof props.user?.role === 'string' ? '' : null),
+      phone: userMod.phone ?? (typeof props.user?.phone === 'string' ? '' : null),
+      email: userMod.email ?? (typeof props.user?.email === 'string' ? '' : null),
+      photo: userMod.photo
+    }
+    emit('update', removeNullKeys(outData))
+  }
+
 </script>
 
 <style scoped>