sfp_front_vue_diarista_cliente/src/pages/dashboard/DashboardPage.vue

<template>
  <div class="dashboard-page bg-page">
    <template v-if="loading">
      <div class="row items-center justify-center full-width bg-surface" style="height: 80vh">
        <q-spinner-dots color="primary" />
      </div>
    </template>
    <template v-else>
      <q-pull-to-refresh color="primary" @refresh="onRefresh">
        <DashboardHeaderBar
          :data="headerBar"
          :notifications="notifications"
        />
        <DashboardRegistrationIncomplete v-if="!registrationComplete" />
        <DashboardSummaryInfos v-else :data="summaryInfos" />
        <DashboardPaymentIncomplete v-if="!hasPaymentMethods" />
        <DashboardPendingSchedules
          v-if="pendingServicePackages.length > 0"
          :data="pendingServicePackages"
          :type="'servicePackage'"
          @view-details="openServicePackagePaymentDialog"
        />
        <DashboardTodaySchedules v-if="todaySchedules.length > 0" :data="todaySchedules" @rate="openRatingDialog" />
        <DashboardScrollAreaSchedules />
        <DashboardClientProposals v-if="clientProposals.length > 0" :data="clientProposals" @refresh-data="reloadDashboard" />
        <DashboardPendingCustomSchedules v-if="customSchedulesNoProposals.length > 0" />
        <DashboardNextSchedules v-if="nextSchedules.length > 0" :data="nextSchedules" @view-details="openNextScheduleDialog" />
        <DashboardLastDoneSchedules v-if="lastDoneSchedules.length > 0" :data="lastDoneSchedules" />
        <DashboardFavoriteProviders v-if="favoriteProviders.length > 0" :data="favoriteProviders" />
        <DashboardProvidersClose v-if="providersClose.length > 0" :data="providersClose" />
      </q-pull-to-refresh>
    </template>
  </div>
</template>

<script setup>
import DashboardHeaderBar from 'src/components/dashboard/DashboardHeaderBar.vue';
import DashboardSummaryInfos from 'src/components/dashboard/DashboardSummaryInfos.vue';
import DashboardRegistrationIncomplete from 'src/components/dashboard/DashboardRegistrationIncomplete.vue';
import DashboardPaymentIncomplete from 'src/components/dashboard/DashboardPaymentIncomplete.vue';
import DashboardPendingSchedules from 'src/components/dashboard/DashboardPendingSchedules.vue';
import ScheduleAcceptedDialog from 'src/components/dashboard/ScheduleAcceptedDialog.vue';
import DashboardScrollAreaSchedules from 'src/components/dashboard/DashboardScrollAreaSchedules.vue';
import DashboardNextSchedules from 'src/components/dashboard/DashboardNextSchedules.vue';
import DashboardLastDoneSchedules from 'src/components/dashboard/DashboardLastDoneSchedules.vue';
import DashboardFavoriteProviders from 'src/components/dashboard/DashboardFavoriteProviders.vue';
import DashboardProvidersClose from 'src/components/dashboard/DashboardProvidersClose.vue';
import DashboardTodaySchedules from 'src/components/dashboard/DashboardTodaySchedules.vue';
import FinalSuccesModal from '../schedules/components/FinalSuccesModal.vue';
import DashboardPendingCustomSchedules from 'src/pages/dashboard/components/DashboardPendingCustomSchedules.vue';
import DashboardClientProposals from 'src/pages/dashboard/components/DashboardClientProposals.vue';
import { useRouter } from 'vue-router'
import { onMounted, ref, computed } from 'vue';
import { useQuasar } from 'quasar';
import { dadosDashboard } from 'src/api/dashboard';
import { userStore } from 'src/stores/user';
import NextSchedulesDetailsDialog from 'src/components/dashboard/NextSchedulesDetailsDialog.vue';
import ScheduleRatingDialog from 'src/components/dashboard/ScheduleRatingDialog.vue';

const router = useRouter()
const $q = useQuasar();
const store = userStore();

const hasPaymentMethods = ref(true);
const headerBar = ref({});
const summaryInfos = ref({});
const pendingSchedules = ref([]);
const pendingServicePackages = ref([]);
const nextSchedules = ref([]);
const clientProposals = ref([]);
const customSchedulesNoProposals = ref([]);
const lastDoneSchedules = ref([]);
const favoriteProviders = ref([]);
const providersClose = ref([]);
const todaySchedules = ref([]);
const notifications = ref([]);
const loading = ref(true);
const showSuccessModal = ref(router.currentRoute.value.fullPath.includes('showSuccessModal'));
const registrationComplete = computed(() => store.user?.registration_complete ?? true);


const openServicePackagePaymentDialog = (servicePackage) => {
  $q.dialog({
    component: ScheduleAcceptedDialog,
    componentProps: { servicePackage }
  }).onOk(() => {
    reloadDashboard();
  });
};

const reloadDashboard = async (showLoader = true) => {
  if (showLoader) loading.value = true;
  const response = await dadosDashboard();
  if (response) {
    headerBar.value = response.headerBar;
    summaryInfos.value = response.summaryInfos;
    pendingSchedules.value = response.pendingSchedules ?? [];
    pendingServicePackages.value = response.pendingServicePackages ?? [];
    nextSchedules.value = response.nextSchedules ?? [];
    lastDoneSchedules.value = response.lastDoneSchedules ?? [];
    favoriteProviders.value = response.favoriteProviders ?? [];
    providersClose.value = response.providersClose ?? [];
    clientProposals.value = response.schedulesProposals ?? [];
    customSchedulesNoProposals.value = response.customSchedulesNoProposals ?? [];
    todaySchedules.value = response.todaySchedules ?? [];
    notifications.value = response.notifications ?? [];
    hasPaymentMethods.value = response.has_payment_methods ?? true;
  }
  if( showSuccessModal.value == true) {
    $q.dialog({
       component: FinalSuccesModal   
    }).onDismiss(() => {
      showSuccessModal.value = false;
      router.replace({ path: router.currentRoute.value.path, query: {} });
    })
  }

  loading.value = false;
};

const onRefresh = async (done) => {
  try {
    await reloadDashboard(false);
  } finally {
    done();
  }
};

const openNextScheduleDialog = (schedule) => {
  $q.dialog({
    component: NextSchedulesDetailsDialog,
    componentProps: { schedule }
  }).onOk(() => {
    reloadDashboard();
  });
};

const openRatingDialog = (schedule) => {
  $q.dialog({
    component: ScheduleRatingDialog,
    componentProps: { schedule }
  }).onOk(() => {
    reloadDashboard()
  })
}

onMounted(async () => {
  await reloadDashboard();
});
</script>

<style scoped>
.dashboard-page {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}
</style>