124 lines
3.9 KiB
Vue
124 lines
3.9 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useState } from 'src/composables/useState';
|
|
import { useStateStore } from 'stores/useStateStore';
|
|
import { useStateQueryStore } from 'src/stores/useStateQueryStore';
|
|
import { useQuasar } from 'quasar';
|
|
import PinnedModules from './PinnedModules.vue';
|
|
import UserPanel from 'components/UserPanel.vue';
|
|
import VnBreadcrumbs from './common/VnBreadcrumbs.vue';
|
|
import VnAvatar from './ui/VnAvatar.vue';
|
|
|
|
const { t } = useI18n();
|
|
const stateStore = useStateStore();
|
|
const quasar = useQuasar();
|
|
const stateQuery = useStateQueryStore();
|
|
const state = useState();
|
|
const user = state.getUser();
|
|
const appName = 'Lilium';
|
|
|
|
onMounted(() => stateStore.setMounted());
|
|
|
|
const pinnedModulesRef = ref();
|
|
</script>
|
|
|
|
<template>
|
|
<QHeader color="white" elevated>
|
|
<QToolbar class="q-py-sm q-px-md">
|
|
<QBtn
|
|
@click="stateStore.toggleLeftDrawer()"
|
|
icon="dock_to_right"
|
|
round
|
|
dense
|
|
flat
|
|
>
|
|
<QTooltip bottom anchor="bottom right">
|
|
{{ t('globals.collapseMenu') }}
|
|
</QTooltip>
|
|
</QBtn>
|
|
<RouterLink to="/">
|
|
<QBtn color="primary" flat round v-if="!quasar.platform.is.mobile">
|
|
<QAvatar square size="md">
|
|
<QImg
|
|
src="~/assets/salix_icon.svg"
|
|
:alt="appName"
|
|
spinner-color="primary"
|
|
/>
|
|
</QAvatar>
|
|
<QTooltip bottom>
|
|
{{ t('globals.backToDashboard') }}
|
|
</QTooltip>
|
|
</QBtn>
|
|
</RouterLink>
|
|
<VnBreadcrumbs v-if="$q.screen.gt.sm" />
|
|
<QSpinner
|
|
color="primary"
|
|
class="q-ml-md"
|
|
:class="{
|
|
'no-visible': !stateQuery.isLoading().value,
|
|
}"
|
|
size="xs"
|
|
/>
|
|
<QSpace />
|
|
<div id="searchbar" class="searchbar"></div>
|
|
<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
|
|
:class="{ 'q-pa-none': quasar.platform.is.mobile }"
|
|
id="pinnedModules"
|
|
icon="apps"
|
|
flat
|
|
dense
|
|
rounded
|
|
>
|
|
<QTooltip bottom>
|
|
{{ t('globals.pinnedModules') }}
|
|
</QTooltip>
|
|
<PinnedModules ref="pinnedModulesRef" />
|
|
</QBtn>
|
|
<QBtn class="q-pa-none" rounded dense flat no-wrap id="user">
|
|
<VnAvatar
|
|
:worker-id="user.id"
|
|
:title="user.name"
|
|
size="lg"
|
|
color="transparent"
|
|
/>
|
|
<QTooltip bottom>
|
|
{{ t('globals.userPanel') }}
|
|
</QTooltip>
|
|
<UserPanel />
|
|
</QBtn>
|
|
<div id="actions-append"></div>
|
|
</div>
|
|
</QToolbar>
|
|
<VnBreadcrumbs v-if="$q.screen.lt.md" class="q-ml-md" />
|
|
</QHeader>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.searchbar {
|
|
width: max-content;
|
|
}
|
|
.q-header {
|
|
background-color: var(--vn-section-color);
|
|
}
|
|
</style>
|
|
<i18n>
|
|
en:
|
|
Go to Salix: Go to Salix
|
|
es:
|
|
Go to Salix: Ir a Salix
|
|
</i18n>
|