sfp_front_vue_diarista_cliente/src/components/dashboard/DashboardNextSchedules.vue

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

    <div class="scroll-wrapper">
      <div
        ref="trackRef"
        class="scroll-track"
        @scroll="onTrackScroll"
      >
        <q-card
          v-for="item in data"
          :key="item.id"
          class="schedule-card card-border shadow-card bg-surface"
          :flat="false"
        >
          <q-card-section
            class="q-pa-md row col-12 no-wrap schedule-card-section"
          >
            <div class="column text-center schedule-avatar col-4">
              <div class="col-7 column">
                <q-avatar
                  class="q-mx-auto"
                  :style="avatarColors[item.id % avatarColors.length]"
                >
                  <img
                    v-if="item.provider_photo"
                    style="object-fit: cover; border-radius: 50%"
                    :src="item.provider_photo"
                  />

                  <span v-else>
                    {{
                      item.provider_name?.slice(0, 1).toUpperCase() ?? "—"
                    }}
                  </span>
                </q-avatar>
              </div>

              <div class="col-5 column justify-end font10 fontbold">
                <span class="text-pill text-primary customColor">
                  {{
                    item.schedule_type === "custom"
                      ? $t("dashboard_client.next_schedules.tag_custom")
                      : $t("dashboard_client.next_schedules.tag_default")
                  }}
                </span>
              </div>
            </div>

            <div class="col-4 column text-text q-px-lg schedule-main">
              <div class="column schedule-info">
                <div>
                  <span
                    class="text-provider-name provider-name-ellipsis font12 fontbold"
                  >
                    {{
                      getFirstName(item.provider_name) ||
                        $t("dashboard_client.next_schedules.no_provider")
                    }}
                  </span>
                </div>

                <div class="column schedule-date-time font9">
                  <div class="schedule-line">
                    <span class="text-schedule-date-bold fontbold">
                      {{ formatWeekday(item.date) }}
                    </span>

                    <span class="text-schedule-date-regular">
                      {{ ", " + formatDayMonth(item.date) }}
                    </span>
                  </div>

                  <div class="schedule-line q-pt-xs">
                    <span class="text-schedule-date-regular">
                      {{ $t("dashboard_client.next_schedules.from") }}&nbsp;
                    </span>

                    <span class="text-schedule-date-bold fontbold">
                      {{ item.start_time?.slice(0, 5) }}
                      {{ $t("dashboard_client.next_schedules.to") }}
                      {{ item.end_time?.slice(0, 5) }}
                    </span>
                  </div>
                </div>
              </div>

              <div class="schedule-place">
                <div class="column justify-end">
                  <div
                    class="row items-center no-wrap text-pill-place schedule-place-content"
                  >
                    <span class="font10 fontbold q-ml-sm">
                      <q-icon
                        color="primary"
                        size="12px"
                        :name="addressIcon(item.address?.address_type ?? item.custom_address_type)"
                      />
                      {{
                        addressLabel(
                          item.address?.address_type ??
                            item.custom_address_type,
                        )
                      }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div class="column text-text schedule-price">
              <div class="column schedule-price-info">
                <span class="text-price-main font16 fontbold">
                  {{
                    formatScheduleTotal(
                      item,
                      platformFees,
                      t("dashboard_client.next_schedules.to_combine"),
                    )
                  }}
                </span>

                <span
                  class="text-price-label schedule-price-label font12 fontmedium"
                >
                  {{ formatLabelByPeriodType(item.period_type) }}
                </span>
              </div>

              <div class="column">
                <q-btn
                  class="full-width"
                  color="primary"
                  no-caps
                  padding="1px 5px"
                  rounded
                  size="sm"
                  unelevated
                  :label="$t('dashboard_client.next_schedules.details')"
                  @click="emit('view-details', item)"
                />
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <DefaultCarouselIndicator
      :active="activeIndex"
      :count="pageCount"
    />
  </div>
</template>

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

import {
  formatScheduleTotal,
} from "src/helpers/paymentPlatformFees";

import { onMounted } from "vue";
import { useCarouselIndicator } from "src/composables/useCarouselIndicator";
import { useI18n } from "vue-i18n";
import { usePaymentPlatformFees } from "src/composables/usePaymentPlatformFees";

import DefaultCarouselIndicator from "src/components/defaults/DefaultCarouselIndicator.vue";

const props = defineProps({ data: { type: Array, default: () => [] } });
const emit = defineEmits(["view-details"]);

const { activeIndex, onTrackScroll, pageCount, trackRef } =
  useCarouselIndicator(() => props.data);

const { platformFees, loadPlatformFees } = usePaymentPlatformFees();
const { t } = useI18n();

const addressIcon = (type) =>
  type === "home" ? "mdi-home-outline" : "mdi-office-building-outline";

const addressLabel = (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.commercial");

  return t("dashboard_client.next_schedules.place_unknown");
};

onMounted(() => {
  loadPlatformFees().catch(() => {});
});

</script>

<style scoped lang="scss">
.scroll-wrapper {
  overflow: hidden;
}

.scroll-track {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  &::-webkit-scrollbar {
    display: none;
  }
  &::after {
    content: "";
    flex: 0 0 1px;
  }
}

.schedule-card {
  scroll-snap-align: start;
  min-width: 90%;
}

.schedule-card-section {
  align-items: stretch;
  gap: 8px;
}

.schedule-avatar {
  flex: 0 0 52px;
  max-width: 52px;
  min-width: 52px;
}

.schedule-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  gap: 8px;
}

.schedule-info {
  flex: 0 1 auto;
  gap: 6px;
  min-height: 0;
}

.schedule-date-time {
  min-width: 0;
}

.schedule-line {
  display: block;
  max-width: 100%;
  line-height: 1.15;
  overflow: visible;
  white-space: normal;
}

.schedule-price {
  flex: 0 0 92px;
  max-width: 92px;
  min-width: 92px;
  gap: 8px;
  justify-content: space-between;
}

.schedule-price-info {
  gap: 2px;
}

.schedule-price-label {
  align-self: stretch;
  line-height: 1.15;
  white-space: normal;
}

.schedule-place {
  margin-top: auto;
  min-width: 0;
}

.schedule-place-content {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;

  .q-icon {
    flex: 0 0 auto;
  }

  span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.provider-name-ellipsis {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customColor {
  background: linear-gradient(180deg, #8b5cf6 50%, #ec4899 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>