loading bar

components/Layout/Loading.vue

@@ -0,0 +1,46 @@
+<template>
+  <v-overlay :value="loading" class="loading-page">
+    <v-progress-circular
+      indeterminate
+      size="64"
+    ></v-progress-circular>
+  </v-overlay>
+</template>
+
+<script lang="ts">
+  import {defineComponent, ref} from '@nuxtjs/composition-api'
+
+  export default defineComponent({
+    setup() {
+      const loading = ref(false)
+
+      const set = (num: number) => {
+        loading.value = true
+      }
+      const start = () => {
+        loading.value = true
+      }
+      const finish = () => {
+        loading.value = false
+      }
+
+      return {
+        loading,
+        start,
+        finish,
+        set
+      }
+    }
+  })
+</script>
+
+<style scoped>
+  .loading-page {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100!important;
+  }
+</style>

config/nuxtConfig/build.js

@@ -7,6 +7,8 @@ export default {
   // // Auto import components (https://go.nuxtjs.dev/config-components)
   components: true,
 
+  loading: '~/components/Layout/Loading.vue',
+
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
     extend (config, { isDev, isClient }) {

plugins/route.ts

@@ -10,6 +10,9 @@ const routePlugin: Plugin = (ctx) => {
         next()
       }
     })
+
+    ctx.app.router.afterEach(()=>{
+    })
   }
 }
 

services/connection/connection.ts

