Ver código fonte

fix: :bug: ajustes dashboard cliente

corrigir layout dos blocos da dashboard do cliente com as informações sendo exibidas corretamente e com layout ajustado

fase: dev | origin: melhoria-interna
Gustavo Zanatta 3 semanas atrás
pai
commit
a8dfff87ea

+ 36 - 19
src/components/dashboard/DashboardFavoriteProviders.vue

@@ -10,29 +10,28 @@
         :flat="false"
       >
         <q-card-section class="q-pa-sm column text-text">
-          <div class="row items-start no-wrap q-gutter-x-sm">
-            <div class="col-3">
-              <q-avatar :style="avatarColors[item.id % avatarColors.length]" size="46px" class="text-weight-bold">
+          <div class="row items-start no-wrap">
+            <div class="col-3 q-my-auto">
+              <q-avatar :style="avatarColors[item.provider_id % avatarColors.length]" size="46px" class="text-weight-bold">
                 {{ item.provider_name?.slice(0,1).toUpperCase() ?? '—' }}
               </q-avatar>
             </div>
-            <div class="col-9 row">
-              <div class="col-6 column full-height justify-between">
-                <div class="column q-gutter-y-xs">
-                  <span class="text-fav-name">{{ item.provider_name ?? 'Prestador' }}</span>
-                  <div class="row items-center q-gutter-x-xs">
-                    <q-icon name="mdi-star" color="warning" size="sm" />
-                    <span class="text-fav-name">{{ item.average_rating ?? '-' }}</span>
-                  </div>
-                </div>
-              </div>
-              <div class="column col-5 items-end justify-end">
-                <q-btn
-                  rounded color="primary"
-                  padding="1px 5px" size="sm"
-                  :label="$t('dashboard_client.favorites.view_schedule')"
-                />
+            <div class="col-5 column q-gutter-y-xs q-my-auto">
+              <span class="text-fav-name">{{ item.provider_name ?? 'Prestador' }}</span>
+              <span class="text-fav-region">{{ item.provider_district ?? 'N/A' }}</span>
+              <div v-if="item.average_rating != null" class="row items-center q-gutter-x-xs">
+                <q-icon name="mdi-star" color="warning" size="sm" />
+                <span class="text-fav-name">{{ Number(item.average_rating).toFixed(1) }}</span>
               </div>
+              <!-- <span class="text-fav-price">{{ bestPrice(item) }}</span> -->
+            </div>
+            <div class="col-4 column q-mt-auto">
+              <q-btn
+                rounded color="primary"
+                padding="1px 5px"
+                size="sm"
+                :label="$t('dashboard_client.favorites.view_schedule')"
+              />
             </div>
           </div>
         </q-card-section>
@@ -42,14 +41,32 @@
 </template>
 
 <script setup>
+// import { formatCurrency } from 'src/helpers/utils';
+// import { useI18n } from 'vue-i18n';
+
 defineProps({ data: { type: Array, default: () => [] } });
 
+// const { t } = useI18n();
+
 const avatarColors = [
   { background: '#ffd5df', color: '#932e57' },
   { background: '#d7e8ff', color: '#2158a8' },
   { background: '#dfd',    color: '#2a7a3b' },
   { background: '#ffe5cc', color: '#8a4500' },
 ];
+
+// const bestPrice = (item) => {
+//   const prices = [
+//     item.daily_price_2h,
+//     item.daily_price_4h,
+//     item.daily_price_6h,
+//     item.daily_price_8h,
+//   ].filter(p => p != null && Number(p) > 0);
+
+//   if (!prices.length) return t('dashboard_client.favorites.no_price');
+//   const min = Math.min(...prices.map(Number));
+//   return t('dashboard_client.favorites.from') + ' ' + formatCurrency(min);
+// };
 </script>
 
 <style scoped lang="scss">

+ 8 - 2
src/components/dashboard/DashboardLastDoneSchedules.vue

@@ -9,11 +9,12 @@
         class="mini-card shadow-card bg-surface card-border"
         :flat="false"
       >
