sfp_front_vue_diarista_cliente/src/pages/agenda/CalendarPage.vue

<template>
  <q-page class="bg-page q-pb-xl">
    <div
      class="calendar-header row items-center q-px-md q-pt-md q-pb-sm bg-white"
    >
      <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("dashboard_client.agenda.title") }}
      </div>

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

    <template v-if="loading">
      <div
        class="row items-center justify-center full-width"
        style="height: 60vh"
      >
        <q-spinner-dots color="primary" />
      </div>
    </template>

    <template v-else>
      <div class="q-mt-md q-mx-md">
        <div class="section-title gradient-diarista q-mb-sm font16 fontbold">
          {{ $t("dashboard_client.agenda.upcoming_title") }}
        </div>

        <template v-if="upcomingSchedules.length > 0">
          <q-card
            v-for="item in upcomingSchedules"
            :key="item.id"
            class="calendar-card bg-surface shadow-card q-mb-sm"
            :flat="false"
          >
            <q-card-section class="q-pa-sm">
              <div class="row no-wrap items-start q-gutter-x-sm">
                <q-avatar size="44px">
                  <img
                    v-if="item.provider_photo"
                    style="object-fit: cover"
                    :src="item.provider_photo"
                  />

                  <span
                    v-else
                    class="full-width full-height flex flex-center"
                    style="border-radius: 50%"
                    :style="avatarColors[item.id % avatarColors.length]"
                  >
                    {{
                      getFirstName(item.provider_name)
                        ?.slice(0, 2)
                        .toUpperCase() ?? "??"
                    }}
                  </span>
                </q-avatar>

                <div class="col column text-text">
                  <span class="font12 fontbold">
                    {{
                      getFirstName(item.provider_name) ||
                        $t("dashboard_client.agenda.waiting_proposals")
                    }}
                  </span>

                  <div class="row items-center no-wrap">
                    <span class="font10 fontbold">
                      {{ formatWeekday(item.date) }}
                    </span>

                    <span class="font10 fontmedium">
                      {{ ", " + formatDayMonth(item.date) }}
                    </span>
                  </div>

                  <span class="">
                    <span class="font10 fontmedium">
                      {{ $t("dashboard_client.next_schedules.from") }}
                    </span>

                    <span class="font10 fontbold q-ml-xs">
                      {{ item.start_time?.slice(0, 5) }}
                      {{ $t("dashboard_client.next_schedules.to") }}
                      {{ item.end_time?.slice(0, 5) }}
                    </span>
                  </span>
                </div>

                <div class="col-auto column items-end">
                  <q-chip
                    class="font10"
                    dense
                    square
                    :color="statusBgColor(item.status)"
                    :label="statusLabel(item.status)"
                    :text-color="statusTextColor(item.status)"
                  />

                  <span class="text-price font12 fontbold">
                    {{ formatScheduleTotal(item) }}
                  </span>

                  <span class="text-period font10 fontmedium">
                    {{ periodLabel(item.period_type) }}
                  </span>
                </div>
              </div>

              <div class="row items-center no-wrap q-mt-xs">
                <span class="type-label text-primary font10 fontmedium">
                  {{
                    item.schedule_type === "custom"
                      ? $t("dashboard_client.agenda.type_custom")
                      : $t("dashboard_client.agenda.type_default")
                  }}
                </span>

                <q-space />

                <q-btn
                  class=""
                  color="primary"
                  no-caps
                  padding="4px 8px"
                  rounded
                  size="sm"
                  :label="$t('dashboard_client.agenda.btn_view_details')"
                  @click="openDetailsDialog(item)"
                />
              </div>
            </q-card-section>
          </q-card>
        </template>

        <div
          v-else
          class="text-center text-grey-5 q-py-lg text-body2"
        >
          {{ $t("dashboard_client.agenda.empty_upcoming") }}
        </div>
      </div>

      <div class="q-mt-lg q-mx-md">
        <div class="section-title gradient-diarista q-mb-sm font16 fontbold">
          {{ $t("dashboard_client.agenda.completed_title") }}
        </div>

        <template v-if="completedSchedules.length > 0">
          <q-card
            v-for="item in completedSchedules"
            :key="item.id"
            class="calendar-card bg-surface shadow-card q-mb-sm"
            :flat="false"
          >
            <q-card-section class="q-pa-sm">
              <div class="row no-wrap items-start q-gutter-x-sm">
                <q-avatar size="44px">
                  <img
                    v-if="item.provider_photo"
                    style="object-fit: cover"
                    :src="item.provider_photo"
                  />

                  <span
                    v-else
                    class="full-width full-height flex flex-center"
                    style="border-radius: 50%"
                    :style="avatarColors[item.id % avatarColors.length]"
                  >
                    {{
                      getFirstName(item.provider_name)
                        ?.slice(0, 2)
                        .toUpperCase() ?? "??"
                    }}
                  </span>
                </q-avatar>

                <div class="col column text-text">
                  <span class="font12 fontbold">
                    {{
                      getFirstName(item.provider_name) ||
                        $t("dashboard_client.agenda.waiting_proposals")
                    }}
                  </span>

                  <div class="row items-center no-wrap">
                    <span class="font10 fontbold">
                      {{ formatWeekday(item.date) }}
                    </span>

                    <span class="font10 fontmedium">
                      {{ ", " + formatDayMonth(item.date) }}
                    </span>
                  </div>

                  <span class="">
                    <span class="font10 fontmedium">
                      {{ $t("dashboard_client.next_schedules.from") }}
                    </span>

                    <span class="font10 fontbold q-ml-xs">
                      {{ item.start_time?.slice(0, 5) }}
                      {{ $t("dashboard_client.next_schedules.to") }}
                      {{ item.end_time?.slice(0, 5) }}
                    </span>
                  </span>
                </div>

                <div class="col-auto column items-end">
                  <q-chip
                    class="font10"
                    dense
                    square
                    :color="statusBgColor(item.status)"
                    :label="statusLabel(item.status)"
                    :text-color="statusTextColor(item.status)"
                  />

                  <span class="text-price font12 fontbold">
                    {{ formatScheduleTotal(item) }}
                  </span>

                  <span class="text-period font10 fontmedium">
                    {{ periodLabel(item.period_type) }}
                  </span>
                </div>
              </div>

              <div class="row items-center no-wrap q-mt-xs">
                <span class="type-label text-primary font10 fontmedium">
                  {{
                    item.schedule_type === "custom"
                      ? $t("dashboard_client.agenda.type_custom")
                      : $t("dashboard_client.agenda.type_default")
                  }}
                </span>

                <q-space />

                <q-rating
                  v-if="item.client_reviewed || canReview(item)"
                  class="q-mr-sm"
                  color="amber"
                  icon="mdi-star-outline"
                  icon-selected="mdi-star"
                  readonly
                  size="14px"
                  :max="5"
                  :model-value="item.client_reviewed ? item.client_stars : 0"
                />

                <q-btn
                  v-if="item.client_reviewed"
                  class="btn-rate"
                  color="secondary"
                  no-caps
                  padding="4px 8px"
                  rounded
                  size="sm"
                  unelevated
                  :label="$t('dashboard_client.agenda.btn_reschedule')"
                  @click="openSchedulingDialog(item)"
                />

                <q-btn
                  v-else-if="canReview(item)"
                  class="btn-rate"
                  color="secondary"
                  no-caps
                  padding="4px 8px"
                  rounded
                  size="sm"
                  unelevated
                  :label="$t('dashboard_client.agenda.btn_rate')"
                  @click="openRatingDialog(item)"
                />
              </div>
            </q-card-section>
          </q-card>
        </template>

        <div
          v-else
          class="text-center text-grey-5 q-py-lg text-body2"
        >
          {{ $t("dashboard_client.agenda.empty_completed") }}
        </div>
      </div>
    </template>
  </q-page>
