791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
139 lines
3.5 KiB
Vue
139 lines
3.5 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
<v-toolbar dense flat>
|
|
<v-overflow-btn
|
|
:items="components"
|
|
v-model="componentSelected"
|
|
item-text="name"
|
|
return-object
|
|
editable
|
|
label="Choose a component"
|
|
hide-details
|
|
class="pa-0"
|
|
overflow
|
|
></v-overflow-btn>
|
|
|
|
<v-btn icon>
|
|
<v-icon @click="addComponent(componentSelected)" size="15">icon-add</v-icon>
|
|
</v-btn>
|
|
</v-toolbar>
|
|
|
|
<!-- Dynamic Component -->
|
|
<component :is="componentSelected.name" :data="componentSelected.data" />
|
|
<!-- End Dynamic Component -->
|
|
|
|
<!-- Components Sort -->
|
|
<v-card outlined tile v-if="tmpPage.length > 0">
|
|
<v-toolbar dark dense flat color="red">
|
|
<v-toolbar-title>Sort Components</v-toolbar-title>
|
|
<v-spacer></v-spacer>
|
|
<v-icon>mdi-sort</v-icon>
|
|
</v-toolbar>
|
|
|
|
<v-card-text class="my-0 py-0">
|
|
<v-list>
|
|
<draggable v-model="tmpPage">
|
|
<transition-group>
|
|
<v-list-item v-for="(component, index) in tmpPage" :key="component">
|
|
<v-list-item-action>
|
|
<v-badge overlap>
|
|
<template v-slot:badge>
|
|
<span class="white--text">{{index+1}}</span>
|
|
</template>
|
|
</v-badge>
|
|
</v-list-item-action>
|
|
|
|
<v-list-item-content>
|
|
<v-list-item-title v-text="`${component.name}`"></v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</transition-group>
|
|
</draggable>
|
|
</v-list>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-btn block color="red" depressed dark @click>Save</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
<!-- end Components Sort -->
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
/**
|
|
* Builder
|
|
*
|
|
* Load a list of custom components from dynamicComponents dir?
|
|
*
|
|
* Clicking on ADD, we put in the preview page that component
|
|
*
|
|
* clicking on that component, we can pass some data
|
|
*
|
|
* https://www.storyblok.com/tp/vue-dynamic-component-from-json
|
|
*
|
|
* https://baianat.github.io/vuse/example.html
|
|
*
|
|
* -------
|
|
* https://github.com/tommcclean/Vue-PageBuilder
|
|
* https://www.youtube.com/watch?v=Iwwv0A7ttpQ&feature=youtu.be
|
|
* -------
|
|
*
|
|
*/
|
|
|
|
import Draggable from 'vuedraggable'
|
|
import Calendar from '@/components/DynamicComponents/Calendar'
|
|
import Carousel from '@/components/DynamicComponents/Carousel'
|
|
import Card from '@/components/DynamicComponents/Card'
|
|
|
|
export default {
|
|
components: {
|
|
Calendar,
|
|
Card,
|
|
Carousel,
|
|
Draggable
|
|
},
|
|
layout: `${process.env.CUSTOMER}Admin`,
|
|
data: () => ({
|
|
tmpPage: [],
|
|
componentSelected: '',
|
|
components: [
|
|
{
|
|
name: 'Carousel',
|
|
data: {
|
|
items: [
|
|
{
|
|
src: 'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg'
|
|
},
|
|
{
|
|
src: 'https://cdn.vuetifyjs.com/images/carousel/sky.jpg'
|
|
},
|
|
{
|
|
src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg'
|
|
},
|
|
{
|
|
src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
{
|
|
name: 'Card',
|
|
data: {
|
|
title: '3110 Card',
|
|
image: 'https://cdn.vuetifyjs.com/images/cards/cooking.png'
|
|
}
|
|
}
|
|
],
|
|
carousel: {
|
|
name: 'Carousel'
|
|
}
|
|
}),
|
|
methods: {
|
|
addComponent(component) {
|
|
this.tmpPage.push(component)
|
|
}
|
|
}
|
|
}
|
|
</script> |