159 lines
3.7 KiB
Vue
159 lines
3.7 KiB
Vue
<template>
|
|
<ui-form ref="form" v-slot="form" @submit="onSubmit" @load="onLoad">
|
|
<ui-overlay-editor class="ui-editor-overlay integration">
|
|
|
|
<template v-slot:header>
|
|
<ui-header-bar :title="config.model.name" :back-button="false" :close-button="true" />
|
|
</template>
|
|
|
|
<template v-slot:footer>
|
|
<ui-button type="light onbg" label="@ui.close" @click="config.hide"></ui-button>
|
|
<ui-button v-if="!config.isCreate" type="light onbg" label="@ui.remove" @click="onDelete"></ui-button>
|
|
<ui-button v-if="!disabled" type="primary" :submit="true" label="@ui.save" :state="form.state" :disabled="loading"></ui-button>
|
|
</template>
|
|
|
|
<ui-loading v-if="loading" :is-big="true" />
|
|
|
|
<div v-if="!loading" class="ui-editor-overlay-editor">
|
|
<ui-editor :config="editor" v-model="model" :meta="meta" :is-page="false" infos="none" :disabled="disabled" />
|
|
</div>
|
|
|
|
</ui-overlay-editor>
|
|
</ui-form>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import UiEditor from 'zero/editor/editor.vue';
|
|
import Overlay from 'zero/helpers/overlay.js';
|
|
import Notification from 'zero/helpers/notification.js';
|
|
import IntegrationsApi from 'zero/api/integrations.js';
|
|
|
|
export default {
|
|
|
|
props: {
|
|
config: Object
|
|
},
|
|
|
|
components: { UiEditor },
|
|
|
|
data: () => ({
|
|
disabled: false,
|
|
loading: true,
|
|
state: 'default',
|
|
editor: null,
|
|
meta: {},
|
|
model: {}
|
|
}),
|
|
|
|
mounted()
|
|
{
|
|
//this.$el.style.setProperty('--color-primary', this.config.model.color);
|
|
//this.$el.style.setProperty('--color-button', this.config.model.color);
|
|
},
|
|
|
|
methods: {
|
|
|
|
onLoad(form)
|
|
{
|
|
form.load(this.config.isCreate ? IntegrationsApi.getEmptySettings(this.config.alias) : IntegrationsApi.getSettingsByAlias(this.config.alias)).then(response =>
|
|
{
|
|
this.disabled = !response.meta.canEdit;
|
|
this.meta = response.meta;
|
|
this.model = response.entity;
|
|
this.editor = this.model.integrationAlias ? 'integration.' + this.model.integrationAlias : null;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
|
|
onSubmit(form)
|
|
{
|
|
form.handle(IntegrationsApi.save(this.model)).then(res =>
|
|
{
|
|
this.config.confirm(res);
|
|
});
|
|
},
|
|
|
|
|
|
onDelete()
|
|
{
|
|
Overlay.confirmDelete().then(opts =>
|
|
{
|
|
opts.state('loading');
|
|
IntegrationsApi.delete(this.model.id).then(response =>
|
|
{
|
|
if (response.success)
|
|
{
|
|
opts.state('success');
|
|
opts.hide();
|
|
Notification.success('@deleteoverlay.success', '@deleteoverlay.success_text');
|
|
this.config.close();
|
|
}
|
|
else
|
|
{
|
|
opts.errors(response.errors);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
/*.integration .ui-header-bar
|
|
{
|
|
background: var(--color-primary);
|
|
margin-bottom: var(--padding);
|
|
}
|
|
|
|
.integration .ui-header-bar h2, .integration .ui-header-bar .ui-button-icon
|
|
{
|
|
color: var(--color-primary-text) !important;
|
|
}*/
|
|
|
|
.integration .ui-box + .ui-box
|
|
{
|
|
margin-top: var(--padding) !important;
|
|
}
|
|
|
|
.ui-editor-overlay
|
|
{
|
|
> content
|
|
{
|
|
position: relative;
|
|
padding-top: 0 !important;
|
|
}
|
|
|
|
.ui-box
|
|
{
|
|
margin: 0;
|
|
}
|
|
|
|
.ui-tabs-list
|
|
{
|
|
padding: 0;
|
|
padding-bottom: 32px;
|
|
}
|
|
|
|
.ui-property.ui-modules
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.editor-outer.-infos-aside:not(.is-page)
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
.ui-loading
|
|
{
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin: -14px 0 0 -14px;
|
|
}
|
|
}
|
|
</style> |