feat(users): adiciona rota e pagina de usuario basica

src/pages/users/UserPage.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <DefaultHeaderPage title="Usuários" show-filter-icon />
+  </div>
+</template>
+
+<script setup>
+import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
+</script>

src/pages/users/UsersPage.vue

@@ -1,128 +0,0 @@
-<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>
-  </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/pages/users/components/AddEditUserDialog.vue

@@ -1,143 +0,0 @@
-<template>
-  <q-dialog ref="dialogRef" @hide="onDialogHide">
-    <q-card class="q-dialog-plugin overflow-hidden" style="width: 800px">
-      <DefaultDialogHeader :title="title" @close="onDialogCancel" />
-      <q-form ref="formRef" @submit="onOKClick">
-        <q-card-section class="row q-col-gutter-sm q-pt-none">
-          <DefaultInput
-            v-model="form.name"
-            v-model:error="validationErrors.name"
-            :rules="[inputRules.required]"
-            :label="$t('common.terms.name')"
-            :placeholder="$t('user.profile.name_and_surname')"
-            class="col-md-6 col-12"
-          />
-          <UserTypeSelect
-            v-model="selectedUserType"
-            v-model:error="validationErrors.type"
-            :rules="[inputRules.required]"
-            :type="form.type"
-            :label="$t('common.ui.misc.type')"
-            :placeholder="'O tipo delimita as permissões'"
-            class="col-md-6 col-12"
-          />
-          <DefaultInput
-            v-model="form.email"
-            v-model:error="validationErrors.email"
-            :rules="[inputRules.email, inputRules.required]"
-            label="Email"
-            :placeholder="'Ex. email@email.com'"
-            class="col-12"
-          />
-          <DefaultPasswordInput
-            v-model="form.password"
-            v-model:error="validationErrors.password"
-            :rules="
-              user
-                ? [inputRules.password]
-                : [inputRules.required, inputRules.password]
-            "
-            :label="$t('common.terms.password')"
-            :placeholder="'Digite uma senha segura'"
-            class="col-md-6 col-12"
-          />
-          <DefaultPasswordInput
-            v-model="confirmPassword"
-            :rules="
-              user
-                ? [inputRules.samePassword(form.password)]
-                : [inputRules.required, inputRules.samePassword(form.password)]
-            "
-            :label="$t('auth.confirm_password')"
-            class="col-md-6 col-12"
-          />
-        </q-card-section>
-        <q-card-actions>
-          <q-space />
-          <q-btn
-            outline
-            color="negative"
-            :label="$t('common.actions.cancel')"
-            @click="onDialogCancel"
-          />
-          <q-btn
-            color="primary"
-            :label="user ? $t('common.actions.save') : $t('common.actions.add')"
-            :type="'submit'"
-            :loading="loading"
-            :disable="!hasUpdatedFields"
-          />
-        </q-card-actions>
-      </q-form>
-    </q-card>
-  </q-dialog>
-</template>
-<script setup>
-import { ref, useTemplateRef, watch } from "vue";
-import { useInputRules } from "src/composables/useInputRules";
-import { useDialogPluginComponent } from "quasar";
-import { useI18n } from "vue-i18n";
-import { createUser, updateUser } from "src/api/user";
-import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
-import { useSubmitHandler } from "src/composables/useSubmitHandler";
-
-import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
-import DefaultPasswordInput from "src/components/defaults/DefaultPasswordInput.vue";
-import UserTypeSelect from "src/components/selects/UserTypeSelect.vue";
-import DefaultInput from "src/components/defaults/DefaultInput.vue";
-
-defineEmits([
-  // REQUIRED; need to specify some events that your
-  // component will emit through useDialogPluginComponent()
-  ...useDialogPluginComponent.emits,
-]);
-
-const { user, title } = defineProps({
-  user: {
-    type: Object,
-    default: null,
-  },
-  title: {
-    type: Function,
-    default: () => useI18n().t("common.terms.title"),
-  },
-});
-
-const { inputRules } = useInputRules();
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
-  useDialogPluginComponent();
-
-const formRef = useTemplateRef("formRef");
-
-const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
-  name: user ? user?.name : "",
-  email: user ? user?.email : "",
-  type: user ? user?.type : "",
-  password: "",
-});
-
-const selectedUserType = ref(null);
-const confirmPassword = ref("");
-
-const {
-  loading,
-  validationErrors,
-  execute: submitForm,
-} = useSubmitHandler({
-  onSuccess: () => onDialogOK(true),
-  formRef: formRef,
-});
-
-const onOKClick = async () => {
-  if (user) {
-    await submitForm(() => updateUser(getUpdatedFields.value, user.id));
-  } else {
-    await submitForm(() => createUser({ ...form }));
-  }
-};
-
-watch(selectedUserType, () => {
-  form.type = selectedUserType.value.value;
-});
-</script>

src/router/routes/user.route.js

@@ -0,0 +1,22 @@
+export default [
+  {
+    path: "/users",
+    name: "UserPage",
+    component: () => import("pages/users/UserPage.vue"),
+    meta: {
+      title: {
+        value: "Usuários",
+        translate: false,
+      },
+      requireAuth: true,
+      // TODO: Verificar permissao, fazendo seeder e substituindo
+      requiredPermission: "config.city",
+      breadcrumbs: [
+        {
+          name: "UserPage",
+          title: "Usuários",
+        },
+      ],
+    },
+  },
+];

src/stores/navigation.js

@@ -4,14 +4,6 @@ import { permissionStore } from "src/stores/permission";
 
 export const navigationStore = defineStore("navigation", () => {
   const navigationStructure = Object.freeze([
-    // {
-    //   type: "single",
-    //   title: "ui.navigation.home",
-    //   name: "HomePage",
-    //   icon: "mdi-home-outline",
-    //   disable: false,
-    //   permission: true,
-    // },
     {
       type: "single",
       title: "ui.navigation.dashboard",
@@ -21,6 +13,15 @@ export const navigationStore = defineStore("navigation", () => {
       permission: false,
       permissionScope: "dashboard",
     },
+    {
+      type: "single",
+      title: "Usuários",
+      name: "UserPage",
+      icon: "mdi-account-multiple-outline",
+      disable: false,
+      permission: false,
+      permissionScope: "dashboard",
+    },
     {
       type: "single",
       title: "Franqueados",