397 lines
13 KiB
Vue
397 lines
13 KiB
Vue
<template>
|
|
<v-app>
|
|
<gznotify ref="gznotify"></gznotify>
|
|
<gzconfirm ref="gzconfirm"></gzconfirm>
|
|
<!-- <gzreportselector ref="gzreportselector"></gzreportselector> -->
|
|
<!-- Width of nav drawer set to allow widest translated text menu item to show which is spanish client service requests item
|
|
and also leave a tiny space to click on outside of nav for galaxy 9 phone (narrowest width supported device) -->
|
|
<v-navigation-drawer
|
|
v-if="isAuthenticated"
|
|
v-model="drawer"
|
|
app
|
|
temporary
|
|
width="345"
|
|
>
|
|
<template v-slot:prepend>
|
|
<div class="subtitle-2 primary--text pt-2 pl-4">
|
|
{{ $store.state.userName }}
|
|
</div>
|
|
</template>
|
|
|
|
<v-list>
|
|
<template v-for="item in navItems">
|
|
<!-- TOP LEVEL can be holders or actions -->
|
|
|
|
<!-- TOP LEVEL HOLDER -->
|
|
<template v-if="!item.route">
|
|
<v-list-group
|
|
:prepend-icon="item.icon"
|
|
:value="false"
|
|
:key="item.key"
|
|
:data-cy="!!$ay.dev ? item.testid : false"
|
|
>
|
|
<template v-slot:activator>
|
|
<!--group activator -->
|
|
<v-list-item-title>{{ $ay.t(item.title) }}</v-list-item-title>
|
|
</template>
|
|
|
|
<!-- TOP LEVEL HOLDER SUBITEMS -->
|
|
<template v-for="subitem in item.navItems">
|
|
<template v-if="!subitem.route">
|
|
<!-- SECOND LEVEL HOLDER -->
|
|
<div class="pl-2" :key="subitem.key">
|
|
<v-list-group
|
|
no-action
|
|
sub-group
|
|
:value="false"
|
|
:key="subitem.key"
|
|
>
|
|
<!-- Second level activator -->
|
|
<template v-slot:activator>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{
|
|
$ay.t(subitem.title)
|
|
}}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</template>
|
|
|
|
<v-list-item
|
|
v-for="subsub in subitem.navItems"
|
|
:key="subsub.key"
|
|
:to="subsub.route"
|
|
>
|
|
<v-list-item-action>
|
|
<v-icon
|
|
:color="item.color ? item.color : ''"
|
|
v-if="subsub.icon"
|
|
>{{ subsub.icon }}</v-icon
|
|
>
|
|
</v-list-item-action>
|
|
<v-list-item-title
|
|
:v-text="$ay.t(subsub.title)"
|
|
></v-list-item-title>
|
|
</v-list-item>
|
|
<!-- was end of v-list-group here -->
|
|
</v-list-group>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<!-- SECOND LEVEL ACTION -->
|
|
<div class="pl-3" :key="subitem.key">
|
|
<v-list-item
|
|
:to="subitem.route"
|
|
:data-cy="!!$ay.dev ? 'nav' + subitem.route : false"
|
|
>
|
|
<v-list-item-action>
|
|
<v-icon
|
|
:color="item.color ? item.color : ''"
|
|
v-if="subitem.icon"
|
|
>{{ subitem.icon }}</v-icon
|
|
>
|
|
</v-list-item-action>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{
|
|
$ay.t(subitem.title)
|
|
}}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</v-list-group>
|
|
<!-- END OF TOP LEVEL HOLDER -->
|
|
</template>
|
|
|
|
<!-- TOP LEVEL ACTION -->
|
|
<template v-else>
|
|
<div :key="item.key">
|
|
<v-list-item
|
|
:to="item.route"
|
|
:data-cy="!!$ay.dev ? item.testid : false"
|
|
>
|
|
<v-list-item-action v-if="item.icon">
|
|
<v-icon :color="item.color ? item.color : ''">{{
|
|
item.icon
|
|
}}</v-icon>
|
|
</v-list-item-action>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ $ay.t(item.title) }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- end of entire list -->
|
|
</template>
|
|
</v-list>
|
|
<template v-slot:append>
|
|
<div>
|
|
<v-btn block to="/login">
|
|
<v-icon left>fa-sign-out-alt</v-icon>{{ $ay.t("Logout") }}</v-btn
|
|
>
|
|
</div>
|
|
</template>
|
|
</v-navigation-drawer>
|
|
<v-app-bar
|
|
v-if="isAuthenticated"
|
|
:color="appBar.isMain ? 'primary' : 'secondary'"
|
|
dark
|
|
fixed
|
|
app
|
|
>
|
|
<v-app-bar-nav-icon
|
|
@click.stop="drawer = !drawer"
|
|
:data-cy="!!$ay.dev ? 'navicon' : false"
|
|
></v-app-bar-nav-icon>
|
|
<v-toolbar-title style="width: 300px" class="ml-0 pl-4">
|
|
<v-icon>{{ appBar.icon }}</v-icon
|
|
>
|
|
<span v-if="appBar.title">{{ $ay.t(appBar.title) }}</span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
text
|
|
icon
|
|
to="/home-notifications"
|
|
:data-cy="!!$ay.dev ? 'notification' : false"
|
|
>
|
|
<v-badge color="deep-purple" :value="newNotificationCount() > 0">
|
|
<template v-slot:badge>
|
|
{{ newNotificationCount() }}
|
|
</template>
|
|
<v-icon>fa-bell</v-icon>
|
|
</v-badge>
|
|
</v-btn>
|
|
|
|
<v-toolbar-items>
|
|
<template v-for="item in appBar.menuItems">
|
|
<v-btn
|
|
:key="item.key"
|
|
class="hidden-xs-only"
|
|
icon
|
|
v-if="item.surface"
|
|
:disabled="item.disabled"
|
|
@click="clickMenuItem(item)"
|
|
:data-cy="!!$ay.dev ? item.key : false"
|
|
>
|
|
<v-icon :color="item.color ? item.color : ''">
|
|
{{ item.icon }}
|
|
</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
|
|
<v-spacer></v-spacer>
|
|
<v-menu bottom float-left>
|
|
<template v-slot:activator="{ on }">
|
|
<v-btn
|
|
text
|
|
icon
|
|
v-on="on"
|
|
:data-cy="!!$ay.dev ? 'contextmenu' : false"
|
|
>
|
|
<v-icon>fa-ellipsis-v</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list>
|
|
<template v-for="(item, index) in appBar.menuItems">
|
|
<v-subheader v-if="item.header" :key="index">
|
|
{{ item.header }}
|
|
</v-subheader>
|
|
<v-divider
|
|
v-else-if="item.divider"
|
|
:key="index"
|
|
:inset="item.inset"
|
|
></v-divider>
|
|
<v-list-item
|
|
v-else
|
|
:key="item.key"
|
|
:disabled="item.disabled"
|
|
:href="item.href"
|
|
:target="item.target"
|
|
@click="clickMenuItem(item)"
|
|
v-bind:class="{ 'hidden-sm-and-up': item.surface }"
|
|
:data-cy="!!$ay.dev ? item.key : false"
|
|
>
|
|
<v-list-item-action>
|
|
<v-icon
|
|
v-if="item.icon"
|
|
:color="item.color ? item.color : ''"
|
|
>{{ item.icon }}</v-icon
|
|
>
|
|
</v-list-item-action>
|
|
<v-list-item-content>
|
|
<v-list-item-title>
|
|
<span>{{ $ay.t(item.title) }}</span>
|
|
</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</template>
|
|
</v-list>
|
|
</v-menu>
|
|
</v-toolbar-items>
|
|
</v-app-bar>
|
|
<v-main>
|
|
<v-container fluid>
|
|
<transition name="fade" mode="out-in" @after-leave="afterLeave">
|
|
<router-view class="view" :key="$route.fullPath"></router-view>
|
|
</transition>
|
|
</v-container>
|
|
</v-main>
|
|
<v-footer
|
|
v-if="!isAuthenticated"
|
|
absolute
|
|
class="font-weight-medium body-2"
|
|
>
|
|
<v-col class="primary py-4 text-center white--text" cols="12">
|
|
<a
|
|
href="https://ayanova.com"
|
|
target="_blank"
|
|
style="text-decoration:none"
|
|
class="primary py-md-4 px-md-12 text-center white--text"
|
|
>
|
|
AyaNova {{ version }} {{ copyright }}
|
|
</a>
|
|
</v-col>
|
|
</v-footer>
|
|
</v-app>
|
|
</template>
|
|
|
|
<script>
|
|
/* Xeslint-disable */
|
|
|
|
import ayaNovaVersion from "./api/ayanova-version";
|
|
import gzconfirm from "./components/gzconfirm";
|
|
import gznotify from "./components/gznotify";
|
|
import openObjectHandler from "./api/open-object-handler";
|
|
import notifyPoll from "./api/notifypoll";
|
|
|
|
export default {
|
|
components: {
|
|
gzconfirm,
|
|
gznotify
|
|
},
|
|
data() {
|
|
return {
|
|
drawer: null,
|
|
appBar: {
|
|
isMain: true,
|
|
icon: "",
|
|
title: "",
|
|
helpUrl: "user-intro",
|
|
menuItems: []
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
//Detect version change, wipe persisted form settings if has changed
|
|
|
|
let currentVersion = window.$gz.clientInfo.version;
|
|
if (currentVersion != window.$gz.store.state.lastClientVersion) {
|
|
window.$gz.store.commit(
|
|
"logItem",
|
|
"##### New version detected ##### cleared form settings cache (" +
|
|
window.$gz.store.state.lastClientVersion +
|
|
" -> " +
|
|
currentVersion +
|
|
")"
|
|
);
|
|
window.$gz.store.commit("setLastClientVersion", currentVersion);
|
|
window.$gz.store.commit("clearAllFormSettings");
|
|
}
|
|
|
|
//////////////////////////////////
|
|
// WIRE UP
|
|
// EVENT HANDLERS ON GZEVENTBUS
|
|
//
|
|
//
|
|
window.$gz.menu.wireUpEventHandlers(this);
|
|
window.$gz.dialog.wireUpEventHandlers(this);
|
|
openObjectHandler.wireUpEventHandlers(this);
|
|
window.$gz.translation.setVuetifyDefaultLanguageElements(this);
|
|
},
|
|
beforeDestroy() {
|
|
//UNWIRE ALL EVENT HANDLERS FROM GZEVENTBUS
|
|
window.$gz.eventBus.$off();
|
|
},
|
|
mounted() {
|
|
let vm = this;
|
|
vm.$vuetify.theme.dark = vm.$store.state.darkMode;
|
|
vm.$root.$gzconfirm = vm.$refs.gzconfirm.open;
|
|
vm.$root.$gznotify = vm.$refs.gznotify.addNotification;
|
|
|
|
//weird bastardization thing
|
|
//basically I want to access $gz in vue components where I can't access Window
|
|
//this smells bad but it works
|
|
vm.$root.$gz = window.$gz;
|
|
|
|
// //Capture open object type and id if present
|
|
// //localhost:8080/login?type=2&id=22
|
|
|
|
// if (window.location.search) {
|
|
// //https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
|
|
// var searchParams = new URLSearchParams(window.location.search);
|
|
// var openObject = {};
|
|
// //data should be format for open-object-handler
|
|
// // { type: [AYATYPE], id: [RECORDID] }
|
|
// if (searchParams.has("type")) {
|
|
// openObject.type = Number(searchParams.get("type"));
|
|
// if (searchParams.has("id")) {
|
|
// openObject.id = Number(searchParams.get("id"));
|
|
// }
|
|
// window.$gz.store.commit("setOpenObject", openObject);
|
|
// }
|
|
// }
|
|
|
|
//redirect to login if not authenticated
|
|
if (!vm.$store.state.authenticated) {
|
|
vm.$router.push("login");
|
|
} else {
|
|
//this can be safely called any time, it checks if there is an open object in store and
|
|
//opens it or if not just returns
|
|
// window.$gz.eventBus.$emit("openobject", null);
|
|
}
|
|
|
|
//RELOAD / REFRESH HANDLING
|
|
//Restart notification polling due to refresh?
|
|
if (window.$gz.store.state.authenticated) {
|
|
notifyPoll.startPolling();
|
|
}
|
|
|
|
//FUTURE: If need to detect a reload, this works reliably
|
|
//OK if here then is this a reliable way to detect a reload or refresh or re-open of the app from a closed window but still authenticated?
|
|
//console.log("APP.VUE::Mounted=>RELOAD DETECTED?");
|
|
},
|
|
computed: {
|
|
isAuthenticated() {
|
|
return this.$store.state.authenticated === true;
|
|
},
|
|
navItems() {
|
|
return this.$store.state.navItems;
|
|
},
|
|
copyright() {
|
|
return ayaNovaVersion.copyright;
|
|
},
|
|
version() {
|
|
return ayaNovaVersion.version;
|
|
},
|
|
helpUrl() {
|
|
return this.$store.state.helpUrl;
|
|
}
|
|
},
|
|
props: {
|
|
source: String
|
|
},
|
|
methods: {
|
|
afterLeave() {
|
|
this.$root.$emit("triggerScroll");
|
|
},
|
|
clickMenuItem(item) {
|
|
window.$gz.eventBus.$emit("menu-click", item);
|
|
},
|
|
newNotificationCount() {
|
|
return this.$store.state.newNotificationCount;
|
|
}
|
|
}
|
|
};
|
|
</script>
|