Altra conversione in Typescript (3).

primo test semplice...

package.json

@@ -1,10 +1,6 @@
 {
-  "name": "quasar-typescript",
+  "name": "vue-order-admin",
   "version": "0.1.0",
-  "description": "",
-  "productName": "Quasar TypeScript",
-  "cordovaId": "org.cordova.quasar.app",
-  "author": "Kevin Marrec",
   "private": true,
   "scripts": {
     "lint": "tslint --project tsconfig.json",
@@ -24,35 +20,49 @@
     "deploy:ssr": "now dist/ssr-mat"
   },
   "dependencies": {
+    "@types/js-cookie": "^2.1.0",
+    "@types/node": "^10.12.2",
+    "@types/nprogress": "^0.0.29",
+    "@types/webpack-env": "^1.13.6",
     "axios": "^0.18.0",
-    "bcryptjs": "^2.4.3",
+    "element-ui": "^2.3.6",
-    "dotenv": "^6.1.0",
+    "js-cookie": "^2.2.0",
+    "normalize.css": "^8.0.0",
+    "npm": "^6.4.1",
+    "nprogress": "^0.2.0",
+    "register-service-worker": "^1.0.0",
     "vee-validate": "^2.1.2",
+    "vue": "^2.5.17",
+    "vue-class-component": "^6.0.0",
     "vue-i18n": "^8.1.0",
-    "vue-property-decorator": "^7.2.0",
+    "vue-property-decorator": "^7.0.0",
-    "vuelidate": "^0.7.4",
+    "vue-router": "^3.0.1",
+    "vue-svgicon": "^3.1.0",
+    "vuex": "^3.0.1",
     "vuex-class": "^0.3.1",
-    "vuex-module-decorators": "^0.9.0"
+    "vuex-module-decorators": "^0.4.3",
+    "webpack": "^4.17.2"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.4",
+    "@types/jest": "^23.1.4",
-    "@types/node": "^10.11.5",
+    "@vue/cli-plugin-babel": "^3.0.1",
-    "@vue/test-utils": "^1.0.0-beta.25",
+    "@vue/cli-plugin-e2e-cypress": "^3.0.1",
-    "babel-core": "^7.0.0-bridge.0",
+    "@vue/cli-plugin-pwa": "^3.0.1",
-    "codecov": "^3.1.0",
+    "@vue/cli-plugin-typescript": "^3.0.1",
-    "jest": "^23.6.0",
+    "@vue/cli-plugin-unit-jest": "^3.0.1",
-    "jest-serializer-vue": "^2.0.2",
+    "@vue/cli-service": "^3.0.1",
-    "now": "^11.4.6",
+    "@vue/test-utils": "^1.0.0-beta.20",
-    "pug": "^2.0.3",
+    "babel-core": "7.0.0-bridge.0",
-    "pug-plain-loader": "^1.0.0",
+    "eslint": "^5.5.0",
+    "jest": "^23.5.0",
+    "node-sass": "^4.9.0",
     "quasar-cli": "^0.17.20",
+    "sass-loader": "^7.0.1",
     "strip-ansi": "=3.0.1",
-    "ts-jest": "^23.10.4",
+    "ts-jest": "^23.0.0",
-    "ts-loader": "^5.2.1",
+    "typescript": "^3.0.0",
-    "tslint": "^5.11.0",
+    "vue-cli-plugin-element-ui": "^1.1.2",
-    "tslint-config-standard": "^8.0.1",
+    "vue-template-compiler": "^2.5.17"
-    "typescript": "^3.1.1",
-    "vue-jest": "^2.6.0"
   },
   "engines": {
     "node": ">= 8.9.0",

src/pages/Error404.vue

@@ -1,18 +0,0 @@
-<template lang="pug">
-  .fixed-center.text-center
-    img(src="~assets/sad.svg", style="width:30vw;max-width:150px;")
-    p.q-mt-sm.text-faded
-      | {{ $t('pages.errors.e404.message') }} #[strong (404)]
-    q-btn(
-      color="secondary"
-      style="width:200px;"
-      @click="$router.push('/')"
-    ) {{ $t('pages.errors.e404.back') }}
-</template>
-
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-
-@Component
-export default class Error404 extends Vue {}
-</script>

src/pages/Index.vue

@@ -11,7 +11,7 @@
                 :count="10"
                 helper="Some helper"
         >
-            <br>Conta = {{ getConta }}
+            <br>Conta = {{ conta }}
         </q-field>
 
         <!--<q-btn
@@ -39,147 +39,96 @@
     }
 </style>
 
-<script>
+<script lang="ts">
-    import {mapGetters, mapActions} from 'vuex'
+  import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
-    import * as types from '../store/mutation-types'
+  import { GlobModule } from '@/store/modules/glob'
 
-    import HelloWorld from '@/components/HelloWorld.ts';
+  //import { Notify } from 'quasar'
 
-    import {Notify} from 'quasar'
+  @Component({})
+  export default class Login extends Vue {
+    text = ''
+    visibile = false
+    cardvisible = 'hidden'
+    displaycard = 'block'
 
-    let deferredPrompt = null;
+    constructor() {
-
+      super()
-    export default {
+      console.log('created...')
-        data: function () {
+      this.initprompt()
-            return {
-                text: '',
-                visibile: false,
-                cardvisible: 'hidden',
-                displaycard: 'block',
-            }
-        },
-        computed: {
-            deferredPrompt: function () {
-                return deferredPrompt;
-            },
-            ...mapGetters("glob", ['getConta']),
-            mystilecard: function () {
-                return {
-                    visibility: this.cardvisible,
-                    display: this.displaycard
-                }
-            }
-        },
-        methods: {
-            showNotification() {
-                this.$q.notify('Some other message')
-            },
-            ...mapActions("glob", {
-                impostaconta: types.SET_VALUE,
-                'setLayoutNeeded': types.SET_LAYOUT_NEEDED,
-                'setIsLoginPage': types.SET_LOGIN_PAGE
-            }),
-            initprompt() {
-                window.addEventListener('beforeinstallprompt', function (event) {
-                    console.log('********************************   beforeinstallprompt fired');
-                    event.preventDefault();
-                    console.log('§§§§§§§§§§§§§§§§§§§§  IMPOSTA DEFERRED PROMPT  !!!!!!!!!!!!!!!!!  ');
-                    deferredPrompt = event;
-                    return false;
-                });
-            },
-            start_app() {
-                if (!window.Promise) {
-                    window.Promise = Promise;
-                }
-
-            },
-            test_fetch() {
-                fetch('https:/httpbin.org/post', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Accept': 'application/json'
-                    },
-                    //mode: 'no-cors',
-                    mode: 'cors',
-                    body: JSON.stringify({message: 'Does this work?'})
-                }).then(function (response) {
-                    console.log(response);
-                    if (response)
-                        return response.json();
-                    else
-                        return null;
-                }).then(function (data) {
-                    console.log(data);
-                }).catch(function (err) {
-                    console.log(err);
-                });
-            },
-            test() {
-                console.log("*** INIZIA IL TEST ")
-                var primise = new Promise(function (resolve, reject) {
-                    setTimeout(function () {
-                        if (true)
-                            resolve('Questo viene eseguito alla FINE ')
-                        else
-                            reject({code: 500, message: 'Errore Generico'});
-
-                    }, 3000);
-                });
-
-                promise.then(function (text) {
-                    console.log(text);
-                }).then(function (newText) {
-                    console.log(newText);
-                }).catch(function (err) {
-                    console.log(err.code, err.message);
-                });
-
-            },
-            openCreatePostModal() {
-                console.log('APERTO ! openCreatePostModal');
-
-                this.impostaconta(this.getConta + 1);
-
-                this.visibile = !this.visibile;
-
-                if (this.visibile) {
-                    this.displaycard = 'block';
-                    this.cardvisible = 'visible';
-                } else {
-                    this.displaycard = 'block';
-                    this.cardvisible = 'hidden';
-                }
-
-                event = deferredPrompt;
-
-                if (event) {
-                    console.log("+++++++++++++++++ FAI IL PROMPT DI EVENT !!!!!!!!!!!!!!!!!!!!! ")
-                    console.log("################# FAI IL PROMPT DI EVENT ################# ")
-                    event.prompt();
-
-                    event.userChoice.then(function (choiceResult) {
-                        console.log(choiceResult.outcome);
-
-                        if (choiceResult.outcome === 'dismissed') {
-                            console.log('User cancelled installation');
-                        } else {
-                            console.log('User added to home screen');
-                        }
-                    });
-
-                    deferredPrompt = null;
-                }
-            }
-        },
-        created() {
-            ///Notify.create('created...')
-            console.log('created...');
-            this.initprompt();
-            this.start_app();
-            //this.test();
-            //this.test_fetch();
-        }
     }
+
+    mystilecard() {
+      return {
+        visibility: this.cardvisible,
+        display: this.displaycard
+      }
+    }
+
+    get conta() {
+      return GlobModule.conta
+    }
+
+    set conta(valore) {
+      GlobModule.setConta(valore)
+    }
+
+    mounted() {
+      console.log("mounted")
+    }
+
+
+    showNotification() {
+      this.$q.notify('Some other message')
+    }
+
+    initprompt() {
+      window.addEventListener('beforeinstallprompt', function (event) {
+        console.log('********************************   beforeinstallprompt fired')
+        event.preventDefault()
+        console.log('§§§§§§§§§§§§§§§§§§§§  IMPOSTA DEFERRED PROMPT  !!!!!!!!!!!!!!!!!  ')
+        return false
+      })
+    }
+
+    test_fetch() {
+      fetch('https:/httpbin.org/post', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        //mode: 'no-cors',
+        mode: 'cors',
+        body: JSON.stringify({ message: 'Does this work?' })
+      }).then(function (response) {
+        console.log(response)
+        if (response)
+          return response.json()
+        else
+          return null
+      }).then(function (data) {
+        console.log(data)
+      }).catch(function (err) {
+        console.log(err)
+      })
+    }
+
+    openCreatePostModal() {
+      console.log('APERTO ! openCreatePostModal')
+
+      this.conta = this.conta + 1
+
+      this.visibile = !this.visibile
+
+      if (this.visibile) {
+        this.displaycard = 'block'
+        this.cardvisible = 'visible'
+      } else {
+        this.displaycard = 'block'
+        this.cardvisible = 'hidden'
+      }
+
+    }
+  }
 </script>

