sfp_front_vue_diarista_cliente/src/pages/dashboard/components/DashboardClientProposals.vue

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

    <div
      ref="trackRef"
      class="scroll-track q-pb-md q-px-md text-text"
      @scroll="onTrackScroll"
    >
      <q-card
        v-for="item in data"
        :key="item.id"
        class="proposal-card shadow-card"
        :flat="false"
      >
        <div class="row no-wrap">
          <div class="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) ?? "—" }}
              </span>
            </q-avatar>

            <q-space />

            <div class="customColor font8 fontbold">
              <div>
                {{ $t("dashboard_client.client_proposals.candidate") }}
              </div>

              <div class="no-wrap">
                {{ $t("dashboard_client.client_proposals.custom") }}
              </div>
            </div>
          </div>

          <div class="content">
            <div class="row justify-between items-center text-text">
              <div>
                <div class="font12 fontmedium">
                  {{ getFirstName(item.provider_name) }}

                  <span class="font9 fontregular">
                    {{
                      $t("dashboard_client.client_proposals.age", {
                        idade: item.idade,
                      })
                    }}
                  </span>

                  <span class="font10 fontmedium">
                    <q-icon
                      class="font9 fontregular"
                      color="warning"
                      name="star"
                      size="12px"
                    />

                    <span>
                      {{ item.average_rating }}
                    </span>
                  </span>
                </div>

                <!-- <span
                  v-if="getProviderGenderLabel(item, t)"
                  class="font9 fontregular text-grey-7"
                >
                  {{ getProviderGenderLabel(item, t) }}
                </span> -->

              </div>
            </div>

            <div class="column font9 text-text">
              <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 class="price text-text">
              <span class="font9 fontmedium distance">
                <span class="fontbold font10">
                  {{ $t("dashboard_client.client_proposals.distance") }}
                </span>

                <span class="font10 fontregular q-ml-sm">
                  {{ (item.distance_km ?? "--") + " km" }}
                </span>
              </span>

              <span class="font14 fontbold">
                {{
                  filterCurrency(
                    chooseprice(item.period_type, item.daily_price_8h),
                  )
                }}
              </span>

              <span class="col-6 font10 fontmedium">
                {{ formatLabelByPeriodType(item.period_type) }}
              </span>
            </div>

            <div class="actions q-pt-sm">
              <q-btn
                class="btn-reject"
                flat
                :label="$t('dashboard_client.client_proposals.dismiss')"
                padding="4px 12px"
                size="sm"
                @click="() => handleRefuseProposal(item.id)"
              />

              <q-btn
                class="btn-accept"
                :label="$t('dashboard_client.client_proposals.accept')"
                padding="4px 12px"
                size="sm"
                @click="() => handleAcceptProposal(item)"
              />
            </div>
          </div>
        </div>
      </q-card>
    </div>

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

<script setup>
import { avatarColors } from "src/helpers/avatarColors";

import {
  chooseprice,
  filterCurrency,
  formatLabelByPeriodType,
  getFirstName,
} from "src/helpers/utils";

import { formatDayMonth, formatWeekday } from "src/helpers/scheduleDate";
import { refuseProposal } from "src/api/customSchedules";
import { usePaymentStore } from "src/stores/payment";
import { useCarouselIndicator } from "src/composables/useCarouselIndicator";
import { useQuasar } from "quasar";

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

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

// import { getProviderGenderLabel } from "src/helpers/provider";
// import { useI18n } from "vue-i18n";
const emit = defineEmits(["refreshData"]);

// const { t } = useI18n();
const $q = useQuasar();
const paymentStore = usePaymentStore();

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

const handleAcceptProposal = (item) => {
  const servicePackage = {
    id: item.id,
    total_amount: chooseprice(item.period_type, item.daily_price_8h),
    address: item.address ?? null,
  };

  paymentStore.setPackage(servicePackage);

  $q.dialog({
    component: SchedulePaymentDialog,
    componentProps: {
      targetType: "schedule_proposal",
    },
  }).onOk(() => {
    emit("refreshData");
  }).onDismiss(() => {
    paymentStore.clearPackage();
  });
};

const handleRefuseProposal = async (proposalId) => {
  // isLoading.value = true
  try {
    await refuseProposal(proposalId);

    // await loadProposals()
    emit("refreshData");
  } catch (error) {
    console.log(error);
  } finally {
    // isLoading.value = false
  }
};

</script>

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

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

.proposal-card {
  position: relative;
  min-width: 330px;
  max-width: 330px;
  border-radius: 18px;
  padding: 12px;
  background: white;
  flex-shrink: 0;
}

/* alinhar topo */
// .proposal-card .row:first-child {
//   align-items: flex-start !important;
// }

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
}

.price .distance {
  margin-top: 4px;
}

.datetime {
  margin-top: 2px;
  line-height: 1.2;
}

.price {
  position: absolute;
  top: 12px;
  right: 12px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* avatar alinhado */
.q-avatar {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

/* botões */
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-reject {
  background: #eee6ff;
  color: #6b4eff;
  border-radius: 20px;
  padding: 3px 12px;
}

.btn-accept {
  background: linear-gradient(90deg, #6b4eff, #9f6bff);
  color: white;
  border-radius: 20px;
  padding: 3px 12px;
}

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