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

Initial working new notify - needs sprucing up but working!

Browse Source
This commit is contained in:
John Cardinal
2019-11-06 23:25:24 +00:00
parent c65f99fa75
commit d8c0d73597
12 changed files with 278 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ayanova/src/App.vue
View File

@@ -1,5 +1,8 @@
<template>
<v-app>
<gznotify ref="gznotify"></gznotify>
<!-- <gzconfirm ref="gzconfirm"></gzconfirm> -->
<!-- <gztest ref="gztest"></gztest> -->
<v-navigation-drawer v-if="isAuthenticated" v-model="drawer" app>
<v-list dense>
<v-list-item
@@ -114,8 +117,17 @@
<script>
/* xeslint-disable */
import aboutInfo from "./api/aboutinfo";
//import gzconfirm from "./components/gzconfirm";
import gznotify from "./components/gznotify";
//import gztest from "./components/gztest";
export default {
components: {
//gztest
//gzconfirm
// ,
gznotify
},
data() {
return {
drawer: null,
@@ -143,6 +155,9 @@ export default {
window.$gz.eventBus.$off();
},
mounted() {
//this.$root.$gzconfirm = this.$refs.gzconfirm.open;
this.$root.$gznotify = this.$refs.gznotify.open;
//redirect to login if not authenticated
if (!this.$store.state.authenticated) {
this.$router.push({ name: "login" });

9
ayanova/src/api/errorhandler.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable */
/* xeslint-disable */
var devModeShowErrors = false;
@@ -7,10 +7,10 @@ var devModeShowErrors = false;
// Localize, Log and optionally display errors
// return localized message in case caller needs it
function dealWithError(msg, vm) {
debugger;
//debugger;
msg = window.$gz.locale.translateString(msg);
//In some cases the error may not be localizable, if this is not a debug run then it should show without the ?? that localizing puts in keys not found
//so it's not as wierd looking to the user
//so it's not as weird looking to the user
if (!devModeShowErrors && msg.includes("??")) {
msg = msg.replace("??", "");
}
@@ -20,8 +20,7 @@ function dealWithError(msg, vm) {
var errMsg =
"DEV ERROR errorHandler::devShowUnknownError - unexpected error: \r\n" +
msg;
//eslint-disable-next-line
console.log(errMsg);
window.$gz.eventBus.$emit("notify-error", errMsg);
}

56
ayanova/src/api/gzdialog.js
View File

@@ -15,6 +15,31 @@ export default {
wireUpEventHandlers(vm) {
//Notifications: pops up and slowly disappears
/*
This (and in form error boxes) all needs to be replaced with the stock v-alert, v-dialog and v-snackbar
The v-alert component is used to convey important information to the user through the use contextual types icons and color. These default types come in in 4 variations: success, info, warning, and error. Default icons are assigned which help represent different actions each type portrays
The v-snackbar component is used to display a quick message to a user. Snackbars support positioning, removal delay, and callbacks.
The v-dialog component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.
TODO:
- NOTIFICATION SNACKBAR - used for temp notifications, create as a component
- put it in the App.vue just above the router view
- Make it respond to event bus messages and popup
- Should be able to show more than one sequentially
- Always auto-times out? (or...)
- DIALOG - used for are you sure prompts etc
- Modal
- callable from anywhere (sits in App.vue?)Like this: https://gist.github.com/eolant/ba0f8a5c9135d1a146e1db575276177d
- can return data via callback (I think)
- Has suitable types of icons
- ERRORBOX: Create a custom component for the top of form error box, it uses a v-alert and is consistently the same so make one re-usable component for that and us in edit forms as now but replacing the v-alert block
- This actually is not a current requirement but as soon as there is more than one edit form it will be so...
*/
///////////
//ERROR
window.$gz.eventBus.$on("notify-error", function handleNotifyWarn(msg) {
@@ -38,11 +63,32 @@ export default {
///////////
//INFO
window.$gz.eventBus.$on("notify-info", function handleNotifyWarn(msg) {
vm.$dialog.notify.info(msg, {
position: "bottom-right",
icon: "fa-info-circle",
timeout: 3000
});
// // eslint-disable-next-line no-debugger
// debugger;
// eslint-disable-next-line no-console
//console.log(msg);
vm.$root.$gznotify(msg, { color: "info" });
// if (vm.$root.$gznoitfy(msg, "Are you sure?", { color: "red" })) {
// alert("YES");
// } else {
// alert("CANCEL");
// }
// vm.$dialog.notify.info(msg, {
// position: "bottom-right",
// icon: "fa-info-circle",
// timeout: 3000,
// actions: [
// {
// text: window.$gz.locale.get("Cancel"),
// key: false
// },
// {
// text: window.$gz.locale.get("Delete"),
// color: "red",
// key: true
// }
// ]
// });
});
///////////

85
ayanova/src/components/gzconfirm.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<v-dialog
v-model="dialog"
:max-width="options.width"
:style="{ zIndex: options.zIndex }"
@keydown.esc="cancel"
>
<v-card>
<v-toolbar dark :color="options.color" dense flat>
<v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
</v-toolbar>
<v-card-text v-show="!!message" class="pa-4">{{ message }}</v-card-text>
<v-card-actions class="pt-0">
<v-spacer></v-spacer>
<v-btn color="primary darken-1" text @click.native="agree">Yes</v-btn>
<v-btn color="grey" text @click.native="cancel">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
/**
* Vuetify Confirm Dialog component
*
* Insert component where you want to use it:
* <confirm ref="confirm"></confirm>
*
* Call it:
* this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' }).then((confirm) => {})
* Or use await:
* if (await this.$refs.confirm.open('Delete', 'Are you sure?', { color: 'red' })) {
* // yes
* }
* else {
* // cancel
* }
*
* Alternatively you can place it in main App component and access it globally via this.$root.$confirm
* <template>
* <v-app>
* ...
* <confirm ref="confirm"></confirm>
* </v-app>
* </template>
*
* mounted() {
* this.$root.$confirm = this.$refs.confirm.open
* }
*/
export default {
data: () => ({
dialog: false,
resolve: null,
reject: null,
message: null,
title: null,
options: {
color: "primary",
width: 290,
zIndex: 200
}
}),
methods: {
open(title, message, options) {
this.dialog = true;
this.title = title;
this.message = message;
this.options = Object.assign(this.options, options);
return new Promise((resolve, reject) => {
this.resolve = resolve;
this.reject = reject;
});
},
agree() {
this.resolve(true);
this.dialog = false;
},
cancel() {
this.resolve(false);
this.dialog = false;
}
}
};
</script>

51
ayanova/src/components/gznotify.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<!-- <v-dialog
v-model="dialog"
:max-width="options.width"
:style="{ zIndex: options.zIndex }"
@keydown.esc="cancel"
>
<v-card>
<v-toolbar dark :color="options.color" dense flat>
<v-toolbar-title class="white--text">{{ title }}</v-toolbar-title>
</v-toolbar>
<v-card-text v-show="!!message" class="pa-4">{{ message }}</v-card-text>
<v-card-actions class="pt-0">
<v-spacer></v-spacer>
<v-btn color="primary darken-1" text @click.native="agree">Yes</v-btn>
<v-btn color="grey" text @click.native="cancel">Cancel</v-btn>
</v-card-actions>
</v-card>
</v-dialog> -->
<v-snackbar v-model="snackbar">
{{ message }}
<v-btn
:color="options.color"
:timeout="options.timeout"
text
@click="snackbar = false"
>
Close
</v-btn>
</v-snackbar>
</template>
<script>
export default {
data: () => ({
snackbar: false,
message: null,
options: {
color: "primary",
timeout: 3000
}
}),
methods: {
open(message, options) {
this.snackbar = true;
this.message = message;
this.options = Object.assign(this.options, options);
}
}
};
</script>

23
ayanova/src/components/gztest.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data: () => ({
snackbar: false,
message: null,
options: {
color: "primary",
timeout: 3000
}
}),
methods: {
open(message, options) {
this.snackbar = true;
this.message = message;
this.options = Object.assign(this.options, options);
}
}
};
</script>

2
ayanova/src/components/inventorywidgetlist.vue
View File

@@ -90,7 +90,7 @@
</template>
<script>
/* eslint-disable */
/* Xeslint-disable */
const FORM_KEY = "inventorywidgetlist";
export default {

3
ayanova/src/main.js
View File

@@ -1,4 +1,4 @@
/* eslint-disable */
/* Xeslint-disable */
import "@babel/polyfill";
import "@fortawesome/fontawesome-free/css/all.css";
import "typeface-roboto/index.css";
@@ -167,7 +167,6 @@ Vue.component("gz-date-time-picker", dateTimeControl);
Vue.component("gz-tag-picker", tagPicker);
Vue.component("gz-custom-fields", customFieldsControl);
////////////////////////////////////////////////////////
//3rd party ui components
//

16
ayanova/src/views/login.vue
View File

@@ -12,8 +12,17 @@
<v-col cols="12" class="d-flex d-md-none">
<v-img :src="require('../assets/logo.svg')" contain height="64"></v-img>
</v-col>
<!-- <v-col cols="12" class="purple">
<v-skeleton-loader ref="skeleton" type="image"></v-skeleton-loader>
<!-- <v-col cols="12">
<v-alert border="left" color="deep-purple accent-4" dark dismissible>
Aenean imperdiet. Quisque id odio. Cras dapibus. Pellentesque ut
neque. Cras dapibus. Vivamus consectetuer hendrerit lacus. Sed mollis,
eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing
dolor urna a orci. Sed mollis, eros et ultrices tempus, mauris ipsum
aliquam libero, non adipiscing dolor urna a orci. Curabitur blandit
mollis lacus. Curabitur ligula sapien, tincidunt non, euismod vitae,
posuere imperdiet, leo.
</v-alert>
<v-skeleton-loader ref="skeleton" type="image"></v-skeleton-loader>
</v-col> -->
<v-col cols="12" offset="3">
<form>
@@ -91,8 +100,7 @@ export default {
if (this.input.username != "" && this.input.password != "") {
this.errorBadCreds = false;
var vm = this;
// eslint-disable-next-line no-debugger
debugger;
auth
.authenticate(this.input.username, this.input.password)
.then(() => {