sfp_front_vue_diarista_cliente/src/pages/search/SearchPage.vue

<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
<template>
  <q-page class="bg-page">
    <div
      class="row items-center q-px-md q-pt-md q-pb-sm bg-white shadow-search"
    >
      <q-btn
        class="header-back-btn"
        color="primary"
        dense
        flat
        icon="mdi-chevron-left"
        round
        @click="router.back()"
      />

      <div
        class="col text-center font16 fontbold gradient-diarista text-primary"
      >
        {{ $t("search_page.title") }}
      </div>

      <div style="width: 36px" />
    </div>

    <div class="q-px-md q-pt-md q-pb-sm">
      <q-card
        class="custom-schedule-card bg-surface shadow-card q-pa-sm"
        :flat="false"
      >
        <q-card-section class="row items-center no-wrap q-pa-sm q-gutter-x-sm">
          <span class="col text-text font12 fontmedium fonte-hint">
            {{ $t("search_page.custom_schedule_description") }}
          </span>

          <q-btn
            class="font12 fontmedium custom-schedule-btn card-border"
            color="secondary"
            no-caps
            padding="8px 16px"
            unelevated
            @click="router.push({ name: 'SobMedidaPage' })"
          >
            <template #default>
              <div class="column items-center q-gutter-y-xs">
                <q-icon
                  name="mdi-scissors-cutting"
                  size="16px"
                />

                <span>{{ $t("search_page.custom_schedule_btn") }}</span>
              </div>
            </template>
          </q-btn>
        </q-card-section>
      </q-card>
    </div>

    <div class="row items-center q-px-md q-py-md q-gutter-x-sm">
      <q-input
        v-model="searchName"
        class="col bg-white search-input"
        clearable
        debounce="400"
        dense
        input-class="text-text"
        outlined
        rounded
        :placeholder="$t('search_page.search_placeholder')"
        @update:model-value="onNameChange"
      >
        <template #append>
          <q-icon
            color="grey-5"
            name="mdi-magnify"
          />
        </template>
      </q-input>

      <q-btn
        :class="{ 'filter-active': activeSort || activeDate }"
        color="grey-6"
        dense
        flat
        icon="mdi-tune-variant"
        round
        size="md"
        @click="openFilterDialog"
      />
    </div>

    <div
      v-if="!loading && hasLocation"
      class="row items-center justify-between no-wrap q-px-md q-pb-sm"
    >
      <div class="dashboard-section-title font16 fontbold gradient-diarista">
        {{ $t("search_page.choose_provider") }}
      </div>

      <div 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">{{ periodLabel }}</span>

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

    <div
      v-if="loading"
      class="row items-center justify-center q-py-xl"
    >
      <q-spinner-dots
        color="primary"
        size="40px"
      />
    </div>

    <template v-else-if="!hasLocation">
      <AddressIncompleteBanner @resolved="loadProviders" />
    </template>

    <template v-else>
      <div
        v-if="sortedProviders.length === 0"
        class="text-center text-grey-6 q-px-md q-py-lg text-body2"
      >
        {{ $t("search_page.no_results") }}
      </div>

      <div
        v-else
        class="column q-px-md q-pb-xl"
      >
        <q-card
          v-for="p in sortedProviders"
          :key="p.provider_id"
          :flat="false"
          class="card-border bg-page text-text q-mb-sm"
          @click="openProviderInfo(p)"
        >
          <q-card-section class="row no-wrap q-pa-sm">
            <div class="row no-wrap full-width">
              <div class="col-2">
                <q-avatar
                  :style="
                    p.profile_media_url
                      ? {}
                      : avatarColors[p.provider_id % avatarColors.length]
                  "
                >
                  <img
                    v-if="p.profile_media_url"
                    :src="p.profile_media_url"
                    style="object-fit: cover; width: 100%; height: 100%"
                  />

                  <span v-else>{{
                    getFirstName(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-nam font12 fontbold">
                    {{
                      getFirstName(p.provider_name) || "Prestador"
                    }}
                  </span>

                  <span
                    class="text-provider-close-region font9 fontbold text-grey-7"
                   >
                    {{ 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="12px"
                      />

                      <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="12px"
                      />

                      <span class="text-provider-close-jobs font9 fontmedium">
                        {{ (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 font12 fontbold">
                    {{ priceByPeriod(p) }}
                  </span>

                  <div class="full-width">
                    <q-btn
                      color="primary"
                      no-caps
                      padding="3px 12px"
                      rounded
                      size="sm"
                      unelevated
                      :label="$t('search_page.schedule_btn')"
                      @click.stop="goToScheduling(p)"
                    />
                  </div>
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </template>
  </q-page>
</template>

<script setup>
import { avatarColors } from "src/helpers/avatarColors";
import { buscaPrestadores } from "src/api/dashboard";
import { computed, onMounted, ref } from "vue";
import { formatCurrency, getFirstName } from "src/helpers/utils";
import { useI18n } from "vue-i18n";
import { useQuasar } from "quasar";
import { useRouter } from "vue-router";

import AddressIncompleteBanner from "src/components/shared/AddressIncompleteBanner.vue";
import SchedulingDialog from "src/pages/search/components/SchedulingDialog.vue";
import SearchFilterDialog from "src/pages/search/components/SearchFilterDialog.vue";
import ProfileInfoDialog from "src/components/profile/ProfileInfoDialog.vue";

const { t } = useI18n();
const router = useRouter();
const $q = useQuasar();

const activeDate = ref(null);
const activeSort = ref(null);
const allProviders = ref([]);
const currentPeriodType = ref(8);
const hasLocation = ref(true);
const loading = ref(true);
const searchName = ref("");

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

const periodLabel = computed(() => {
  const labels = {
    8: t("search_page.until_8h"),
    6: t("search_page.until_6h"),
    4: t("search_page.until_4h"),
    2: t("search_page.until_2h"),
  };

  return labels[currentPeriodType.value] ?? "";
});

const sortedProviders = computed(() => {
  const list = [...allProviders.value];

  const priceKey = periodTypeMap[currentPeriodType.value];

  switch (activeSort.value) {
    case "price_asc":
      return list.sort(
        (a, b) => Number(a[priceKey] ?? 0) - Number(b[priceKey] ?? 0),
      );
    case "price_desc":
      return list.sort(
        (a, b) => Number(b[priceKey] ?? 0) - Number(a[priceKey] ?? 0),
      );
    case "distance_asc":
      return list.sort(
        (a, b) => Number(a.distance_km ?? 0) - Number(b.distance_km ?? 0),
      );
    case "distance_desc":
      return list.sort(
        (a, b) => Number(b.distance_km ?? 0) - Number(a.distance_km ?? 0),
      );
    case "rating_desc":
      return list.sort(
        (a, b) => Number(b.average_rating ?? 0) - Number(a.average_rating ?? 0),
      );
    case "rating_asc":
      return list.sort(
        (a, b) => Number(a.average_rating ?? 0) - Number(b.average_rating ?? 0),
      );
    case "reviews_desc":
      return list.sort(
        (a, b) => Number(b.total_reviews ?? 0) - Number(a.total_reviews ?? 0),
      );
    case "reviews_asc":
      return list.sort(
        (a, b) => Number(a.total_reviews ?? 0) - Number(b.total_reviews ?? 0),
      );
    case "services_desc":
      return list.sort(
        (a, b) => Number(b.total_services ?? 0) - Number(a.total_services ?? 0),
      );
    case "services_asc":
      return list.sort(
        (a, b) => Number(a.total_services ?? 0) - Number(b.total_services ?? 0),
      );
    case "oldest":
      return list.sort(
        (a, b) => new Date(a.created_at) - new Date(b.created_at),
      );
    case "newest":
      return list.sort(
        (a, b) => new Date(b.created_at) - new Date(a.created_at),
      );
    default:
      return list.sort(
        (a, b) => Number(b.average_rating ?? 0) - Number(a.average_rating ?? 0),
      );
  }
});

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

const openProviderInfo = (provider) => {
  $q.dialog({
    component: ProfileInfoDialog,
    componentProps: {
      provider,
    },
  });
};

const loadProviders = async () => {
  loading.value = true;

  try {
    const result = await buscaPrestadores({
      date: activeDate.value ?? "",
      name: searchName.value,
    });

    allProviders.value = result?.providers ?? [];
    hasLocation.value = result?.has_location ?? true;
  } catch {
    allProviders.value = [];
    hasLocation.value = true;
  } finally {
    loading.value = false;
  }
};

const onNameChange = () => {
  loadProviders();
};

const openFilterDialog = () => {
  $q.dialog({
    component: SearchFilterDialog,
    componentProps: {
      initialDate: activeDate.value,
      initialSort: activeSort.value,
    },
  }).onOk(({ date, sort }) => {
    const dateChanged = date !== activeDate.value;

    activeDate.value = date;
    activeSort.value = sort;

    if (dateChanged) loadProviders();
  });
};

const priceByPeriod = (provider) => {
  const key = periodTypeMap[currentPeriodType.value];

  return provider[key]
    ? formatCurrency(provider[key])
    : t("search_page.no_price");
};

const setPeriodTypeNext = () => {
  const next = currentPeriodType.value + 2;

  if (periodTypeMap[next]) currentPeriodType.value = next;
};

const setPeriodTypePrevious = () => {
  const previous = currentPeriodType.value - 2;

  if (periodTypeMap[previous]) currentPeriodType.value = previous;
};

onMounted(loadProviders);
</script>

<style scoped lang="scss">
.shadow-search {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.search-input {
  :deep(.q-field__control) {
    border-radius: 28px;
  }
}

.custom-schedule-card {
  border-radius: 12px;
}

.custom-schedule-btn {
  flex-shrink: 0;
  min-width: 72px;
}

.filter-active {
  color: var(--q-primary) !important;
}

.fonte-hint {
  line-height: 100%;
  letter-spacing: -0.04em;
  vertical-align: middle;
}
</style>