refactor: :recycle: removendo globalImport

globalimport não funciona corretamente

quasar.config.js

@@ -14,7 +14,7 @@ export default configure((ctx) => {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     // https://v2.quasar.dev/quasar-cli-vite/boot-files
-    boot: ["i18n", "axios", "importGlobalComponents", "setPermissions"],
+    boot: ["i18n", "axios", "setPermissions"],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#css
     css: ["app.scss"],

src/boot/importGlobalComponents.js

@@ -1,16 +0,0 @@
-import { boot } from "quasar/wrappers";
-
-const components = import.meta.glob("src/components/global/**/*.vue", {
-  eager: true,
-});
-
-export default boot(async ({ app }) => {
-  for (const path in components) {
-    const mod = components[path];
-    const componentName = path
-      .split("/")
-      .pop()
-      .replace(/\.\w+$/, "");
-    app.component(componentName, mod.default);
-  }
-});

src/components/EssentialLink.vue

@@ -1,48 +0,0 @@
-<template>
-  <q-item
-    clickable
-    tag="a"
-    target="_blank"
-    :href="props.link"
-  >
-    <q-item-section
-      v-if="props.icon"
-      avatar
-    >
-      <q-icon :name="props.icon" />
-    </q-item-section>
-
-    <q-item-section>
-      <q-item-label>{{ props.title }}</q-item-label>
-      <q-item-label caption>{{ props.caption }}</q-item-label>
-    </q-item-section>
-  </q-item>
-</template>
-
-<script setup>
-defineOptions({
-  name: 'EssentialLink'
-})
-
-const props = defineProps({
-  title: {
-    type: String,
-    required: true
-  },
-
-  caption: {
-    type: String,
-    default: ''
-  },
-
-  link: {
-    type: String,
-    default: '#'
-  },
-
-  icon: {
-    type: String,
-    default: ''
-  }
-})
-</script>

src/components/geral/DefaultDialogHeader.vue

@@ -0,0 +1,62 @@
+<template>
+  <q-bar
+    class="q-py-md"
+    v-bind="$attrs"
+    style="min-height: 55px; max-height: 55px"
+  >
+    <q-icon v-if="props.icon" :name="props.icon" />
+    <div>{{ props.title() }}</div>
+
+    <q-space />
+
+    <q-btn
+      v-if="props.maximizable"
+      dense
+      flat
+      :icon="!maximizedToggle ? 'mdi-arrow-expand' : 'mdi-arrow-collapse'"
+      @click="onMaximazedClick"
+    />
+
+    <q-btn dense flat icon="mdi-close" @click="emit('close')" />
+  </q-bar>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useI18n } from "vue-i18n";
+
+const emit = defineEmits(["maximized", "close"]);
+
+const props = defineProps({
+  title: {
+    type: Function,
+    default: () => useI18n().t("general.title"),
+  },
+  fullscreen: {
+    type: Boolean,
+    default: false,
+  },
+  maximizable: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+});
+
+const maximizedToggle = ref(false);
+
+const onMaximazedClick = () => {
+  maximizedToggle.value = !maximizedToggle.value;
+
+  emit("maximized", maximizedToggle.value);
+};
+
+onMounted(() => {
+  if (props.fullscreen) {
+    maximizedToggle.value = true;
+  }
+});
+</script>

src/components/global/DefaultTable.vue → src/components/geral/DefaultTable.vue

@@ -260,15 +260,14 @@ watch(showInativos, () => {
 
 watch(
   () => props.apiRoute,
-  () => {
-    onRequest();
+  async () => {
+    await onRequest();
   },
 );
 
 // remove as colunas obrigatórias do filtro de colunas
 const mapColuns = props.columns.reduce((accm, column) => {
   if (!column.required) {
-    column.label = column.label.toUpperCase();
     accm.push(column);
   }
   return accm;
@@ -327,9 +326,9 @@ const onRequest = async () => {
   loading.value = false;
 };
 
-onMounted(() => {
+onMounted(async () => {
   // faz a primeira requisição
-  onRequest({
+  await onRequest({
     filter: undefined,
   });
   if (props.comecarDesativado) {

src/components/global/LeftMenuLayout.vue → src/components/geral/LeftMenuLayout.vue

@@ -62,7 +62,7 @@
           v-ripple
           clickable
           class="q-mt-auto text-subtitle1"
-          @click="auth.logout()"
+          @click="logout()"
         >
           <div class="flex">
             <q-item-section avatar>
@@ -80,10 +80,12 @@
 import { ref, onMounted } from "vue";
 import { useAuth } from "src/composables/useAuth";
 import { permissionStore } from "src/stores/permission";
+import { useRouter } from "vue-router";
 
 const auth = useAuth();
 const leftDrawerOpen = ref(true);
 const miniState = ref(true);
+const router = useRouter();
 
 const menus = ref([
   {
@@ -137,6 +139,11 @@ const getMenuAccess = () => {
     .filter((menu) => menu !== null);
 };
 
+const logout = async () => {
+  await auth.logout();
+  router.push({ name: "LoginPage" });
+};
+
 onMounted(() => {
   getMenuAccess();
 });

src/pages/UsersPage.vue → src/pages/users/UsersPage.vue

@@ -1,7 +1,5 @@
 <template>
   <q-page padding>
-    <PageToolbar />
-
     <DefaultTable
       :key="tableKey"
       :columns="columns"
@@ -19,19 +17,18 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import DefaultTable from "src/components/geral/DefaultTable.vue";
+import { ref, defineAsyncComponent } from "vue";
 import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { permissionStore } from "src/stores/permission";
-import { getUsers } from "src/api/user";
+import { getUsers, createUser, updateUser } from "src/api/user";
 
-// const UsuariosAddEditDialog = defineAsyncComponent(
-//   () => import("src/components/cruds/usuarios/UsuariosAddEditDialog.vue"),
-// );
+const AddEditUserDialog = defineAsyncComponent(
+  () => import("src/pages/users/components/AddEditUserDialog.vue"),
+);
 
 const permission_store = permissionStore();
-const router = useRouter();
 const $q = useQuasar();
 const tableKey = ref(0);
 const { t } = useI18n();
@@ -39,7 +36,7 @@ const { t } = useI18n();
 const columns = [
   {
     name: "nome",
-    label: "name",
+    label: t("users.name"),
     field: "name",
     align: "left",
     style: "width: 50%",
@@ -53,6 +50,7 @@ const columns = [
     style: "width: 20%",
     required: true,
   },
+  {},
 ];
 
 const onRowClick = ({ row }) => {
@@ -64,24 +62,38 @@ const onRowClick = ({ row }) => {
     });
     return;
   }
-  router.push(`/usuarios/${row.id}`);
+  $q.dialog({
+    component: AddEditUserDialog,
+    componentProps: {
+      user: row,
+      title: () =>
+        useI18n().t("users.user", { something: useI18n().t("general.edit") }),
+    },
+  }).onOk(async (payload) => {
+    await updateUser(payload, row.id);
+    tableKey.value = tableKey.value + 1;
+  });
 };
 
-// const onAddItem = () => {
-//   if (permission_store.getAccess("config.user", "add") === false) {
-//     $q.loading.hide();
-//     $q.notify({
-//       type: "negative",
-//       message: t("permissions.add"),
-//     });
-//     return;
-//   }
-//   $q.dialog({
-//     component: UsuariosAddEditDialog,
+const onAddItem = () => {
+  if (permission_store.getAccess("config.user", "add") === false) {
+    $q.loading.hide();
+    $q.notify({
+      type: "negative",
+      message: t("permissions.add"),
+    });
+    return;
+  }
+  $q.dialog({
+    component: AddEditUserDialog,
 
-//     componentProps: {},
-//   }).onOk(() => {
-//     tableKey.value = tableKey.value + 1;
-//   });
-// };
+    componentProps: {
+      title: () =>
+        useI18n().t("users.user", { something: useI18n().t("general.add") }),
+    },
+  }).onOk(async (payload) => {
+    await createUser(payload);
+    tableKey.value = tableKey.value + 1;
+  });
+};
 </script>