Skip to content

Commit

Permalink
Prepare a PageForm component
Browse files Browse the repository at this point in the history
  • Loading branch information
nWidart committed Sep 12, 2017
1 parent 681a830 commit 7bdce16
Showing 1 changed file with 134 additions and 0 deletions.
134 changes: 134 additions & 0 deletions Modules/Page/Assets/js/components/PageForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<template>
<el-form ref="form" :model="page" label-width="120px" label-position="top">
<div class="row">
<div class="col-md-10">
<div class="box box-primary">
<div class="box-body">
<el-tabs type="card">
<el-tab-pane :label="localeArray.name" v-for="(localeArray, locale) in locales" :key="localeArray.name">

<el-form-item :label="translate('page', 'title')">
<el-input v-model="page[locale].title"></el-input>
</el-form-item>
<el-form-item :label="translate('page', 'slug')">
<el-input v-model="page[locale].slug"></el-input>
</el-form-item>

// Textarea

<div class="panel box box-primary">
<div class="box-header">
<h4 class="box-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" :href="['#collapseMeta-'] + locale">
{{ translate('page', 'meta_data') }}
</a>
</h4>
</div>
<div style="height: 0px;" :id="['collapseMeta-'] + locale" class="panel-collapse collapse">
<div class="box-body">
<el-form-item :label="translate('page', 'meta_title')">
<el-input v-model="page[locale].meta_title"></el-input>
</el-form-item>
<el-form-item :label="translate('page', 'meta_description')">
<el-input type="textarea" v-model="page[locale].meta_description"></el-input>
</el-form-item>
</div>
</div>
</div>

<div class="panel box box-primary">
<div class="box-header">
<h4 class="box-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" :href="['#collapseFacebook-'] + locale">
{{ translate('page', 'facebook_data') }}
</a>
</h4>
</div>
<div style="height: 0px;" :id="['collapseFacebook-'] + locale" class="panel-collapse collapse">
<div class="box-body">
<el-form-item :label="translate('page', 'og_title')">
<el-input v-model="page[locale].og_title"></el-input>
</el-form-item>
<el-form-item :label="translate('page', 'og_description')">
<el-input type="textarea" v-model="page[locale].og_description"></el-input>
</el-form-item>
<el-form-item :label="translate('page', 'og_type')">
<el-select v-model="ogType" :placeholder="translate('page', 'og_type')">
<el-option :label="translate('page', 'facebook-types.website')" 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-form-item>
</div>
</div>
</div>

<el-form-item>
<el-button type="primary" @click="onSubmit()">{{ translate('core', 'button.create') }}</el-button>
<el-button @click="onCancel()">{{ translate('core', 'button.cancel') }}</el-button>
</el-form-item>

</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<div class="col-md-2">
<div class="box box-primary">
<div class="box-body">
<el-form-item label="">
<el-checkbox-group v-model="page.is_home">
<el-checkbox :label="translate('page', 'is homepage')" name="is_home"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item :label="translate('page', 'template')">
<el-select v-model="template" >
<el-option v-for="(template, key) in templates" :key="template"
:label="template" :value="key"></el-option>
</el-select>
</el-form-item>
</div>
</div>
</div>
</div>
</el-form>
</template>

<script>
import axios from 'axios'
import Translate from '../../../../Core/Assets/js/mixins/Translate'
export default {
mixins: [Translate],
props: {
locales: {default: null}
},
watch: {
ogType: function () {
this.page.og_type = this.ogType;
},
template: function () {
this.page.template = this.template;
}
},
data() {
return {
page: _.fromPairs(_.keys(this.locales).map(locale => [locale, {}])),
ogType: '',
template: '',
templates: {
'blog.index': 'blog/index',
'blog.show': 'blog/show',
},
}
},
methods: {
onSubmit() {
axios.post(route('api.page.page.store'), this.page)
.then(response => {
console.log(response);
})
}
},
}
</script>

0 comments on commit 7bdce16

Please sign in to comment.