change

src/components/userBlock.vue

@@ -4,20 +4,17 @@
       {{ $t(title) }}
     </template>
     <template #footer>
-      <div class="w100 q-pa-md">
-        <q-btn
-          rounded color="primary"
-          class="w100 fix-disabled-btn"
-          @click = "onSubmit"
-          >
-          {{ $t(btnText) }}
-        </q-btn>
-      </div>
+      <q-btn
+        rounded color="primary"
+        class="w100 fix-disabled-btn"
+        @click = "onSubmit"
+        >
+        {{ $t(btnText) }}
+      </q-btn>
     </template>
-
     <pn-scroll-list>
-      <div class="flex column items-center q-pa-md q-pb-sm">
-        <div class="relative-position">
+      <div class="column items-center q-pa-md q-pb-sm">
+        <div class="relative-position flex justify-center w100 text-center">
           <pn-auto-avatar
             :img="userMod.photo"
             :name="tname"
@@ -26,11 +23,16 @@
             :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"
+            v-if="userStatus" 
+            class="flex justify-center absolute-center w100 items-center"
             >
-            {{ $t(userStatus.text) }}
+            <q-chip
+              square
+              :label="$t(userStatus.text)"
+              :color="userStatus.color"
+              text-color="white"
+              class="text-uppercase"
+            />
           </div>
         </div>
         <div class="flex row items-start justify-center no-wrap q-pb-lg">
@@ -134,7 +136,8 @@
   import { computed, reactive } from 'vue'
   import { useCompaniesStore } from 'stores/companies'
   import { useI18n } from 'vue-i18n'
-  import { removeNullKeys } from 'utils/helpers'
+  import { removeNullKeys, getFieldValue } from 'utils/helpers'
+  import { getUserStatus } from 'utils/users'
   import type { User } from 'types/User'
 
   const { t } = useI18n()
@@ -178,22 +181,17 @@
         .filter(Boolean)
         .join(' ')
   )
-
-  const userStatus = computed(() => {
-    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 userStatus = computed(() => props.user ? getUserStatus(props.user) : null)
+  
+  function onSubmit() {
     const outData = {
-      fullname: userMod.fullname ?? (typeof props.user?.fullname === 'string' ? '' : null),
+      fullname: getFieldValue(userMod.fullname, props.user?.fullname),
       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),
+      department: getFieldValue(userMod.department, props.user?.department),
+      role: getFieldValue(userMod.role, props.user?.role),
+      phone: getFieldValue(userMod.phone, props.user?.phone),
+      email: getFieldValue(userMod.email, props.user?.email),
       photo: userMod.photo
     }
     emit('update', removeNullKeys(outData))
@@ -205,19 +203,4 @@
   .fix-bottom-padding.q-field--with-bottom {
     padding-bottom: 0 !important
   }
-
-  .status-blocked {
-    border: 2px solid var(--q-negative);
-    color: var(--q-negative);
-  }
-
-  .status-leave {
-    border: 2px solid var(--q-primary);
-    color: var(--q-primary);
-  }
-
-  .status-pending{
-    border: 2px solid var(--q-secondary);
-    color: var(--q-secondary);
-  }
 </style>