|
|
@@ -0,0 +1,182 @@
|
|
|
+<template>
|
|
|
+ <q-dialog ref="dialogRef" @hide="onDialogHide">
|
|
|
+ <q-card style="width: 580px; 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"
|
|
|
+ >Alunos Ativos</span
|
|
|
+ >
|
|
|
+ <q-space />
|
|
|
+ <q-btn dense flat icon="mdi-close" @click="onDialogCancel" />
|
|
|
+ </q-bar>
|
|
|
+
|
|
|
+ <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-caption text-grey-6">
|
|
|
+ {{ alunos.length }} Alunos Cadastrados
|
|
|
+ </div>
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-card-section class="q-pt-xs q-pb-sm">
|
|
|
+ <q-input
|
|
|
+ v-model="search"
|
|
|
+ dense
|
|
|
+ borderless
|
|
|
+ placeholder="Busque por status, nome, tel/whats"
|
|
|
+ >
|
|
|
+ <template #prepend>
|
|
|
+ <q-icon name="mdi-magnify" color="grey-6" />
|
|
|
+ </template>
|
|
|
+ </q-input>
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-separator />
|
|
|
+
|
|
|
+ <div class="list-header q-px-md q-py-xs">
|
|
|
+ <span class="text-caption text-grey-7">Nome</span>
|
|
|
+ <span class="text-caption text-grey-7">Contato/Unidade</span>
|
|
|
+ <span class="text-caption text-grey-7">Contrato</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-separator />
|
|
|
+
|
|
|
+ <div style="max-height: 320px; overflow-y: auto">
|
|
|
+ <template v-for="(aluno, index) in filteredAlunos" :key="aluno.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">{{ aluno.nome }}</span>
|
|
|
+ <div class="column" style="gap: 2px">
|
|
|
+ <span class="text-caption text-dark">{{
|
|
|
+ aluno.telefone
|
|
|
+ }}</span>
|
|
|
+ <span class="text-caption text-grey-6">{{
|
|
|
+ aluno.unidade
|
|
|
+ }}</span>
|
|
|
+ </div>
|
|
|
+ <q-badge
|
|
|
+ :label="aluno.status"
|
|
|
+ :color="aluno.status === 'Ativo' ? 'btn-badge' : 'grey'"
|
|
|
+ style="
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 11px;
|
|
|
+ padding: 4px;
|
|
|
+ width: max-content;
|
|
|
+ margin-left: 10px;
|
|
|
+ "
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <q-separator v-if="index < filteredAlunos.length - 1" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </q-card>
|
|
|
+ </q-card-section>
|
|
|
+
|
|
|
+ <q-card-actions align="right" class="q-px-md q-pb-md q-pt-none">
|
|
|
+ <q-btn
|
|
|
+ label="EXPORTAR"
|
|
|
+ color="primary-2"
|
|
|
+ unelevated
|
|
|
+ style="border-radius: 8px; font-weight: 600; letter-spacing: 0.5px"
|
|
|
+ />
|
|
|
+ </q-card-actions>
|
|
|
+ </q-card>
|
|
|
+ </q-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, computed } from "vue";
|
|
|
+import { useDialogPluginComponent } from "quasar";
|
|
|
+
|
|
|
+defineEmits([...useDialogPluginComponent.emits]);
|
|
|
+
|
|
|
+const { dialogRef, onDialogHide, onDialogCancel } = useDialogPluginComponent();
|
|
|
+
|
|
|
+const search = ref("");
|
|
|
+const selectedIndex = ref(0);
|
|
|
+
|
|
|
+const alunos = [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ nome: "Heloisa Faria",
|
|
|
+ telefone: "(46)99999-9999",
|
|
|
+ unidade: "Unidade franco",
|
|
|
+ status: "Ativo",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ nome: "Carol",
|
|
|
+ telefone: "(45)99999-9999",
|
|
|
+ unidade: "Arapongas-PR",
|
|
|
+ status: "Ativo",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ nome: "Marcelo Souza",
|
|
|
+ telefone: "(45)98888-8888",
|
|
|
+ unidade: "Curitiba-PR",
|
|
|
+ status: "Ativo",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ nome: "Ana Lúcia",
|
|
|
+ telefone: "(45)97777-7777",
|
|
|
+ unidade: "Londrina-PR",
|
|
|
+ status: "Ativo",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ nome: "Ricardo Silva",
|
|
|
+ telefone: "(45)96666-6666",
|
|
|
+ unidade: "Ponta Grossa-PR",
|
|
|
+ status: "Ativo",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 6,
|
|
|
+ nome: "Juliana Costa",
|
|
|
+ telefone: "(45)95555-5555",
|
|
|
+ unidade: "Maringá-PR",
|
|
|
+ status: "Ativo",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const filteredAlunos = computed(() => {
|
|
|
+ if (!search.value) return alunos;
|
|
|
+ const q = search.value.toLowerCase();
|
|
|
+ return alunos.filter(
|
|
|
+ (a) =>
|
|
|
+ a.nome.toLowerCase().includes(q) ||
|
|
|
+ a.telefone.includes(q) ||
|
|
|
+ a.unidade.toLowerCase().includes(q) ||
|
|
|
+ a.status.toLowerCase().includes(q),
|
|
|
+ );
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.list-header {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 100px;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.list-row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 100px;
|
|
|
+ align-items: center;
|
|
|
+ align-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: background-color 0.15s;
|
|
|
+}
|
|
|
+
|
|
|
+.list-row:hover {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+}
|
|
|
+
|
|
|
+.row-selected {
|
|
|
+ background-color: #b2dfdb !important;
|
|
|
+}
|
|
|
+</style>
|
ebagabee