before liquid glass

src/components/userBlock.vue

@@ -7,6 +7,7 @@
       <q-btn
         rounded color="primary"
         class="w100 fix-disabled-btn"
+        :disable="!isFormValid"
         @click = "onSubmit"
         >
         {{ $t(btnText) }}
@@ -38,17 +39,25 @@
         <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="user?.username">{{ user.username }}</div>
+            <div caption class="text-primary text-caption" align="center" v-if="user?.username">{{ user.username }}</div>
           </div>
         </div>
 
-        <div class="q-gutter-y-lg w100">
+        <q-form
+          ref="formRef"
+          @validation-success="isFormValid = true"
+          @validation-error="isFormValid = false"
+          class="q-gutter-y-lg w100"
+          >
           <q-input
             v-model.trim="userMod.fullname"
             dense
             filled
-            class = "w100"
+            class = "w100 fix-bottom-padding"
             :label = "$t('user_block__name')"
+            :rules="[inputRules.middleText]"
+            @update:model-value="formRef.validate()"
+            debounce="300"
           />
 
           <q-select
@@ -61,6 +70,7 @@
             option-value="id"
             emit-value
             map-options
+            @update:model-value="formRef.validate()"
             >
             <template #option="scope">
               <q-item v-bind="scope.itemProps">
@@ -91,23 +101,32 @@
             v-model.trim="userMod.department"
             dense
             filled
-            class = "w100 q-pt-sm"
+            class = "w100 fix-bottom-padding q-pt-sm"
             :label = "$t('user_block__department')"
+            :rules="[inputRules.middleText]"
+            @update:model-value="formRef.validate()"
+            debounce="300"
           />
 
           <q-input
             v-model.trim="userMod.role"
             dense
             filled
-            class = "w100 q-pt-sm"
+            class = "w100 fix-bottom-padding q-pt-sm"
             :label = "$t('user_block__role')"
+            :rules="[inputRules.middleText]"
+            @update:model-value="formRef.validate()"
+            debounce="300"
           />
 
           <q-input
             v-model.trim="userMod.phone"
             dense
             filled
-            class = "w100 q-pt-sm"
+            class = "w100 fix-bottom-padding q-pt-sm"
+            :rules="[inputRules.middleText]"
+            @update:model-value="formRef.validate()"
+            debounce="300"
             >
             <template #prepend>
               <q-icon name="mdi-phone-outline"/>
@@ -118,14 +137,16 @@
             v-model.trim="userMod.email"
             dense
             filled
-            class = "w100 q-pt-sm"
+            class = "w100 fix-bottom-padding q-pt-sm"
+            :rules="[inputRules.middleText]"
+            @update:model-value="formRef.validate()"
+            debounce="300"
             >
             <template #prepend>
               <q-icon name="mdi-email-outline"/>
             </template>
           </q-input>
-        </div>
-
+        </q-form>
       </div>
     </pn-scroll-list>
   </pn-page-card>
@@ -133,14 +154,16 @@
 </template>
 
 <script setup lang="ts">
-  import { computed, reactive } from 'vue'
+  import { ref, computed, reactive, onMounted } from 'vue'
   import { useCompaniesStore } from 'stores/companies'
   import { useI18n } from 'vue-i18n'
+  import { useInputRules } from 'composables/useInputRules'
   import { removeNullKeys, getFieldValue } from 'utils/helpers'
   import { getUserStatus } from 'utils/users'
   import type { User } from 'types/User'
 
   const { t } = useI18n()
+   const { inputRules } = useInputRules()
 
   const props = defineProps<{
     title: string,
@@ -184,6 +207,9 @@
   
   const userStatus = computed(() => props.user ? getUserStatus(props.user) : null)
   
+  const formRef = ref()
+  const isFormValid = ref(false)
+  
   function onSubmit() {
     const outData = {
       fullname: getFieldValue(userMod.fullname, props.user?.fullname),
@@ -192,11 +218,15 @@
       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))
+    emit('update', removeNullKeys(outData, ['company_id']))
   }
 
+  onMounted(async () => {
+    await formRef.value.validate()
+    if (!isFormValid.value) formRef.value.resetValidation()
+  })
+
 </script>
 
 <style scoped>