verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 62 Releases Wiki Activity

Merge branch 'dev' into 6076-2FA
gitea/salix-front/pipeline/head There was a failure building this commit Details

This commit is contained in:
Alex Moreno 2023-08-09 11:41:05 +00:00
parent 911327a59b 7d432b60a1
commit 458de4e849
9 changed files with 145 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/LeftMenu.vue
View File

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

3
src/components/LeftMenuItem.vue
View File

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

29
src/components/LeftMenuItemGroup.vue
View File

@ -1,12 +1,7 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import LeftMenuItem from './LeftMenuItem.vue'; import LeftMenuItem from './LeftMenuItem.vue';
const route = useRoute();
const { t } = useI18n();
const props = defineProps({ const props = defineProps({
item: { item: {
type: Object, type: Object,
@ -19,33 +14,9 @@ const props = defineProps({
}); });
const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys 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> </script>
<template> <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"> <template v-for="section in item.children" :key="section.name">
<LeftMenuItem :item="section" /> <LeftMenuItem :item="section" />
</template> </template>
</QExpansionItem>
</template> </template>

29
src/components/NavBar.vue
View File

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

74
src/components/PinnedModules.vue
View File

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

4
src/i18n/en/index.js
View File

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

4
src/i18n/es/index.js
View File

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

7
src/pages/Customer/CustomerCreate.vue
View File

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