Alguns refatoramentos

components/button/AppButton.vue

@@ -1,5 +1,6 @@
 <template>
-  <q-btn :icon="inherit" v-bind="{color, round, outline, flat, small}" :class="{'raised': raised, 'rotate': rotate}"
+  <q-btn :icon="inherit" v-bind="{color, round, outline, flat, small, 'disabled': disable}"
+         :class="{'raised': raised, 'rotate': rotate}"
          @click="$emit('click')">
     <span v-if="label" v-html="label"></span>
     <q-icon v-else :name="icon"></q-icon>
@@ -20,6 +21,10 @@
         type: String,
         default: () => ''
       },
+      disable: {
+        type: Boolean,
+        default: () => false
+      },
       permission: {
         default: () => 0
       },

components/crud/Form.vue → components/crud/AppCrudForm.vue

@@ -34,12 +34,10 @@
 
 <script type="text/javascript">
   import AppForm from 'genesis/components/form/AppForm.vue'
-  import AppWizard from 'genesis/components/form/AppWizard.vue'
+  import AppFormWizard from 'genesis/components/form/AppFormWizard.vue'
   import AppFormTabs from 'genesis/components/form/AppFormTabs.vue'
   import AppButtonBar from 'genesis/components/button/AppButtonBar.vue'
   import MixinNavigation from 'genesis/components/@mixins/MixinNavigation'
-  import MixinNavigationWizard from 'genesis/components/@mixins/MixinNavigationWizard'
-  import MixinNavigationTabs from 'genesis/components/@mixins/MixinNavigationTabs'
   import { MixinComputed, MixinData, MixinMethods, MixinProps } from './model'
   import { MixinForm } from './model/form'
 
@@ -54,13 +52,11 @@
       MixinMethods,
       MixinProps,
       MixinNavigation,
-      MixinNavigationWizard,
-      MixinNavigationTabs,
       MixinForm
     ],
     name: 'app-crud-form',
     components: {
-      AppForm, AppFormTabs, AppWizard, AppButtonBar
+      AppForm, AppFormTabs, AppFormWizard, AppButtonBar
     }
   }
   export default AppCrudForm

components/crud/Grid.vue → components/crud/AppCrudGrid.vue

@@ -6,8 +6,10 @@
 
     <slot v-if="top" name="top">
       <app-grid-toolbar
-              v-bind="{handler, direction, page, pages, limit, total, paginate, buttons: buttons.top, toolbar: toolbar.pagination.top}"
-              @change-page="changePage" @change-limit="changeLimit" :class='toolbar.pagination.top.className'/>
+              v-bind="{handler, direction, page, pages, limit, total, paginate, buttons: buttons.top,
+                toolbar: $g.get(toolbar, 'pagination.top')}"
+              @change-page="changePage" @change-limit="changeLimit"
+              :class='$g.get(toolbar, "pagination.top.className")'/>
     </slot>
     <hr v-if="top">
 
@@ -20,8 +22,10 @@
 
     <slot v-if="bottom" name="bottom">
       <app-grid-toolbar
-              v-bind="{handler, direction, page, pages, limit, total, paginate, buttons: buttons.bottom, toolbar: toolbar.pagination.bottom}"
-              @change-page="changePage" @change-limit="changeLimit" :class='toolbar.pagination.bottom.className'/>
+              v-bind="{handler, direction, page, pages, limit, total, paginate, buttons: buttons.bottom,
+              toolbar: $g.get(toolbar, 'toolbar.pagination.bottom')}"
+              @change-page="changePage" @change-limit="changeLimit"
+              :class='$g.get(toolbar, "pagination.bottom.className")'/>
     </slot>
 
     <slot name="footer"/>

components/crud/components/grid/AppGridToolbar.vue

@@ -2,17 +2,17 @@
 <template>
   <div class="form app-grid-toolbar">
     <template v-if="paginate">
-      <div v-if="toolbar.elementsPaginate.pagination.show"
-            :class="['field', toolbar.elementsPaginate.pagination.className ]"
+      <div v-if="$g.get(toolbar, 'elementsPaginate.pagination.show')"
+            :class="['field', $g.get(toolbar, 'elementsPaginate.pagination.className')]"
            class="app-grid-pagination">
         <q-pagination v-model="pagination" v-bind="{max}" @input="emitPagination(pagination)"/>
       </div>
       <div v-if="toolbar.elementsPaginate.select.show"
