From 05b7df9168262e05cd9843e1b5e06ef5995eb84d Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Thu, 30 May 2024 15:34:37 -0300
Subject: [PATCH] Role submodules

---
 src/css/app.scss                              |   2 +-
 src/i18n/locale/en.yml                        |   3 +
 src/i18n/locale/es.yml                        |   3 +
 .../Account/Role/Card/InheritedRoles.vue      |  93 +++++++++-
 src/pages/Account/Role/Card/RoleCard.vue      |  27 ++-
 src/pages/Account/Role/Card/RoleLog.vue       |   2 +-
 .../Account/Role/Card/SubRoleCreateForm.vue   |  51 ++++++
 src/pages/Account/Role/Card/SubRoles.vue      | 160 +++++++++++++++++-
 src/pages/Account/locale/en.yml               |   1 -
 9 files changed, 330 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/Account/Role/Card/SubRoleCreateForm.vue

diff --git a/src/css/app.scss b/src/css/app.scss
index fd5f29600..79234b364 100644
--- a/src/css/app.scss
+++ b/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 {
diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 56c19b184..d617d7172 100644
--- a/src/i18n/locale/en.yml
+++ b/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
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 5b783a538..b3b9587f4 100644
--- a/src/i18n/locale/es.yml
+++ b/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
diff --git a/src/pages/Account/Role/Card/InheritedRoles.vue b/src/pages/Account/Role/Card/InheritedRoles.vue
index cfcf224c7..6b8a6524c 100644
--- a/src/pages/Account/Role/Card/InheritedRoles.vue
+++ b/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>
diff --git a/src/pages/Account/Role/Card/RoleCard.vue b/src/pages/Account/Role/Card/RoleCard.vue
index 7f5a45d8b..c7b5c695d 100644
--- a/src/pages/Account/Role/Card/RoleCard.vue
+++ b/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"
-        searchbar-url="Roles/filter"
-        searchbar-label="Search Role"
-        searchbar-info="You can search by Role id or customer name"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="customRouteRedirectName"
+        :search-redirect="!!customRouteRedirectName"
+        :searchbar-label="t('role.searchRoles')"
+        :searchbar-info="t('role.searchInfo')"
     />
 </template>
diff --git a/src/pages/Account/Role/Card/RoleLog.vue b/src/pages/Account/Role/Card/RoleLog.vue
index 48f5eb23a..20b6dcccf 100644
--- a/src/pages/Account/Role/Card/RoleLog.vue
+++ b/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>
diff --git a/src/pages/Account/Role/Card/SubRoleCreateForm.vue b/src/pages/Account/Role/Card/SubRoleCreateForm.vue
new file mode 100644
index 000000000..89eceed62
--- /dev/null
+++ b/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>
diff --git a/src/pages/Account/Role/Card/SubRoles.vue b/src/pages/Account/Role/Card/SubRoles.vue
index 48f5eb23a..1fb84fe4f 100644
--- a/src/pages/Account/Role/Card/SubRoles.vue
+++ b/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>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 4ede2b543..0a511888b 100644
--- a/src/pages/Account/locale/en.yml
+++ b/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