348 lines
11 KiB
Vue
348 lines
11 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>{{ 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>{{
|
|
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 v-if="subsub.icon">{{ subsub.icon }}</v-icon>
|
|
</v-list-item-action>
|
|
<v-list-item-title
|
|
v-text="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 v-if="subitem.icon">{{ subitem.icon }}</v-icon>
|
|
</v-list-item-action>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{
|
|
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">
|
|
<v-list-item-action v-if="item.icon">
|
|
<v-icon>{{ item.icon }}</v-icon>
|
|
</v-list-item-action>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- end of entire list -->
|
|
</template>
|
|
</v-list>
|
|
<!-- </v-card> -->
|
|
</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>{{ appBar.title }}</span>
|
|
</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<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"
|
|
@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>{{ 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-content>
|
|
<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-content>
|
|
<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";
|
|
|
|
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() {
|
|
this.$root.$gzconfirm = this.$refs.gzconfirm.open;
|
|
this.$root.$gznotify = this.$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
|
|
this.$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 (!this.$store.state.authenticated) {
|
|
this.$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);
|
|
}
|
|
|
|
//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);
|
|
}
|
|
}
|
|
};
|
|
</script>
|