You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.8 KiB
148 lines
3.8 KiB
<template>
|
|
<q-form>
|
|
<q-input
|
|
id="item_title"
|
|
v-model="item.title"
|
|
:placeholder="$t('Title')"
|
|
:error="v$.item.title.$error"
|
|
@input="v$.item.title.$touch()"
|
|
@blur="v$.item.title.$touch()"
|
|
:error-message="titleErrors"
|
|
/>
|
|
|
|
<div class="q-gutter-sm">
|
|
<q-checkbox v-model="item.enabled" :label="$t('Enabled')"/>
|
|
</div>
|
|
|
|
<q-select
|
|
v-model="item.category"
|
|
:options="categories" :label="$t('Category')"
|
|
option-value="id"
|
|
option-label="title"
|
|
/>
|
|
|
|
<q-select v-model="item.locale" :options="locales" :label="$t('Locale')"/>
|
|
|
|
<TinyEditor
|
|
id="item_content"
|
|
v-model="item.content"
|
|
required
|
|
:init="{
|
|
skin_url: '/build/libs/tinymce/skins/ui/oxide',
|
|
content_css: '/build/libs/tinymce/skins/content/default/content.css',
|
|
branding: false,
|
|
relative_urls: false,
|
|
height: 500,
|
|
toolbar_mode: 'sliding',
|
|
file_picker_callback : browser,
|
|
autosave_ask_before_unload: true,
|
|
plugins: [
|
|
'fullpage advlist autolink lists link image charmap print preview anchor',
|
|
'searchreplace visualblocks code fullscreen',
|
|
'insertdatetime media table paste wordcount '
|
|
],
|
|
toolbar: 'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen preview save print | code codesample | ltr rtl | ' + extraPlugins,
|
|
}
|
|
"
|
|
/>
|
|
<slot></slot>
|
|
</q-form>
|
|
</template>
|
|
|
|
<script>
|
|
import has from 'lodash/has';
|
|
import useVuelidate from '@vuelidate/core';
|
|
import { required } from '@vuelidate/validators';
|
|
import {computed, ref} from "vue";
|
|
import {mapGetters, useStore} from "vuex";
|
|
import isEmpty from 'lodash/isEmpty';
|
|
|
|
export default {
|
|
name: 'PageForm',
|
|
setup () {
|
|
let locales = ref([]);
|
|
const store = useStore();
|
|
|
|
let categories = ref([]);
|
|
locales = window.languages.map(locale => locale.isocode);
|
|
let allCategories = store.dispatch('pagecategory/findAll');
|
|
|
|
allCategories.then((response) => {
|
|
categories.value = response.map(function(data) {
|
|
return data;
|
|
})
|
|
});
|
|
|
|
return { v$: useVuelidate(), locales, categories}
|
|
},
|
|
props: {
|
|
values: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
errors: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
initialValues: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
title: null,
|
|
content: null,
|
|
locale: null,
|
|
enabled: true,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
'isAuthenticated': 'security/isAuthenticated',
|
|
'currentUser': 'security/getUser',
|
|
}),
|
|
item() {
|
|
if (this.values) {
|
|
this.values.creator = this.currentUser['@id'];
|
|
this.values.url = '/api/access_urls/' + window.access_url_id;
|
|
if (!isEmpty(this.values.category)) {
|
|
this.values.category = this.values.category['@id'];
|
|
}
|
|
}
|
|
|
|
return this.initialValues || this.values;
|
|
},
|
|
titleErrors() {
|
|
const errors = [];
|
|
if (!this.v$.item.title.$dirty) return errors;
|
|
has(this.violations, 'title') && errors.push(this.violations.title);
|
|
|
|
if (this.v$.item.title.required) {
|
|
return this.$t('Field is required')
|
|
}
|
|
|
|
return errors;
|
|
},
|
|
violations() {
|
|
return this.errors || {};
|
|
}
|
|
},
|
|
validations: {
|
|
item: {
|
|
title: {
|
|
required,
|
|
},
|
|
enabled: {
|
|
required,
|
|
},
|
|
content: {
|
|
required,
|
|
},
|
|
locale: {
|
|
required,
|
|
},
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|