admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pre-upgrade of client plugins

Browse Source
This commit is contained in:
John Cardinal
2019-11-06 19:02:58 +00:00
parent 990cd4c2ac
commit c65f99fa75
11 changed files with 477 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
ayanova/src/App.vue
View File

@@ -1,36 +1,180 @@
<template>
<v-app>
<v-app-bar app>
<v-toolbar-title class="headline text-uppercase">
<span>Vuetify</span>
<span class="font-weight-light">MATERIAL DESIGN</span>
<v-navigation-drawer v-if="isAuthenticated" v-model="drawer" app>
<v-list dense>
<v-list-item
v-for="item in navItems"
:key="item.route"
:to="item.route"
>
<v-list-item-action>
<v-icon>{{ "fa-" + 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>
</v-list>
</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"></v-app-bar-nav-icon>
<v-toolbar-title style="width: 300px" class="ml-0 pl-4">
<v-icon>{{ appBar.icon }}</v-icon
>&nbsp;
<span>{{ appBar.title }}</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn
text
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
>
<span class="mr-2">Latest Release</span>
</v-btn>
<v-toolbar-items>
<template v-for="item in appBar.menuItems">
<v-btn
class="hidden-xs-only"
icon
v-if="item.surface"
:key="item.key"
:disabled="item.disabled"
@click="clickMenuItem(item)"
>
<v-icon :color="item.color ? item.color : ''">
{{ "fa-" + 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">
<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 }"
>
<v-list-item-action>
<v-icon
v-if="item.icon"
:color="item.color ? item.color : ''"
>{{ "fa-" + 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>
<HelloWorld />
<v-container fluid fill-height>
<v-row justify-center>
<transition name="fade" mode="out-in" @after-leave="afterLeave">
<router-view class="view"></router-view>
</transition>
</v-row>
</v-container>
</v-content>
<v-footer color="primary" padless v-if="!isAuthenticated">
<div>
<a
href="https://ayanova.com"
target="_blank"
style="text-decoration:none"
class="white--text caption"
>
<span>AyaNova ({{ version }}) {{ copyright }}</span>
</a>
</div>
</v-footer>
</v-app>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
/* xeslint-disable */
import aboutInfo from "./api/aboutinfo";
export default {
name: "App",
components: {
HelloWorld
data() {
return {
drawer: null,
appBar: {
isMain: true,
icon: "",
title: "",
helpUrl: "index.html",
menuItems: []
}
};
},
data: () => ({
created() {
//////////////////////////////////
// WIRE UP
// MENU and DIALOG EVENT HANDLERS
// ON GZEVENTBUS
//
})
//
window.$gz.menu.wireUpEventHandlers(this);
window.$gz.dialog.wireUpEventHandlers(this);
},
beforeDestroy() {
//UNWIRE ALL EVENT HANDLERS FROM GZEVENTBUS
window.$gz.eventBus.$off();
},
mounted() {
//redirect to login if not authenticated
if (!this.$store.state.authenticated) {
this.$router.push({ name: "login" });
}
},
computed: {
isAuthenticated() {
return this.$store.state.authenticated === true;
},
navItems() {
return this.$store.state.navItems;
},
copyright() {
return aboutInfo.copyright;
},
version() {
return aboutInfo.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>

2
ayanova/src/api/initialize.js
View File

@@ -144,7 +144,7 @@ export default function initialize() {
if (res.data.timeZoneOffset != localOffset) {
//TODO: localize message and also actually have a fix for it here
//so this should be a confirm prompt but for now will just show it
//for now just show the message
window.$gz.eventBus.$emit(
"notify-info",

2
ayanova/src/assets/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 539 B

After

Width:  |  Height:  |  Size: 11 KiB

145
ayanova/src/components/HelloWorld.vue
View File

@@ -1,132 +1,43 @@
<template>
<v-container>
<v-layout text-center wrap>
<v-flex xs12>
<v-row>
<v-col cols="12">
<v-img
:src="require('../assets/logo.svg')"
class="my-3"
contain
height="200"
position="center top"
></v-img>
</v-flex>
<v-flex mb-4>
<h1 class="display-2 font-weight-bold mb-3">
Welcome to Vuetify
</v-col>
<v-col cols="12" v-if="this.formReady">
<h1 class="display-1 font-weight-bold text-center">
{{ lt("Welcome") }}
</h1>
<p class="subheading font-weight-regular">
For help and collaboration with other Vuetify developers,
<br />please join our online
<a href="https://community.vuetifyjs.com" target="_blank"
>Discord Community</a
>
</p>
</v-flex>
<v-flex mb-5 xs12>
<h2 class="headline font-weight-bold mb-3">What's next?</h2>
<v-layout justify-center>
<a
v-for="(next, i) in whatsNext"
:key="i"
:href="next.href"
class="subheading mx-3"
target="_blank"
>
{{ next.text }}
</a>
</v-layout>
</v-flex>
<v-flex xs12 mb-5>
<h2 class="headline font-weight-bold mb-3">Important Links</h2>
<v-layout justify-center>
<a
v-for="(link, i) in importantLinks"
:key="i"
:href="link.href"
class="subheading mx-3"
target="_blank"
>
{{ link.text }}
</a>
</v-layout>
</v-flex>
<v-flex xs12 mb-5>
<h2 class="headline font-weight-bold mb-3">Ecosystem</h2>
<v-layout justify-center>
<a
v-for="(eco, i) in ecosystem"
:key="i"
:href="eco.href"
class="subheading mx-3"
target="_blank"
>
{{ eco.text }}
</a>
</v-layout>
</v-flex>
</v-layout>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => ({
ecosystem: [
{
text: "vuetify-loader",
href: "https://github.com/vuetifyjs/vuetify-loader"
},
{
text: "github",
href: "https://github.com/vuetifyjs/vuetify"
},
{
text: "awesome-vuetify",
href: "https://github.com/vuetifyjs/awesome-vuetify"
}
],
importantLinks: [
{
text: "Documentation",
href: "https://vuetifyjs.com"
},
{
text: "Chat",
href: "https://community.vuetifyjs.com"
},
{
text: "Made with Vuetify",
href: "https://madewithvuejs.com/vuetify"
},
{
text: "Twitter",
href: "https://twitter.com/vuetifyjs"
},
{
text: "Articles",
href: "https://medium.com/vuetify"
}
],
whatsNext: [
{
text: "Explore components",
href: "https://vuetifyjs.com/components/api-explorer"
},
{
text: "Select a layout",
href: "https://vuetifyjs.com/layout/pre-defined"
},
{
text: "Frequently Asked Questions",
href: "https://vuetifyjs.com/getting-started/frequently-asked-questions"
}
]
})
created() {
window.$gz.locale
.fetch(["Welcome"])
.then(() => (this.formReady = true))
.catch(err => {
this.formReady = true;
window.$gz.errorHandler.handleFormError(err);
});
},
data() {
return { formReady: false };
},
methods: {
lt(ltKey) {
return window.$gz.locale.get(ltKey);
}
}
};
</script>
<style></style>

410
ayanova/src/main.js
View File

@@ -1,206 +1,204 @@
/* eslint-disable */
import "@babel/polyfill";
import "@fortawesome/fontawesome-free/css/all.css";
import "typeface-roboto/index.css";
import Vue from "vue";
//import "./plugins/vuetify";
import Vuetify from "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";
import errorHandler from "./api/errorhandler";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import dayjs from "dayjs";
import UTC from "dayjs/plugin/utc"; // load on demand
dayjs.extend(UTC); // use plugin
import lodash from "./libs/lodash.min.js";
import VuetifyDialog from "vuetify-dialog";
//my libs
import gzeventbus from "./api/eventbus";
import gzmenu from "./api/gzmenu";
import gzdialog from "./api/gzdialog";
import gzutil from "./api/gzutil";
import locale from "./api/locale";
import gzapi from "./api/gzapi";
import gzreport from "./api/gzreport";
import gzform from "./api/gzform";
import gzformcustomtemplate from "./api/form-custom-template";
import authorizationroles from "./api/authorizationroles";
import gztype from "./api/ayatype";
import "@/assets/css/main.css";
//controls
import dateTimeControl from "./components/date-time-control.vue";
import tagPicker from "./components/tag-picker.vue";
import customFieldsControl from "./components/custom-fields-control.vue";
import errorhandler from "./api/errorhandler";
import vuetify from './plugins/vuetify';
/////////////////////////////////////////////////////////////////
// LIBS AND GLOBAL ITEMS
// NOTE: I'm putting them on Window deliberately to be globally available
// some say this is bad only due to if you want to server render the page
// however when I researched that I found it's easily worked around
// as all you need is a "window" global var defined and then it's all good in the hood
// so for convenience and far less fuckery this is the way
//
window.$gz = {
locale: locale,
formCustomTemplate: gzformcustomtemplate,
type: gztype,
role: authorizationroles,
eventBus: gzeventbus,
menu: gzmenu,
dialog: gzdialog,
util: gzutil,
dayjs: dayjs,
_: lodash,
api: gzapi,
form: gzform,
report: gzreport,
errorHandler: errorhandler,
store: store
};
/////////////////////////////////////////////////////////////////
// ERROR HANDLING
//
//**************************************************************
//**************************************************************
//**************************************************************
//DEVELOPMENT MODE HANDLER
//THIS SHOULD BE FALSE IN RELEASE
errorHandler.developmentModeShowErrorsImmediately(true);
//**************************************************************
//**************************************************************
//**************************************************************
Vue.config.errorHandler = errorHandler.handleVueError;
window.onerror = errorHandler.handleGeneralError;
//warnings, only occur by default in debug mode not production
Vue.config.warnHandler = errorHandler.handleVueWarning;
//added for vuetify 2.x to disable annoying prodution mode tip warning
//but commented out for now just to see what it looks like
//Vue.config.productionTip = false;
/////////////////////////////////////////////////////////////////
// AJAX LOADER INDICATOR
//
// Store a copy of the fetch function
var _oldFetch = fetch;
// Create our new version of the fetch function
window.fetch = function() {
// Create hooks
var fetchStart = new Event("fetchStart", {
view: document,
bubbles: true,
cancelable: false
});
var fetchEnd = new Event("fetchEnd", {
view: document,
bubbles: true,
cancelable: false
});
// Pass the supplied arguments to the real fetch function
var fetchCall = _oldFetch.apply(this, arguments);
// Trigger the fetchStart event
document.dispatchEvent(fetchStart);
fetchCall
.then(function() {
// Trigger the fetchEnd event
document.dispatchEvent(fetchEnd);
})
.catch(function() {
// Trigger the fetchEnd event
document.dispatchEvent(fetchEnd);
});
return fetchCall;
};
document.addEventListener("fetchStart", function() {
NProgress.start();
});
document.addEventListener("fetchEnd", function() {
NProgress.done();
});
/////////////////////////////////////////////////////////////////
// FILTERS
//
Vue.filter("capitalize", function vueFilterCapitalize(value) {
if (!value) return "";
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});
Vue.filter("shortdate", function vueFilterShortDate(value) {
if (!value) return "";
var dj = dayjs(value);
return dj.format("YYYY-MM-DD hh:mm:ss A");
});
Vue.filter("currency", function vueFilterCurrency(value) {
if (!value) return "";
return "$" + value;
});
Vue.filter("boolastext", function vueFilterBoolAsText(value) {
if (!value) return "";
return value ? "Yes" : "Nope";
});
/////////////////////////////////////////////////////////////
//GZ COMPONENTS
//
Vue.component("gz-date-time-picker", dateTimeControl);
Vue.component("gz-tag-picker", tagPicker);
Vue.component("gz-custom-fields", customFieldsControl);
////////////////////////////////////////////////////////
//3rd party ui components
//
Vue.use(VuetifyDialog, {
context: {
Vuetify
}
});
/////////////////////////////////////////////////////////////
//DIRECTIVES
//
//Auto focus on forms
Vue.directive("focus", {
// When the bound element is inserted into the DOM...
inserted: function(el) {
// Focus the element
el.focus();
}
});
// console.log(Vue);
// console.log(Vuetify.lang);
// debugger;
/////////////////////////////////////////////////////////////////
// INSTANTIATE
//
new Vue({
vuetify: Vuetify,
router,
store,
vuetify,
render: h => h(App)
}).$mount("#app");
/* eslint-disable */
import "@babel/polyfill";
import "@fortawesome/fontawesome-free/css/all.css";
import "typeface-roboto/index.css";
import Vue from "vue";
//import "./plugins/vuetify";
import Vuetify from "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";
import errorHandler from "./api/errorhandler";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import dayjs from "dayjs";
import UTC from "dayjs/plugin/utc"; // load on demand
dayjs.extend(UTC); // use plugin
import lodash from "./libs/lodash.min.js";
import VuetifyDialog from "vuetify-dialog";
//my libs
import gzeventbus from "./api/eventbus";
import gzmenu from "./api/gzmenu";
import gzdialog from "./api/gzdialog";
import gzutil from "./api/gzutil";
import locale from "./api/locale";
import gzapi from "./api/gzapi";
import gzreport from "./api/gzreport";
import gzform from "./api/gzform";
import gzformcustomtemplate from "./api/form-custom-template";
import authorizationroles from "./api/authorizationroles";
import gztype from "./api/ayatype";
import "@/assets/css/main.css";
//controls
import dateTimeControl from "./components/date-time-control.vue";
import tagPicker from "./components/tag-picker.vue";
import customFieldsControl from "./components/custom-fields-control.vue";
import errorhandler from "./api/errorhandler";
/////////////////////////////////////////////////////////////////
// LIBS AND GLOBAL ITEMS
// NOTE: I'm putting them on Window deliberately to be globally available
// some say this is bad only due to if you want to server render the page
// however when I researched that I found it's easily worked around
// as all you need is a "window" global var defined and then it's all good in the hood
// so for convenience and far less fuckery this is the way
//
window.$gz = {
locale: locale,
formCustomTemplate: gzformcustomtemplate,
type: gztype,
role: authorizationroles,
eventBus: gzeventbus,
menu: gzmenu,
dialog: gzdialog,
util: gzutil,
dayjs: dayjs,
_: lodash,
api: gzapi,
form: gzform,
report: gzreport,
errorHandler: errorhandler,
store: store
};
/////////////////////////////////////////////////////////////////
// ERROR HANDLING
//
//**************************************************************
//**************************************************************
//**************************************************************
//DEVELOPMENT MODE HANDLER
//THIS SHOULD BE FALSE IN RELEASE
errorHandler.developmentModeShowErrorsImmediately(true);
//**************************************************************
//**************************************************************
//**************************************************************
Vue.config.errorHandler = errorHandler.handleVueError;
window.onerror = errorHandler.handleGeneralError;
//warnings, only occur by default in debug mode not production
Vue.config.warnHandler = errorHandler.handleVueWarning;
//added for vuetify 2.x to disable annoying prodution mode tip warning
//but commented out for now just to see what it looks like
//Vue.config.productionTip = false;
/////////////////////////////////////////////////////////////////
// AJAX LOADER INDICATOR
//
// Store a copy of the fetch function
var _oldFetch = fetch;
// Create our new version of the fetch function
window.fetch = function() {
// Create hooks
var fetchStart = new Event("fetchStart", {
view: document,
bubbles: true,
cancelable: false
});
var fetchEnd = new Event("fetchEnd", {
view: document,
bubbles: true,
cancelable: false
});
// Pass the supplied arguments to the real fetch function
var fetchCall = _oldFetch.apply(this, arguments);
// Trigger the fetchStart event
document.dispatchEvent(fetchStart);
fetchCall
.then(function() {
// Trigger the fetchEnd event
document.dispatchEvent(fetchEnd);
})
.catch(function() {
// Trigger the fetchEnd event
document.dispatchEvent(fetchEnd);
});
return fetchCall;
};
document.addEventListener("fetchStart", function() {
NProgress.start();
});
document.addEventListener("fetchEnd", function() {
NProgress.done();
});
/////////////////////////////////////////////////////////////////
// FILTERS
//
Vue.filter("capitalize", function vueFilterCapitalize(value) {
if (!value) return "";
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});
Vue.filter("shortdate", function vueFilterShortDate(value) {
if (!value) return "";
var dj = dayjs(value);
return dj.format("YYYY-MM-DD hh:mm:ss A");
});
Vue.filter("currency", function vueFilterCurrency(value) {
if (!value) return "";
return "$" + value;
});
Vue.filter("boolastext", function vueFilterBoolAsText(value) {
if (!value) return "";
return value ? "Yes" : "Nope";
});
/////////////////////////////////////////////////////////////
//GZ COMPONENTS
//
Vue.component("gz-date-time-picker", dateTimeControl);
Vue.component("gz-tag-picker", tagPicker);
Vue.component("gz-custom-fields", customFieldsControl);
////////////////////////////////////////////////////////
//3rd party ui components
//
Vue.use(VuetifyDialog, {
context: {
Vuetify
}
});
/////////////////////////////////////////////////////////////
//DIRECTIVES
//
//Auto focus on forms
Vue.directive("focus", {
// When the bound element is inserted into the DOM...
inserted: function(el) {
// Focus the element
el.focus();
}
});
// console.log(Vue);
// console.log(Vuetify.lang);
// debugger;
/////////////////////////////////////////////////////////////////
// INSTANTIATE
//
new Vue({
vuetify: Vuetify,
router,
store,
render: h => h(App)
}).$mount("#app");

29
ayanova/src/plugins/vuetify.js
View File

@@ -1,10 +1,37 @@
/* xeslint-disable */
import Vue from "vue";
import Vuetify from "vuetify/lib";
//import myLang from "../api/en";
Vue.use(Vuetify);
export default new Vuetify({
// lang: { locales: { myLang }, current: "myLang" },
theme: {
themes: {
light: {
primary: "#00205B", //Canucks dark blue
secondary: "#00843D", //canucks green
accent: "#db7022", //lighter orangey red, more friendly looking though not as much clarity it seems
//error: "#b71c1c", //dark red, easy to read but not error-y enough possibly
//accent: "#BD491A", //dark orangey red, more clarity, less friendly looking
error: "#ff5252", //lighter red, have to see if it's good for all screens and sizes as it's a bit light but it stands out as an error condition better
disabled: "#e0e0e0"
}
}
},
icons: {
iconfont: "mdi"
iconfont: "fa"
}
});
// export default new Vuetify({
// lang: {
// locales: { zhHans, pl, sv },
// current: 'zhHans',
// },
// })

7
ayanova/src/views/Home.vue
View File

@@ -8,6 +8,13 @@ import HelloWorld from "../components/HelloWorld";
export default {
components: {
HelloWorld
},
beforeCreate() {
window.$gz.eventBus.$emit("menu-change", {
isMain: true,
icon: "fa-home",
title: window.$gz.locale.get("Home")
});
}
};
</script>