-            :class="['field', toolbar.elementsPaginate.select.className ]">
+           :class="['field', $g.get(toolbar, 'elementsPaginate.select.className')]">
         <q-select v-model="select" v-bind="{options}" @input="emitSelect(select)"></q-select>
       </div>
-      <div v-if="toolbar.elementsPaginate.info.show"
-            :class="['field', toolbar.elementsPaginate.info.className ]"
+      <div v-if="$g.get(toolbar, 'elementsPaginate.info.show')"
+           :class="['field', $g.get(toolbar, 'elementsPaginate.info.className')]"
            class="app-grid-info">
         <div v-if="counter.total">{{ counter.start }} - {{ counter.end }} de {{ counter.total }}</div>
         <div v-else class="counter">Exibindo {{ counter.end }} registros</div>

components/fields/abstract.js

@@ -87,6 +87,12 @@ export default {
      */
     classNames () {
       const classNames = []
+      if (this.className.length) {
+        classNames.push(this.className)
+      }
+      if (this.inline) {
+        classNames.push('field-inline')
+      }
       const width = 'field has-' + String(this.inline ? '100' : this.width)
       classNames.push(width)
       classNames.push(this.$options.name)

components/form/AppForm.vue

@@ -1,18 +1,6 @@
 <template>
   <div class="app-form">
-
-    <div v-if="tabs.length" class="tabs">
-      <q-tabs v-model="tabSeletecd" inverted>
-        <q-tab v-for="tab in tabs" :key="tab.name" slot="title" v-bind="tab"/>
-      </q-tabs>
-      <div class="tab-content form" v-for="tab in tabs" v-show="tab.name === tabSeletecd">
-        <component v-for="schema in components[tab.name]" :key="schema.field" :is="schema.component"
-                   v-bind="schema" v-model="record[schema.field]"
-                   @input="formInput(schema.field, arguments)" @event="formEvent"></component>
-      </div>
-    </div>
-
-    <div v-else class="form">
+    <div class="form">
       <component v-for="schema in schemas" :key="schema.field" :is="schema.component"
                  v-bind="schema" v-model="record[schema.field]"
                  @input="formInput(schema.field, arguments)" @event="formEvent"></component>

components/form/AppFormTabs.vue

@@ -1,15 +1,12 @@
 <template>
-  <div class="app-form">
-
-    <div class="tabs">
-      <q-tabs v-model="tabSeletecd" inverted>
-        <q-tab v-for="tab in tabs" :key="tab.name" slot="title" v-bind="tab"/>
-      </q-tabs>
-      <div class="tab-content form" v-for="tab in tabs" v-show="tab.name === tabSeletecd">
-        <component v-for="schema in components[tab.name]" :key="schema.field" :is="schema.component"
-                   v-bind="schema" v-model="record[schema.field]"
-                   @input="formInput(schema.field, arguments)" @event="formEvent"></component>
-      </div>
+  <div class="app-form-tabs">
+    <q-tabs v-model="tabSeletecd" inverted>
+      <q-tab v-for="tab in tabs" :key="tab.name" slot="title" v-bind="tab"/>
+    </q-tabs>
+    <div class="tab-content form" v-for="tab in tabs" v-show="tab.name === tabSeletecd">
+      <component v-for="schema in componentsForTabs[tab.name]" :key="schema.field" :is="schema.component"
+                 v-bind="schema" v-model="record[schema.field]"
+                 @input="formInput(schema.field, arguments)" @event="formEvent"></component>
     </div>
   </div>
 </template>
@@ -18,7 +15,7 @@
   import appForm from './AppForm'
 
   export default {
-    name: 'app-tabs',
+    name: 'app-form-tabs',
     extends: appForm,
     created () {
       this.tabSeletecd = this.tab

components/form/AppFormWizard.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="app-form-wizard">
+    <q-stepper v-model="currentStep" ref="stepper">
+      <q-step v-for="(step, index) in steps" :name="step.name" :order="index"
+              :key="step.name" :title="step.title" :subtitle="step.subtitle" :icon="step.icon">
+        <div class="form">
+          <component v-for="schema in componentsForWizard[step.name]" :key="schema.field" :is="schema.component"
+                     v-bind="schema" v-model="record[schema.field]"
+                     @input="formInput(schema.field, arguments)" @event="formEvent"></component>
+        </div>
+        <q-stepper-navigation v-if="$g.get(step, 'navigation.show')">
+          <q-btn v-bind="$g.get(step, 'navigation.props')"
+                 :disable="$g.get(step, 'navigation.back') === ''"
+                 @click="currentStep = $g.get(step, 'navigation.back')">Voltar</q-btn>
+          <q-btn v-bind="$g.get(step, 'navigation.props')"
+                 :disable="$g.get(step, 'navigation.next') === ''"
+                 @click="currentStep = step.navigation.next">Avançar</q-btn>
+        </q-stepper-navigation>
+      </q-step>
+      <!--<q-stepper-navigation>
+        <q-btn flat @click="$refs.stepper.previous()">Back</q-btn>
+        <q-btn @click="$refs.stepper.next()">Next</q-btn>
+      </q-stepper-navigation>-->
+    </q-stepper>
+  </div>
+</template>
+
+<script type="text/javascript">
+  import appForm from './AppForm'
+
+  export default {
+    name: 'app-form-wizard',
+    extends: appForm,
+    methods: {
+      nextStep () {
+        this.$refs.stepper.next()
+      },
+      previousStep () {
+        this.$refs.stepper.previous()
+      }
+    },
+    created () {
+      this.currentStep = this.step
+      if (!this.currentStep) {
+        this.currentStep = (Array.isArray(this.steps) && this.step[0]) ? this.step[0].name : ''
+      }
+      if (this.$route.query.step) {
+        this.currentStep = this.$route.query.step
+      }
+    }
+  }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+    .q-stepper
+      box-shadow none
+      .q-stepper-header
+        box-shadow none
+      .q-stepper-step
+        .q-stepper-step-content
+          .q-stepper-step-inner
+            padding 10px 3px !important
+</style>

components/form/model/mixins/MixinData.js

@@ -1,6 +1,7 @@
 export default {
   data: () => ({
-    components: {},
+    componentsForWizard: {},
+    componentsForTabs: {},
     schemas: {},
     record: {},
     tabSeletecd: '',

components/form/model/mixins/MixinMethods.js

@@ -52,18 +52,22 @@ export default {
     /**
      */
     updateComponents () {
-      const components = {}
+      const componentsForTabs = {}
       if (this.tabs.length) {
         this.tabs.forEach(tab => {
-          components[tab.name] = this.fields.filter(field => field.tab === tab.name).reduce(arrayToObject, {})
+          componentsForTabs[tab.name] = this.fields
+            .filter(field => field.tab === tab.name).reduce(arrayToObject, {})
         })
       }
+      const componentsForWizard = {}
       if (this.steps.length) {
         this.steps.forEach(step => {
-          components[step.name] = this.fields.filter(field => field.step === step.name).reduce(arrayToObject, {})
+          componentsForWizard[step.name] = this.fields
+            .filter(field => field.step === step.name).reduce(arrayToObject, {})
         })
       }
-      this.components = components
+      this.componentsForTabs = componentsForTabs
+      this.componentsForWizard = componentsForWizard
     },
     /**
      */

infra/services/http/index.js

@@ -6,16 +6,30 @@ import { loading } from 'genesis/support/message'
 
 import configure from './configure'
 
+/**
+ * @type {Object}
+ */
+const HEADERS = {
+  'Accept': 'application/json',
+  'Content-Type': 'application/json;charset=UTF-8'
+}
+
+/**
+ * @param {string} baseURL
+ * @param {Object} headers
+ * @return {AxiosInstance}
+ */
+export const create = (baseURL = '', headers = {}) => {
+  return axios.create({
+    baseURL: baseURL || URL_API,
+    headers: Object.assign({}, HEADERS, headers)
+  })
+}
+
 /**
  * @type {Axios}
  */
-export const http = axios.create({
-  baseURL: URL_API,
-  headers: {
-    'Accept': 'application/json',
-    'Content-Type': 'application/json'
-  }
-})
+export const http = create()
 
 /**
  * @returns {Axios}