From b5e72aec7cd9bf4bbb3b7cef94aa011bd118f68c Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 29 May 2024 08:01:37 -0300
Subject: [PATCH] Wip

---
 src/pages/Account/Role/AccountRoles.vue       |  81 +++++---
 src/pages/Account/Role/AccountRolesFilter.vue | 194 +-----------------
 src/pages/Account/locale/en.yml               |   6 +-
 src/pages/Account/locale/es.yml               |   6 +-
 4 files changed, 76 insertions(+), 211 deletions(-)

diff --git a/src/pages/Account/Role/AccountRoles.vue b/src/pages/Account/Role/AccountRoles.vue
index 2109a3ab4..6f5d929bd 100644
--- a/src/pages/Account/Role/AccountRoles.vue
+++ b/src/pages/Account/Role/AccountRoles.vue
@@ -1,37 +1,82 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
-import { toDate } from 'filters/index';
+import { ref } from 'vue';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
 import CardList from 'src/components/ui/CardList.vue';
 import AccountSummary from '../Card/AccountSummary.vue';
-import { ref } from 'vue';
 import RoleForm from './Card/RoleForm.vue';
+import VnSearchbar from 'components/ui/VnSearchbar.vue';
+import AccountRolesFilter from './AccountRolesFilter.vue';
+
+import { useStateStore } from 'stores/useStateStore';
 
 const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
+
 const roleCreateDialogRef = ref(null);
 
