Merge branch 'feat/GINC-GAB-fluxo-usuarios' of Softpar/sfp_vue_franchisee_ginastica_cerebro into development

src/components/layout/DefaultHeaderPage.vue

@@ -43,8 +43,34 @@
       <div
         class="flex items-center q-pr-sm"
         :class="$q.screen.lt.sm ? '' : 'q-pt-md'"
+        style="gap: 8px"
       >
         <slot name="after" />
+
+        <div class="flex items-center no-wrap" style="gap: 12px">
+          <template v-if="$q.screen.gt.sm && lastLoginFormatted">
+            <div
+              class="column"
+              style="line-height: 1.2; white-space: nowrap; flex-shrink: 0"
+            >
+              <span class="text-caption text-grey-6 text-primary text-center"
+                >Ultimo acesso</span
+              >
+              <span class="text-caption text-primary text-center">{{
+                lastLoginFormatted
+              }}</span>
+            </div>
+          </template>
+
+          <div
+            class="flex items-center no-wrap"
+            style="gap: 2px; flex-shrink: 0"
+          >
+            <q-btn flat round dense icon="mdi-bell-badge" color="secondary" />
+            <q-btn flat round dense icon="mdi-account" color="secondary" />
+            <q-btn flat round dense icon="mdi-cog-outline" color="secondary" />
+          </div>
+        </div>
       </div>
     </div>
     <q-separator class="q-my-sm" />
@@ -55,10 +81,11 @@
 import { computed } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
