Em-dashboard NPM

em-dashboard

dashboard REST processing

Install

npm install --save em-dasboard

Add to project only Global

Vue.use options

Vue.use(EmIcon,options)	Component	Options

//Code point data
//./glyphs/icons1.js
export default [
{name: 'icon_name', code_point: 'e001'},
{name: 'icon2_name', code_point: 'e002'}
]
//./glyphs/index.js
export { default as Icons} from './icons'

// main.js
import {Icons} from './glyphs/index'
Vue.use(EmDashboard, {
    routes: [
        {
            route: 'products',//laravel api route
            root:'products', //spa vue root rote
            param: 'product'//param redource in vue route
        }
    ],
    glyphs: [{font: 'SomeIconsFontFamily', data: Icons}],
    requireComponentContext:require.context('@/components/cards/', true, /\.vue$/i),// for em-grid-card-items 
    globalComponents:[
        'EmCardClient',
        'EmCardStory',
    ],
    installEmIcon:true,//install dasboard em-icon commponent + dasboard glyphs
    isDebug:false,//console debug mixin,drawer process 
    store,
    router,
})

//Pages Dashboard STRUCTURA   
//              /pages
//                 /products
//                    PageProducts.vue  
//                    /product
//                         DrawerProduct.vue
//                         DrawerProductMore.vue

// router/index.js
{
    path: '/products',
        name: "page-products",
    meta: {
    layout: 'main',
        title: 'Продукты',
        controls: {
        more: false,
            activity: true,
            toolbar: true
    }
},
    components: {
    default: () => import('@/pages/products/PageProducts')
    }
},
{
    path: '/products/:product',
    name: "page-products-product",
    meta: {
    layout: 'main',
        title: 'Продукты',
        headerDrawer: 'Продукт',
        controls: {
        more: true,
            activity: true,
            toolbar: true
    }
},
    components: {
    default: () => import('@/pages/products/PageProducts'),
            drawer: () => import('@/pages/products/product/DrawerProduct')
    }
},
{
    path: '/products/:product/more',
    name: "page-products-product-edit",
    meta: {
    layout: 'main',
        title: 'Продукты',
        headerDrawer: 'Продукт',
        headerMore: 'Продукт',
        dummy: true,
        root:'products',
        controls: {
        more: true,
            activity: true,
            toolbar: true
    }
},
    components: {
    default: () => import('@/pages/products/PageProducts'),
            drawer: () => import('@/pages/products/product/DrawerProduct'),
            drawerMore: () => import('@/pages/products/product/DrawerProductMore'),
    }
}

App

<template>
    <div id="app">
        <em-drawer/>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: 'App',
    }
</script>
<style lang="scss">
    @import "~em-dashboard/src/styles/common";
    @import "~em-dashboard/src/fonts/fonts.css";
    @import "~em-grid-card-items/src/styles/style";
</style>

DrawerPageEntry

<template>
    <div class="drawer-product" v-if="entry">
        <el-form
                v-loading="loading"
                label-position="top"
                status-icon
                :model="form"
                :rules="rules"
                ref="form"
                @validate="save"
        >
            <el-form-item
                    label="Name Product"
                    prop="name"
            >
                <el-input
                        type="textarea"
                        autosize
                        placeholder="Описание разработчика"
                        v-model="form.name">
                </el-input>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {MixinPageEntryDelegate} from from "~em-dashboard/src/mixins";

    export default {
        name: "PageProduct",
        mixins:[MixinPageEntryDelegate],
        data(){
            return{
                more:'page-products-product-edit',//edit rout page
                form:{//here loading data entry
                    name:'',
                    description:''
                }
            }
        }
    }
</script>

<style lang="scss">
    .drawer-product{

    }
</style>

CardEntry

<template>
    <div class="card-product"
         :class="[classMain,{'preview-mode':isPreviewMode}]"
         @click="clickItem"
    >

        <template v-if="!isAddMode">
            <div class="card-product-bg" >
                <img :src="item.image_logo || require('@/assets/img/not-found.svg')">
            </div>
            <h6>{{ item.name }}</h6>
            <p>{{ dateWhen }}</p>
        </template>
        <template v-else>
            <div class="card-holiday-bg" v-loading="loading"/>
            <h6>Add</h6>
        </template>
    </div>
</template>

<script>
    import {MixinCardEntry} from "~em-dashbord/mixins";

    export default {
        name: "CardProduct",
        mixins:[MixinCardEntry],
        props: {
            item: {
                type: Object,
            },
        },
        data() {
            return {
                apiRoute:'products',//route on backend
                paramEntry:'product',//vue route params entry
                editRouteName:'page-products-product',//go to page more path
                storeScope:'products',//store name entries
                propEntry:'item',//prop name entry in card
            }
        },
    }
</script>

<style lang="scss">
    .card-product {

    }
</style>