Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into 5986-redisgnDescriptors

src/components/LeftMenu.vue

@@ -55,10 +55,6 @@ function addChildren(module, route, parent) {
     }
 }
 
-const pinnedItems = computed(() => {
-    return items.value.filter((item) => item.isPinned);
-});
-
 const items = ref([]);
 function getRoutes() {
     if (props.source === 'main') {
@@ -111,52 +107,72 @@ async function togglePinned(item, event) {
         message: t('globals.dataSaved'),
         type: 'positive',
     });
-}
+};
+function firstLower(str) {
+    return str[0].toLowerCase() + str.slice(1);
+};
 </script>
 
 <template>
     <QList padding class="column-max-width">
         <template v-if="$props.source === 'main'">
-            <QItemLabel header>
-                {{ t('globals.pinnedModules') }}
-            </QItemLabel>
-            <template v-for="item in pinnedItems" :key="item.name">
-                <template v-if="item.children">
-                    <LeftMenuItemGroup :item="item" group="pinnedModules" class="pinned">
-                        <template #side>
-                            <QBtn
-                                v-if="item.isPinned === true"
-                                @click="togglePinned(item, $event)"
-                                icon="remove_circle"
-                                size="xs"
-                                flat
-                                round
-                            >
-                                <QTooltip>{{
-                                    t('components.leftMenu.removeFromPinned')
-                                }}</QTooltip>
-                            </QBtn>
-                            <QBtn
-                                v-if="item.isPinned === false"
-                                @click="togglePinned(item, $event)"
-                                icon="push_pin"
-                                size="xs"
-                                flat
-                                round
-                            >
-                                <QTooltip>{{
-                                    t('components.leftMenu.addToPinned')
-                                }}</QTooltip>
-                            </QBtn>
-                        </template>
-                    </LeftMenuItemGroup>
-                </template>
-
-                <LeftMenuItem v-if="!item.children" :item="item" />
-            </template>
-            <QSeparator />
-            <QExpansionItem :label="t('moduleIndex.allModules')">
+            <template v-if="this.$route.matched[1].name === 'Dashboard'">
+                <QItem class="header">
+                    <QItemSection avatar>
+                        <QIcon name="view_module" />
+                    </QItemSection>
+                    <QItemSection> {{ t('globals.modules') }}</QItemSection>
+                </QItem>
+                <QSeparator />
                 <template v-for="item in items" :key="item.name">
+                    <template v-if="item.children">
+                        <LeftMenuItem :item="item" group="modules">
+                            <template #side>
+                                <QBtn
+                                    v-if="item.isPinned === true"
+                                    @click="togglePinned(item, $event)"
+                                    icon="remove_circle"
+                                    size="xs"
+                                    flat
+                                    round
+                                >
+                                    <QTooltip>
+                                        {{ t('components.leftMenu.removeFromPinned') }}
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
+                                    v-if="item.isPinned === false"
+                                    @click="togglePinned(item, $event)"
+                                    icon="push_pin"
+                                    size="xs"
+                                    flat
+                                    round
+                                >
+                                    <QTooltip>
+                                        {{ t('components.leftMenu.addToPinned') }}
+                                    </QTooltip>
+                                </QBtn>
+                            </template>
+                        </LeftMenuItem>
+                    </template>
+                </template>
+            </template>
+
+            <template v-for="item in items" :key="item.name">
+                <template v-if="item.name === this.$route.matched[1].name">
+                    <QItem class="header">
+                        <QItemSection avatar v-if="item.icon">
+                            <QIcon :name="item.icon" />
+                        </QItemSection>
+                        <QItemSection avatar v-if="!item.icon">
+                            <QIcon name="disabled_by_default" />
+                        </QItemSection>
+                        <QItemSection>{{ t(item.title) }}</QItemSection>
+                        <QItemSection side>
+                            <slot name="side" :item="item" />
+                        </QItemSection>
+                    </QItem>
+                    <QSeparator />
                     <template v-if="item.children">
                         <LeftMenuItemGroup :item="item" group="modules">
                             <template #side>