@@ -30,21 +30,21 @@ class Connection{
     switch (method) {
       case HTTP_METHOD.GET:
         if(args.id)
-          return this.getItem(url, args.id)
+          return this.getItem(url, args.id, args.progress)
         else
-          return this.getCollection(url)
+          return this.getCollection(url, args.progress)
 
       case HTTP_METHOD.PUT:
         if(this.isArgsIsDataPersisterArgs(args)){
           if(!args.data)
             throw new Error('data not found')
 
-          return this.put(url, args.id, args.data)
+          return this.put(url, args.id, args.data, args.progress)
         }
         else throw new Error('args not a dataPersisterArgs')
 
       case HTTP_METHOD.DELETE:
-        return this.deleteItem(url, args.id)
+        return this.deleteItem(url, args.id, args.progress)
     }
 
     throw new Error('Method unknown')
@@ -54,12 +54,14 @@ class Connection{
    * GET Item : préparation de la config pour la récupération d'un item
    * @param {string} url
    * @param {number} id
+   * @param {boolean} progress
    * @return {Promise<any>}
    */
-  private getItem(url: string, id: number): Promise<any>{
+  private getItem(url: string, id: number, progress: boolean = true): Promise<any>{
     const config:AxiosRequestConfig = {
       url: `${url}/${id}`,
       method: HTTP_METHOD.GET,
+      progress: progress
     }
     return this.request(config)
   }
@@ -67,12 +69,14 @@ class Connection{
   /**
    * Get collection : préparation de la config pour la récupération d'une collection d'items
    * @param {string} url
+   * @param {boolean} progress
    * @return {Promise<any>}
    */
-  private getCollection(url: string): Promise<any>{
+  private getCollection(url: string, progress: boolean = true): Promise<any>{
     const config:AxiosRequestConfig = {
       url: `${url}`,
       method: HTTP_METHOD.GET,
+      progress: progress
     }
     return this.request(config)
   }
@@ -82,13 +86,15 @@ class Connection{
    * @param {string} url
    * @param {number} id
    * @param {AnyJson} data
+   * @param {boolean} progress
    * @return {Promise<any>}
    */
-  private put(url: string, id: number, data: AnyJson): Promise<any>{
+  private put(url: string, id: number, data: AnyJson, progress: boolean = true): Promise<any>{
     const config:AxiosRequestConfig = {
       url: `${url}/${id}`,
       method: HTTP_METHOD.PUT,
-      data: data
+      data: data,
+      progress: progress
     }
     return this.request(config)
   }
@@ -97,12 +103,14 @@ class Connection{
    * DELETE Item : préparation de la config pour la suppression d'un item
    * @param {string} url
    * @param {number} id
+   * @param {boolean} progress
    * @return {Promise<any>}
    */
-  private deleteItem(url: string, id: number): Promise<any>{
+  private deleteItem(url: string, id: number, progress: boolean = true): Promise<any>{
     const config:AxiosRequestConfig = {
       url: `${url}/${id}`,
       method: HTTP_METHOD.DELETE,
+      progress: progress
     }
     return this.request(config)
   }

services/dataPersister/dataPersister.ts

@@ -1,19 +1,23 @@
 import {hooks} from "~/services/dataPersister/hook/_import";
-import {AnyJson, DataPersisterArgs} from "~/types/interfaces";
+import {AnyJson, DataPersisterArgs, DataProviderArgs} from "~/types/interfaces";
 import {Context} from "@nuxt/types/app";
 import Connection from "~/services/connection/connection";
 import ConstructUrl from "~/services/connection/constructUrl";
-import {HTTP_METHOD} from "~/types/enums";
+import {HTTP_METHOD, QUERY_TYPE} from "~/types/enums";
 import Serializer from "~/services/serializer/serializer";
 import ApiError from "~/services/utils/apiError";
 import DataProvider from "~/services/dataProvider/dataProvider";
 
 class DataPersister{
   private ctx !: Context
-  private arguments!: DataPersisterArgs
+  private arguments: DataPersisterArgs
 
   constructor() {
     this.sort()
+    this.arguments = {
+      type: QUERY_TYPE.MODEL,
+      progress:true
+    }
   }
 
   initCtx(ctx:Context){
@@ -21,9 +25,16 @@ class DataPersister{
     this.ctx = ctx
   }
 
+  setArguments(args: DataProviderArgs){
+    this.arguments = { ...this.arguments, ...args }
+  }
+
   async invoke(args:DataPersisterArgs): Promise<any>{
-    this.arguments = args
     try{
+      this.setArguments(args)
+
+      this.startLoading()
+
       this.preHook()
 
       this.arguments.data = this.serialization()
@@ -38,6 +49,13 @@ class DataPersister{
     }
   }
 
+  startLoading(){
+    if(this.arguments.progress){
+      const $nuxt = window['$nuxt']
+      $nuxt.$loading.start()
+    }
+  }
+
   async preHook(){
     for(const hook of hooks){
       if(hook.support(this.arguments)){

services/dataProvider/dataProvider.ts

@@ -1,5 +1,5 @@
-import {AnyJson, DataProviderArgs, DataProviders} from "~/types/interfaces";
-import {DENORMALIZER_TYPE, HTTP_METHOD} from "~/types/enums";
+import {AnyJson, DataProviderArgs} from "~/types/interfaces";
+import {DENORMALIZER_TYPE, HTTP_METHOD, QUERY_TYPE} from "~/types/enums";
 import {providers} from "~/services/dataProvider/provider/_import";
 import ConstructUrl from "~/services/connection/constructUrl";
 import Connection from "~/services/connection/connection";
@@ -12,10 +12,10 @@ class DataProvider{
   private arguments!: DataProviderArgs;
 
   constructor() {
-  }
-
-  setArguments(args: DataProviderArgs){
-    this.arguments = args
+    this.arguments = {
+      type: QUERY_TYPE.MODEL,
+      progress:false
+    }
   }
 
   initCtx(ctx:Context){
@@ -23,10 +23,17 @@ class DataProvider{
     this.ctx = ctx
   }
 
+  setArguments(args: DataProviderArgs){
+    this.arguments = { ...this.arguments, ...args }
+  }
+
   async invoke(args:DataProviderArgs): Promise<any>{
-    this.setArguments(args)
 
     try{
+      this.setArguments(args)
+
+      this.startLoading()
+
       const url = this.constructUrl()
 
       const response = await this.connection(url)
@@ -39,6 +46,13 @@ class DataProvider{
     }
   }
 
+  startLoading(){
+    if(this.arguments.progress){
+      const $nuxt = window['$nuxt']
+      $nuxt.$loading.start()
+    }
+  }
+
   constructUrl(): string{
     const constructUrl = new ConstructUrl();
     return constructUrl.invoke(this.arguments)

types/interfaces.d.ts

@@ -132,6 +132,7 @@ interface UrlArgs {
   readonly root_model?: typeof Model,
   readonly id?:any,
   readonly root_id?:number
+  readonly progress?:boolean
 }
 
 interface DataPersisterArgs extends UrlArgs{