feat(permissions): refactor API endpoints for cities, countries, and states; add new group selection API; update permission scopes for user types and navigation

src/api/city.js

@@ -21,18 +21,3 @@ export const getCityByCountry = async (countryId) => {
   const { data } = await api.get(`/city/country/${countryId}`);
   return data.payload;
 };
-
-export const createCity = async (city) => {
-  const { data } = await api.post("/city", city);
-  return data.payload;
-};
-
-export const updateCity = async (city, id) => {
-  const { data } = await api.put(`/city/${id}`, city);
-  return data.payload;
-};
-
-export const deleteCity = async (id) => {
-  const { data } = await api.del(`/city/${id}`);
-  return data.payload;
-};

src/api/country.js

@@ -11,18 +11,3 @@ export const getCountries = async () => {
   const { data } = await api.get("/country");
   return data.payload;
 };
-
-export const createCountry = async (country) => {
-  const data = await api.post("/country", country);
-  return data.payload;
-};
-
-export const updateCountry = async (country, id) => {
-  const data = await api.put(`/country/${id}`, country);
-  return data.payload;
-};
-
-export const deleteCountry = async (id) => {
-  const data = await api.del(`/country/${id}`);
-  return data.payload;
-};

src/api/group.js

@@ -5,6 +5,11 @@ export const getGroups = async () => {
   return data.payload;
 };
 
