|
|
@@ -2,9 +2,7 @@
|
|
|
<q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
|
<q-card style="width: 800px; max-width: 95vw; border-radius: 12px">
|
|
|
<q-bar class="bg-transparent q-px-md" style="height: 55px">
|
|
|
- <span class="text-h6 text-dark" style="font-weight: 600"
|
|
|
- >Contratos Cancelados</span
|
|
|
- >
|
|
|
+ <span class="text-h6 text-dark" style="font-weight: 600">Contratos Cancelados</span>
|
|
|
<q-space />
|
|
|
<q-btn dense flat icon="mdi-close" @click="onDialogCancel" />
|
|
|
</q-bar>
|
|
|
@@ -12,9 +10,10 @@
|
|
|
<q-card-section class="q-pt-none q-pb-md q-px-md">
|
|
|
<q-card flat bordered style="border-radius: 8px">
|
|
|
<q-card-section class="q-pb-xs">
|
|
|
- <div class="text-subtitle2 text-dark">Lista de alunos</div>
|
|
|
+ <div class="text-subtitle2 text-dark">Lista de contratos cancelados</div>
|
|
|
<div class="text-caption text-grey-6">
|
|
|
- {{ contratos.length }} Alunos Cadastrados
|
|
|
+ {{ contracts.length }} Contratos Cancelados
|
|
|
+ <q-spinner v-if="loading" size="16px" color="primary" class="q-ml-sm" />
|
|
|
</div>
|
|
|
</q-card-section>
|
|
|
|
|
|
@@ -23,7 +22,7 @@
|
|
|
v-model="search"
|
|
|
dense
|
|
|
borderless
|
|
|
- placeholder="Busque por status, nome, tel/whats"
|
|
|
+ placeholder="Busque por nome, tel/whats ou unidade"
|
|
|
>
|
|
|
<template #prepend>
|
|
|
<q-icon name="mdi-magnify" color="grey-6" />
|
|
|
@@ -42,26 +41,15 @@
|
|
|
<q-separator />
|
|
|
|
|
|
<div style="max-height: 320px; overflow-y: auto">
|
|
|
- <template
|
|
|
- v-for="(contrato, index) in filteredContratos"
|
|
|
- :key="contrato.id"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="list-row q-px-md q-py-sm"
|
|
|
- :class="{ 'row-selected': index === selectedIndex }"
|
|
|
- @click="selectedIndex = index"
|
|
|
- >
|
|
|
- <span class="text-body2 text-dark">{{ contrato.nome }}</span>
|
|
|
+ <template v-for="(contract, index) in filteredContracts" :key="contract.id">
|
|
|
+ <div class="list-row q-px-md q-py-sm">
|
|
|
+ <span class="text-body2 text-dark">{{ contract.studentName }}</span>
|
|
|
<div class="column" style="gap: 2px">
|
|
|
- <span class="text-caption text-dark">{{
|
|
|
- contrato.telefone
|
|
|
- }}</span>
|
|
|
- <span class="text-caption text-grey-6">{{
|
|
|
- contrato.unidade
|
|
|
- }}</span>
|
|
|
+ <span class="text-caption text-dark">{{ contract.studentPhone }}</span>
|
|
|
+ <span class="text-caption text-grey-6">{{ contract.unitName }}</span>
|
|
|
</div>
|
|
|
<q-badge
|
|
|
- label="Cancelados"
|
|
|
+ label="Cancelado"
|
|
|
color="negative"
|
|
|
style="
|
|
|
border-radius: 8px;
|
|
|
@@ -72,7 +60,7 @@
|
|
|
"
|
|
|
/>
|
|
|
</div>
|
|
|
- <q-separator v-if="index < filteredContratos.length - 1" />
|
|
|
+ <q-separator v-if="index < filteredContracts.length - 1" />
|
|
|
</template>
|
|
|
</div>
|
|
|
</q-card>
|
|
|
@@ -91,63 +79,43 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, computed } from "vue";
|
|
|
+import { ref, computed, onMounted } from "vue";
|
|
|
import { useDialogPluginComponent } from "quasar";
|
|
|
+import { getFranchisorCancelledContracts } from "src/api/student_contract";
|
|
|
|
|
|
defineEmits([...useDialogPluginComponent.emits]);
|
|
|
|
|
|
const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
|
|
|
|
|
|
const search = ref("");
|
|
|
-const selectedIndex = ref(0);
|
|
|
-
|
|
|
-const contratos = [
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- nome: "Heloisa Faria",
|
|
|
- telefone: "(45)99999-9999",
|
|
|
- unidade: "Unidade franco",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- nome: "Carol",
|
|
|
- telefone: "(45)99999-9999",
|
|
|
- unidade: "Arapongas-PR",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- nome: "Marcelo Souza",
|
|
|
- telefone: "(45)98888-8888",
|
|
|
- unidade: "Curitiba-PR",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- nome: "Ana Lúcia",
|
|
|
- telefone: "(45)97777-7777",
|
|
|
- unidade: "Londrina-PR",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 5,
|
|
|
- nome: "Ricardo Silva",
|
|
|
- telefone: "(45)96666-6666",
|
|
|
- unidade: "Ponta Grossa-PR",
|
|
|
- },
|
|
|
- {
|
|
|
- id: 6,
|
|
|
- nome: "Juliana Costa",
|
|
|
- telefone: "(45)95555-5555",
|
|
|
- unidade: "Maringá-PR",
|
|
|
- },
|
|
|
-];
|
|
|
-
|
|
|
-const filteredContratos = computed(() => {
|
|
|
- if (!search.value) return contratos;
|
|
|
+const loading = ref(false);
|
|
|
+const contracts = ref([]);
|
|
|
+
|
|
|
+onMounted(async () => {
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ const data = await getFranchisorCancelledContracts();
|
|
|
+ contracts.value = data.map((c) => ({
|
|
|
+ id: c.id,
|
|
|
+ studentName: c.student_name ?? "—",
|
|
|
+ studentPhone: c.student_phone ?? "—",
|
|
|
+ unitName: c.unit_name ?? "—",
|
|
|
+ }));
|
|
|
+ } catch {
|
|
|
+ // silent
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+const filteredContracts = computed(() => {
|
|
|
+ if (!search.value) return contracts.value;
|
|
|
const q = search.value.toLowerCase();
|
|
|
- return contratos.filter(
|
|
|
+ return contracts.value.filter(
|
|
|
(c) =>
|
|
|
- c.nome.toLowerCase().includes(q) ||
|
|
|
- c.telefone.includes(q) ||
|
|
|
- c.unidade.toLowerCase().includes(q),
|
|
|
+ c.studentName.toLowerCase().includes(q) ||
|
|
|
+ c.studentPhone.includes(q) ||
|
|
|
+ c.unitName.toLowerCase().includes(q),
|
|
|
);
|
|
|
});
|
|
|
</script>
|
|
|
@@ -164,15 +132,11 @@ const filteredContratos = computed(() => {
|
|
|
grid-template-columns: 1fr 1fr 100px;
|
|
|
align-items: center;
|
|
|
align-content: center;
|
|
|
- cursor: pointer;
|
|
|
+ cursor: default;
|
|
|
transition: background-color 0.15s;
|
|
|
}
|
|
|
|
|
|
.list-row:hover {
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
-
|
|
|
-.row-selected {
|
|
|
- background-color: #b2dfdb !important;
|
|
|
-}
|
|
|
</style>
|