src/router/routes.ts

@@ -29,13 +29,4 @@ const routes: RouteConfig[] = [
   }*/
 ]
 
-// Always leave this as last one
-if (process.env.MODE !== 'ssr') {
-  routes.push({
-    name: 'pages.errors.e404',
-    path: '*',
-    component: () => import('@/pages/Error404.vue')
-  })
-}
-
 export default routes

src/store/index.ts

@@ -1,13 +1,13 @@
-import Vue from 'vue';
+import Vue from 'vue'
-import Vuex from 'vuex';
+import Vuex from 'vuex'
 
-import { IUserState } from '@/types';
+import { IUserState } from '@/types'
 
-Vue.use(Vuex);
+Vue.use(Vuex)
 
 export interface IRootState {
-  user: IUserState;
+  user: IUserState
-  role: IRootState;
+  role: IRootState
 }
 
-export default new Vuex.Store<IRootState>({});
+export default new Vuex.Store<IRootState>({})

src/store/modules/glob.ts

@@ -1,59 +1,62 @@
-/*
 import Vue from 'vue'
 import Vuex from 'vuex'
 
-Vue.use(Vuex);
+import { Module, VuexModule, Mutation, MutationAction, Action, getModule } from 'vuex-module-decorators'
 
-import * as types from '../mutation-types'
+import * as types from '@/store/mutation-types'
 
-export const state = {
+import store from '@/store'
-  conta: 0,
-  deferredPrompt: null,
-  isLoginPage: false,
-  layoutNeeded: true,
-  mobileMode: false,
-  menuCollapse: true,
-  posts: [{title:'titolo 1'}, {title:'titolo 2'}],
 
-};
+Vue.use(Vuex)
 
-export const getters = {
+export interface IGlob {
-  getConta: state => state.conta,
+  conta: number
-  getDeferredPrompt: state => state.deferredPrompt,
+  isLoginPage: boolean
-  getIsLoginPage: state => state.isLoginPage,
+  layoutNeeded: boolean
-  getLayoutNeeded: state => state.layoutNeeded,
+  mobileMode: boolean
-  getMobileMode: state => state.mobileMode,
+  menuCollapse: boolean
-  getMenuCollapse: state => state.menuCollapse,
+  posts: string[]
-  getPosts: state => state.posts,
-};
-
-
-export const mutations = {
-  [types.SET_VALUE]: (state, payload) => { state.conta = payload; },
-  [types.SET_DEFFERED_PROMPT]: (state, payload) => { state.deferredPrompt = payload; },
-  [types.SET_LOGIN_PAGE]: (state, payload) => { state.isLoginPage = payload; },
-  [types.SET_LAYOUT_NEEDED]: (state, payload) => { state.layoutNeeded = payload; },
-  [types.SET_MOBILE_MODE]: (state, payload) => { state.mobileMode = payload; },
-  [types.SET_MENU_COLLAPSED]: (state, payload) => { state.menuCollapse = payload; },
-  [types.SET_POSTS]: (state, payload) => { state.posts = payload; },
-};
-
-
-export const actions = {
-  [types.SET_VALUE]: ({commit}, payload) => { commit(types.SET_VALUE, payload) },
-  [types.SET_DEFFERED_PROMPT]: ({commit}, payload) => { commit(types.SET_DEFFERED_PROMPT, payload) },
-  [types.SET_LOGIN_PAGE]: ({commit}, payload) => { commit(types.SET_LOGIN_PAGE, payload) },
-  [types.SET_LAYOUT_NEEDED]: ({commit}, payload) => { commit(types.SET_LAYOUT_NEEDED, payload) },
-  [types.SET_MOBILE_MODE]: ({commit}, payload) => { commit(types.SET_MOBILE_MODE, payload) },
-  [types.SET_MENU_COLLAPSED]: ({commit}, payload) => { commit(types.SET_MENU_COLLAPSED, payload) },
-  [types.SET_POSTS]: ({commit}, payload) => { commit(types.SET_POSTS, payload) },
-};
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  mutations,
-  actions
 }
-*/
+
+
+@Module({ dynamic: true, store, name: 'glob' })
+class Glob extends VuexModule {   // Non occorrono i getters, basta questi qui:
+  conta = 0
+  isLoginPage = false
+  layoutNeeded = true
+  mobileMode = false
+  menuCollapse = true
+  posts = []
+
+  getConta() {
+    return this.conta
+  }
+
+  getIsLoginPage() {
+    return this.isLoginPage
+  }
+
+  getLayoutNeeded() {
+    return this.layoutNeeded
+  }
+
+  getMobileMode() {
+    return this.mobileMode
+  }
+
+  getMenuCollapse() {
+    return this.menuCollapse
+  }
+
+  getPosts() {
+    return this.posts
+  }
+
+  @MutationAction({ mutate: ['conta'] })
+  async setConta(num: number) {
+    return { conta: num }
+  }
+
+}
+
+export const GlobModule = getModule(Glob.prototype)

