Skip to content

P
Platform
Unverified Commit 0d1cf8cb authored by Nicolas Widart's avatar Nicolas Widart
Browse files
Options

Reformat & trying to set tags on load (edit)

parent 904b8656
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 43 deletions
Modules/Page/Assets/js/components/PageForm.vue
View file @ 0d1cf8cb
<template> <template>
<el-form ref="form" :model="page" label-width="120px" label-position="top" @keydown="form.errors.clear($event.target.name);"> <el-form ref="form" :model="page" label-width="120px" label-position="top"
<div class="row"> @keydown="form.errors.clear($event.target.name);">
<div class="col-md-10"> <div class="row">
<div class="box box-primary"> <div class="col-md-10">
<div class="box-body"> <div class="box box-primary">
<el-tabs type="card"> <div class="box-body">
<el-tab-pane :label="localeArray.name" v-for="(localeArray, locale) in locales" :key="localeArray.name"> <el-tabs type="card">
<span slot="label" :class="{'error' : form.errors.has(locale)}">{{ localeArray.name }}</span> <el-tab-pane :label="localeArray.name" v-for="(localeArray, locale) in locales"
:key="localeArray.name">
<span slot="label" :class="{'error' : form.errors.has(locale)}">{{ localeArray.name
}}</span>
<el-form-item :label="translate('page', 'title')" <el-form-item :label="translate('page', 'title')"
:class="{'el-form-item is-error': form.errors.has(locale + '.title') }"> :class="{'el-form-item is-error': form.errors.has(locale + '.title') }">
<el-input v-model="page[locale].title" @change="slugifyTitle($event, locale)"></el-input> <el-input v-model="page[locale].title"
<div class="el-form-item__error" v-if="form.errors.has(locale + '.title')" v-text="form.errors.first(locale + '.title')"></div> @change="slugifyTitle($event, locale)"></el-input>
<div class="el-form-item__error" v-if="form.errors.has(locale + '.title')"
v-text="form.errors.first(locale + '.title')"></div>
</el-form-item> </el-form-item>
<el-form-item :label="translate('page', 'slug')" <el-form-item :label="translate('page', 'slug')"
:class="{'el-form-item is-error': form.errors.has(locale + '.slug') }"> :class="{'el-form-item is-error': form.errors.has(locale + '.slug') }">
<el-input v-model="page[locale].slug"></el-input> <el-input v-model="page[locale].slug"></el-input>
<div class="el-form-item__error" v-if="form.errors.has(locale + '.slug')" v-text="form.errors.first(locale + '.slug')"></div> <div class="el-form-item__error" v-if="form.errors.has(locale + '.slug')"
v-text="form.errors.first(locale + '.slug')"></div>
</el-form-item> </el-form-item>
<el-form-item :label="translate('page', 'body')" <el-form-item :label="translate('page', 'body')"
:class="{'el-form-item is-error': form.errors.has(locale + '.body') }"> :class="{'el-form-item is-error': form.errors.has(locale + '.body') }">
<ckeditor v-model="page[locale].body"> <ckeditor v-model="page[locale].body">
</ckeditor> </ckeditor>
<div class="el-form-item__error" v-if="form.errors.has(locale + '.body')" v-text="form.errors.first(locale + '.body')"></div> <div class="el-form-item__error" v-if="form.errors.has(locale + '.body')"
v-text="form.errors.first(locale + '.body')"></div>
</el-form-item> </el-form-item>
<div class="panel box box-primary"> <div class="panel box box-primary">
<div class="box-header"> <div class="box-header">
<h4 class="box-title"> <h4 class="box-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" :href="['#collapseMeta-'] + locale"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
:href="['#collapseMeta-'] + locale">
{{ translate('page', 'meta_data') }} {{ translate('page', 'meta_data') }}
</a> </a>
</h4> </h4>
</div> </div>
<div style="height: 0px;" :id="['collapseMeta-'] + locale" class="panel-collapse collapse"> <div style="height: 0px;" :id="['collapseMeta-'] + locale"
class="panel-collapse collapse">
<div class="box-body"> <div class="box-body">
<el-form-item :label="translate('page', 'meta_title')"> <el-form-item :label="translate('page', 'meta_title')">
<el-input v-model="page[locale].meta_title"></el-input> <el-input v-model="page[locale].meta_title"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="translate('page', 'meta_description')"> <el-form-item :label="translate('page', 'meta_description')">
<el-input type="textarea" v-model="page[locale].meta_description"></el-input> <el-input type="textarea"
v-model="page[locale].meta_description"></el-input>
</el-form-item> </el-form-item>
</div> </div>
</div> </div>
...@@ -49,24 +59,31 @@ ...@@ -49,24 +59,31 @@
<div class="panel box box-primary"> <div class="panel box box-primary">
<div class="box-header"> <div class="box-header">
<h4 class="box-title"> <h4 class="box-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" :href="['#collapseFacebook-'] + locale"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
:href="['#collapseFacebook-'] + locale">
{{ translate('page', 'facebook_data') }} {{ translate('page', 'facebook_data') }}
</a> </a>
</h4> </h4>
</div> </div>
<div style="height: 0px;" :id="['collapseFacebook-'] + locale" class="panel-collapse collapse"> <div style="height: 0px;" :id="['collapseFacebook-'] + locale"
class="panel-collapse collapse">
<div class="box-body"> <div class="box-body">
<el-form-item :label="translate('page', 'og_title')"> <el-form-item :label="translate('page', 'og_title')">
<el-input v-model="page[locale].og_title"></el-input> <el-input v-model="page[locale].og_title"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="translate('page', 'og_description')"> <el-form-item :label="translate('page', 'og_description')">
<el-input type="textarea" v-model="page[locale].og_description"></el-input> <el-input type="textarea"
v-model="page[locale].og_description"></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="translate('page', 'og_type')"> <el-form-item :label="translate('page', 'og_type')">
<el-select v-model="page[locale].og_type" :placeholder="translate('page', 'og_type')"> <el-select v-model="page[locale].og_type"
<el-option :label="translate('page', 'facebook-types.website')" value="website"></el-option> :placeholder="translate('page', 'og_type')">
<el-option :label="translate('page', 'facebook-types.product')" value="product"></el-option> <el-option :label="translate('page', 'facebook-types.website')"
<el-option :label="translate('page', 'facebook-types.article')" value="article"></el-option> value="website"></el-option>
<el-option :label="translate('page', 'facebook-types.product')"
value="product"></el-option>
<el-option :label="translate('page', 'facebook-types.article')"
value="article"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div> </div>
...@@ -74,33 +91,38 @@ ...@@ -74,33 +91,38 @@
</div> </div>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit()" :loading="loading">{{ translate('core', 'button.create') }}</el-button> <el-button type="primary" @click="onSubmit()" :loading="loading">
{{ translate('core', 'button.create') }}
</el-button>
<el-button @click="onCancel()">{{ translate('core', 'button.cancel') }}</el-button> <el-button @click="onCancel()">{{ translate('core', 'button.cancel') }}</el-button>
</el-form-item> </el-form-item>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div>
</div> </div>
</div> </div>
</div> <div class="col-md-2">
<div class="col-md-2"> <div class="box box-primary">
<div class="box box-primary"> <div class="box-body">
<div class="box-body"> <el-form-item label="">
<el-form-item label=""> <el-checkbox v-model="page.is_home" :true-label="1" :false-label="0" name="is_home"
<el-checkbox v-model="page.is_home" :true-label="1" :false-label="0" name="is_home" :label="translate('page', 'is homepage')"></el-checkbox> :label="translate('page', 'is homepage')"></el-checkbox>
</el-form-item> </el-form-item>
<el-form-item :label="translate('page', 'template')" :class="{'el-form-item is-error': form.errors.has('template') }"> <el-form-item :label="translate('page', 'template')"
<el-select v-model="page.template" filterable> :class="{'el-form-item is-error': form.errors.has('template') }">
<el-option v-for="(template, key) in templates" :key="template" <el-select v-model="page.template" filterable>
:label="template" :value="key"></el-option> <el-option v-for="(template, key) in templates" :key="template"
</el-select> :label="template" :value="key"></el-option>
<div class="el-form-item__error" v-if="form.errors.has('template')" v-text="form.errors.first('template')"></div> </el-select>
</el-form-item> <div class="el-form-item__error" v-if="form.errors.has('template')"
<tags-input namespace="asgardcms/page" @input="setTags"></tags-input> v-text="form.errors.first('template')"></div>
</el-form-item>
<tags-input namespace="asgardcms/page" @input="setTags" :current-tags="tags"></tags-input>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</el-form> </el-form>
</template> </template>
...@@ -113,7 +135,8 @@ ...@@ -113,7 +135,8 @@
export default { export default {
mixins: [Translate, Slugify], mixins: [Translate, Slugify],
props: { props: {
locales: {default: null} locales: {default: null},
pageId: {default: null}
}, },
data() { data() {
return { return {
...@@ -130,18 +153,24 @@ ...@@ -130,18 +153,24 @@
og_type: '', og_type: '',
}]) }])
.fromPairs() .fromPairs()
.merge({template: '', is_home: 0}) .merge({template: 'default', is_home: 0})
.value(), .value(),
templates: { templates: {
'index': 'index', 'index': 'index',
'home': 'home', 'home': 'home',
'default': 'default',
}, },
form: new Form(), form: new Form(),
loading: false, loading: false,
tags: {}, tags: {},
} }
}, },
watch: {
tags: function () {
console.log('changed tags');
}
},
methods: { methods: {
onSubmit() { onSubmit() {
this.form = new Form(_.merge(this.page, {tags: this.tags})); this.form = new Form(_.merge(this.page, {tags: this.tags}));
...@@ -175,10 +204,24 @@ ...@@ -175,10 +204,24 @@
}, },
setTags(tags) { setTags(tags) {
this.tags = tags; this.tags = tags;
} },
fetchPage() {
axios.post(route('api.page.page.find', {page: this.pageId}))
.then(response => {
// console.log(response);
this.page = response.data.data;
this.tags = response.data.data.tags;
console.log(response.data.data.tags);
})
.catch(error => {
})
},
}, },
mounted() { mounted() {
this.fetchTemplates(); this.fetchTemplates();
if (this.pageId !== null) {
this.fetchPage();
}
} }
} }
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Technounit-GROUP 2023