+export const getGroupsForSelect = async () => {
+  const { data } = await api.get("/group/all/select");
+  return data.payload;
+};
+
 export const getGroup = async (id) => {
   const { data } = await api.get(`/group/${id}`);
   return data.payload;

src/api/state.js

@@ -16,18 +16,3 @@ export const getStateByCountry = async (countryId) => {
   const { data } = await api.get(`/state/country/${countryId}`);
   return data.payload;
 }
-
-export const createState = async (state) => {
-  const { data } = await api.post("/state", state);
-  return data.payload;
-}
-
-export const updateState = async (state, id) => {
-  const { data } = await api.put(`/state/${id}`, state);
-  return data.payload;
-}
-
-export const deleteState = async (id) => {
-  const { data } = await api.del(`/state/${id}`);
-  return data.payload;
-}

src/api/user_type.js

@@ -1,32 +1,34 @@
 import api from "src/api";
 
+const base = "/franchisor/permissions/groups";
+
 export const getUserTypes = async () => {
-  const { data } = await api.get("/user-type");
+  const { data } = await api.get(base);
   return data.payload;
 };
 
 export const createUserType = async (payload) => {
-  const { data } = await api.post("/user-type", payload);
+  const { data } = await api.post(base, payload);
   return data.payload;
 };
 
 export const updateUserType = async (id, payload) => {
-  const { data } = await api.put(`/user-type/${id}`, payload);
+  const { data } = await api.put(`${base}/${id}`, payload);
   return data.payload;
 };
 
 export const deleteUserType = async (id) => {
-  const { data } = await api.delete(`/user-type/${id}`);
+  const { data } = await api.delete(`${base}/${id}`);
   return data.payload;
 };
 
 export const getUserTypePermissions = async (id) => {
-  const { data } = await api.get(`/user-type/${id}/permissions`);
+  const { data } = await api.get(`${base}/${id}/permissions`);
   return data.payload;
 };
 
 export const updateUserTypePermissions = async (id, permissions) => {
-  const { data } = await api.put(`/user-type/${id}/permissions`, {
+  const { data } = await api.put(`${base}/${id}/permissions`, {
     permissions,
   });
   return data.payload;

src/pages/city/CityPage.vue

@@ -1,159 +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="getCities"
-        :delete-function="deleteCity"
-        :show-columns-select="false"
-        :title="
-          $t('common.terms.list') +
-          ' ' +
-          $t('common.ui.table.of') +
-          ' ' +
-          $t('ui.navigation.city')
-        "
-      >
-        <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 { getCities, deleteCity } from "src/api/city";
-
-import DefaultTable from "src/components/defaults/DefaultTable.vue";
-import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
-
-const AddEditCityDialog = defineAsyncComponent(
-  () => import("src/pages/city/components/AddEditCityDialog.vue"),
-);
-
-const permission_store = permissionStore();
-const $q = useQuasar();
-const tableRef = useTemplateRef("tableRef");
-const { t } = useI18n();
-
-const columns = [
-  {
-    name: "id",
-    label: "ID",
-    field: "id",
-    align: "left",
-    required: true,
-    sortable: true,
-  },
-  {
-    name: "nome",
-    label: t("common.terms.name"),
-    field: "name",
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "state",
-    label: t("ui.navigation.state"),
-    field: (row) => row.state.name,
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "country",
-    label: t("ui.navigation.country"),
-    field: (row) => row.country.name,
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "status",
-    label: t("common.terms.status"),
-    field: (row) =>
-      row.status == "ACTIVE"
-        ? t("common.status.active")
-        : t("common.status.inactive"),
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "actions",
-    label: t("common.terms.actions"),
-    align: "left",
-    required: true,
-  },
-];
-
-const onRowClick = (row) => {
-  if (permission_store.getAccess("config.city", "edit") === false) {
-    $q.loading.hide();
-    $q.notify({
-      type: "negative",
-      message: t("validation.permissions.edit"),
-    });
-    return;
-  }
-  $q.dialog({
-    component: AddEditCityDialog,
-    componentProps: {
-      city: row,
-      title: () =>
-        useI18n().t("common.actions.edit") +
-        " " +
-        useI18n().t("ui.navigation.city"),
-    },
-  }).onOk(async (success) => {
-    if (success) {
-      tableRef.value.refresh();
-    }
-  });
-};
-
-const onAddItem = () => {
-  if (permission_store.getAccess("config.city", "add") === false) {
-    $q.loading.hide();
-    $q.notify({
-      type: "negative",
-      message: t("validation.permissions.add"),
-    });
-    return;
-  }
-  $q.dialog({
-    component: AddEditCityDialog,
-    componentProps: {
-      title: () =>
-        useI18n().t("common.actions.add") +
-        " " +
-        useI18n().t("ui.navigation.city"),
-    },
-  }).onOk(async (success) => {
-    if (success) {
-      tableRef.value.refresh();
-    }
-  });
-};
-</script>

src/pages/city/components/AddEditCityDialog.vue

@@ -1,158 +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="'Nome completo da cidade'"
-            class="col-md-6 col-12"
-          />
-          <CountrySelect
-            v-model="selectedCountry"
-            v-model:error="validationErrors.country_id"
-            :placeholder="'Selecione o pais desse estado'"
-            :rules="[inputRules.required]"
-            :initial-id="form.country_id"
-            class="col-md-6 col-12"
-          />
-          <StateSelect
-            v-model="selectedState"
-            v-model:error="validationErrors.state_id"
-            :country="selectedCountry"
-            :initial-id="form.state_id"
-            :placeholder="'Selecione o estado dessa cidade'"
-            :rules="[inputRules.required]"
-            class="col-md-6 col-12"
-            @selected-country-id="countrySelectRef?.selectCountryById($event)"
-          />
-          <DefaultSelect
-            v-model="selectedStatus"
-            v-model:error="validationErrors.status"
-            :options="statusOptions"
-            :rules="[inputRules.required]"
-            :label="$t('common.terms.status')"
-            :placeholder="$t('common.terms.status')"
-            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="city ? $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, onMounted, watch } from "vue";
-import { useInputRules } from "src/composables/useInputRules";
-import { useDialogPluginComponent } from "quasar";
-import { useI18n } from "vue-i18n";
-import { createCity, updateCity } from "src/api/city";
-import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
-import { useSubmitHandler } from "src/composables/useSubmitHandler";
-
-import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
-import DefaultInput from "src/components/defaults/DefaultInput.vue";
-import CountrySelect from "src/components/selects/CountrySelect.vue";
-import StateSelect from "src/components/selects/StateSelect.vue";
-import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
-
-defineEmits([
-  // REQUIRED; need to specify some events that your
-  // component will emit through useDialogPluginComponent()
-  ...useDialogPluginComponent.emits,
-]);
-
-const { city, title } = defineProps({
-  city: {
-    type: Object,
-    default: null,
-  },
-  title: {
-    type: Function,
-    default: () => useI18n().t("common.terms.title"),
-  },
-});
-
-const { t } = useI18n();
-const { inputRules } = useInputRules();
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
-  useDialogPluginComponent();
-
-const formRef = useTemplateRef("formRef");
-const countrySelectRef = useTemplateRef("countrySelectRef");
-
-const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
-  name: city ? city?.name : "",
-  country_id: city ? city?.country_id : null,
-  state_id: city ? city?.state_id : null,
-  status: city ? city?.status : "ACTIVE",
-});
-
-const {
-  loading,
-  validationErrors,
-  execute: submitForm,
-} = useSubmitHandler({
-  onSuccess: () => onDialogOK(true),
-  formRef: formRef,
-});
-
-const selectedCountry = ref(null);
-const selectedState = ref(null);
-const selectedStatus = ref({
-  label: t("common.status.active"),
-  value: "ACTIVE",
-});
-const statusOptions = ref([
-  { label: t("common.status.active"), value: "ACTIVE" },
-  { label: t("common.status.inactive"), value: "INACTIVE" },
-]);
-
-const onOKClick = async () => {
-  if (city) {
-    await submitForm(() => updateCity(getUpdatedFields.value, city.id));
-  } else {
-    await submitForm(() => createCity({ ...form }));
-  }
-};
-
-watch(selectedStatus, () => {
-  form.status = selectedStatus.value?.value;
-});
-
-watch(selectedCountry, () => {
-  form.country_id = selectedCountry.value?.value;
-});
-
-watch(selectedState, () => {
-  form.state_id = selectedState.value?.value;
-});
-
-onMounted(async () => {
-  if (city) {
-    selectedStatus.value = statusOptions.value.find(
-      (status) => status.value === city.status,
-    );
-  }
-});
-</script>

src/pages/country/CountryPage.vue

@@ -1,152 +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="getCountries"
-        :delete-function="deleteCountry"
-        :show-columns-select="false"
-        :title="
-          $t('common.terms.list') +
-          ' ' +
-          $t('common.ui.table.of') +
-          ' ' +
-          $t('ui.navigation.country')
-        "
-      >
-        <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 { getCountries, deleteCountry } from "src/api/country";
-
-import DefaultTable from "src/components/defaults/DefaultTable.vue";
-import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
-
-const AddEditCountryDialog = defineAsyncComponent(
-  () => import("src/pages/country/components/AddEditCountryDialog.vue"),
-);
-
-const permission_store = permissionStore();
-const $q = useQuasar();
-const tableRef = useTemplateRef("tableRef");
-const { t } = useI18n();
-
-const columns = [
-  {
-    name: "id",
-    label: "ID",
-    field: "id",
-    align: "left",
-    required: true,
-    sortable: true,
-  },
-  {
-    name: "nome",
-    label: t("common.terms.name"),
-    field: "name",
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "code",
-    label: t("common.terms.code"),
-    field: "code",
-    align: "center",
-    sortable: true,
-  },
-  {
-    name: "status",
-    label: t("common.terms.status"),
-    field: (row) =>
-      row.status == "ACTIVE"
-        ? t("common.status.active")
-        : t("common.status.inactive"),
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "actions",
-    label: t("common.terms.actions"),
-    align: "left",
-    required: true,
-  },
-];
-
-const onRowClick = (row) => {
-  if (permission_store.getAccess("config.country", "edit") === false) {
-    $q.loading.hide();
-    $q.notify({
-      type: "negative",
-      message: t("validation.permissions.edit"),
-    });
-    return;
-  }
-  $q.dialog({
-    component: AddEditCountryDialog,
-    componentProps: {
-      country: row,
-      title: () =>
-        useI18n().t("common.actions.edit") +
-        " " +
-        useI18n().t("ui.navigation.country"),
-    },
-  }).onOk(async (success) => {
-    if (success) {
-      tableRef.value.refresh();
-    }
-  });
-};
-
-const onAddItem = () => {
-  if (permission_store.getAccess("config.country", "add") === false) {
-    $q.loading.hide();
-    $q.notify({
-      type: "negative",
-      message: t("validation.permissions.add"),
-    });
-    return;
-  }
-  $q.dialog({
-    component: AddEditCountryDialog,
-    componentProps: {
-      title: () =>
-        useI18n().t("common.actions.add") +
-        " " +
-        useI18n().t("ui.navigation.country"),
-    },
-  }).onOk(async (success) => {
-    if (success) {
-      tableRef.value.refresh();
-    }
-  });
-};
-</script>

src/pages/country/components/AddEditCountryDialog.vue

@@ -1,136 +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"
-            :label="$t('common.terms.name')"
-            :placeholder="'Nome completo do pais'"
-            :rules="[inputRules.required]"
-            class="col-md-6 col-12"
-          />
-          <DefaultInput
-            v-model="form.code"
-            v-model:error="validationErrors.code"
-            :label="$t('common.terms.code')"
-            :placeholder="'Ex. BR, PT...'"
-            :rules="[inputRules.required]"
-            class="col-md-6 col-12"
-          />
-          <DefaultSelect
-            v-model="selectedStatus"
-            v-model:error="validationErrors.status"
-            :options="statusOptions"
-            :rules="[inputRules.required]"
-            :label="$t('common.terms.status')"
-            :placeholder="$t('common.terms.status')"
-            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="
-              country ? $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, onMounted, watch } from "vue";
-import { useInputRules } from "src/composables/useInputRules";
-import { useDialogPluginComponent } from "quasar";
-import { useI18n } from "vue-i18n";
-import { createCountry, updateCountry } from "src/api/country";
-import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
-import { useSubmitHandler } from "src/composables/useSubmitHandler";
-
-import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
-import DefaultInput from "src/components/defaults/DefaultInput.vue";
-import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
-
-defineEmits([
-  // REQUIRED; need to specify some events that your
-  // component will emit through useDialogPluginComponent()
-  ...useDialogPluginComponent.emits,
-]);
-
-const { country, title } = defineProps({
-  country: {
-    type: Object,
-    default: null,
-  },
-  title: {
-    type: Function,
-    default: () => useI18n().t("common.terms.title"),
-  },
-});
-
-const { t } = useI18n();
-const { inputRules } = useInputRules();
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
-  useDialogPluginComponent();
-
-const formRef = useTemplateRef("formRef");
-
-const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
-  name: country ? country?.name : "",
-  code: country ? country?.code : "",
-  status: country ? country?.status : "ACTIVE",
-});
-
-const {
-  loading,
-  validationErrors,
-  execute: submitForm,
-} = useSubmitHandler({
-  onSuccess: () => onDialogOK(true),
-  formRef: formRef,
-});
-
-const selectedStatus = ref({
-  label: t("common.status.active"),
-  value: "ACTIVE",
-});
-const statusOptions = ref([
-  { label: t("common.status.active"), value: "ACTIVE" },
-  { label: t("common.status.inactive"), value: "INACTIVE" },
-]);
-
-const onOKClick = async () => {
-  if (country) {
-    await submitForm(() => updateCountry(getUpdatedFields.value, country.id));
-  } else {
-    await submitForm(() => createCountry({ ...form }));
-  }
-};
-
-watch(selectedStatus, () => {
-  form.status = selectedStatus.value.value;
-});
-
-onMounted(() => {
-  if (country) {
-    selectedStatus.value = statusOptions.value.find(
-      (status) => status.value === country.status,
-    );
-  }
-});
-</script>

