Merge pull request #49 from wilcorrea-forks/master

[#4 #12] Organize menu to docs and prepare some base to code generation

quasar.conf.js

@@ -99,7 +99,8 @@ module.exports = function (context) {
         'QBar',
         'QTabs',
         'QTab',
-        'QFab'
+        'QFab',
+        'QExpansionItem'
       ],
 
       directives: [

src/app/Prototype/Style/field.styl

@@ -31,7 +31,8 @@ $break = 700px
     for index in (1..100)
       &.width-{index * 1}
         grid-column auto / span index
-    for index in (1..100)
+
+    for index in (1..10)
       &.height-{index}
         grid-row auto / span index
 

src/domains/Auth/Service/AuthService.js

@@ -23,38 +23,10 @@ export default class AuthService extends API {
     // return this.post(`/auth/sigin`, {login, password})
     return this.fake({
       token: uniqueKey(),
-      menus: [
-        {
-          label: 'Home',
-          sublabel: '',
-          icon: 'home',
-          path: '/dashboard'
-        },
-        {
-          label: 'Simple Test',
-          sublabel: 'Just a simple test ; )',
-          icon: 'code',
-          path: '/dashboard/test'
-        },
-        {
-          label: 'Test With Hooks',
-          sublabel: 'Demo to show declare hooks',
-          icon: 'code',
-          path: '/dashboard/test-with-hooks'
-        },
-        {
-          label: 'Test Template Form',
-          sublabel: 'Using form control with template',
-          icon: 'code',
-          path: '/dashboard/test-with-template/form'
-        },
-        {
-          label: 'Test Template Table',
-          sublabel: 'Using table control with template',
-          icon: 'code',
-          path: '/dashboard/test-with-template/table'
-        }
-      ]
+      user: {
+        name: 'William Correa',
+        email: '[email protected]'
+      }
     })
   }
 

src/domains/Doc/index.js

@@ -0,0 +1,5 @@
+/**
+ * @param {AppRouter} router
+ * @returns {Array}
+ */
+export const routes = (router) => []

src/domains/Example/index.js

@@ -0,0 +1,13 @@
+import test from 'src/domains/Example/Test/Routes'
+import testWithHooks from 'src/domains/Example/TestWithHooks/Routes'
+import testWithTemplate from 'src/domains/Example/TestWithTemplate/Routes'
+
+/**
+ * @param {AppRouter} router
+ * @returns {Array}
+ */
+export const routes = (router) => [
+  ...test(router),
+  ...testWithHooks(router),
+  ...testWithTemplate(router)
+]

src/modules/Auth/Store/actions.js

@@ -5,7 +5,7 @@
  */
 export const login = (context, credentials) => {
   context.commit('mutateToken', credentials.token)
-  context.dispatch('app/setDrawer', credentials.menus, { root: true })
+  context.commit('mutateUser', credentials.user)
 }
 
 /**

src/modules/Dashboard/Components/DashboardLayout.vue

@@ -85,33 +85,10 @@
       </q-img>
 
       <q-scroll-area class="q-layout-scroll">
-        <q-list padding>
-          <q-item-label header>
-            {{ appName }}
-          </q-item-label>
-          <q-item
-            v-for="(menu, index) in appDrawer"
-            :key="index"
-            @click.native="menuOpen(menu)"
-            clickable
-          >
-            <q-item-section
-              v-if="menu.icon"
-              avatar
-            >
-              <q-icon :name="menu.icon" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ menu.label }}</q-item-label>
-              <q-item-label
-                v-if="menu.sublabel"
-                caption
-              >
-                {{ menu.sublabel }}
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
+        <dashboard-menu
+          v-bind="{ header, menu }"
+          @click="menuOpen"
+        />
       </q-scroll-area>
     </q-drawer>
 
@@ -160,7 +137,10 @@
 <script type="text/javascript">
 import { fallback } from 'src/config'
 import Transition from 'src/modules/General/Mixins/Transition'
+import menu from 'src/modules/Dashboard/menu'
+
 import StudioCanvas from 'src/view/Studio/StudioCanvas'
+import DashboardMenu from 'src/modules/Dashboard/Components/DashboardMenu'
 
 /**
  */
@@ -171,6 +151,7 @@ export default {
   /**
    */
   components: {
+    DashboardMenu,
     StudioCanvas
   },
   /**
@@ -193,13 +174,13 @@ export default {
     /**
      * @returns {string}
      */
-    appName () {
+    header () {
       return this.$store.getters['app/getName']
     },
     /**
      * @returns {Array}
      */
-    appDrawer () {
+    menu () {
       return this.$store.getters['app/getDrawer']
     }
   },
@@ -239,6 +220,8 @@ export default {
     this.$watch('debugging', (debugging) => {
       this.$store.dispatch('app/setDebuggers', debugging)
     })
+
+    this.$store.dispatch('app/setDrawer', menu, { root: true })
   }
 }
 </script>

src/modules/Dashboard/Components/DashboardMenu.vue

@@ -0,0 +1,76 @@
+<template>
+  <q-list padding>
+    <q-item-label header>
+      {{ header }}
+    </q-item-label>
+    <template v-for="(item, index) in menu">
+      <q-expansion-item
+        v-if="item.children"
+        :key="`expansion-item-${index}`"
+        :icon="item.icon"
+        :label="item.label"
+        :caption="item.sublabel"
+      >
+        <dashboard-menu-item
+          v-for="(element, key) in item.children"
+          :key="key"
+          :item="element"
+          @click="click"
+        />
+      </q-expansion-item>
+
+      <dashboard-menu-item
+        v-else
+        :key="`menu-item-${index}`"
+        :item="item"
+        @click="click"
+      />
+    </template>
+  </q-list>
+</template>
+
+<script type="text/javascript">
+import DashboardMenuItem from 'src/modules/Dashboard/Components/DashboardMenuItem'
+
+/**
+ */
+export default {
+  /**
+   */
+  name: 'DashboardMenu',
+  /**
+   */
+  components: { DashboardMenuItem },
+  /**
+   */
+  props: {
+    header: {
+      type: String,
+      default: ''
+    },
+    menu: {
+      type: Array,
+      default: () => []
+    }
+  },
+  /**
+   */
+  methods: {
+    /**
+     * @param {Object} item
+     */
+    click (item) {
+      this.$emit('click', item)
+    }
+  }
+}
+</script>
+
+<style
+  lang="stylus"
+  scoped
+>
+  >>> .q-expansion-item__content
+    .q-item.q-item-type
+      padding 8px 16px 8px 24px
+</style>

src/modules/Dashboard/Components/DashboardMenuItem.vue

@@ -0,0 +1,55 @@
+<template>
+  <q-item
+    @click.native="click"
+    clickable
+  >
+    <q-item-section
+      v-if="item.icon"
+      avatar
+    >
+      <q-icon :name="item.icon" />
+    </q-item-section>
+    <q-item-section>
+      <q-item-label>{{ item.label }}</q-item-label>
+      <q-item-label
+        v-if="item.sublabel"
+        caption
+      >
+        {{ item.sublabel }}
+      </q-item-label>
+    </q-item-section>
+  </q-item>
+</template>
+
+<script type="text/javascript">
+/**
+ */
+export default {
+  /**
+   */
+  name: 'DashboardMenuItem',
+  /**
+   */
+  props: {
+    /**
+     */
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  /**
+   */
+  methods: {
+    /**
+     */
+    click () {
+      this.$emit('click', this.item)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/modules/Dashboard/Routes/index.js

@@ -1,9 +1,8 @@
 import $store from 'src/store'
 import { children, fallback } from 'src/app/Router'
 
-import test from 'src/domains/Example/Test/Routes'
-import testWithHooks from 'src/domains/Example/TestWithHooks/Routes'
-import testWithTemplate from 'src/domains/Example/TestWithTemplate/Routes'
+import { routes as doc } from 'src/domains/Doc'
+import { routes as example } from 'src/domains/Example'
 
 /**
  * @returns {Promise}
@@ -18,9 +17,8 @@ export default (router) => {
   const routes = [
     children('/dashboard', layout, [
       fallback(() => import('src/view/Dashboard/Index')),
-      ...test(router),
-      ...testWithHooks(router),
-      ...testWithTemplate(router)
+      ...doc(router),
+      ...example(router)
     ])
   ]
 

src/modules/Dashboard/menu.js

@@ -0,0 +1,45 @@
+export default [
+  {
+    label: 'Presentation',
+    sublabel: '',
+    icon: 'home',
+    path: '/dashboard'
+  },
+  {
+    label: 'Doc',
+    sublabel: '',
+    icon: 'school',
+    path: '/dashboard/docs'
+  },
+  {
+    label: 'Examples',
+    sublabel: '',
+    icon: 'code',
+    children: [
+      {
+        label: 'Simple Test',
+        sublabel: 'Just a simple test ; )',
+        icon: 'code',
+        path: '/dashboard/test'
+      },
+      {
+        label: 'Test With Hooks',
+        sublabel: 'Demo to show declare hooks',
+        icon: 'code',
+        path: '/dashboard/test-with-hooks'
+      },
+      {
+        label: 'Test Template Form',
+        sublabel: 'Using form control with template',
+        icon: 'code',
+        path: '/dashboard/test-with-template/form'
+      },
+      {
+        label: 'Test Template Table',
+        sublabel: 'Using table control with template',
+        icon: 'code',
+        path: '/dashboard/test-with-template/table'
+      }
+    ]
+  }
+]

src/view/Dashboard/Example/TestWithTemplate/TestWithTemplateForm.vue

@@ -160,7 +160,7 @@ export default {
     storage: {},
     errors: {},
     status: {
-      description: ['Houston, we have a problem']
+      description: []
     },
     activeHidden: false,
     descriptionLabel: '',
@@ -224,6 +224,10 @@ export default {
   /**
    */
   created () {
+    this.hook('fetch:record', function () {
+      window.setTimeout(() => { this.status.description = ['Houston, we have a problem'] }, 500)
+    })
+
     this.descriptionLabel = this.$t('example.textWithTemplateForm.fields.description')
   },
   /**