浏览代码

feat: adiciona actions em tela de contratos

ebagabee 1 月之前
父节点
当前提交
63d06ee907
共有 1 个文件被更改,包括 94 次插入1 次删除
  1. 94 1
      src/pages/contracts/ContractsPage.vue

+ 94 - 1
src/pages/contracts/ContractsPage.vue

@@ -52,6 +52,47 @@
             />
           </q-td>
         </template>
+
+        <template #body-cell-actions="{ row }">
+          <q-td align="center">
+            <q-btn
+              outline
+              icon="mdi-dots-vertical"
+              style="width: 36px"
+              @click.prevent.stop
+            >
+              <q-menu>
+                <q-list style="min-width: 170px">
+                  <template v-if="row.status === 'frozen' || row.status === 'cancelled'">
+                    <q-item
+                      v-close-popup
+                      clickable
+                      @click="handleReactivate(row)"
+                    >
+                      <q-item-section>Reativar Contrato</q-item-section>
+                    </q-item>
+                  </template>
+                  <template v-else>
+                    <q-item
+                      v-close-popup
+                      clickable
+                      @click="handleFreeze(row)"
+                    >
+                      <q-item-section>Congelar Contrato</q-item-section>
+                    </q-item>
+                    <q-item
+                      v-close-popup
+                      clickable
+                      @click="handleCancel(row)"
+                    >
+                      <q-item-section>Cancelar Contrato</q-item-section>
+                    </q-item>
+                  </template>
+                </q-list>
+              </q-menu>
+            </q-btn>
+          </q-td>
+        </template>
       </DefaultTable>
     </div>
   </div>
@@ -59,11 +100,19 @@
 
 <script setup>
 import { ref, computed, onMounted } from "vue";
+import { useQuasar } from "quasar";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import DashboardStatCard from "src/components/charts/DashboardStatCard.vue";
-import { getAllContracts } from "src/api/studentContract";
+import ContractActionConfirmDialog from "src/pages/students/components/ContractActionConfirmDialog.vue";
+import {
+  getAllContracts,
+  freezeContract,
+  cancelContract,
+  reactivateContract,
+} from "src/api/studentContract";
 
+const $q = useQuasar();
 const rows = ref([]);
 const isLoading = ref(false);
 
@@ -78,6 +127,7 @@ const columns = ref([
   { name: "contato", label: "Contato/Endereço", field: null, align: "left" },
   { name: "package_name", label: "Pacote", field: "package_name", align: "left" },
   { name: "status", label: "Status Contrato", field: "status", align: "center" },
+  { name: "actions", label: "Ações", field: null, align: "center" },
 ]);
 
 async function loadContracts() {
@@ -89,6 +139,49 @@ async function loadContracts() {
   }
 }
 
+function confirmAction(title, message, apiFn, contract) {
+  $q.dialog({
+    component: ContractActionConfirmDialog,
+    componentProps: { title, message },
+  }).onOk(async () => {
+    try {
+      const updated = await apiFn(contract.id);
+      const idx = rows.value.findIndex((r) => r.id === contract.id);
+      if (idx !== -1) rows.value[idx] = { ...rows.value[idx], status: updated.status };
+    } catch (e) {
+      console.error(e);
+      $q.notify({ type: "negative", message: "Erro ao atualizar status do contrato." });
+    }
+  });
+}
+
+function handleFreeze(contract) {
+  confirmAction(
+    "Congelar Contrato",
+    "Você tem certeza que deseja CONGELAR este contrato? Isso irá gerar multas e cancelamento da cobrança recorrente.",
+    freezeContract,
+    contract,
+  );
+}
+
+function handleCancel(contract) {
+  confirmAction(
+    "Cancelar Contrato",
+    "Você tem certeza que deseja CANCELAR este contrato? Isso irá gerar multas e cancelamento da cobrança recorrente.",
+    cancelContract,
+    contract,
+  );
+}
+
+function handleReactivate(contract) {
+  confirmAction(
+    "Reativar Contrato",
+    "Você tem certeza que deseja REATIVAR este contrato?",
+    reactivateContract,
+    contract,
+  );
+}
+
 function statusColor(status) {
   if (status === "active") return "positive";
   if (status === "frozen") return "info";