src/pages/packages/components/AddEditPackageDialog.vue

@@ -403,7 +403,7 @@ import DefaultCurrencyInput from "src/components/defaults/DefaultCurrencyInput.v
 import { getUnitsForSelect } from "src/api/unit";
 import { getPackage, createPackage, updatePackage } from "src/api/package";
 import { getProductsForSelect } from "src/api/product";
-import { getGroups } from "src/api/group";
+import { getGroupsForSelect } from "src/api/group";
 
 defineEmits([...useDialogPluginComponent.emits]);
 
@@ -536,7 +536,7 @@ onMounted(async () => {
     const [allUnits, allProducts, allGroups] = await Promise.all([
       getUnitsForSelect(),
       getProductsForSelect(),
-      getGroups(),
+      getGroupsForSelect(),
     ]);
 
     products.value = allProducts;

src/pages/permissions/PermissionsPage.vue

@@ -10,7 +10,7 @@
         :api-call="getEditableUserTypes"
         description="grupos"
         :female="false"
-        add-item
+        :add-item="canAdd"
         add-item-label="Novo Grupo"
         @on-add-item="onAdd"
       >
@@ -18,6 +18,7 @@
           <q-td>
             <div class="row no-wrap justify-center" style="gap: 8px">
               <q-btn
+                v-if="canEdit"
                 outline
                 icon="mdi-shield-key-outline"
                 style="width: 36px"
@@ -28,7 +29,7 @@
               </q-btn>
 
               <q-btn
-                v-if="!row.is_system"
+                v-if="canEdit && !row.is_system"
                 outline
                 icon="mdi-pencil-outline"
                 style="width: 36px"
@@ -39,7 +40,7 @@
               </q-btn>
 
               <q-btn
-                v-if="!row.is_system"
+                v-if="canDelete && !row.is_system"
                 outline
                 icon="mdi-trash-can-outline"
                 style="width: 36px"
@@ -57,11 +58,12 @@
 </template>
 
 <script setup>
-import { defineAsyncComponent, useTemplateRef } from "vue";
+import { computed, defineAsyncComponent, useTemplateRef } from "vue";
 import { useQuasar } from "quasar";
 import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import { getUserTypes, deleteUserType } from "src/api/user_type";
+import { permissionStore } from "src/stores/permission";
 
 const AddEditPermissionGroupDialog = defineAsyncComponent(
   () =>
@@ -74,6 +76,10 @@ const PermissionGroupDialog = defineAsyncComponent(
 
 const $q = useQuasar();
 const tableRef = useTemplateRef("tableRef");
+const permissions = permissionStore();
+const canAdd = computed(() => permissions.getAccess("franchisor_registrations", "add"));
+const canEdit = computed(() => permissions.getAccess("franchisor_registrations", "edit"));
+const canDelete = computed(() => permissions.getAccess("franchisor_registrations", "delete"));
 const getEditableUserTypes = async (...args) => {
   const response = await getUserTypes(...args);
   const hiddenTypes = ["ADMIN", "ADMIN_FRANCHISEE"];

src/pages/state/StatePage.vue

@@ -1,152 +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="getStates"
-        :delete-function="deleteState"
-        :show-columns-select="false"
-        :title="
-          $t('common.terms.list') +
-          ' ' +
-          $t('common.ui.table.of') +
-          ' ' +
-          $t('ui.navigation.state')
-        "
-      >
-        <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 { getStates, deleteState } from "src/api/state";
-
-import DefaultTable from "src/components/defaults/DefaultTable.vue";
-import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
-
-const AddEditStateDialog = defineAsyncComponent(
-  () => import("src/pages/state/components/AddEditStateDialog.vue"),
-);
-
-const permission_store = permissionStore();
-const $q = useQuasar();
-const tableRef = useTemplateRef("tableRef");
-const { t } = useI18n();
-
-const columns = [
-  {
-    name: "id",
-    label: "ID",
-    field: "id",
-    align: "left",
-    required: true,
-    sortable: true,
-  },
-  {
-    name: "nome",
-    label: t("common.terms.name"),
-    field: "name",
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "country",
-    label: t("ui.navigation.country"),
-    field: (row) => row.country.name,
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "status",
-    label: t("common.terms.status"),
-    field: (row) =>
-      row.status == "ACTIVE"
-        ? t("common.status.active")
-        : t("common.status.inactive"),
-    align: "left",
-    sortable: true,
-  },
-  {
-    name: "actions",
-    label: t("common.terms.actions"),
-    align: "left",
-    required: true,
-  },
-];
-
-const onRowClick = (row) => {
-  if (permission_store.getAccess("config.state", "edit") === false) {
-    $q.loading.hide();
-    $q.notify({
-      type: "negative",
-      message: t("validation.permissions.edit"),
-    });
-    return;
-  }
-  $q.dialog({
-    component: AddEditStateDialog,
-    componentProps: {
-      state: row,
-      title: () =>
-        useI18n().t("common.actions.edit") +
-        " " +
-        useI18n().t("ui.navigation.state"),
-    },
-  }).onOk(async (success) => {
-    if (success) {
-      tableRef.value.refresh();
-    }
-  });
-};
-
-const onAddItem = () => {
-  if (permission_store.getAccess("config.state", "add") === false) {
-    $q.loading.hide();
-    $q.notify({
-      type: "negative",
-      message: t("validation.permissions.add"),
-    });
-    return;
-  }
-  $q.dialog({
-    component: AddEditStateDialog,
-    componentProps: {
-      title: () =>
-        useI18n().t("common.actions.add") +
-        " " +
-        useI18n().t("ui.navigation.state"),
-    },
-  }).onOk(async (success) => {
-    if (success) {
-      tableRef.value.refresh();
-    }
-  });
-};
-</script>

src/pages/state/components/AddEditStateDialog.vue

@@ -1,151 +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="'Nome completo do estado'"
-            class="col-md-6 col-12"
-          />
-          <DefaultInput
-            v-model="form.code"
-            v-model:error="validationErrors.code"
-            :rules="[inputRules.required]"
-            :label="$t('common.terms.code')"
-            :placeholder="'Ex. SP, PR...'"
-            class="col-md-6 col-12"
-          />
-          <CountrySelect
-            v-model="selectedCountry"
-            v-model:error="validationErrors.country_id"
-            :placeholder="'Selecione o pais desse estado'"
-            :rules="[inputRules.required]"
-            :initial-id="form.country_id"
-            class="col-md-6 col-12"
-          />
-          <DefaultSelect
-            v-model="selectedStatus"
-            v-model:error="validationErrors.status"
-            :options="statusOptions"
-            :rules="[inputRules.required]"
-            :label="$t('common.terms.status')"
-            :placeholder="$t('common.terms.status')"
-            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="
-              state ? $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, onMounted, watch } from "vue";
-import { useInputRules } from "src/composables/useInputRules";
-import { useDialogPluginComponent } from "quasar";
-import { useI18n } from "vue-i18n";
-import { createState, updateState } from "src/api/state";
-import { useFormUpdateTracker } from "src/composables/useFormUpdateTracker";
-import { useSubmitHandler } from "src/composables/useSubmitHandler";
-
-import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
-import CountrySelect from "src/components/selects/CountrySelect.vue";
-import DefaultInput from "src/components/defaults/DefaultInput.vue";
-import DefaultSelect from "src/components/defaults/DefaultSelect.vue";
-
-defineEmits([
-  // REQUIRED; need to specify some events that your
-  // component will emit through useDialogPluginComponent()
-  ...useDialogPluginComponent.emits,
-]);
-
-const { state, title } = defineProps({
-  state: {
-    type: Object,
-    default: null,
-  },
-  title: {
-    type: Function,
-    default: () => useI18n().t("common.terms.title"),
-  },
-});
-
-const { t } = useI18n();
-const { inputRules } = useInputRules();
-
-const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
-  useDialogPluginComponent();
-
-const formRef = useTemplateRef("formRef");
-
-const { form, getUpdatedFields, hasUpdatedFields } = useFormUpdateTracker({
-  name: state ? state?.name : "",
-  code: state ? state?.code : "",
-  country_id: state ? state?.country_id : null,
-  status: state ? state?.status : "ACTIVE",
-});
-
-const {
-  loading,
-  validationErrors,
-  execute: submitForm,
-} = useSubmitHandler({
-  onSuccess: () => onDialogOK(true),
-  formRef: formRef,
-});
-
-const selectedCountry = ref(null);
-const selectedStatus = ref({
-  label: t("common.status.active"),
-  value: "ACTIVE",
-});
-const statusOptions = ref([
-  { label: t("common.status.active"), value: "ACTIVE" },
-  { label: t("common.status.inactive"), value: "INACTIVE" },
-]);
-
-const onOKClick = async () => {
-  if (state) {
-    await submitForm(() => updateState(getUpdatedFields.value, state.id));
-  } else {
-    await submitForm(() => createState({ ...form }));
-  }
-};
-
-watch(selectedCountry, () => {
-  form.country_id = selectedCountry.value.value;
-});
-
-watch(selectedStatus, () => {
-  form.status = selectedStatus.value.value;
-});
-
-onMounted(async () => {
-  if (state) {
-    selectedStatus.value = statusOptions.value.find(
-      (status) => status.value === state.status,
-    );
-  }
-});
-</script>

src/router/routes/permission.route.js

@@ -9,7 +9,7 @@ export default [
         translate: false,
       },
       requireAuth: true,
-      requiredPermission: "config.user-type",
+      requiredPermission: "franchisor_registrations",
       breadcrumbs: [
         {
           name: "DashboardPage",

src/stores/navigation.js

@@ -131,7 +131,7 @@ export const navigationStore = defineStore("navigation", () => {
       icon: "mdi-shield-key-outline",
       disable: false,
       permission: false,
-      permissionScope: "config.user-type",
+      permissionScope: "franchisor_registrations",
       adminOnly: true,
     },
   ]);