Merge pull request 'refs #5989 btn redirection' (!69) from 5989-redirectSalix into dev

Reviewed-on: verdnatura/salix-front#69
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

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,90 @@
 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() {
+    let section = route.path.substring(1);
+    if (!route.path.includes('/')) return (window.location.href = await getUrl(section));
+    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 + 'dashboard'));
+}
 </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/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>