src/store/modules/useraa.ts

@@ -23,7 +23,7 @@ export const ErroriMongoDb = {
 Vue.use(Vuex)
 
 @Module({ dynamic: true, store, name: 'user' })
-class User extends VuexModule {
+class User extends VuexModule implements IUserState {   // Non occorrono i getters, basta questi qui:
   _id: IUserState['_id'] = ''
   email: IUserState['email'] = ''
   username: IUserState['username'] = ''
@@ -37,7 +37,7 @@ class User extends VuexModule {
   verifiedEmail: IUserState['verifiedEmail'] = false
   servercode: number = 0
 
-  getlang(): any {
+  getlang (): any {
     if (this.lang !== '') {
       return this.lang
     } else {
@@ -45,9 +45,9 @@ class User extends VuexModule {
     }
   }
 
-  sendRequest(url: string, method: string, mydata: any) {
+  sendRequest (url: string, method: string, mydata: any) {
     console.log('LANG ' + this.getlang())
-    const mytok: string = this.getTok()
+    let mytok: string = this.getTok()
 
     const authHeader = new Headers()
     authHeader.append('content-type', 'application/json')
@@ -65,7 +65,7 @@ class User extends VuexModule {
 
   }
 
-  getTok() {
+  getTok () {
     if (this.tokens) {
       if (typeof this.tokens[0] !== 'undefined') {
         return this.tokens[0].token
@@ -78,22 +78,22 @@ class User extends VuexModule {
   }
 
   @MutationAction({ mutate: [types.USER_PASSWORD] })
-  async setpassword(newstr: string) {
+  async setpassword (newstr: string) {
     return { password: newstr }
   }
 
   @MutationAction({ mutate: [types.USER_EMAIL] })
-  async setemail(newstr: string) {
+  async setemail (newstr: string) {
     return { email: newstr }
   }
 
   @MutationAction({ mutate: [types.USER_LANG] })
-  async setlang(newstr: string) {
+  async setlang (newstr: string) {
     return { lang: newstr }
   }
 
   @Mutation
-  authUser(data: IUserState) {
+  authUser (data: IUserState) {
     this.username = data.username
     this.userId = data.userId
     this.idToken = data.idToken
@@ -104,7 +104,7 @@ class User extends VuexModule {
   }
 
   @Mutation
-  UpdatePwd(data: IIdToken) {
+  UpdatePwd (data: IIdToken) {
     this.idToken = data.idToken
     if (!this.tokens) {
       this.tokens = []
@@ -113,12 +113,12 @@ class User extends VuexModule {
   }
 
   @Mutation
-  setServerCode(servercode: number) {
+  setServerCode (servercode: number) {
     this.servercode = servercode
   }
 
   @Mutation
-  clearAuthData(): void {
+  clearAuthData (): void {
     this.username = ''
     this.tokens = []
     this.idToken = ''
@@ -127,7 +127,7 @@ class User extends VuexModule {
   }
 
   @Action({ commit: types.USER_UPDATEPWD })
-  resetpwd(paramquery: IUserState) {
+  resetpwd (paramquery: IUserState) {
     let call = process.env.MONGODB_HOST + '/updatepwd'
     console.log('CALL ' + call)
 
@@ -172,7 +172,7 @@ class User extends VuexModule {
   }
 
   @Action({ commit: types.USER_REQUESTRESETPWD })
-  requestpwd(paramquery: IUserState) {
+  requestpwd (paramquery: IUserState) {
 
     let call = process.env.MONGODB_HOST + '/requestnewpwd'
     console.log('CALL ' + call)
@@ -210,7 +210,7 @@ class User extends VuexModule {
   }
 
   @Action({ commit: types.USER_VREG })
-  vreg(paramquery: ILinkReg) {
+  vreg (paramquery: ILinkReg) {
     let call = process.env.MONGODB_HOST + '/vreg'
     console.log('CALL ' + call)
 
@@ -251,7 +251,7 @@ class User extends VuexModule {
   }
 
   @Action({ commit: types.USER_VREG })
-  signup(authData: IUserState) {
+  signup (authData: IUserState) {
     let call = process.env.MONGODB_HOST + '/users'
     console.log('CALL ' + call)
 
@@ -347,7 +347,7 @@ class User extends VuexModule {
   }
 
   @Action({ commit: types.USER_SIGNIN })
-  signin(authData: IUserState) {
+  signin (authData: IUserState) {
     let call = process.env.MONGODB_HOST + '/users/login'
     console.log('LOGIN ' + call)
 
@@ -447,7 +447,7 @@ class User extends VuexModule {
   }
 
   @Action({ commit: types.USER_AUTOLOGIN })
-  autologin() {
+  autologin () {
     const token = localStorage.getItem('token')
     if (!token) {
       return
@@ -470,7 +470,7 @@ class User extends VuexModule {
   }
 
   @Action({ commit: types.USER_LOGOUT })
-  logout() {
+  logout () {
 
     let call = process.env.MONGODB_HOST + '/users/me/token'
     console.log('CALL ' + call)

src/views/login/test.vue

@@ -11,18 +11,11 @@
             <!--Prova URL :  {{env('PROVA_PAOLO')}}-->
 
             <q-field
-                    :error="$v.form.email.$error"
-                    :error-label="`${errorMsg('email', $v.form.email)}`"
             >
                 <q-input
                         v-validate="'required|email'"
                         v-model="form.email"
                         :value="form.email"
-                        @change="val => { form.email = val }"
-                        :before="[{icon: 'mail', handler () {}}]"
-                        @blur="$v.form.email.$touch"
-                        :error="$v.form.email.$error"
-                        :float-label="$t('reg.email')"
                 />
             </q-field>
         </q-page>
@@ -31,8 +24,7 @@
 
 <script lang="ts">
   import { Component, Vue, Watch } from 'vue-property-decorator';
-  import { UserModule } from '@/store/modules/user';
+  import { UserModule } from '@/store/modules/useraa';
-
 
 
   @Component({})