+import { userStore } from "src/stores/user";
 
 const { title, breadcrumbs } = defineProps({
   title: {
-    type: Object,
+    type: [String, Object],
     default: null,
   },
   breadcrumbs: {
@@ -73,20 +100,32 @@ const { title, breadcrumbs } = defineProps({
 
 const route = useRoute();
 const { t } = useI18n();
+const store = userStore();
+
+const lastLoginFormatted = computed(() => {
+  const raw = store.user?.last_login_at;
+  if (!raw) return null;
+  const d = new Date(raw.replace(" ", "T") + "Z");
+  return new Intl.DateTimeFormat("pt-BR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZone: "America/Sao_Paulo",
+  }).format(d);
+});
 
 const displayTitle = computed(() => {
   if (title) {
-    if (title.translate) {
-      return t(title.value);
-    } else {
-      return title.value;
-    }
+    if (typeof title === "string") return title;
+    if (title.translate) return t(title.value);
+    return title.value;
   } else if (route.meta?.title) {
-    if (route.meta?.title.translate) {
-      return t(route.meta?.title.value);
-    } else {
-      return route.meta?.title.value;
-    }
+    const metaTitle = route.meta.title;
+    if (typeof metaTitle === "string") return metaTitle;
+    if (metaTitle.translate) return t(metaTitle.value);
+    return metaTitle.value;
   }
   return null;
 });

src/pages/alunos/AlunosPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <DefaultHeaderPage />
+  </div>
+</template>
+
+<script setup>
+import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+</script>

src/pages/dashboard/DashboardPage.vue

@@ -1,33 +1,6 @@
 <template>
   <div>
-    <DefaultHeaderPage class="q-pa-sm">
-      <template #after>
-        <div class="flex items-center no-wrap" style="gap: 12px">
-          <template v-if="$q.screen.gt.sm && lastLoginFormatted">
-            <div
-              class="column"
-              style="line-height: 1.2; white-space: nowrap; flex-shrink: 0"
-            >
-              <span class="text-caption text-grey-6 text-primary text-center"
-                >Ultimo acesso</span
-              >
-              <span class="text-caption text-primary text-center">{{
-                lastLoginFormatted
-              }}</span>
-            </div>
-          </template>
-
-          <div
-            class="flex items-center no-wrap"
-            style="gap: 2px; flex-shrink: 0"
-          >
-            <q-btn flat round dense icon="mdi-bell-badge" color="secondary" />
-            <q-btn flat round dense icon="mdi-account" color="secondary" />
-            <q-btn flat round dense icon="mdi-cog-outline" color="secondary" />
-          </div>
-        </div>
-      </template>
-    </DefaultHeaderPage>
+    <DefaultHeaderPage class="q-pa-sm" />
 
     <div class="q-pa-sm">
       <div class="stat-cards-row q-mb-md">
@@ -201,8 +174,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
-import { userStore } from "src/stores/user";
+import { ref } from "vue";
 import { Doughnut } from "vue-chartjs";
 import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
@@ -213,22 +185,6 @@ import AniversariantesCard from "src/components/charts/AniversariantesCard.vue";
 
 ChartJS.register(ArcElement, Tooltip, Legend);
 
-const store = userStore();
-
-const lastLoginFormatted = computed(() => {
-  const raw = store.user?.last_login_at;
-  if (!raw) return null;
-  const d = new Date(raw.replace(" ", "T") + "Z");
-  return new Intl.DateTimeFormat("pt-BR", {
-    day: "2-digit",
-    month: "2-digit",
-    year: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-    timeZone: "America/Sao_Paulo",
-  }).format(d);
-});
-
 const faturamentoChart = {
   labels: [
     "17/02", "18/02", "19/02", "20/02", "21/02",

src/pages/users/UsersPage.vue

@@ -1,128 +1,11 @@
 <template>
   <div>
-    <DefaultHeaderPage>
-      <template #after>
-        <q-btn
-          color="primary"
-          padding="8px 8px"
-          :label="$t('common.actions.add')"
-          icon="mdi-plus"
-          class="q-mt-md"
-          @click="onAddItem"
-        />
-      </template>
-    </DefaultHeaderPage>
-    <div>
-      <DefaultTable
-        ref="tableRef"
-        :columns="columns"
-        :api-call="getUsers"
-        :delete-function="deleteUser"
-        :show-columns-select="false"
-        :title="
-          $t('common.terms.list') +
-          ' ' +
-          $t('common.ui.table.of') +
-          ' ' +
-          $t('user.plural')
-        "
-      >
-        <template #body-cell-actions="{ row }">
-          <q-btn
-            outline
-            style="width: 36px"
-            class="q-ml-auto q-mr-sm"
-            @click.prevent.stop="onRowClick(row)"
-          >
-            <q-icon name="mdi-file-edit-outline" />
-          </q-btn>
-        </template>
-      </DefaultTable>
-    </div>
+    <DefaultHeaderPage title="Usuários" show-filter-icon />
+
+    <div></div>
   </div>
 </template>
 
 <script setup>
-import { defineAsyncComponent, useTemplateRef } from "vue";
-import { useQuasar } from "quasar";
-import { useI18n } from "vue-i18n";
-import { permissionStore } from "src/stores/permission";
-import { getUsers, deleteUser } from "src/api/user";
-
-import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
-
-const AddEditUserDialog = defineAsyncComponent(
-  () => import("src/pages/users/components/AddEditUserDialog.vue"),
-);
-
-const permission_store = permissionStore();
-const $q = useQuasar();
-const { t } = useI18n();
-const tableRef = useTemplateRef("tableRef");
-
-const columns = [
-  {
-    name: "name",
-    label: t("common.terms.name"),
-    field: "name",
-    align: "left",
-    required: true,
-    sortable: true,
-  },
-  {
-    name: "email",
-    label: "Email",
-    field: "email",
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "actions",
-    label: t("common.terms.actions"),
-    align: "left",
-    required: true,
-  },
-];
-
-const onRowClick = (row) => {
-  if (permission_store.getAccess("config.user", "view") === false) {
-    $q.notify({
-      type: "negative",
-      message: t("validation.permissions.view"),
-    });
-    return;
-  }
-  $q.dialog({
-    component: AddEditUserDialog,
-    componentProps: {
-      user: row,
-      title: () => t("common.actions.edit") + " " + t("user.singular"),
-    },
-  }).onOk(async (success) => {
-    if (success) {
-      tableRef.value.refresh();
-    }
-  });
-};
-
-const onAddItem = () => {
-  if (permission_store.getAccess("config.user", "add") === false) {
-    $q.notify({
-      type: "negative",
-      message: t("validation.permissions.add"),
-    });
-    return;
-  }
-  $q.dialog({
-    component: AddEditUserDialog,
-    componentProps: {
-      title: () => t("common.actions.add") + " " + t("user.singular"),
-    },
-  }).onOk(async (success) => {
-    if (success) {
-      tableRef.value.refresh();
-    }
-  });
-};
 </script>

src/router/routes/config.route.js

@@ -1,4 +1,19 @@
 export default [
+  {
+    path: "/alunos",
+    name: "AlunosPage",
+    component: () => import("pages/alunos/AlunosPage.vue"),
+    meta: {
+      title: "Alunos",
+      requireAuth: true,
+      breadcrumbs: [
+        {
+          name: "AlunosPage",
+          title: "Alunos",
+        },
+      ],
+    },
+  },
   {
     path: "/city",
     name: "CityPage",

src/stores/navigation.js

@@ -20,6 +20,23 @@ export const navigationStore = defineStore("navigation", () => {
       disable: false,
       permission: true,
     },
+    {
+      type: "single",
+      title: "Alunos",
+      name: "AlunosPage",
+      icon: "mdi-account-outline",
+      disable: false,
+      permission: true,
+    },
+    {
+      type: "single",
+      title: "Usuários",
+      name: "UsersPage",
+      icon: "mdi-account-multiple-outline",
+      disable: false,
+      permission: false,
+      permissionScope: "config.user",
+    },
   ]);
 
   const getNavigationAccess = () => {