@@ -188,8 +204,7 @@ async function togglePinned(item, event) {
                         </LeftMenuItemGroup>
                     </template>
                 </template>
-            </QExpansionItem>
-            <QSeparator />
+            </template>
         </template>
         <template v-if="$props.source === 'card'">
             <template v-for="item in items" :key="item.name">
@@ -210,4 +225,7 @@ async function togglePinned(item, event) {
 .column-max-width {
     max-width: 256px;
 }
+.header {
+    color: #999999;
+}
 </style>

src/components/LeftMenuItem.vue

@@ -22,5 +22,8 @@ const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
             <QIcon name="disabled_by_default" />
         </QItemSection>
         <QItemSection>{{ t(item.title) }}</QItemSection>
+        <QItemSection side>
+            <slot name="side" :item="item" />
+        </QItemSection>
     </QItem>
 </template>

src/components/LeftMenuItemGroup.vue

@@ -1,12 +1,7 @@
 <script setup>
 import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { useI18n } from 'vue-i18n';
 import LeftMenuItem from './LeftMenuItem.vue';
 
-const route = useRoute();
-const { t } = useI18n();
-
 const props = defineProps({
     item: {
         type: Object,
@@ -19,33 +14,9 @@ const props = defineProps({
 });
 
 const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
-const isOpened = computed(() => {
-    const { matched } = route;
-    const { name } = item.value;
-
-    return matched.some((item) => item.name === name);
-});
 </script>
 <template>
-    <QExpansionItem
-        :group="props.group"
-        active-class="text-primary"
-        :label="item.title"
-        :to="{ name: item.name }"
-        expand-separator
-        :default-opened="isOpened"
-    >
-        <template #header>
-            <QItemSection avatar>
-                <QIcon :name="item.icon"></QIcon>
-            </QItemSection>
-            <QItemSection>{{ t(item.title) }}</QItemSection>
-            <QItemSection side>
-                <slot name="side" :item="item" />
-            </QItemSection>
-        </template>
-        <template v-for="section in item.children" :key="section.name">
-            <LeftMenuItem :item="section" />
-        </template>
-    </QExpansionItem>
+    <template v-for="section in item.children" :key="section.name">
+        <LeftMenuItem :item="section" />
+    </template>
 </template>

src/components/NavBar.vue

@@ -1,21 +1,23 @@
 <script setup>
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useSession } from 'src/composables/useSession';
-import UserPanel from 'components/UserPanel.vue';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
+import { useQuasar } from 'quasar';
 import PinnedModules from './PinnedModules.vue';
+import UserPanel from 'components/UserPanel.vue';
 
 const { t } = useI18n();
 const session = useSession();
 const stateStore = useStateStore();
+const quasar = useQuasar();
 const state = useState();
 const user = state.getUser();
 const token = session.getToken();
-const appName = 'Lilium';
-
 onMounted(() => stateStore.setMounted());
+
+const pinnedModulesRef = ref();
 </script>
 
 <template>
@@ -56,11 +58,21 @@ onMounted(() => stateStore.setMounted());
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
+                <QBtn
+                    flat
+                    v-if="!quasar.platform.is.mobile"
+                    @click="pinnedModulesRef.redirect($route.params.id)"
+                    icon="more_up"
+                >
+                    <QTooltip>
+                        {{ t('Go to Salix') }}
+                    </QTooltip>
+                </QBtn>
                 <QBtn id="pinnedModules" icon="apps" flat dense rounded>
                     <QTooltip bottom>
                         {{ t('globals.pinnedModules') }}
                     </QTooltip>
-                    <PinnedModules />
+                    <PinnedModules ref="pinnedModulesRef" />
                 </QBtn>
                 <QBtn rounded dense flat no-wrap id="user">
                     <QAvatar size="lg">
@@ -80,3 +92,10 @@ onMounted(() => stateStore.setMounted());
         </QToolbar>
     </QHeader>
 </template>
+
+<i18n>
+en:
+    Go to Salix: Go to Salix
+es:
+    Go to Salix: Ir a Salix
+</i18n>

src/components/PinnedModules.vue

@@ -2,69 +2,91 @@
 import { onMounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useNavigationStore } from 'src/stores/useNavigationStore';
+import { getUrl } from 'src/composables/getUrl';
+import { useRoute } from 'vue-router';
 
 const navigation = useNavigationStore();
 const { t } = useI18n();
+const route = useRoute();
 
 onMounted(() => {
     navigation.fetchPinned();
 });
 
+defineExpose({
+    redirect,
+});
+
 const pinnedModules = computed(() => navigation.getPinnedModules());
+
+async function redirect() {
+    if (route.path == '/dashboard') return (window.location.href = await getUrl(''));
+    let section = route.path.substring(1);
+    section = section.substring(0, section.indexOf('/'));
+
+    if (route?.params?.id)
+        return (window.location.href = await getUrl(
+            `${section}/${route.params.id}/summary`
+        ));
+    return (window.location.href = await getUrl(section + '/index'));
+}
 </script>
 
 <template>
-    <QMenu
-        anchor="bottom left"
-        class="row q-pa-md q-col-gutter-lg"
-        max-width="350px"
-        max-height="400px"
-    >
-        <template v-if="pinnedModules.length">
-            <div
-                v-for="item of pinnedModules"
-                :key="item.title"
-                class="row no-wrap q-pa-xs flex-item"
+    <QMenu anchor="bottom left" max-width="300px" max-height="400px">
+        <div v-if="pinnedModules.length >= 0" class="row justify-around q-pa-md">
+            <QBtn
+                flat
+                stack
+                size="lg"
+                icon="more_up"
+                class="col-5"
+                @click="redirect($route.params.id)"
             >
+                <div class="text-center button-text">Salix</div>
+            </QBtn>
+            <QBtn flat stack size="lg" icon="home" class="col-5" to="/">
+                <div class="text-center button-text">{{ t('Home') }}</div>
+            </QBtn>
+            <div class="row col-12 justify-around q-mt-md">
                 <QBtn
-                    align="evenly"
-                    padding="16px"
                     flat
                     stack
                     size="lg"
                     :icon="item.icon"
                     color="primary"
-                    class="col-4 button"
+                    class="col-5"
                     :to="{ name: item.name }"
+                    v-for="item of pinnedModules"
+                    :key="item.title"
                 >
                     <div class="text-center text-primary button-text">
                         {{ t(item.title) }}
                     </div>
                 </QBtn>
             </div>
-        </template>
-        <template v-else>
+        </div>
+        <div v-else>
             <div
                 class="row no-wrap q-pa-xs flex-item text-center text-grey-5"
                 style="min-width: 200px"
             >
                 {{ t('globals.noPinnedModules') }}
             </div>
-        </template>
+        </div>
     </QMenu>
 </template>
 
 <style lang="scss" scoped>
-.flex-item {
-    width: 100px;
-}
-.button {
-    width: 100%;
-    line-height: normal;
-    align-items: center;
-}
 .button-text {
     font-size: 10px;
     margin-top: 5px;
 }
 </style>
+
+<i18n>
+en:
+    Home: Home
+es:
+    Home: Inicio
+</i18n>

src/i18n/en/index.js

@@ -9,6 +9,7 @@ export default {
         backToDashboard: 'Return to dashboard',
         notifications: 'Notifications',
         userPanel: 'User panel',
+        modules: 'Modules',
         pinnedModules: 'Pinned modules',
         darkMode: 'Dark mode',
         logOut: 'Log out',
@@ -32,9 +33,6 @@ export default {
         pleaseWait: 'Please wait...',
         noPinnedModules: 'You have dont have any pinned modules',
     },
-    moduleIndex: {
-        allModules: 'All modules',
-    },
     errors: {
         statusUnauthorized: 'Access denied',
         statusInternalServerError: 'An internal server error has ocurred',

src/i18n/es/index.js

@@ -9,6 +9,7 @@ export default {
         backToDashboard: 'Volver al tablón',
         notifications: 'Notificaciones',
         userPanel: 'Panel de usuario',
+        modules: 'Módulos',
         pinnedModules: 'Módulos fijados',
         darkMode: 'Modo oscuro',
         logOut: 'Cerrar sesión',
@@ -32,9 +33,6 @@ export default {
         pleaseWait: 'Por favor, espera...',
         noPinnedModules: 'No has fijado ningún módulo',
     },
-    moduleIndex: {
-        allModules: 'Todos los módulos',
-    },
     errors: {
         statusUnauthorized: 'Acceso denegado',
         statusInternalServerError: 'Ha ocurrido un error interno del servidor',

src/pages/Customer/CustomerCreate.vue

@@ -5,12 +5,7 @@ const customer = reactive({
     name: '',
 });
 
-watch(
-    () => customer.name,
-    () => {
-        console.log('customer.name changed');
-    }
-);
+watch(() => customer.name);
 </script>
 
 <template>