sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardProvidersClose.vue

<template>
  <div class="q-mx-md q-mb-lg">
    <div class="row items-center justify-between no-wrap q-mb-sm">
      <div class="dashboard-section-title gradient-diarista">{{ $t('dashboard_client.providers_close.title') }}</div>
      <div class="text-text-light">
        <q-btn flat color="text-light" icon="mdi-chevron-left" @click="setPeriodTypePrevious"/>
        <span>{{ showCorrectLabels() }}</span>
        <q-btn flat color="text-light" icon="mdi-chevron-right" @click="setPeriodTypeNext"/>
      </div>
    </div>

    <div class="column">
      <q-card
        v-for="p in data"
        :key="p.provider_id"
        class="card-border bg-page text-text q-mb-sm"
        :flat="false"
      >
        <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.provider_id % avatarColors.length]" class="text-weight-bold">
                <img v-if="p.provider_photo" :src="p.provider_photo" style="object-fit:cover;border-radius:50%;" />
                <span v-else>{{ p.provider_name?.slice(0,1).toUpperCase() ?? '—' }}</span>
              </q-avatar>
            </div>

            <div class="col-10 row">
              <div class="column col-9 justify-between">
                <span class="text-provider-close-name">{{ p.provider_name ?? 'Prestador' }}</span>
                <span class="text-provider-close-region">{{ p.district }}</span>
                <div class="row items-center justify-between q-pr-lg">
                  <div class="row items-center">
                    <q-icon name="mdi-star" color="warning" size="16px" />
                    <span class="text-provider-close-rating">
                      {{ p.average_rating != null ? (Number(p.average_rating).toFixed(1) + ' (' + (p.total_reviews ?? 0) + ')') : ('(' + (p.total_reviews ?? 0) + ')') }}
                    </span>
                  </div>
                  <div class="row items-center">
                    <q-icon name="mdi-broom" color="secondary" size="16px" />
                    <span class="text-provider-close-jobs">{{ p.total_services ?? 0 }}</span>
                  </div>
                  <div class="row items-center">
                    <q-icon name="mdi-map-marker-outline" color="text" size="16px" />
                    <span class="text-provider-close-jobs">{{ (p.distance_km ?? '--') + ' km' }}</span>
                  </div>
                </div>
              </div>

              <div class="column col-3 justify-between text-center items-center">
                <span class="text-provider-close-price">
                  {{ showCorrectValues(p) }}
                </span>
                <div class="full-width">
                  <q-btn
                    unelevated rounded no-caps
                    color="primary"
                    size="sm"
                    padding="3px 12px"
                    :label="$t('dashboard_client.providers_close.schedule')"
                    @click="goToScheduling(p)"
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { useQuasar } from 'quasar';
import { formatCurrency } from 'src/helpers/utils';
import SchedulingDialog from 'src/pages/search/components/SchedulingDialog.vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';

defineProps({ data: { type: Array, default: () => [] } });

const $q = useQuasar();
const { t } = useI18n();
const currentPeriodType = ref(8);
const periodTypeMap = ref({
  2: 'daily_price_2h',
  4: 'daily_price_4h',
  6: 'daily_price_6h',
  8: 'daily_price_8h',
});


const showCorrectValues = (p) => {
  switch (currentPeriodType.value) {
    case 8:
      return p.daily_price_8h ? formatCurrency(p.daily_price_8h) : t('dashboard_client.providers_close.no_price');
    case 6:
      return p.daily_price_6h ? formatCurrency(p.daily_price_6h) : t('dashboard_client.providers_close.no_price');
    case 4:
      return p.daily_price_4h ? formatCurrency(p.daily_price_4h) : t('dashboard_client.providers_close.no_price');
    case 2:
      return p.daily_price_2h ? formatCurrency(p.daily_price_2h) : t('dashboard_client.providers_close.no_price');
    default:
      return t('dashboard_client.providers_close.no_price');
  }
};

const showCorrectLabels = () => {
  switch (currentPeriodType.value) {
    case 8:
      return t('dashboard_client.providers_close.until_8h');
    case 6:
      return t('dashboard_client.providers_close.until_6h');
    case 4:
      return t('dashboard_client.providers_close.until_4h');
    case 2:
      return t('dashboard_client.providers_close.until_2h');
    default:
      return '';
  }
};

const setPeriodTypePrevious = () => {
  const previousPeriod = currentPeriodType.value - 2;
  if (periodTypeMap.value[previousPeriod]) {
    currentPeriodType.value = previousPeriod;
  }
};

const setPeriodTypeNext = () => {
  const nextPeriod = currentPeriodType.value + 2;
  if (periodTypeMap.value[nextPeriod]) {
    currentPeriodType.value = nextPeriod;
  }
};

const avatarColors = [
  { background: '#ffd5df', color: '#932e57' },
  { background: '#d7e8ff', color: '#2158a8' },
  { background: '#dfd',    color: '#2a7a3b' },
  { background: '#ffe5cc', color: '#8a4500' },
];


const goToScheduling = (provider) => {
  $q.dialog({
    component: SchedulingDialog,
    componentProps: { provider },
  });
};
</script>

<style scoped lang="scss">
</style>