-        <q-card-section class="column items-center q-pa-md q-gutter-y-xs text-text">
-          <q-avatar :style="avatarColors[item.id % avatarColors.length]" size="56px" class="text-weight-bold">
+        <q-card-section class="column q-pa-md q-gutter-y-xs text-text">
+          <q-avatar :style="avatarColors[item.provider_id % avatarColors.length]" size="56px" class="text-weight-bold q-mx-auto">
             {{ item.provider_name?.slice(0,1).toUpperCase() ?? '—' }}
           </q-avatar>
           <span class="text-done-name">{{ item.provider_name ?? 'Prestador' }}</span>
+          <span v-if="item.provider_district" class="text-done-district">{{ item.provider_district != null ? item.provider_district : $t('dashboard_client.last_schedules.no_address') }}</span>
           <q-btn
             rounded color="secondary"
             padding="1px 5px" size="sm"
@@ -53,4 +54,9 @@ const avatarColors = [
   flex: 0 0 130px;
   scroll-snap-align: start;
 }
+.text-done-district {
+  font-size: 11px;
+  color: var(--q-text-light, #9ca3af);
+  text-align: center;
+}
 </style>

+ 0 - 1
src/components/dashboard/DashboardNextSchedules.vue

@@ -107,7 +107,6 @@ const formatDayMonth = (iso) => {
 const addressIcon = (type) => type === 'home' ? 'mdi-home-outline' : 'mdi-office-building-outline';
 
 const addressLabel = (type) => {
-  console.log(type)
   if (type === 'home') return t('address.types.commercial.home');
   if (type === 'apartment') return t('dashboard_client.next_schedules.place_apartment');
   if (type === 'commercial') return t('address.types.commercial');

+ 1 - 1
src/components/dashboard/DashboardProvidersClose.vue

@@ -19,7 +19,7 @@
         <q-card-section class="row no-wrap q-pa-sm">
           <div class="row no-wrap full-width">
             <div class="col-2">
-              <q-avatar :style="avatarColors[p.id % avatarColors.length]" class="text-weight-bold">
+              <q-avatar :style="avatarColors[p.provider_id % avatarColors.length]" class="text-weight-bold">
                 {{ p.provider_name?.slice(0,1).toUpperCase() ?? '—' }}
               </q-avatar>
             </div>

+ 0 - 1
src/composables/useInputRules.js

@@ -63,7 +63,6 @@ export const useInputRules = () => {
 };
 
 function isValidCPF(cpf) {
-  console.log("isValidCPF", cpf);
   if (!cpf) return false;
   cpf = cpf.replace(/[^\d]+/g, "");
   if (cpf.length !== 11) return false;

+ 2 - 1
src/i18n/locales/en.json

@@ -341,7 +341,8 @@
     },
     "last_schedules": {
       "title": "Last services",
-      "reschedule": "reschedule"
+      "reschedule": "reschedule",
+      "no_address": "No address"
     },
     "favorites": {
       "title": "Favorites",

+ 2 - 1
src/i18n/locales/es.json

@@ -341,7 +341,8 @@
     },
     "last_schedules": {
       "title": "Últimos servicios",
-      "reschedule": "reagendar"
+      "reschedule": "reagendar",
+      "no_address": "Sin dirección"
     },
     "favorites": {
       "title": "Favoritos",

+ 2 - 1
src/i18n/locales/pt.json

@@ -341,7 +341,8 @@
     },
     "last_schedules": {
       "title": "Últimos serviços",
-      "reschedule": "reagendar"
+      "reschedule": "reagendar",
+      "no_address": "Sem endereço"
     },
     "favorites": {
       "title": "Favoritos",

+ 0 - 1
src/pages/profile/ProfileEditDialog.vue

@@ -117,7 +117,6 @@ const submitUpdate = async () => {
       email: form.email,
       phone: form.phone
     }, userId.value);
-    console.log(data)
     setUpdateFormAsOriginal(data);
     onDialogOK(data);
   } catch (error) {