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 font16 fontbold">
        {{ $t("dashboard_client.providers_close.title") }}
      </div>

      <div
        v-if="data.length"
        class="row items-center no-wrap text-text"
      >
        <q-btn
          color="text"
          dense
          flat
          icon="mdi-chevron-left"
          round
          size="sm"
          @click="setPeriodTypePrevious"
        />

        <span class="font10 fontbold">
          {{ showCorrectLabels() }}
        </span>

        <q-btn
          color="text"
          dense
          flat
          icon="mdi-chevron-right"
          round
          size="sm"
          @click="setPeriodTypeNext"
        />
      </div>
    </div>

    <div
      v-if="!data.length"
      class="empty-alert row no-wrap items-start"
    >
      <q-icon
        class="empty-alert__icon"
        name="mdi-alert-outline"
        size="28px"
      />

      <div class="empty-alert__text font10">
        {{ $t("dashboard_client.providers_close.empty_alert_text") }}
      </div>
    </div>

    <div
      v-else
      class="column"
    >
      <q-card
        v-for="p in data"
        :key="p.provider_id"
        :flat="false"
        class="card-border bg-page text-text q-mb-sm"
      >
        <q-card-section class="row no-wrap q-pa-sm">
          <div class="row no-wrap full-width">
            <div class="col-2">
              <q-avatar
                class=""
                :style="avatarColors[p.provider_id % avatarColors.length]"
              >
                <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 font12 fontmedium">
                  {{ getFirstName(p.provider_name) }}
                </span>

                <span class="text-provider-close-region font9 fontmedium">
                  {{ p.district }}
                </span>

                <div class="row items-center justify-between q-pr-lg">
                  <div class="row items-center">
                    <q-icon
                      color="warning"
                      name="mdi-star"
                      size="12px"
                    />

                    <span class="text-provider-close-rating font9 fontmedium">
                      {{
                        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
                      color="secondary"
                      name="mdi-broom"
                      size="16px"
                    />

                    <span class="text-provider-close-jobs font9 fontmedium">
                      {{ p.total_services ?? 0 }}
                    </span>
                  </div>

                  <div class="row items-center">
                    <q-icon
                      color="text"
                      name="mdi-map-marker-outline"
                      size="16px"
                    />

                    <span class="text-provider-close-jobs font9 fontmedium">
                      {{ formatDistance(p.distance_km) }}
                    </span>
                  </div>
                </div>
              </div>

              <div
                class="column col-3 justify-between text-center items-center"
              >
                <span class="text-provider-close-price font12 fontmedium">
                  {{ showCorrectValues(p) }}
                </span>

                <div class="full-width">
                  <q-btn
                    class="full-width"
                    color="primary"
                    no-caps
                    padding="1px 5px"
                    rounded
                    size="sm"
                    unelevated
                    :label="$t('dashboard_client.favorites.view_schedule')"
                    @click="goToScheduling(p)"
                  />
                </div>
              </div>
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </div>
</template>

<script setup>
import { avatarColors } from "src/helpers/avatarColors";
import { formatCurrency, getFirstName } from "src/helpers/utils";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";

import SchedulingDialog from "src/pages/search/components/SchedulingDialog.vue";

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

const { t } = useI18n();

const $q = useQuasar();

const currentPeriodType = ref(6);

const periodTypeMap = ref({
  2: "daily_price_2h",
  4: "daily_price_4h",
  6: "daily_price_6h",
  8: "daily_price_8h",
});

const formatDistance = (distance) => {
  if (distance === null || distance === undefined || distance === "")
    return "—";

  const numericDistance = Number(distance);

  if (!Number.isFinite(numericDistance)) return "—";

  return `${numericDistance.toLocaleString("pt-BR", { maximumFractionDigits: 1 })} km`;
};

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 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 showCorrectValues = (p) => {
  const priceKey = periodTypeMap.value[currentPeriodType.value];

  const price = priceKey ? p[priceKey] : null;

  return price !== null && price !== undefined
    ? formatCurrency(price)
    : t("dashboard_client.providers_close.no_price");
};

//

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

<style scoped lang="scss">
.empty-alert {
  background: #e3efff;
  border-radius: 8px;
  gap: 12px;
  padding: 13px 14px;
}

.empty-alert__icon {
  color: #6554d9;
  flex: 0 0 auto;
}

.empty-alert__text {
  color: #6554d9;
  line-height: 1.2;
  padding-top: 1px;
}
</style>