space to enter

src/modules/08_KPI/views/form.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
@@ -37,6 +37,7 @@ const {
   dialogConfirm,
   success,
   findOrgName,
+  findOrgNameHtml,
   dialogRemove,
 } = mixin;
 const route = useRoute();
@@ -462,7 +463,7 @@ async function fetchProfileEvaluator(id: string) {
       evaluator.value.posLevelName = data.posLevelName;
       evaluator.value.isPosmasterAct = data.isPosmasterAct;
       evaluator.value.posmasterAct = data.posmasterAct;
-      evaluator.value.org = await findOrgName(data);
+      evaluator.value.org = await findOrgNameHtml(data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -637,6 +638,16 @@ function downloadFile(fileName: string) {
     });
 }
 
+const sizeImg = ref<any>();
+
+function onResize(size: { width: any; height: any }) {
+  if (size.height <= 156) {
+    sizeImg.value = "80px";
+  } else if (size.height > 156) {
+    sizeImg.value = "120px";
+  }
+}
+
 onMounted(async () => {
   showLoader();
   store.isUpdate = false;
@@ -672,7 +683,7 @@ onMounted(async () => {
       <div class="col-12">
         <q-card bordered flat class="relative-position">
           <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
-            <q-avatar size="80px">
+            <q-avatar :size="sizeImg">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -680,13 +691,12 @@ onMounted(async () => {
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
-
           <div
             v-if="$q.screen.gt.xs"
             class="absolute-center-left"
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
-            <q-avatar size="80px">
+            <q-avatar :size="sizeImg">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -695,6 +705,8 @@ onMounted(async () => {
             </q-avatar>
           </div>
           <div class="row col-12">
+            <q-resize-observer @resize="onResize" />
+
             <div class="row items-center col-12 q-pa-sm">
               <div
                 class="col-12"
@@ -707,8 +719,8 @@ onMounted(async () => {
                         ? `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
                         : ""
                     }}</span>
-                    <p class="q-mb-none">
-                      {{ findOrgName(store.dataEvaluation) }}
+                    <p class="q-mb-none text-html">
+                      {{ findOrgNameHtml(store.dataEvaluation) }}
                     </p>
                   </div>
                   <q-space v-if="$q.screen.gt.xs" />
@@ -1187,7 +1199,7 @@ onMounted(async () => {
   </q-dialog>
 
   <q-dialog v-model="modalEvaluatorDetail" persistent>
-    <q-card style="width: 700px; max-width: 80vw; min-height: 40vh">
+    <q-card style="width: 60vw; max-width: 70vw; min-height: 40vh">
       <DialogHeader
         :tittle="topic"
         :close="() => (modalEvaluatorDetail = false)"
@@ -1223,7 +1235,7 @@ onMounted(async () => {
                   evaluator.posExecutiveName ? evaluator.posExecutiveName : "-"
                 }}
               </div>
-              <div class="col-3">
+              <div class="col-3 text-html">
                 {{ evaluator.org ? evaluator.org : "-" }}
               </div>
             </div>