swcs/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start module output

Browse Source
This commit is contained in:
Tobias Klika
2020-08-20 01:35:08 +02:00
parent f6882ea1f1
commit d65df84cc3
22 changed files with 289 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Web.UI/App/components/modules/edit-module.vue
+48 -19
View File
@@ -1,46 +1,66 @@
<template>
<ui-overlay-editor class="ui-module-overlay">
<template v-slot:header>
<ui-header-bar title="Richtext" :back-button="false" :close-button="true" />
</template>
<template v-slot:footer>
<ui-button type="white" label="@ui.close" @click="config.hide"></ui-button>
<ui-button label="Confirm" @click="onSave" :state="state"></ui-button>
</template>
<ui-form ref="form" v-slot="form" @submit="onSubmit" @load="onLoad">
<ui-overlay-editor class="ui-module-overlay">
<div class="ui-module-overlay-editor">
<ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" />
</div>
</ui-overlay-editor>
<template v-slot:header>
<ui-header-bar :title="config.module.name" :back-button="false" :close-button="true" />
</template>
<template v-slot:footer>
<ui-button type="white" label="@ui.close" @click="config.hide"></ui-button>
<ui-button :submit="true" label="Confirm" :state="form.state" :disabled="loading || disabled"></ui-button>
</template>
<ui-loading v-if="loading" :is-big="true" />
<div v-if="!loading" class="ui-module-overlay-editor">
<ui-editor :config="config.renderer" v-model="model" :meta="meta" :is-page="false" infos="none" />
</div>
</ui-overlay-editor>
</ui-form>
</template>
<script>
import ModulesApi from 'zero/resources/modules.js';
import UiEditor from 'zero/editor/editor';
export default {
props: {
model: Object,
config: Object
},
components: { UiEditor },
data: () => ({
disabled: false,
id: null,
loading: true,
state: 'default',
meta: {
}
meta: {},
model: {}
}),
methods: {
onSave()
onLoad(form)
{
//this.state = 'loading';
//this.config.confirm(res.model);
form.load(!this.id ? ModulesApi.getEmpty(this.config.module.alias) : null).then(response =>
{
this.disabled = !response.meta.canEdit;
this.meta = response.meta;
this.model = response.entity;
this.loading = false;
});
},
onSubmit(form)
{
this.config.confirm(this.model);
}
}
}
@@ -51,6 +71,7 @@
{
> content
{
position: relative;
padding-top: 0 !important;
}
@@ -75,5 +96,13 @@
{
display: block;
}
.ui-loading
{
position: absolute;
left: 50%;
top: 50%;
margin: -14px 0 0 -14px;
}
}
</style>
zero.Web.UI/App/components/modules/modules-select.vue
+27 -22
View File
@@ -32,17 +32,18 @@
<script>
import ModulesApi from 'zero/resources/modules.js';
import EditModuleOverlay from './edit-module';
import Overlay from 'zero/services/overlay.js';
import { groupBy as _groupBy, keys as _keys, each as _each } from 'underscore';
export default {
name: 'uiModulesSelect',
props: {
value: [String, Object, Array],
config: Object
value: Array,
config: Object,
types: {
type: Array,
default: () => []
}
},
@@ -54,11 +55,25 @@
}),
watch: {
types(val)
{
this.rebuildGroups(val);
}
},
created()
{
ModulesApi.getModuleTypes().then(res =>
this.rebuildGroups(this.types);
},
methods: {
rebuildGroups(value)
{
let groups = _groupBy(res, val => val.group);
let groups = _groupBy(value, val => val.group);
let index = 0;
_each(groups, (items, key) =>
@@ -73,11 +88,7 @@
});
this.activeGroup = this.moduleTypes[0];
});
},
methods: {
},
selectGroup(group)
{
@@ -87,17 +98,11 @@
editModule(module, isAdd)
{
return Overlay.open({
component: EditModuleOverlay,
display: 'editor',
module: module,
renderer: 'module.' + module.alias,
model: {},
width: 1100
}).then(value =>
this.$emit('selected', module, isAdd);
if (isAdd)
{
});
this.isSelecting = false;
}
}
}
zero.Web.UI/App/components/modules/modules.vue
+74 -7
View File
@@ -1,36 +1,92 @@
<template>
<div class="ui-modules-inner">
<ui-modules-select v-if="canAdd" />
<div class="ui-module-item" v-for="item in items">
<header class="ui-module-item-header"><i :class="getModule(item.moduleTypeAlias).icon"></i> {{getModule(item.moduleTypeAlias).name}}</header>
</div>
<ui-modules-select :types="moduleTypes" :value="value" v-if="canAdd" @selected="onSelected" />
</div>
</template>
<script>
import ModulesApi from 'zero/resources/modules.js';
import EditModuleOverlay from './edit-module';
import Overlay from 'zero/services/overlay.js';
import { find as _find } from 'underscore';
export default {
name: 'uiModules',
props: {
value: [String, Object, Array],
value: {
type: Array,
default: () => []
},
config: Object
},
data: () => ({
items: [],
canAdd: true,
isSelecting: false,
moduleTypes: []
}),
watch: {
value(val)
{
this.setup(val);
}
},
created()
{
this.setup(this.value);
ModulesApi.getModuleTypes().then(res =>
{
this.moduleTypes = res;
});
},
methods: {
start()
setup(value)
{
this.isSelecting = true;
}
this.items = JSON.parse(JSON.stringify(value || []));
},
getModule(alias)
{
return _find(this.moduleTypes, x => x.alias == alias);
},
onSelected(module, isAdd)
{
return Overlay.open({
component: EditModuleOverlay,
display: 'editor',
module: module,
renderer: 'module.' + module.alias,
model: {},
width: 1100
}).then(value =>
{
this.items.push(value);
this.onChange();
});
},
onChange()
{
this.$emit('input', this.items);
}
}
}
</script>
@@ -45,7 +101,7 @@
margin-top: var(--padding);
}
.ui-modules-start
.ui-modules-start, .ui-module-item
{
margin: 0;
padding: var(--padding);
@@ -56,6 +112,17 @@
justify-content: center;
}
.ui-module-item
{
display: block;
}
.ui-module-item + .ui-module-item,
.ui-module-item + .ui-modules-start
{
margin-top: 3px;
}
.ui-modules-start-button
{
color: var(--color-fg);