sfp_vue_franchisor_ginastica_cerebro/src/pages/contracts/ContractPage.vue

<template>
  <div>
    <DefaultHeaderPage
      title="Contratos"
      show-filter-icon
      @show-filter="handleShowFilter"
    />

    <div class="q-px-sm">
      <div class="row">
        <q-select
          v-if="showFilter"
          v-model="statusSelected"
          label="Selecione o Status"
          :options="statusOptions"
          option-value="value"
          option-label="label"
          class="col-3"
          bg-color="white"
          hide-dropdown-icon
          emit-value
          map-options
          color="secondary"
          outlined
        >
          <template #append>
            <q-icon name="mdi-chevron-down" color="secondary" />
          </template>
        </q-select>
      </div>

      <DefaultTable
        :columns
        no-api-call
        :rows
        title="Lista de Contratos"
        description="Contratos"
        :female="false"
      />
    </div>
  </div>
</template>

<script setup>
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import { ref } from "vue";

const rows = ref([]);

const showFilter = ref(false);

const statusSelected = ref(null);

const columns = ref([
  {
    name: "student_name",
    field: "student_name",
    label: "Nome",
    align: "left",
  },
  {
    name: "unit_name",
    field: "unit_name",
    label: "Unidade",
    align: "left",
  },
  {
    name: "signature_date",
    field: "signature_date",
    label: "Data da Assinatura",
    align: "left",
  },
  {
    name: "status",
    field: "status",
    label: "Status",
    align: "center",
  },
  {
    name: "actions",
    label: "Ações",
    align: "center",
  },
]);

const statusOptions = ref([
  { label: "Selecione", value: null },
  { label: "Ativo", value: "active" },
  { label: "Inativo", value: "inactive" },
  { label: "Congelado", value: "frozen" },
  { label: "Encerrado", value: "closed" },
]);

const handleShowFilter = () => {
  showFilter.value == false
    ? (showFilter.value = true)
    : (showFilter.value = false);
};
</script>