Adding content header to the components itself

parent 7cf141fc
<template> <template>
<el-form ref="form" :model="page" label-width="120px" label-position="top" <div class="div">
v-loading.body="loading" <div class="content-header">
@keydown="form.errors.clear($event.target.name);"> <h1>
<div class="row"> {{ translate('page', pageTitle) }}
<div class="col-md-10"> </h1>
<div class="box box-primary"> <el-breadcrumb separator="/">
<div class="box-body"> <el-breadcrumb-item>
<el-tabs type="card"> <a href="/backend">Home</a>
<el-tab-pane :label="localeArray.name" v-for="(localeArray, locale) in locales" </el-breadcrumb-item>
:key="localeArray.name"> <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 slot="label" :class="{'error' : form.errors.has(locale)}">{{ localeArray.name
}}</span> }}</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" <el-input v-model="page[locale].title"
@change="slugifyTitle($event, locale)"></el-input> @change="slugifyTitle($event, locale)"></el-input>
<div class="el-form-item__error" v-if="form.errors.has(locale + '.title')" <div class="el-form-item__error" v-if="form.errors.has(locale + '.title')"
v-text="form.errors.first(locale + '.title')"></div> 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-button>Generate</el-button>
<div class="el-form-item__error" v-if="form.errors.has(locale + '.slug')" <el-input v-model="page[locale].slug"></el-input>
v-text="form.errors.first(locale + '.slug')"></div> <div class="el-form-item__error" v-if="form.errors.has(locale + '.slug')"
</el-form-item> v-text="form.errors.first(locale + '.slug')"></div>
</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" :value="page[locale].body"> <ckeditor v-model="page[locale].body" :value="page[locale].body">
</ckeditor> </ckeditor>
<div class="el-form-item__error" v-if="form.errors.has(locale + '.body')" <div class="el-form-item__error" v-if="form.errors.has(locale + '.body')"
v-text="form.errors.first(locale + '.body')"></div> 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" <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
:href="`#collapseMeta-${locale}`"> :href="`#collapseMeta-${locale}`">
{{ translate('page', 'meta_data') }} {{ translate('page', 'meta_data') }}
</a> </a>
</h4> </h4>
</div> </div>
<div style="height: 0px;" :id="`collapseMeta-${locale}`" <div style="height: 0px;" :id="`collapseMeta-${locale}`"
class="panel-collapse collapse"> 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" <el-input type="textarea"
v-model="page[locale].meta_description"></el-input> v-model="page[locale].meta_description"></el-input>
</el-form-item> </el-form-item>
</div>
</div> </div>
</div> </div>
</div>
<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" <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
:href="`#collapseFacebook-${locale}`"> :href="`#collapseFacebook-${locale}`">
{{ translate('page', 'facebook_data') }} {{ translate('page', 'facebook_data') }}
</a> </a>
</h4> </h4>
</div> </div>
<div style="height: 0px;" :id="`collapseFacebook-${locale}`" <div style="height: 0px;" :id="`collapseFacebook-${locale}`"
class="panel-collapse collapse"> 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" <el-input type="textarea"
v-model="page[locale].og_description"></el-input> 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" <el-select v-model="page[locale].og_type"
:placeholder="translate('page', 'og_type')"> :placeholder="translate('page', 'og_type')">
<el-option :label="translate('page', 'facebook-types.website')" <el-option :label="translate('page', 'facebook-types.website')"
value="website"></el-option> value="website"></el-option>
<el-option :label="translate('page', 'facebook-types.product')" <el-option :label="translate('page', 'facebook-types.product')"
value="product"></el-option> value="product"></el-option>
<el-option :label="translate('page', 'facebook-types.article')" <el-option :label="translate('page', 'facebook-types.article')"
value="article"></el-option> value="article"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
</div>
</div> </div>
</div> </div>
</div>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit()" :loading="loading"> <el-button type="primary" @click="onSubmit()" :loading="loading">
{{ translate('core', 'save') }} {{ translate('core', 'save') }}
</el-button> </el-button>
<el-button @click="onCancel()">{{ translate('core', 'button.cancel') }}</el-button> <el-button @click="onCancel()">{{ translate('core', 'button.cancel') }}
</el-form-item> </el-button>
</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')"
<el-form-item :label="translate('page', 'template')" :class="{'el-form-item is-error': form.errors.has('template') }">
:class="{'el-form-item is-error': form.errors.has('template') }"> <el-select v-model="page.template" filterable>
<el-select v-model="page.template" filterable> <el-option v-for="(template, key) in templates" :key="template"
<el-option v-for="(template, key) in templates" :key="template" :label="template" :value="key"></el-option>
:label="template" :value="key"></el-option> </el-select>
</el-select> <div class="el-form-item__error" v-if="form.errors.has('template')"
<div class="el-form-item__error" v-if="form.errors.has('template')" v-text="form.errors.first('template')"></div>
v-text="form.errors.first('template')"></div> </el-form-item>
</el-form-item> <tags-input namespace="asgardcms/page" @input="setTags" :current-tags="tags"></tags-input>
<tags-input namespace="asgardcms/page" @input="setTags" :current-tags="tags"></tags-input> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </el-form>
</el-form> </div>
</template> </template>
<script> <script>
...@@ -137,6 +156,7 @@ ...@@ -137,6 +156,7 @@
mixins: [Translate, Slugify], mixins: [Translate, Slugify],
props: { props: {
locales: {default: null}, locales: {default: null},
pageTitle: {default: null, String},
}, },
data() { data() {
return { return {
......
<template> <template>
<div class="row"> <div class="div">
<div class="col-xs-12"> <div class="content-header">
<div class="box box-primary"> <h1>
<div class="box-body"> {{ translate('page', 'pages') }}
<div class="sc-table"> </h1>
<div class="tool-bar el-row" style="padding-bottom: 20px;"> <el-breadcrumb separator="/">
<div class="actions el-col el-col-5"> <el-breadcrumb-item>
<router-link :to="{name: 'admin.page.page.create'}"> <a href="/backend">Home</a>
<el-button type="primary"><i class="el-icon-edit"></i> {{ translate('page', 'create page') }}</el-button> </el-breadcrumb-item>
</router-link> <el-breadcrumb-item :to="{name: 'admin.page.page.index'}">{{ translate('page', 'pages') }}</el-breadcrumb-item>
</div> </el-breadcrumb>
<div class="search el-col el-col-5"> </div>
<el-input icon="search" @change="performSearch" v-model="searchQuery">
</el-input> <div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-body">
<div class="sc-table">
<div class="tool-bar el-row" style="padding-bottom: 20px;">
<div class="actions el-col el-col-5">
<router-link :to="{name: 'admin.page.page.create'}">
<el-button type="primary"><i class="el-icon-edit"></i>
{{ translate('page', 'create page') }}
</el-button>
</router-link>
</div>
<div class="search el-col el-col-5">
<el-input icon="search" @change="performSearch" v-model="searchQuery">
</el-input>
</div>
</div> </div>
</div>
<el-table <el-table
:data="data" :data="data"
stripe stripe
style="width: 100%" style="width: 100%"
v-loading.body="tableIsLoading" v-loading.body="tableIsLoading"
@sort-change="handleSortChange"> @sort-change="handleSortChange">
<el-table-column prop="id" label="Id" width="100" sortable="custom"> <el-table-column prop="id" label="Id" width="100" sortable="custom">
</el-table-column> </el-table-column>
<el-table-column prop="translations.title" :label="translate('page', 'title')"> <el-table-column prop="translations.title" :label="translate('page', 'title')">
</el-table-column> </el-table-column>
<el-table-column prop="translations.slug" label="Slug"> <el-table-column prop="translations.slug" label="Slug">
</el-table-column> </el-table-column>
<el-table-column prop="created_at" label="Created at" sortable="custom"> <el-table-column prop="created_at" label="Created at" sortable="custom">
</el-table-column> </el-table-column>
<el-table-column fixed="right" prop="actions" label="Actions"> <el-table-column fixed="right" prop="actions" label="Actions">
<template scope="scope"> <template scope="scope">
<a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i <a class="btn btn-default btn-flat" @click.prevent="goToEdit(scope)"><i
class="fa fa-pencil"></i></a> class="fa fa-pencil"></i></a>
<delete-button :scope="scope" :rows="data" :translations="translations"> <delete-button :scope="scope" :rows="data" :translations="translations">
</delete-button> </delete-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<div class="pagination-wrap" style="text-align: center; padding-top: 20px;"> <div class="pagination-wrap" style="text-align: center; padding-top: 20px;">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page.sync="meta.current_page" :current-page.sync="meta.current_page"
:page-sizes="[10, 20, 50, 100]" :page-sizes="[10, 20, 50, 100]"
:page-size="parseInt(meta.per_page)" :page-size="parseInt(meta.per_page)"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="meta.total"> :total="meta.total">
</el-pagination> </el-pagination>
</div>
</div> </div>
</div> </div>
</div> </div>
......
@extends('layouts.master') @extends('layouts.master')
@section('content-header') @section('content-header')
<h1>
{{ trans('page::pages.create page') }}
</h1>
<ol class="breadcrumb">
<li><a href="{{ route('dashboard.index') }}"><i class="fa fa-dashboard"></i> {{ trans('core::core.breadcrumb.home') }}</a></li>
<li><a href="{{ route('admin.page.page.index') }}">{{ trans('page::pages.pages') }}</a></li>
<li class="active">{{ trans('page::pages.create page') }}</li>
</ol>
@stop @stop
@push('css-stack') @push('css-stack')
......
@extends('layouts.master') @extends('layouts.master')
@section('content-header') @section('content-header')
<h1>
{{ trans('page::pages.edit page') }}
</h1>
<ol class="breadcrumb">
<li><a href="{{ route('dashboard.index') }}"><i class="fa fa-dashboard"></i> {{ trans('core::core.breadcrumb.home') }}</a></li>
<li><a href="{{ route('admin.page.page.index') }}">{{ trans('page::pages.pages') }}</a></li>
<li class="active">{{ trans('page::pages.edit page') }}</li>
</ol>
@stop @stop
@push('css-stack') @push('css-stack')
......
@extends('layouts.master') @extends('layouts.master')
@section('content-header') @section('content-header')
<h1>
{{ trans('page::pages.pages') }}
</h1>
<ol class="breadcrumb">
<li><a href="{{ route('dashboard.index') }}"><i class="fa fa-dashboard"></i> {{ trans('core::core.breadcrumb.home') }}</a></li>
<li class="active">{{ trans('page::pages.pages') }}</li>
</ol>
@stop @stop
@section('content') @section('content')
......
This source diff could not be displayed because it is too large. You can view the blob instead.
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