Skip to content

Commit

Permalink
Adding content header to the components itself
Browse files Browse the repository at this point in the history
  • Loading branch information
@nWidart
nWidart committed Sep 16, 2017
1 parent 7cf141f commit 40c254e
Show file tree
Hide file tree
Showing 6 changed files with 22,122 additions and 21,951 deletions.
238 changes: 129 additions & 109 deletions Modules/Page/Assets/js/components/PageForm.vue
View file
Original file line number Diff line number Diff line change
@@ -1,130 +1,149 @@
<template>
<el-form ref="form" :model="page" label-width="120px" label-position="top"
v-loading.body="loading"
@keydown="form.errors.clear($event.target.name);">
<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">
<div class="div">
<div class="content-header">
<h1>
{{ translate('page', pageTitle) }}
</h1>
<el-breadcrumb separator="/">
<el-breadcrumb-item>
<a href="/backend">Home</a>
</el-breadcrumb-item>
<el-breadcrumb-item :to="{name: 'admin.page.page.index'}">{{ translate('page', 'pages') }}
</el-breadcrumb-item>
<el-breadcrumb-item :to="{name: 'admin.page.page.create'}">{{ translate('page', pageTitle) }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>

<el-form ref="form" :model="page" label-width="120px" label-position="top"
v-loading.body="loading"
@keydown="form.errors.clear($event.target.name);">
<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">
<span slot="label" :class="{'error' : form.errors.has(locale)}">{{ localeArray.name
}}</span>
<el-form-item :label="translate('page', '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>
<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 :label="translate('page', '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>
<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 :label="translate('page', 'slug')"
:class="{'el-form-item is-error': form.errors.has(locale + '.slug') }">
<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>
</el-form-item>
<el-form-item :label="translate('page', 'slug')"
:class="{'el-form-item is-error': form.errors.has(locale + '.slug') }">
<el-button>Generate</el-button>
<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>
</el-form-item>

<el-form-item :label="translate('page', 'body')"
:class="{'el-form-item is-error': form.errors.has(locale + '.body') }">
<ckeditor v-model="page[locale].body" :value="page[locale].body">
</ckeditor>
<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 :label="translate('page', 'body')"
:class="{'el-form-item is-error': form.errors.has(locale + '.body') }">
<ckeditor v-model="page[locale].body" :value="page[locale].body">
</ckeditor>
<div class="el-form-item__error" v-if="form.errors.has(locale + '.body')"
v-text="form.errors.first(locale + '.body')"></div>
</el-form-item>

<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 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>

<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="page[locale].og_type"
: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 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="page[locale].og_type"
: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>
</div>

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

</el-tab-pane>
</el-tabs>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="box box-primary">
<div class="box-body">
<el-form-item label="">
<el-checkbox v-model="page.is_home" :true-label="1" :false-label="0" name="is_home"
:label="translate('page', 'is homepage')"></el-checkbox>
</el-form-item>
<el-form-item :label="translate('page', 'template')"
:class="{'el-form-item is-error': form.errors.has('template') }">
<el-select v-model="page.template" filterable>
<el-option v-for="(template, key) in templates" :key="template"
:label="template" :value="key"></el-option>
</el-select>
<div class="el-form-item__error" v-if="form.errors.has('template')"
v-text="form.errors.first('template')"></div>
</el-form-item>
<tags-input namespace="asgardcms/page" @input="setTags" :current-tags="tags"></tags-input>
<div class="col-md-2">
<div class="box box-primary">
<div class="box-body">
<el-form-item label="">
<el-checkbox v-model="page.is_home" :true-label="1" :false-label="0" name="is_home"
:label="translate('page', 'is homepage')"></el-checkbox>
</el-form-item>
<el-form-item :label="translate('page', 'template')"
:class="{'el-form-item is-error': form.errors.has('template') }">
<el-select v-model="page.template" filterable>
<el-option v-for="(template, key) in templates" :key="template"
:label="template" :value="key"></el-option>
</el-select>
<div class="el-form-item__error" v-if="form.errors.has('template')"
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>
</el-form>
</el-form>
</div>
</template>

<script>
Expand All @@ -137,6 +156,7 @@
mixins: [Translate, Slugify],
props: {
locales: {default: null},
pageTitle: {default: null, String},
},
data() {
return {
Expand Down
Loading

0 comments on commit 40c254e

Please sign in to comment.