-const openCreateModal = () => {
-    roleCreateDialogRef.value.show();
+const exprBuilder = (param, value) => {
+    switch (param) {
+        case 'search':
+            return /^\d+$/.test(value)
+                ? { id: value }
+                : {
+                      or: [
+                          { name: { like: `%${value}%` } },
+                          { nickname: { like: `%${value}%` } },
+                      ],
+                  };
+        case 'name':
+        case 'description':
+            return { [param]: { like: `%${value}%` } };
+    }
 };
-function getApiUrl() {
-    return new URL(window.location).origin;
-}
-function navigate(event, id) {
+
+const openCreateModal = () => roleCreateDialogRef.value.show();
+
+const getApiUrl = () => new URL(window.location).origin;
+
+const navigate = (event, id) => {
     if (event.ctrlKey || event.metaKey)
         return window.open(`${getApiUrl()}/#/account/${id}/summary`);
     router.push({ path: `/role/${id}/summary` });
-}
+};
 </script>
 
 <template>
+    <template v-if="stateStore.isHeaderMounted()">
+        <Teleport to="#searchbar">
+            <VnSearchbar
+                data-key="RolesList"
+                url="VnRoles"
+                :label="t('role.searchRoles')"
+                :info="t('role.searchInfo')"
+                :expr-builder="exprBuilder"
+            />
+        </Teleport>
+        <Teleport to="#actions-append">
+            <div class="row q-gutter-x-sm">
+                <QBtn
+                    flat
+                    @click="stateStore.toggleRightDrawer()"
+                    round
+                    dense
+                    icon="menu"
+                >
+                    <QTooltip bottom anchor="bottom right">
+                        {{ t('globals.collapseMenu') }}
+                    </QTooltip>
+                </QBtn>
+            </div>
+        </Teleport>
+    </template>
     <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
         <QScrollArea class="fit text-grey-8">
-            <!-- <AccountFilter data-key="RolesList" /> -->
+            <AccountRolesFilter data-key="RolesList" :expr-builder="exprBuilder" />
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
@@ -41,7 +86,7 @@ function navigate(event, id) {
                     <CardList
                         :id="row.id"
                         :key="row.id"
-                        :title="row.clientName"
+                        :title="row.name"
                         @click="navigate($event, row.id)"
                         v-for="row of rows"
                     >
@@ -57,13 +102,6 @@ function navigate(event, id) {
                             </div>
                         </template>
                         <template #actions>
-                            <QBtn
-                                :label="t('globals.description')"
-                                @click.stop
-                                outline
-                                style="margin-top: 15px"
-                            >
-                            </QBtn>
                             <QBtn
                                 :label="t('components.smartCard.openSummary')"
                                 @click.stop="viewSummary(row.id, AccountSummary)"
@@ -85,11 +123,8 @@ function navigate(event, id) {
         <QPageSticky :offset="[20, 20]">
             <QBtn fab icon="add" color="primary" @click="openCreateModal()" />
             <QTooltip>
-                {{ t('account.pageTitles.newRole') }}
+                {{ t('role.newRole') }}
             </QTooltip>
         </QPageSticky>
     </QPage>
 </template>
-<i18n>
-    New rol: Nuevo role
-</i18n>
diff --git a/src/pages/Account/Role/AccountRolesFilter.vue b/src/pages/Account/Role/AccountRolesFilter.vue
index 23b72266c..c4bfeb73a 100644
--- a/src/pages/Account/Role/AccountRolesFilter.vue
+++ b/src/pages/Account/Role/AccountRolesFilter.vue
@@ -1,12 +1,8 @@
 <script setup>
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnSelect from 'components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
-import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -15,211 +11,37 @@ const props = defineProps({
         required: true,
     },
 });
-
-const workers = ref();
-const states = ref();
 </script>
 
 <template>
-    <FetchData url="AccountStates" @on-fetch="(data) => (states = data)" auto-load />
-    <FetchData
-        url="Workers/activeWithInheritedRole"
-        :filter="{ where: { role: 'salesPerson' } }"
-        @on-fetch="(data) => (workers = data)"
-        auto-load
-    />
     <VnFilterPanel :data-key="props.dataKey" :search-button="true">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <strong>{{ t(`role.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>
-        <template #body="{ params, searchFn }">
+        <template #body="{ params }">
             <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput
-                        :label="t('Customer ID')"
-                        v-model="params.clientFk"
+                        :label="t('role.name')"
+                        v-model="params.name"
                         lazy-rules
                         is-outlined
-                    >
-                        <template #prepend>
-                            <QIcon name="badge" size="xs"></QIcon> </template
-                    ></VnInput>
+                    />
                 </QItemSection>
             </QItem>
-            <QItem class="q-mb-sm">
+            <QItem class="q-my-sm">
                 <QItemSection>
                     <VnInput
-                        :label="t('Client Name')"
-                        v-model="params.clientName"
+                        :label="t('role.description')"
+                        v-model="params.description"
                         lazy-rules
                         is-outlined
                     />
                 </QItemSection>
             </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Salesperson')"
-                        v-model="params.salesPersonFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Attender')"
-                        v-model="params.attenderFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!workers">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="workers">
-                    <VnSelect
-                        :label="t('Responsible')"
-                        v-model="params.accountResponsibleFk"
-                        @update:model-value="searchFn()"
-                        :options="workers"
-                        option-value="id"
-                        option-label="name"
-                        emit-value
-                        map-options
-                        use-input
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                        :input-debounce="0"
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem class="q-mb-sm">
-                <QItemSection v-if="!states">
-                    <QSkeleton type="QInput" class="full-width" />
-                </QItemSection>
-                <QItemSection v-if="states">
-                    <VnSelect
-                        :label="t('State')"
-                        v-model="params.accountStateFk"
-                        @update:model-value="searchFn()"
-                        :options="states"
-                        option-value="id"
-                        option-label="description"
-                        emit-value
-                        map-options
-                        hide-selected
-                        dense
-                        outlined
-                        rounded
-                    />
-                </QItemSection>
-            </QItem>
-            <QItem>
-                <QItemSection>
-                    <QCheckbox
-                        v-model="params.myTeam"
-                        :label="t('myTeam')"
-                        toggle-indeterminate
-                    />
-                </QItemSection>
-            </QItem>
-            <QSeparator />
-            <QExpansionItem :label="t('More options')" expand-separator>
-                <!-- <QItem>
-                        <QItemSection>
-                            <qSelect
-                                :label="t('Item')"
-                                v-model="params.itemFk"
-                                :options="items"
-                                :loading="loading"
-                                @filter="filterFn"
-                                @virtual-scroll="onScroll"
-                                option-value="id"
-                                option-label="name"
-                                emit-value
-                                map-options
-                            />
-                        </QItemSection>
-                    </QItem> -->
-                <QItem>
-                    <QItemSection>
-                        <VnInputDate
-                            v-model="params.created"
-                            :label="t('Created')"
-                            is-outlined
-                        />
-                    </QItemSection>
-                </QItem>
-            </QExpansionItem>
         </template>
     </VnFilterPanel>
 </template>
-
-<i18n>
-en:
-    params:
-        search: Contains
-        clientFk: Customer
-        clientName: Customer
-        salesPersonFk: Salesperson
-        attenderFk: Attender
-        accountResponsibleFk: Responsible
-        accountStateFk: State
-        created: Created
-    myTeam: My team
-es:
-    params:
-        search: Contiene
-        clientFk: Cliente
-        clientName: Cliente
-        salesPersonFk: Comercial
-        attenderFk: Asistente
-        accountResponsibleFk: Responsable
-        accountStateFk: Estado
-        created: Creada
-    Customer ID: ID cliente
-    Client Name: Nombre del cliente
-    Salesperson: Comercial
-    Attender: Asistente
-    Responsible: Responsable
-    State: Estado
-    Item: Artículo
-    Created: Creada
-    More options: Más opciones
-    myTeam: Mi equipo
-</i18n>
diff --git a/src/pages/Account/locale/en.yml b/src/pages/Account/locale/en.yml
index 2464d3728..4ede2b543 100644
--- a/src/pages/Account/locale/en.yml
+++ b/src/pages/Account/locale/en.yml
@@ -36,11 +36,15 @@ role:
     pageTitles:
         inheritedRoles: Inherited Roles
         subRoles: Sub Roles
-
     card:
         description: Description
         id: Id
         name: Name
+    newRole: New role
+    searchRoles: Search role
+    searchInfo: Search role by id or name
+    name: Name
+    description: Description
 ldap:
     enableSync: Enable synchronization
     server: Server
diff --git a/src/pages/Account/locale/es.yml b/src/pages/Account/locale/es.yml
index dd242fe63..f7ff72d52 100644
--- a/src/pages/Account/locale/es.yml
+++ b/src/pages/Account/locale/es.yml
@@ -51,7 +51,11 @@ role:
         description: Descripción
         id: Idd
         name: Nombre
-
+    newRole: Nuevo rol
+    searchRoles: Buscar roles
+    searchInfo: Buscar rol por id o nombre
+    name: Nombre
+    description: Descripción
 ldap:
     enableSync: Habilitar sincronización
     server: Servidor