</template>

<script setup>
import { avatarColors } from "src/helpers/avatarColors";
import { formatCurrency, getFirstName } from "src/helpers/utils";
import { formatDayMonth, formatWeekday } from "src/helpers/scheduleDate";
import { getClientCalendar } from "src/api/clientCalendar";

import {
  getSchedulePaymentType,
  getScheduleTotalWithPlatformFee,
} from "src/helpers/paymentPlatformFees";

import { nextTick, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { usePaymentPlatformFees } from "src/composables/usePaymentPlatformFees";
import { useQuasar } from "quasar";
import { useRoute, useRouter } from "vue-router";

import NextSchedulesDetailsDialog from "src/pages/dashboard/components/schedule/NextSchedulesDetailsDialog.vue";
import ScheduleRatingDialog from "src/pages/dashboard/components/schedule/ScheduleRatingDialog.vue";
import SchedulingDialog from "src/pages/search/components/SchedulingDialog.vue";

const $q = useQuasar();
const { platformFees, loadPlatformFees } = usePaymentPlatformFees();
const route = useRoute();
const router = useRouter();
const { t } = useI18n();

const completedSchedules = ref([]);
const loading = ref(true);
const upcomingSchedules = ref([]);

const canReview = (item) => item.status !== "cancelled";

//
const formatScheduleTotal = (item) =>
  formatCurrency(
    getScheduleTotalWithPlatformFee(
      item,
      getSchedulePaymentType(item),
      platformFees.value,
    ),
  );

//
const loadCalendar = async () => {
  const response = await getClientCalendar();
  if (response) {
    upcomingSchedules.value = response.upcomingSchedules ?? [];
    completedSchedules.value = response.completedSchedules ?? [];
  }
};

const openDetailsDialog = (schedule) => {
  $q.dialog({
    component: NextSchedulesDetailsDialog,
    componentProps: { schedule },
  }).onOk(async ({ action }) => {
    if (action === "cancelled") {
      await loadCalendar();
    }
  });
};

const openRatingDialog = (schedule) => {
  if (!canReview(schedule)) return;

  $q.dialog({
    component: ScheduleRatingDialog,
    componentProps: { schedule },
  }).onOk(() => {
    loadCalendar();
  });
};

const openSchedulingDialog = (item) => {
  $q.dialog({
    component: SchedulingDialog,
    componentProps: {
      provider: {
        provider_id: item.provider_id,
        provider_name: item.provider_name,
        average_rating: item.average_rating,
        total_reviews: item.total_reviews,
        total_services: item.total_services,
      },
    },
  });
};

const periodLabel = (periodType) => {
  const key = `period_types.${periodType}`;
  const translated = t(key);
  return translated !== key ? translated : "";
};

const statusBgColor = (status) => {
  const map = {
    pending: "warning-bg",
    accepted: "success-bg",
    paid: "success-bg",
    started: "info-bg",
    finished: "neutral-bg",
    cancelled: "secondary-bg",
  };
  return map[status] ?? "neutral-bg";
};

const statusLabel = (status) => {
  const map = {
    pending: t("dashboard_client.agenda.status_pending"),
    accepted: t("dashboard_client.agenda.status_accepted"),
    paid: t("dashboard_client.agenda.status_paid"),
    started: t("dashboard_client.agenda.status_started"),
    finished: t("dashboard_client.agenda.status_finished"),
    cancelled: t("dashboard_client.agenda.status_cancelled"),
  };
  return map[status] ?? status;
};

const statusTextColor = (status) => {
  const map = {
    pending: "warning",
    accepted: "success",
    paid: "success",
    started: "info",
    finished: "status-finished",
    cancelled: "secondary",
  };
  return map[status] ?? "text";
};

const openScheduleFromQuery = async () => {
  const scheduleId = Number(route.query.scheduleId);

  if (!scheduleId) return;

  await router.replace({ path: route.path, query: {} });
  await nextTick();

  const schedule = [...upcomingSchedules.value, ...completedSchedules.value].find(
    (item) => item.id === scheduleId,
  );

  if (schedule) openDetailsDialog(schedule);
};

onMounted(async () => {
  await Promise.all([loadCalendar(), loadPlatformFees().catch(() => {})]);
  loading.value = false;

  await openScheduleFromQuery();
});

</script>

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

.calendar-card {
  border-radius: 12px;
  width: 100%;
}

.type-label {
  line-height: 1.2;
}

.text-price {
  color: #3a3a4a;
  white-space: nowrap;
}

.text-period {
  color: #888;
  text-align: right;
  white-space: nowrap;
}

.btn-rate {
  padding: 3px 10px;
}
</style>