wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

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

This commit is contained in:
Jorge Penadés 2023-08-09 14:31:09 +02:00
parent 9536ce77ac 7d432b60a1
commit ad17737947
9 changed files with 145 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
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([]);
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>

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" />
</QItemSection>
<QItemSection>{{ t(item.title) }}</QItemSection>
<QItemSection side>
<slot name="side" :item="item" />
</QItemSection>
</QItem>
</template>

35
src/components/LeftMenuItemGroup.vue
View File

@ -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>

29
src/components/NavBar.vue
View File

@ -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>

72
src/components/PinnedModules.vue
View File

@ -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>

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

@ -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',

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

@ -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',

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

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

2
src/pages/Dashboard/DashboardMain.vue
View File

@ -90,7 +90,7 @@ const pinnedModules = computed(() => navigation.getPinnedModules());
<i18n>
{
"en": {
"en": {
"pinnedInfo": "Your pinned modules will be shown here..."
},
"es": {