|
|
@@ -0,0 +1,187 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <DefaultHeaderPage />
|
|
|
+
|
|
|
+ <div class="q-pa-md">
|
|
|
+ <div v-if="loading" class="flex flex-center q-py-xl">
|
|
|
+ <q-spinner color="violet-normal" size="48px" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else-if="appointments.length === 0" class="text-center text-grey q-py-xl">
|
|
|
+ {{ $t("http.errors.no_records_found") }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-table
|
|
|
+ v-else
|
|
|
+ class="softpar-table q-pa-sm"
|
|
|
+ :rows="pagedAppointments"
|
|
|
+ :columns="columns"
|
|
|
+ row-key="id"
|
|
|
+ hide-pagination
|
|
|
+ :rows-per-page-options="[0]"
|
|
|
+ >
|
|
|
+ <template #body-cell-status="props">
|
|
|
+ <q-td :props="props">
|
|
|
+ <q-chip
|
|
|
+ outline
|
|
|
+ :color="statusColor(props.row.status)"
|
|
|
+ :label="$t(`agendamento.status.${props.row.status}`)"
|
|
|
+ size="sm"
|
|
|
+ />
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #body-cell-acoes="props">
|
|
|
+ <q-td :props="props">
|
|
|
+ <q-btn
|
|
|
+ dense
|
|
|
+ round
|
|
|
+ flat
|
|
|
+ icon="mdi-check"
|
|
|
+ color="positive"
|
|
|
+ size="sm"
|
|
|
+ :disable="props.row.status !== 'pendente'"
|
|
|
+ :loading="actionId === props.row.id && actionType === 'approve'"
|
|
|
+ @click="onApprove(props.row)"
|
|
|
+ />
|
|
|
+ <q-btn
|
|
|
+ dense
|
|
|
+ round
|
|
|
+ flat
|
|
|
+ icon="mdi-close"
|
|
|
+ color="negative"
|
|
|
+ size="sm"
|
|
|
+ :disable="props.row.status !== 'pendente'"
|
|
|
+ :loading="actionId === props.row.id && actionType === 'reject'"
|
|
|
+ @click="onReject(props.row)"
|
|
|
+ />
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+ </q-table>
|
|
|
+
|
|
|
+ <div v-if="totalPages > 1" class="flex flex-center q-mt-lg">
|
|
|
+ <q-pagination
|
|
|
+ v-model="currentPage"
|
|
|
+ :max="totalPages"
|
|
|
+ boundary-numbers
|
|
|
+ color="violet-normal"
|
|
|
+ active-color="violet-normal"
|
|
|
+ direction-links
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed, onMounted } from "vue";
|
|
|
+import { useQuasar } from "quasar";
|
|
|
+import { useI18n } from "vue-i18n";
|
|
|
+import { getPartnerAppointments, approveAppointment, rejectAppointment } from "src/api/appointment";
|
|
|
+import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
|
|
|
+
|
|
|
+const $q = useQuasar();
|
|
|
+const { t } = useI18n();
|
|
|
+
|
|
|
+const loading = ref(true);
|
|
|
+const appointments = ref([]);
|
|
|
+const currentPage = ref(1);
|
|
|
+const PER_PAGE = 15;
|
|
|
+const actionId = ref(null);
|
|
|
+const actionType = ref(null);
|
|
|
+
|
|
|
+const columns = computed(() => [
|
|
|
+ { name: "pedido", label: t("agendamento.col.pedido"), field: "order_number", align: "left" },
|
|
|
+ { name: "associado", label: t("agendamento.associado"), field: (row) => row.user?.name || "—", align: "left" },
|
|
|
+ { name: "servico", label: t("agendamento.col.servico"), field: (row) => row.partner_agreement_service?.name || "—", align: "left" },
|
|
|
+ { name: "solicitacao", label: t("agendamento.col.solicitacao"), field: (row) => formatDate(row.created_at), align: "left" },
|
|
|
+ { name: "horario", label: t("common.terms.hour2"), field: (row) => formatDateTime(row.date, row.time), align: "left" },
|
|
|
+ { name: "acoes", label: t("common.terms.actions"), field: "id", align: "center" },
|
|
|
+ { name: "status", label: t("common.terms.status"), field: "status", align: "center" },
|
|
|
+]);
|
|
|
+
|
|
|
+const totalPages = computed(() => Math.max(1, Math.ceil(appointments.value.length / PER_PAGE)));
|
|
|
+
|
|
|
+const pagedAppointments = computed(() => {
|
|
|
+ const start = (currentPage.value - 1) * PER_PAGE;
|
|
|
+ return appointments.value.slice(start, start + PER_PAGE);
|
|
|
+});
|
|
|
+
|
|
|
+const statusColor = (status) => {
|
|
|
+ const map = { pendente: "warning", confirmado: "positive", cancelado: "negative", recusado: "negative", concluido: "grey" };
|
|
|
+ return map[status] ?? "grey";
|
|
|
+};
|
|
|
+
|
|
|
+const formatDate = (isoStr) => {
|
|
|
+ if (!isoStr) return "—";
|
|
|
+ const d = new Date(isoStr);
|
|
|
+ if (isNaN(d)) return "—";
|
|
|
+ return d.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric" });
|
|
|
+};
|
|
|
+
|
|
|
+const formatDateTime = (date, time) => {
|
|
|
+ if (!date) return "—";
|
|
|
+ const d = new Date(date + "T00:00:00");
|
|
|
+ if (isNaN(d)) return "—";
|
|
|
+ const dateStr = d.toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit", year: "numeric" });
|
|
|
+ return time ? `${dateStr} ${time}` : dateStr;
|
|
|
+};
|
|
|
+
|
|
|
+const onApprove = (row) => {
|
|
|
+ $q.dialog({
|
|
|
+ title: t("common.ui.messages.confirm_action"),
|
|
|
+ message: t("agendamento.confirm_approve"),
|
|
|
+ cancel: true,
|
|
|
+ persistent: true,
|
|
|
+ }).onOk(async () => {
|
|
|
+ actionId.value = row.id;
|
|
|
+ actionType.value = "approve";
|
|
|
+ try {
|
|
|
+ await approveAppointment(row.id);
|
|
|
+ row.status = "confirmado";
|
|
|
+ $q.notify({ type: "positive", message: t("http.success") });
|
|
|
+ } catch {
|
|
|
+ $q.notify({ type: "negative", message: t("http.errors.failed") });
|
|
|
+ } finally {
|
|
|
+ actionId.value = null;
|
|
|
+ actionType.value = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const onReject = (row) => {
|
|
|
+ $q.dialog({
|
|
|
+ title: t("common.ui.messages.confirm_action"),
|
|
|
+ message: t("agendamento.confirm_reject"),
|
|
|
+ cancel: true,
|
|
|
+ persistent: true,
|
|
|
+ }).onOk(async () => {
|
|
|
+ actionId.value = row.id;
|
|
|
+ actionType.value = "reject";
|
|
|
+ try {
|
|
|
+ await rejectAppointment(row.id);
|
|
|
+ row.status = "recusado";
|
|
|
+ $q.notify({ type: "positive", message: t("http.success") });
|
|
|
+ } catch {
|
|
|
+ $q.notify({ type: "negative", message: t("http.errors.failed") });
|
|
|
+ } finally {
|
|
|
+ actionId.value = null;
|
|
|
+ actionType.value = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ try {
|
|
|
+ appointments.value = await getPartnerAppointments();
|
|
|
+ } catch (e) {
|
|
|
+ console.error(e);
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+@import "src/css/table.scss";
|
|
|
+</style>
|