From 9d6619c2e0fccff2356882a77d8b05cf485c5fc5 Mon Sep 17 00:00:00 2001 From: John Cardinal Date: Fri, 8 Nov 2019 22:02:23 +0000 Subject: [PATCH] EOD FRIDAY! --- ayanova/devdocs/todo.txt | 3 +- ayanova/package-lock.json | 5 - ayanova/package.json | 1 - ayanova/src/api/gzdialog.js | 108 ++++---------------- ayanova/src/api/initialize.js | 9 -- ayanova/src/main.js | 16 +-- ayanova/src/views/inventory-widget-edit.vue | 29 +++--- 7 files changed, 38 insertions(+), 133 deletions(-) diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt index 283339ea..4ba51660 100644 --- a/ayanova/devdocs/todo.txt +++ b/ayanova/devdocs/todo.txt @@ -53,8 +53,7 @@ http://localhost:8080/login CURRENT WORK: -- Replace dialog, confirm etc with my own implementations as stock as possible -- Get edit form existing features completely working +- Get edit form existing features completely working (also need new reportchooser not based on the original dialog component) ================================================= diff --git a/ayanova/package-lock.json b/ayanova/package-lock.json index a024e59f..b78d172e 100644 --- a/ayanova/package-lock.json +++ b/ayanova/package-lock.json @@ -18402,11 +18402,6 @@ "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.1.9.tgz", "integrity": "sha512-52CgEyPoGYHba5yocYKBB/LXcikoWzj9jCDTH8LlzH/hvjzkgsuEtFwUustGHyV9GstRaNZOrk4nuUWbPZc3kQ==" }, - "vuetify-dialog": { - "version": "2.0.0-rc.0", - "resolved": "https://registry.npmjs.org/vuetify-dialog/-/vuetify-dialog-2.0.0-rc.0.tgz", - "integrity": "sha512-/9SJ4DG+N3so38NCzPTBlKs6d2P0J4knSKxXlqxrI6hrLHuhV4VeEUELDkiipzxQGxd9Tro3Hl6SGKCs0VddYQ==" - }, "vuetify-loader": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/vuetify-loader/-/vuetify-loader-1.3.0.tgz", diff --git a/ayanova/package.json b/ayanova/package.json index 744ebb80..f8548ee3 100644 --- a/ayanova/package.json +++ b/ayanova/package.json @@ -21,7 +21,6 @@ "vue": "^2.6.10", "vue-router": "^3.1.3", "vuetify": "^2.1.9", - "vuetify-dialog": "^2.0.0-rc.0", "vuex": "^3.0.1", "vuex-persistedstate": "^2.7.0" }, diff --git a/ayanova/src/api/gzdialog.js b/ayanova/src/api/gzdialog.js index e7a44f05..04da6f51 100644 --- a/ayanova/src/api/gzdialog.js +++ b/ayanova/src/api/gzdialog.js @@ -1,4 +1,4 @@ -import reportChooser from "../components/report-chooser.vue"; +//import reportChooser from "../components/report-chooser.vue"; /* Xeslint-disable */ var VM_LOCAL = null; @@ -15,33 +15,6 @@ 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... - - -*/ - - //Valid values for notify type are: success, info, warning, and error - /////////// //ERROR window.$gz.eventBus.$on("notify-error", function handleNotifyWarn(msg) { @@ -71,25 +44,6 @@ TODO: ///////////////////////////////////// // Are you sure you want to delete? // - // confirmDelete(vm) { - // //https://github.com/yariksav/vuetify-dialog#readme - // return vm.$dialog.warning({ - // text: window.$gz.locale.get("DeletePrompt"), - // title: window.$gz.locale.get("Delete"), - // icon: "fa-exclamation-triangle", - // actions: [ - // { - // text: window.$gz.locale.get("Cancel"), - // key: false - // }, - // { - // text: window.$gz.locale.get("Delete"), - // color: "red", - // key: true - // } - // ] - // }); - // }, confirmDelete() { return VM_LOCAL.$root.$gzconfirm({ message: window.$gz.locale.get("DeletePrompt"), @@ -98,7 +52,7 @@ TODO: }); }, ///////////////////////////////////// - // Are you sure you want to delete? + // Are you sure you want to leave unsaved? // confirmLeaveUnsaved() { return VM_LOCAL.$root.$gzconfirm({ @@ -106,52 +60,30 @@ TODO: yesButtonText: window.$gz.locale.get("Leave"), noButtonText: window.$gz.locale.get("Cancel") }); - - // return vm.$dialog.warning({ - // text: window.$gz.locale.get("AreYouSureUnsavedChanges"), - // title: window.$gz.locale.get("Leave"), - // icon: "fa-exclamation-triangle", - // actions: [ - // { - // text: window.$gz.locale.get("Cancel"), - // key: false - // }, - // { - // text: window.$gz.locale.get("Leave"), - // color: "red", - // key: true - // } - // ] - // }); }, ///////////////////////////////////// // Display LT message with wait for ok // - displayLTErrorMessage(vm, ltKeyText, ltKeyTitle = undefined) { - //https://github.com/yariksav/vuetify-dialog#readme - return vm.$dialog.error({ - text: ltKeyText ? window.$gz.locale.get(ltKeyText) : "", + displayLTErrorMessage(ltKeyText, ltKeyTitle = undefined) { + return VM_LOCAL.$root.$gzconfirm({ + message: ltKeyText ? window.$gz.locale.get(ltKeyText) : "", title: ltKeyTitle ? window.$gz.locale.get(ltKeyTitle) : "", - icon: "fa-exclamation-triangle", - actions: [ - { - text: window.$gz.locale.get("OK"), - key: true - } - ] + yesButtonText: window.$gz.locale.get("OK") }); - }, ///////////////////////////////////// - // Show a report list - // - async getReportChoice(vm, reports, preselected) { - const result = await vm.$dialog.showAndWait(reportChooser, { - reports: reports, - title: window.$gz.locale.get("Report"), - oktext: window.$gz.locale.get("Print"), - canceltext: window.$gz.locale.get("Cancel"), - selectedvalue: preselected - }); - return result; } + //TODO: Implement the following as it's own re-usable component instead of here + ///////////////////////////////////// + // // Show a report list + // // + // async getReportChoice(vm, reports, preselected) { + // const result = await vm.$dialog.showAndWait(reportChooser, { + // reports: reports, + // title: window.$gz.locale.get("Report"), + // oktext: window.$gz.locale.get("Print"), + // canceltext: window.$gz.locale.get("Cancel"), + // selectedvalue: preselected + // }); + // return result; + // } //new functions above here }; diff --git a/ayanova/src/api/initialize.js b/ayanova/src/api/initialize.js index 76db770d..b3c3451f 100644 --- a/ayanova/src/api/initialize.js +++ b/ayanova/src/api/initialize.js @@ -155,15 +155,6 @@ export default function initialize() { ); } - // eslint-disable-next-line no-debugger - // debugger; - window.$gz.dialog.confirmDelete().then(dialogResult => { - window.$gz.eventBus.$emit( - "notify-info", - "You chose: " + dialogResult - ); - }); - //Store offset in locale data //TODO: also need the other locale settings such as number and date formats etc to be added at server window.$gz.store.commit("setLocale", { diff --git a/ayanova/src/main.js b/ayanova/src/main.js index 60bb075d..d3499b6b 100644 --- a/ayanova/src/main.js +++ b/ayanova/src/main.js @@ -3,7 +3,6 @@ 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"; @@ -16,7 +15,6 @@ 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"; @@ -42,6 +40,7 @@ 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 +// (which is not necessary here anyway) // 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 @@ -167,15 +166,6 @@ 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 // @@ -188,10 +178,6 @@ Vue.directive("focus", { } }); -// console.log(Vue); -// console.log(Vuetify.lang); -// debugger; - ///////////////////////////////////////////////////////////////// // INSTANTIATE // diff --git a/ayanova/src/views/inventory-widget-edit.vue b/ayanova/src/views/inventory-widget-edit.vue index 1007048d..fa226990 100644 --- a/ayanova/src/views/inventory-widget-edit.vue +++ b/ayanova/src/views/inventory-widget-edit.vue @@ -418,7 +418,7 @@ export default { if (res.error.code == "2010") { //notify not found error then navigate backwards window.$gz.dialog - .displayLTErrorMessage(vm, "ErrorAPI2010") + .displayLTErrorMessage("ErrorAPI2010") .then(() => { // navigate backwards vm.$router.go(-1); @@ -592,18 +592,21 @@ function clickHandler(menuItem) { m.vm.duplicate(); break; case "report": - var reportList = window.$gz.report.availableReports("WIDGET"); - var selectedItem = reportList[0].value; - window.$gz.dialog - .getReportChoice(m.vm, reportList, selectedItem) - .then(res => { - if (res) { - window.$gz.eventBus.$emit( - "notify-success", - FORM_KEY + "::report click, selected is: [" + res + "]" - ); - } - }); + //TODO: FOLLOWING TWO LINES STILL VALID BUT NEED TO MAKE A REPORT CHOOSER COMPONENT + // var reportList = window.$gz.report.availableReports("WIDGET"); + // var selectedItem = reportList[0].value; + alert("STUB: REPORT LIST DIALOG"); + + // window.$gz.dialog + // .getReportChoice(m.vm, reportList, selectedItem) + // .then(res => { + // if (res) { + // window.$gz.eventBus.$emit( + // "notify-success", + // FORM_KEY + "::report click, selected is: [" + res + "]" + // ); + // } + // }); break; default: