sfp_front_vue_diarista_prestador/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"
        />
        <DashboardSummaryInfos :data="summaryInfos" />
        <DashboardPriceSuggest :data="priceSuggestion"/>
        <DashboardTodayServices v-if="todayServices?.length > 0" :data="todayServices" @refresh="loadDashboard" @rate="openRatingDialog" />
        <DashboardScrollAreaSchedules />
        <DashboardSolicitations
          v-if="solicitations?.length > 0"
          :data="solicitations"
          @accept="(item) => openDetailsDialog(item, 'confirm-accept')"
          @reject="(item) => openDetailsDialog(item, 'confirm-reject')"
          @view-details="(item) => openDetailsDialog(item)"
        />
        <DashboardNextSchedules v-if="nextSchedules?.length > 0" :data="nextSchedules" @view-details="(item) => openNextScheduleDialog(item)" />
        <DashboardOpportunities v-if="opportunities?.length > 0" :data="opportunities"/>
      </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 DashboardPriceSuggest from 'src/components/dashboard/DashboardPriceSuggest.vue';
import DashboardScrollAreaSchedules from 'src/components/dashboard/DashboardScrollAreaSchedules.vue';
import DashboardSolicitations from 'src/components/dashboard/DashboardSolicitations.vue';
import DashboardTodayServices from 'src/components/dashboard/DashboardTodayServices.vue';
import DashboardNextSchedules from 'src/components/dashboard/DashboardNextSchedules.vue';
import DashboardOpportunities from 'src/components/dashboard/DashboardOpportunities.vue';
import SolicitationDetailsDialog from 'src/components/dashboard/SolicitationDetailsDialog.vue';
import NextSchedulesDetailsDialog from 'src/components/dashboard/NextSchedulesDetailsDialog.vue';
import ScheduleRatingDialog from 'src/components/dashboard/ScheduleRatingDialog.vue';
import OpportunityDialog from 'src/pages/opportunities/components/OpportunityDialog.vue';
import { onMounted, ref, watch } from 'vue';
import { useQuasar } from 'quasar';
import { dadosDashboard } from 'src/api/dashboard';
import { updateScheduleStatus } from 'src/api/schedule';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

const headerBar = ref({});
const summaryInfos = ref({});
const priceSuggestion = ref({});
const solicitations = ref([]);
const todayServices = ref([]);
const nextSchedules = ref([]);
const opportunities = ref([]);
const notifications = ref([]);

const $q = useQuasar();

watch(() => route.query.showSuccessModal, (val) => {
  if (val === 'true') {
    $q.dialog({ component: OpportunityDialog })
      .onDismiss(() => {
        router.replace({ path: route.path, query: {} });
      });
  }
}, { immediate: true });

const loading = ref(true);

const loadDashboard = async () => {
  const response = await dadosDashboard();
  if (response) {
    headerBar.value = response.headerBar;
    summaryInfos.value = response.summaryInfos;
    priceSuggestion.value = response.priceSuggested;
    solicitations.value = response.solicitations ?? [];
    todayServices.value = response.todayServices ?? [];
    nextSchedules.value = response.nextSchedules ?? [];
    opportunities.value = response.opportunities ?? [];
    notifications.value = response.notifications ?? [];
  }

}

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

const handleScheduleAction = async (id, status) => {
  try {
    await updateScheduleStatus(id, status);
    await loadDashboard();
  } catch (e) {
    console.log(e);
  }
};

const openDetailsDialog = (solicitation, initialView = 'details') => {
  $q.dialog({
    component: SolicitationDetailsDialog,
    componentProps: { solicitation, initialView }
  }).onOk(async ({ action, id }) => {
    await handleScheduleAction(id, action === 'accept' ? 'accepted' : 'rejected');
  });
};

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

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

onMounted(async () => {
  await loadDashboard();
  loading.value = false;
});
</script>

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