Merge branch 'feat/GINC-GAB-fluxo-contratos' of Softpar/sfp_vue_franchisor_ginastica_cerebro into development

src/components/defaults/DefaultInput.vue

@@ -6,8 +6,8 @@
         v-model="model"
         v-bind="inputAttrs"
         hide-bottom-space
-        label-color="secondary"
-        color="secondary"
+        :label-color
+        :color
         :label
         :error="!!error"
         :error-message="errorMessage"
@@ -76,6 +76,14 @@ const { label, nativeInputClass, inputClass, rules, icon, bgColor, outlined } =
       type: Boolean,
       default: false,
     },
+    labelColor: {
+      type: String,
+      default: "secondary",
+    },
+    color: {
+      type: String,
+      default: "secondary",
+    },
   });
 
 const attrs = useAttrs();

src/components/defaults/DefaultTable.vue

@@ -48,10 +48,11 @@
           v-model="filter"
           debounce="250"
           label="Busque por Unidade, status ou Responsavel"
+          label-color="dark"
           :placeholder="$t('common.actions.search')"
           clearable
           class="q-mt-sm full-width search-input"
-          color="primary"
+          color="dark"
           bg-color="transparent"
           dense
           input-class="q-pl-xs"
@@ -84,7 +85,9 @@
             outline
             icon="mdi-pencil-outline"
             style="width: 36px"
-            @click.prevent.stop="router.push({ name: openItemRoute, params: { id: row.id } })"
+            @click.prevent.stop="
+              router.push({ name: openItemRoute, params: { id: row.id } })
+            "
           />
           <q-btn
             v-if="deleteFunction"
@@ -119,13 +122,21 @@
               </template>
               <template v-else>
                 <slot name="body-cell-actions" :row="row" />
-                <q-item-section v-if="openItemRoute || deleteFunction" style="flex-direction: row; gap: 4px">
+                <q-item-section
+                  v-if="openItemRoute || deleteFunction"
+                  style="flex-direction: row; gap: 4px"
+                >
                   <q-btn
                     v-if="openItemRoute"
                     outline
                     icon="mdi-pencil-outline"
                     style="width: 36px"
-                    @click.prevent.stop="router.push({ name: openItemRoute, params: { id: row.id } })"
+                    @click.prevent.stop="
+                      router.push({
+                        name: openItemRoute,
+                        params: { id: row.id },
+                      })
+                    "
                   />
                   <q-btn
                     v-if="deleteFunction"

src/components/layout/DefaultHeaderPage.vue

@@ -33,12 +33,12 @@
           <q-skeleton type="text" height="40px" />
         </div>
         <q-icon
-          v-if="showFilterIcon"
           name="mdi-filter-outline"
           color="background"
           size="sm"
           class="q-ml-sm bg-primary"
           style="border-radius: 8px; padding: 2px"
+          @click="$emit('show-filter')"
         />
       </div>
       <div
@@ -127,12 +127,10 @@ const { title, breadcrumbs } = defineProps({
     type: Object,
     default: null,
   },
-  showFilterIcon: {
-    type: Boolean,
-    default: false,
-  },
 });
 
+defineEmits(["show-filter"]);
+
 const store = userStore();
 const user = computed(() => store.user);
 const selectedUnit = ref(null);

src/pages/contracts/ContractPage.vue

@@ -0,0 +1,100 @@
+<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"
+        descricao="Contratos"
+        :feminino="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>

src/pages/franchisee/FranchiseePage.vue

@@ -23,6 +23,7 @@
 import { getUnits, deleteUnit } from "src/api/unit";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+import { formatDateYMDtoDMY } from "src/helpers/utils";
 import { ref } from "vue";
 
 const columns = ref([
@@ -44,9 +45,7 @@ const columns = ref([
     name: "location",
     label: "Cidade / Estado",
     field: (row) =>
-      row.city && row.state
-        ? `${row.city.name} / ${row.state.code}`
-        : "—",
+      row.city && row.state ? `${row.city.name} / ${row.state.code}` : "—",
     align: "left",
   },
   {
@@ -65,6 +64,7 @@ const columns = ref([
     name: "created_at",
     label: "Cadastrado em",
     field: "created_at",
+    format: (val) => formatDateYMDtoDMY(val),
     align: "left",
     sortable: true,
   },

src/router/routes/contract.route.js

@@ -0,0 +1,25 @@
+export default [
+  {
+    path: "/contracts",
+    name: "ContractPage",
+    component: () => import("pages/contracts/ContractPage.vue"),
+    meta: {
+      title: {
+        value: "Contratos",
+        translate: false,
+      },
+      requireAuth: true,
+      requiredPermission: "dashboard",
+      breadcrumbs: [
+        {
+          name: "DashboardPage",
+          title: "Dashboard",
+        },
+        {
+          name: "ContractPage",
+          title: "Contratos"
+        }
+      ],
+    },
+  },
+];

src/stores/navigation.js

@@ -31,6 +31,15 @@ export const navigationStore = defineStore("navigation", () => {
       permission: false,
       permissionScope: "dashboard"
     },
+    {
+      type: "single",
+      title: "Contratos",
+      name: "ContractPage",
+      icon: "mdi-file-sign",
+      disable: false,
+      permission: false,
+      permissionScope: "dashboard"
+    }
   ]);
 
   const getNavigationAccess = () => {