Role submodules

src/css/app.scss

@@ -76,7 +76,7 @@ select:-webkit-autofill {
 }
 
 .color-vn-label {
-    color: var(--vn-label);
+    color: var(--vn-label-color);
 }
 
 .color-vn-text {

src/i18n/locale/en.yml

@@ -17,6 +17,7 @@ globals:
     date: Date
     dataSaved: Data saved
     dataDeleted: Data deleted
+    delete: Delete
     search: Search
     changes: Changes
     dataCreated: Data created
@@ -101,6 +102,8 @@ globals:
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
         role: Role
+        subRoles: Subroles
+        inheritedRoles: Inherited Roles
     created: Created
     worker: Worker
     now: Now

src/i18n/locale/es.yml

@@ -17,6 +17,7 @@ globals:
     date: Fecha
     dataSaved: Datos guardados
     dataDeleted: Datos eliminados
+    delete: Eliminar
     search: Buscar
     changes: Cambios
     dataCreated: Datos creados
@@ -101,6 +102,8 @@ globals:
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
         role: Role
+        subRoles: Subroles
+        inheritedRoles: Roles heredados
     created: Fecha creación
     worker: Trabajador
     now: Ahora

src/pages/Account/Role/Card/InheritedRoles.vue

@@ -1,6 +1,95 @@
 <script setup>
-import VnLog from 'src/components/common/VnLog.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { computed, ref, watch } from 'vue';
+
+import VnPaginate from 'components/ui/VnPaginate.vue';
+
+import { useArrayData } from 'composables/useArrayData';
+
+const route = useRoute();
+const router = useRouter();
+
+const paginateRef = ref(null);
+
+const arrayData = useArrayData('InheritedRoles');
+const store = arrayData.store;
+
+const data = computed(() => {
+    const dataCopy = store.data;
+    return dataCopy.sort((a, b) => a.inherits?.name.localeCompare(b.inherits?.name));
+});
+
+const filter = computed(() => ({
+    where: { role: route.params.id },
+    include: {
+        relation: 'inherits',
+        scope: {
+            fields: ['id', 'name', 'description'],
+        },
+    },
+}));
+
+const urlPath = computed(() => 'RoleRoles');
+
+const columns = computed(() => [
+    {
+        name: 'name',
+    },
+]);
+
+watch(
+    () => route.params.id,
+    () => {
+        store.url = urlPath.value;
+        store.filter = filter.value;
+        fetchSubRoles();
+    }
+);
+
+const fetchSubRoles = () => paginateRef.value.fetch();
+
+const redirectToRoleSummary = (id) =>
+    router.push({ name: 'RoleSummary', params: { id } });
 </script>
+
 <template>
-    <VnLog model="Account"></VnLog>
+    <QPage class="column items-center q-pa-md">
+        <div class="full-width" style="max-width: 400px">
+            <VnPaginate
+                ref="paginateRef"
+                data-key="InheritedRoles"
+                :filter="filter"
+                :url="urlPath"
+                auto-load
+            >
+                <template #body>
+                    <QTable :rows="data" :columns="columns" hide-header>
+                        <template #body="{ row }">
+                            <QTr
+                                @click="redirectToRoleSummary(row.inherits?.id)"
+                                class="cursor-pointer"
+                            >
+                                <QTd>
+                                    <div class="column">
+                                        <span>{{ row.inherits?.name }}</span>
+                                        <span class="color-vn-label">{{
+                                            row.inherits?.description
+                                        }}</span>
+                                    </div>
+                                </QTd>
+                            </QTr>
+                        </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+        </div>
+    </QPage>
 </template>
+
+<i18n>
+es:
+    Role removed. Changes will take a while to fully propagate.: Rol eliminado. Los cambios tardaran un tiempo en propagarse completamente.
+    Role added! Changes will take a while to fully propagate.: ¡Rol añadido! Los cambios tardaran un tiempo en propagarse completamente.
+    El rol va a ser eliminado: Role will be removed
+    ¿Seguro que quieres continuar?: Are you sure you want to continue?
+</i18n>

src/pages/Account/Role/Card/RoleCard.vue

@@ -1,15 +1,32 @@
 <script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
 import VnCard from 'components/common/VnCard.vue';
 import RoleDescriptor from './RoleDescriptor.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routeName = computed(() => route.name);
+const customRouteRedirectName = computed(() => routeName.value);
+const searchBarDataKeys = {
+    RoleSummary: 'RoleSummary',
+    RoleBasicData: 'RoleBasicData',
+    SubRoles: 'SubRoles',
+    InheritedRoles: 'InheritedRoles',
+    RoleLog: 'RoleLog',
+};
 </script>
 <template>
     <VnCard
         data-key="Role"
-        base-url="VnRoles"
         :descriptor="RoleDescriptor"
-        searchbar-data-key="RoleList"
+        :search-data-key="searchBarDataKeys[routeName]"
-        searchbar-url="Roles/filter"
+        :search-custom-route-redirect="customRouteRedirectName"
-        searchbar-label="Search Role"
+        :search-redirect="!!customRouteRedirectName"
-        searchbar-info="You can search by Role id or customer name"
+        :searchbar-label="t('role.searchRoles')"
+        :searchbar-info="t('role.searchInfo')"
     />
 </template>

src/pages/Account/Role/Card/RoleLog.vue

@@ -2,5 +2,5 @@
 import VnLog from 'src/components/common/VnLog.vue';
 </script>
 <template>
-    <VnLog model="VnRoles"></VnLog>
+    <VnLog model="Role" url="/RoleLogs"></VnLog>
 </template>

src/pages/Account/Role/Card/SubRoleCreateForm.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import VnSelect from 'src/components/common/VnSelect.vue';
+import FetchData from 'components/FetchData.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import FormPopup from 'components/FormPopup.vue';
+
+const emit = defineEmits(['onSubmitCreateSubrole']);
+
+const { t } = useI18n();
+const route = useRoute();
+
+const subRoleFormData = reactive({
+    inheritsFrom: null,
+    role: route.params.id,
+});
+
+const rolesOptions = ref([]);
+</script>
+
+<template>
+    <FetchData
+        url="VnRoles"
+        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
+        auto-load
+        @on-fetch="(data) => (rolesOptions = data)"
+    />
+    <FormPopup
+        model="ZoneWarehouse"
+        @on-submit="emit('onSubmitCreateSubrole', subRoleFormData)"
+    >
+        <template #form-inputs>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelect
+                        :label="t('account.card.role')"
+                        v-model="subRoleFormData.inheritsFrom"
+                        :options="rolesOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        :required="true"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormPopup>
+</template>

src/pages/Account/Role/Card/SubRoles.vue

@@ -1,6 +1,162 @@
 <script setup>
-import VnLog from 'src/components/common/VnLog.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { computed, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import SubRoleCreateForm from './SubRoleCreateForm.vue';
+
+import { useVnConfirm } from 'composables/useVnConfirm';
+import { useArrayData } from 'composables/useArrayData';
+import useNotify from 'src/composables/useNotify.js';
+import axios from 'axios';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const { openConfirmationModal } = useVnConfirm();
+const { notify } = useNotify();
+
+const paginateRef = ref(null);
+const createSubRoleDialogRef = ref(null);
+
+const arrayData = useArrayData('SubRoles');
+const store = arrayData.store;
+
+const data = computed(() => {
+    const dataCopy = store.data;
+    return dataCopy.sort((a, b) => a.inherits?.name.localeCompare(b.inherits?.name));
+});
+
+const filter = computed(() => ({
+    where: { role: route.params.id },
+    include: {
+        relation: 'inherits',
+        scope: {
+            fields: ['id', 'name', 'description'],
+        },
+    },
+}));
+
+const urlPath = computed(() => `RoleInherits`);
+
+const columns = computed(() => [
+    {
+        name: 'name',
+    },
+    {
+        name: 'action',
+    },
+]);
+
+const deleteSubRole = async (row) => {
+    try {
+        await axios.delete(`${urlPath.value}/${row.id}`);
+        fetchSubRoles();
+        notify(
+            t('Role removed. Changes will take a while to fully propagate.'),
+            'positive'
+        );
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+const createSubRole = async (subRoleFormData) => {
+    try {
+        await axios.post(urlPath.value, subRoleFormData);
+        notify(
+            t('Role added! Changes will take a while to fully propagate.'),
+            'positive'
+        );
+        fetchSubRoles();
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+watch(
+    () => route.params.id,
+    () => {
+        store.url = urlPath.value;
+        store.filter = filter.value;
+        fetchSubRoles();
+    }
+);
+
+const fetchSubRoles = () => paginateRef.value.fetch();
+
+const openCreateSubRoleForm = () => createSubRoleDialogRef.value.show();
+
+const redirectToRoleSummary = (id) =>
+    router.push({ name: 'RoleSummary', params: { id } });
 </script>
+
 <template>
-    <VnLog model="VnRoles"></VnLog>
+    <QPage class="column items-center q-pa-md">
+        <div class="full-width" style="max-width: 400px">
+            <VnPaginate
+                ref="paginateRef"
+                data-key="SubRoles"
+                :filter="filter"
+                :url="urlPath"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QTable :rows="data" :columns="columns" hide-header>
+                        <template #body="{ row, rowIndex }">
+                            <QTr
+                                @click="redirectToRoleSummary(row.inherits?.id)"
+                                class="cursor-pointer"
+                            >
+                                <QTd>
+                                    <div class="column">
+                                        <span>{{ row.inherits?.name }}</span>
+                                        <span class="color-vn-label">{{
+                                            row.inherits?.description
+                                        }}</span>
+                                    </div>
+                                </QTd>
+                                <QTd style="width: 50px !important">
+                                    <QIcon
+                                        name="delete"
+                                        size="sm"
+                                        class="cursor-pointer"
+                                        color="primary"
+                                        @click.stop.prevent="
+                                            openConfirmationModal(
+                                                t('El rol va a ser eliminado'),
+                                                t('¿Seguro que quieres continuar?'),
+                                                () => deleteSubRole(row, rows, rowIndex)
+                                            )
+                                        "
+                                    >
+                                        <QTooltip>
+                                            {{ t('globals.delete') }}
+                                        </QTooltip>
+                                    </QIcon>
+                                </QTd>
+                            </QTr>
+                        </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+        </div>
+        <QDialog ref="createSubRoleDialogRef">
+            <SubRoleCreateForm @on-submit-create-subrole="createSubRole" />
+        </QDialog>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn fab icon="add" color="primary" @click="openCreateSubRoleForm()">
+                <QTooltip>{{ t('warehouses.add') }}</QTooltip>
+            </QBtn>
+        </QPageSticky>
+    </QPage>
 </template>
+
+<i18n>
+es:
+    Role removed. Changes will take a while to fully propagate.: Rol eliminado. Los cambios tardaran un tiempo en propagarse completamente.
+    Role added! Changes will take a while to fully propagate.: ¡Rol añadido! Los cambios tardaran un tiempo en propagarse completamente.
+    El rol va a ser eliminado: Role will be removed
+    ¿Seguro que quieres continuar?: Are you sure you want to continue?
+</i18n>

src/pages/Account/locale/en.yml

@@ -54,7 +54,6 @@ ldap:
     groupDN: Group DN
     testConnection: Test connection
     success: LDAP connection established!
-
 samba:
     enableSync: Enable synchronization
     domainController: Domain controller