From 4552492bb82e1de8d389a97d117d32f0bc0a9fef Mon Sep 17 00:00:00 2001
From: Kutalo Alexey <kutalo84@gmail.com>
Date: Wed, 29 Aug 2018 08:27:53 -0300
Subject: [PATCH] Add CRUD operations for site pages

---
 app/Http/Controllers/PageController.php       | 176 ++++++++++++++++++
 app/Http/Requests/PageRequest.php             |  44 +++++
 app/Page.php                                  | 112 +++++++++++
 app/Repositories/PageRepository.php           | 164 ++++++++++++++++
 config/session.php                            |   2 +-
 config/system.php                             |   3 +-
 .../2018_08_29_164612_create_pages_table.php  |  34 ++++
 resources/assets/js/layouts/Sidebar.vue       |   6 +
 resources/assets/js/routes.js                 |  25 +++
 .../assets/js/views/category/Category.vue     |   3 -
 resources/assets/js/views/page/Edit.vue       |  64 +++++++
 resources/assets/js/views/page/Form.vue       |  97 ++++++++++
 resources/assets/js/views/page/Index.vue      |  60 ++++++
 resources/assets/js/views/page/List.vue       |  60 ++++++
 resources/assets/js/views/page/PageLink.vue   |  16 ++
 .../assets/js/views/page/PageSidebar.vue      |  32 ++++
 resources/assets/js/views/page/Published.vue  | 148 +++++++++++++++
 resources/assets/js/views/page/View.vue       |  93 +++++++++
 resources/assets/js/views/pages/Main.vue      |   3 +
 resources/assets/js/views/post/List.vue       |   2 +-
 resources/assets/js/views/post/View.vue       |   2 +-
 resources/assets/sass/app.scss                |   4 +
 resources/assets/sass/pages.scss              |   1 -
 resources/lang/en/page.php                    |  25 +++
 resources/lang/ru/page.php                    |  25 +++
 routes/api.php                                |  12 ++
 26 files changed, 1205 insertions(+), 8 deletions(-)
 create mode 100755 app/Http/Controllers/PageController.php
 create mode 100755 app/Http/Requests/PageRequest.php
 create mode 100755 app/Page.php
 create mode 100755 app/Repositories/PageRepository.php
 create mode 100755 database/migrations/2018_08_29_164612_create_pages_table.php
 create mode 100755 resources/assets/js/views/page/Edit.vue
 create mode 100755 resources/assets/js/views/page/Form.vue
 create mode 100755 resources/assets/js/views/page/Index.vue
 create mode 100644 resources/assets/js/views/page/List.vue
 create mode 100755 resources/assets/js/views/page/PageLink.vue
 create mode 100755 resources/assets/js/views/page/PageSidebar.vue
 create mode 100755 resources/assets/js/views/page/Published.vue
 create mode 100755 resources/assets/js/views/page/View.vue
 create mode 100755 resources/lang/en/page.php
 create mode 100755 resources/lang/ru/page.php

diff --git a/app/Http/Controllers/PageController.php b/app/Http/Controllers/PageController.php
new file mode 100755
index 0000000..d1c4a4b
--- /dev/null
+++ b/app/Http/Controllers/PageController.php
@@ -0,0 +1,176 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\JsonResponse;
+use Illuminate\Validation\ValidationException;
+use Illuminate\Http\Request;
+use App\Http\Requests\PageRequest;
+use App\Repositories\PageRepository;
+use App\Repositories\ActivityLogRepository;
+
+class PageController extends Controller
+{
+    /**
+     * @var Request
+     */
+    protected $request;
+
+    /**
+     * @var PageRepository
+     */
+    protected $repo;
+
+    /**
+     * @var ActivityLogRepository
+     */
+    protected $activity;
+
+    /**
+     * @var string
+     */
+    protected $module = 'page';
+
+    /**
+     * Instantiate a new controller instance.
+     *
+     * @param Request $request
+     * @param PageRepository $repo
+     * @param ActivityLogRepository $activity
+     */
+    public function __construct(Request $request, PageRepository $repo, ActivityLogRepository $activity)
+    {
+        $this->request = $request;
+        $this->repo = $repo;
+        $this->activity = $activity;
+        $this->middleware('permission:access-page')->except(['getPublicPages', 'getPublicPage']);
+    }
+
+    /**
+     * Display all public pages
+     *
+     * @return JsonResponse
+     */
+    public function getPublicPages()
+    {
+        $pages = $this->repo->getPublished();
+
+        return $this->success(compact('pages'));
+    }
+
+    /**
+     * Display a public page
+     *
+     * @param string $slug
+     *
+     * @return JsonResponse
+     */
+    public function getPublicPage($slug)
+    {
+        $page = $this->repo->getBySlugForGuests($slug);
+
+        return $this->success(compact('page'));
+    }
+
+    /**
+     * Store page
+     *
+     * @param PageRequest $request
+     *
+     * @return JsonResponse
+     * @throws ValidationException
+     */
+    public function store(PageRequest $request)
+    {
+        $page = $this->repo->create($this->request->all());
+
+        $this->activity->record([
+            'module' => $this->module,
+            'module_id' => $page->id,
+            'activity' => 'published'
+        ]);
+
+        return $this->success(['page' => trans('page.page_processed', ['action' => trans('page.published')])]);
+    }
+
+    /**
+     * Upload image in Summernote editor
+     *
+     * @param PageRequest $request
+     *
+     * @return JsonResponse
+     */
+    public function uploadImage(PageRequest $request)
+    {
+        $upload_path = config('system.upload_path.images');
+        $extension = request()->file('file')->getClientOriginalExtension();
+        $filename = uniqid();
+        request()->file('file')->move($upload_path, $filename . "." . $extension);
+        $image_url = '/' . $upload_path . '/' . $filename . '.' . $extension;
+
+        return $this->success(compact('image_url'));
+    }
+
+    /**
+     * Fetch statistics
+     *
+     * @return JsonResponse
+     */
+    public function statistics()
+    {
+        $published = $this->repo->getPublished()->count();
+
+        return $this->success(compact('published'));
+    }
+
+    /**
+     * Get all published pages
+     *
+     * @return JsonResponse
+     */
+    public function getPublishedList()
+    {
+        $pages = $this->repo->getPublishedList($this->request->all());
+
+        return $this->success(compact('pages'));
+    }
+
+    /**
+     * Get page details
+     *
+     * @param string $slug
+     *
+     * @return JsonResponse
+     * @throws ValidationException
+     */
+    public function show($slug)
+    {
+        $page = $this->repo->getBySlug($slug);
+
+        return $this->success(compact('page'));
+    }
+
+    /**
+     * Delete page
+     *
+     * @param string $slug
+     *
+     * @return JsonResponse
+     * @throws \Exception
+     */
+    public function destroy($slug)
+    {
+        $page = $this->repo->getBySlug($slug);
+
+        $this->activity->record([
+            'module' => 'page',
+            'sub_module' => 'page',
+            'module_id' => $page->id,
+            'activity' => 'deleted'
+        ]);
+
+        $page->delete();
+
+        return $this->success(['page' => trans('page.deleted', ['type' => trans('page.page')])]);
+    }
+}
diff --git a/app/Http/Requests/PageRequest.php b/app/Http/Requests/PageRequest.php
new file mode 100755
index 0000000..e22f6ab
--- /dev/null
+++ b/app/Http/Requests/PageRequest.php
@@ -0,0 +1,44 @@
+<?php
+
+namespace App\Http\Requests;
+
+use Illuminate\Foundation\Http\FormRequest;
+
+class PageRequest extends FormRequest
+{
+    /**
+     * Determine if the user is authorized to make this request.
+     *
+     * @return bool
+     */
+    public function authorize()
+    {
+        return true;
+    }
+
+    /**
+     * Get the validation rules that apply to the request.
+     *
+     * @return array
+     */
+    public function rules()
+    {
+        return [
+            'title' => 'sometimes|required',
+            'body' => 'sometimes|required',
+        ];
+    }
+
+    /**
+     * Translate fields with user friendly name.
+     *
+     * @return array
+     */
+    public function attributes()
+    {
+        return [
+            'title' => trans('page.title'),
+            'body' => trans('page.body'),
+        ];
+    }
+}
diff --git a/app/Page.php b/app/Page.php
new file mode 100755
index 0000000..5004f33
--- /dev/null
+++ b/app/Page.php
@@ -0,0 +1,112 @@
+<?php
+
+namespace App;
+
+use Carbon\Carbon;
+use Illuminate\Database\Eloquent\Model;;
+
+/**
+ * App\Profile
+ *
+ * @property int $id
+ * @property string|null $title
+ * @property string|null $slug
+ * @property string|null $body
+ * @property \Carbon\Carbon|null $created_at
+ * @property \Carbon\Carbon|null $updated_at
+ * @property-read string|null $stripped_body
+ */
+class Page extends Model
+{
+    /**
+     * The attributes that are mass assignable.
+     *
+     * @var array
+     */
+    protected $fillable = [
+        'title',
+        'body',
+        'slug'
+    ];
+
+    /**
+     * The accessors to append to the model's array form.
+     *
+     * @var array
+     */
+    protected $appends = ['stripped_body'];
+
+    /**
+     * Get created at in a human readable format.
+     *
+     * @return string
+     */
+    public function getCreatedAtAttribute()
+    {
+        return Carbon::parse($this->attributes['created_at'])->diffForHumans();
+    }
+
+    /**
+     * Get updated at in a human readable format.
+     *
+     * @return string
+     */
+    public function getUpdatedAtAttribute()
+    {
+        return Carbon::parse($this->attributes['updated_at'])->diffForHumans();
+    }
+
+    /**
+     * Get body with the stripped HTML tags.
+     *
+     * @return string
+     */
+    public function getStrippedBodyAttribute()
+    {
+        return strip_tags($this->attributes['body']);
+    }
+
+    /**
+     * Sets the title and the readable slug.
+     *
+     * @param string $value
+     */
+    public function setTitleAttribute($value)
+    {
+        $this->attributes['title'] = $value;
+    }
+
+    /**
+     * Scope a query to only include page with the given slug.
+     *
+     * @param \Illuminate\Database\Eloquent\Builder $query
+     * @param string $slug
+     *
+     * @return \Illuminate\Database\Eloquent\Builder
+     */
+    public function scopeFilterBySlug($query, $slug = null)
+    {
+        if (!$slug) {
+            return $query;
+        }
+
+        return $query->where('slug', '=', $slug);
+    }
+
+    /**
+     * Scope a query to only include page with the given id.
+     *
+     * @param \Illuminate\Database\Eloquent\Builder $query
+     * @param int|null $id
+     *
+     * @return \Illuminate\Database\Eloquent\Builder
+     */
+    public function scopeFilterById($query, $id = null)
+    {
+        if (!$id) {
+            return $query;
+        }
+
+        return $query->where('id', '=', $id);
+    }
+}
diff --git a/app/Repositories/PageRepository.php b/app/Repositories/PageRepository.php
new file mode 100755
index 0000000..812bbdd
--- /dev/null
+++ b/app/Repositories/PageRepository.php
@@ -0,0 +1,164 @@
+<?php
+
+namespace App\Repositories;
+
+use App\Page;
+use Illuminate\Support\Collection;
+use Illuminate\Validation\ValidationException;
+
+class PageRepository
+{
+    /**
+     * @var Page
+     */
+    protected $page;
+
+    /**
+     * Instantiate a new controller instance.
+     *
+     * @param Page $page
+     */
+    public function __construct(Page $page)
+    {
+        $this->page = $page;
+    }
+
+    /**
+     * Count pages
+     *
+     * @return int
+     */
+    public function count()
+    {
+        return $this->page->count();
+    }
+
+    /**
+     * Get valid page by slug.
+     *
+     * @param string $slug
+     *
+     * @return Page
+     * @throws ValidationException
+     */
+    public function getBySlug($slug)
+    {
+        $page = $this->page
+            ->filterBySlug($slug)
+            ->first();
+
+        if (!$page) {
+            throw ValidationException::withMessages(['message' => trans('general.invalid_link')]);
+        }
+
+        return $page;
+    }
+
+    /**
+     * Get valid page by slug for guests.
+     *
+     * @param string $slug
+     *
+     * @return Page
+     */
+    public function getBySlugForGuests($slug)
+    {
+        $page = $this->page
+            ->filterBySlug($slug)
+            ->first();
+
+        if (!$page) {
+            return null;
+        }
+
+        return $page;
+    }
+
+    /**
+     * Find page by Id
+     *
+     * @param int|null $id
+     *
+     * @return Page
+     * @throws ValidationException
+     */
+    public function findOrFail($id = null)
+    {
+        $page = $this->page->find($id);
+
+        if (!$page) {
+            throw ValidationException::withMessages(['message' => trans('page.could_not_find')]);
+        }
+
+        return $page;
+    }
+
+    /**
+     * Publish page.
+     *
+     * @param array $params
+     *
+     * @return Page
+     * @throws ValidationException
+     */
+    public function create($params = [])
+    {
+        $id = isset($params['id']) ? $params['id'] : null;
+
+        if ($id) {
+            $page = $this->page->filterById($id)->first();
+            if (!$page) {
+                throw ValidationException::withMessages(['message' => trans('page.invalid_action')]);
+            }
+        }
+        $page = ($id) ? $this->page->find($id) : $this->page;
+        $page->fill([
+            'title' => $params['title'],
+            'body' => $params['body'],
+        ]);
+
+        if (!$id) {
+            $slug = str_slug($params['title']);
+            if (Page::whereSlug($slug)->exists()) {
+                throw ValidationException::withMessages(['message' => trans('page.slug_exists')]);
+            }
+            $page->fill([
+                'slug' => $slug,
+            ]);
+        }
+
+        $page->save();
+
+        return $page;
+    }
+
+    /**
+     * Get published pages.
+     *
+     * @return Page[]|Collection
+     */
+    public function getPublished()
+    {
+        return $this->page->get();
+    }
+
+    /**
+     * Get published pages.
+     *
+     * @param array $params
+     *
+     * @return Page[]|Collection
+     */
+    public function getPublishedList($params = [])
+    {
+        $page_length = isset($params['page_length']) ? $params['page_length'] : config('config.page_length');
+
+        $published = $this->page;
+
+        if (!isset($params['page_length'])) {
+            return $published->get();
+        }
+
+        return $published->orderBy('created_at', 'desc')->paginate($page_length);
+    }
+}
diff --git a/config/session.php b/config/session.php
index 736fb3c..c86c148 100644
--- a/config/session.php
+++ b/config/session.php
@@ -29,7 +29,7 @@
     |
     */
 
-    'lifetime' => env('SESSION_LIFETIME', 120),
+    'lifetime' => env('SESSION_LIFETIME', 12000),
 
     'expire_on_close' => false,
 
diff --git a/config/system.php b/config/system.php
index 6e9233e..a396d4b 100755
--- a/config/system.php
+++ b/config/system.php
@@ -77,7 +77,8 @@
         "change-status-user",
         "access-post",
         "enable-login",
-        "access-category"
+        "access-category",
+        "access-page"
     ],
     "color_themes" => [
         [
diff --git a/database/migrations/2018_08_29_164612_create_pages_table.php b/database/migrations/2018_08_29_164612_create_pages_table.php
new file mode 100755
index 0000000..3c3e322
--- /dev/null
+++ b/database/migrations/2018_08_29_164612_create_pages_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class CreatePagesTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('pages', function (Blueprint $table) {
+            $table->increments('id');
+            $table->string('title')->nullable();
+            $table->string('slug')->nullable();
+            $table->longText('body')->nullable();
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('pages');
+    }
+}
diff --git a/resources/assets/js/layouts/Sidebar.vue b/resources/assets/js/layouts/Sidebar.vue
index ed7c68a..ccb8992 100755
--- a/resources/assets/js/layouts/Sidebar.vue
+++ b/resources/assets/js/layouts/Sidebar.vue
@@ -39,6 +39,12 @@
                             <span class="hide-menu">{{ trans('category.categories') }}</span>
                         </router-link>
                     </li>
+                    <li v-if="hasPermission('access-page')">
+                        <router-link to="/page" exact>
+                            <i class="fas fa-columns fa-fw"></i>
+                            <span class="hide-menu">{{ trans('page.pages') }}</span>
+                        </router-link>
+                    </li>
                     <li v-if="hasPermission('access-configuration')">
                         <router-link to="/activity-log" exact>
                             <i class="fas fa-bars fa-fw"></i>
diff --git a/resources/assets/js/routes.js b/resources/assets/js/routes.js
index b494f93..63d55ef 100755
--- a/resources/assets/js/routes.js
+++ b/resources/assets/js/routes.js
@@ -212,6 +212,26 @@ let routes = [
                 path: '/category',
                 component: require('./views/category/Category'),
                 meta: {title: i18n.category.categories + ' | ' + appName}
+            },
+            {
+                path: '/page',
+                component: require('./views/page/Index.vue'),
+                meta: {title: i18n.page.new + ' | ' + appName}
+            },
+            {
+                path: '/page/new',
+                component: require('./views/page/Index.vue'),
+                meta: {title: i18n.page.new + ' | ' + appName}
+            },
+            {
+                path: '/page/published',
+                component: require('./views/page/Published.vue'),
+                meta: {title: i18n.page.published_box + ' | ' + appName}
+            },
+            {
+                path: '/page/:slug/edit',
+                component: require('./views/page/Edit'),
+                meta: {title: i18n.page.edit + ' | ' + appName}
             }
         ]
     },
@@ -234,6 +254,11 @@ let routes = [
                 path: '/:category/:slug',
                 component: require('./views/post/View.vue'),
                 meta: {title: appName}
+            },
+            {
+                path: '/:slug',
+                component: require('./views/page/View.vue'),
+                meta: {title: appName}
             }
         ]
     },
diff --git a/resources/assets/js/views/category/Category.vue b/resources/assets/js/views/category/Category.vue
index 9b5fe92..0313fbb 100755
--- a/resources/assets/js/views/category/Category.vue
+++ b/resources/assets/js/views/category/Category.vue
@@ -7,9 +7,6 @@
                     <li class="breadcrumb-item">
                         <router-link to="/home">{{ trans('general.home') }}</router-link>
                     </li>
-                    <li class="breadcrumb-item">
-                        <router-link to="/configuration">{{ trans('configuration.configuration') }}</router-link>
-                    </li>
                     <li class="breadcrumb-item active">{{ trans('category.categories') }}</li>
                 </ol>
             </div>
diff --git a/resources/assets/js/views/page/Edit.vue b/resources/assets/js/views/page/Edit.vue
new file mode 100755
index 0000000..713b341
--- /dev/null
+++ b/resources/assets/js/views/page/Edit.vue
@@ -0,0 +1,64 @@
+<template>
+    <div>
+        <div class="row page-titles">
+            <div class="col-md-6 col-8 align-self-center">
+                <h3 class="text-themecolor m-b-0 m-t-0">{{ trans('page.pages') }}</h3>
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <router-link to="/home">{{ trans('general.home') }}</router-link>
+                    </li>
+                    <li class="breadcrumb-item">
+                        <router-link to="/page">{{ trans('page.pages') }}</router-link>
+                    </li>
+                    <li class="breadcrumb-item active">{{ trans('page.edit') }}</li>
+                </ol>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="row">
+                            <page-sidebar :statistics="statistics"></page-sidebar>
+                            <div class="col-10 col-lg-10 col-md-10">
+                                <h4 class="card-title">{{ trans('page.edit') }}</h4>
+                                <page-form :slug="slug"></page-form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import pageForm from './Form';
+    import pageSidebar from './PageSidebar'
+
+    export default {
+        components: {pageForm, pageSidebar},
+        data() {
+            return {
+                slug: this.$route.params.slug,
+                statistics: {
+                    published: 0
+                }
+            };
+        },
+        mounted() {
+            if (!helper.hasPermission('access-page')) {
+                helper.notAccessibleMsg();
+                this.$router.push('/home');
+            }
+            axios.post('/api/page/statistics')
+                .then(response => response.data)
+                .then(response => {
+                    this.statistics.published = response.published;
+                })
+                .catch(error => {
+                    helper.showDataErrorMsg(error);
+                });
+        }
+    }
+</script>
diff --git a/resources/assets/js/views/page/Form.vue b/resources/assets/js/views/page/Form.vue
new file mode 100755
index 0000000..8c60f4d
--- /dev/null
+++ b/resources/assets/js/views/page/Form.vue
@@ -0,0 +1,97 @@
+<template>
+    <form @submit.prevent="submit" @keydown="pageForm.errors.clear($event.target.name)">
+        <div class="row">
+            <div class="col-12 col-md-12">
+                <div class="form-group">
+                    <label>{{ trans('page.title') }}</label>
+                    <input class="form-control" type="text" value="" v-model="pageForm.title" name="title"
+                           :placeholder="trans('page.title')" maxlength="191">
+                    <show-error :form-name="pageForm" prop-name="title"></show-error>
+                </div>
+            </div>
+            <div class="col-12 col-md-12">
+                <div class="form-group">
+                    <label>{{ trans('page.body') }}</label>
+                    <summernote-editor
+                            type="page"
+                            :model.sync="pageForm.body"
+                            :isUpdate="slug ? true : false"
+                            @clearErrors="pageForm.errors.clear('body')">
+                    </summernote-editor>
+                    <show-error :form-name="pageForm" prop-name="body"></show-error>
+                </div>
+            </div>
+        </div>
+        <div class="form-group pull-right">
+            <router-link to="/page/published" v-if="pageForm.id" class="btn btn-warning waves-effect waves-light">
+                <i class="fas fa-times"></i> {{ trans('page.cancel') }}
+            </router-link>
+            <button type="submit" class="btn btn-success waves-effect waves-light">
+                <i class="far fa-share-square"></i> {{ trans('page.publish') }}
+            </button>
+        </div>
+    </form>
+</template>
+
+<script>
+    import summernoteEditor from '../../components/SummernoteEditor'
+
+    export default {
+        components: {summernoteEditor},
+        props: ['slug'],
+        data() {
+            return {
+                pageForm: new Form({
+                    id: '',
+                    title: '',
+                    body: '',
+                }),
+                statistics: {
+                    published: 0
+                }
+            };
+        },
+        mounted() {
+            axios.post('/api/page/statistics')
+                .then(response => response.data)
+                .then(response => {
+                    this.statistics.published = response.published;
+                })
+                .catch(error => {
+                    helper.showDataErrorMsg(error);
+                });
+
+            if (this.slug) {
+                axios.get('/api/page/' + this.slug)
+                    .then(response => response.data)
+                    .then(response => {
+                        this.pageForm.title = response.page.title;
+                        this.pageForm.body = response.page.body;
+                        this.pageForm.id = response.page.id;
+                    })
+                    .catch(error => {
+                        helper.showDataErrorMsg(error);
+                    });
+            }
+        },
+        methods: {
+            submit() {
+                this.pageForm.body = this.addAttributes(this.pageForm.body);
+                this.pageForm.post('/api/page/new')
+                    .then(response => {
+                        toastr.success(response.page);
+                        this.$router.push('/page/published');
+                    })
+                    .catch(error => {
+                        helper.showErrorMsg(error);
+                    })
+            },
+            addAttributes(bodyHtml) {
+                bodyHtml = bodyHtml.replace(new RegExp('<a href', 'g'), '<a target="_blank" rel="nofollow" href');
+                bodyHtml = bodyHtml.replace(new RegExp('<img src', 'g'), '<img class="img-fluid" src');
+
+                return bodyHtml;
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/js/views/page/Index.vue b/resources/assets/js/views/page/Index.vue
new file mode 100755
index 0000000..2a83176
--- /dev/null
+++ b/resources/assets/js/views/page/Index.vue
@@ -0,0 +1,60 @@
+<template>
+    <div>
+        <div class="row page-titles">
+            <div class="col-md-6 col-8 align-self-center">
+                <h3 class="text-themecolor m-b-0 m-t-0">{{ trans('page.pages') }}</h3>
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <router-link to="/home">{{ trans('general.home') }}</router-link>
+                    </li>
+                    <li class="breadcrumb-item active">{{ trans('page.pages') }}</li>
+                </ol>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="row">
+                            <page-sidebar menu="new" :statistics="statistics"></page-sidebar>
+                            <div class="col-10 col-lg-10 col-md-10">
+                                <h4 class="card-title">{{ trans('page.new') }}</h4>
+                                <page-form></page-form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import pageForm from './Form';
+    import pageSidebar from './PageSidebar'
+
+    export default {
+        components: {pageForm, pageSidebar},
+        data() {
+            return {
+                statistics: {
+                    published: 0
+                }
+            };
+        },
+        mounted() {
+            if (!helper.hasPermission('access-page')) {
+                helper.notAccessibleMsg();
+                this.$router.push('/home');
+            }
+            axios.post('/api/page/statistics')
+                .then(response => response.data)
+                .then(response => {
+                    this.statistics.published = response.published;
+                })
+                .catch(error => {
+                    helper.showDataErrorMsg(error);
+                });
+        }
+    }
+</script>
diff --git a/resources/assets/js/views/page/List.vue b/resources/assets/js/views/page/List.vue
new file mode 100644
index 0000000..9f0899b
--- /dev/null
+++ b/resources/assets/js/views/page/List.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="container-fluid">
+        <div class="row">
+            <div class="col-12 m-t-20 text-center">
+                <page-link v-for="page in items" :page="page" :key="page.id"></page-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import pageLink from './PageLink'
+
+    export default {
+        metaInfo() {
+            return {
+                title: `${this.getConfig('company_name')}`,
+                meta: [
+                    {name: 'description', content: this.getConfig('company_description')},
+                    {name: 'twitter:card', content: 'summary_large_image'},
+                    {name: 'twitter:title', content: this.getConfig('company_name')},
+                    {name: 'twitter:description', content: this.getConfig('company_description')},
+                    {name: 'twitter:image', content: `${this.getConfig('app_url')}/uploads/images/cover-default.png`},
+                    {property: 'og:type', content: 'website'},
+                    {property: 'og:site_name', content: this.getConfig('company_name')},
+                    {property: 'og:url', content: `${this.getConfig('app_url')}`},
+                    {property: 'og:title', content: this.getConfig('company_name')},
+                    {property: 'og:description', content: this.getConfig('company_description')},
+                    {property: 'og:image', content: `${this.getConfig('app_url')}/uploads/images/cover-default.png`}
+                ]
+            }
+        },
+        data() {
+            return {
+                items: []
+            }
+        },
+        components: {
+            pageLink
+        },
+        mounted() {
+            this.getPages();
+        },
+        methods: {
+            getPages(page) {
+                axios.get('/api/pages')
+                    .then(response => response.data)
+                    .then(response => {
+                        this.items = response.pages;
+                    })
+                    .catch(error => {
+                        helper.showDataErrorMsg(error);
+                    });
+            },
+            getConfig(name) {
+                return helper.getConfig(name);
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/views/page/PageLink.vue b/resources/assets/js/views/page/PageLink.vue
new file mode 100755
index 0000000..0e1306a
--- /dev/null
+++ b/resources/assets/js/views/page/PageLink.vue
@@ -0,0 +1,16 @@
+<template>
+    <router-link @click.native="showSpinner" :to="`${page.slug}`">
+        <b class="mr-5 ml-5 page-title">{{ page.title }}</b>
+    </router-link>
+</template>
+
+<script>
+    export default {
+        props: ['page'],
+        methods: {
+            showSpinner() {
+                return helper.showSpinner();
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/js/views/page/PageSidebar.vue b/resources/assets/js/views/page/PageSidebar.vue
new file mode 100755
index 0000000..d566ebd
--- /dev/null
+++ b/resources/assets/js/views/page/PageSidebar.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="col-2 col-lg-2 col-md-2">
+        <div class="list-group">
+            <router-link to="/page/new" :class="[menu === 'new' ? 'active' : '', 'list-group-item']">
+                <span class="hidden-sm-up"><i class="far fa-plus-square"></i></span>
+                <span class="hidden-xs-down">
+                    {{ trans('page.new') }}
+                </span>
+            </router-link>
+            <router-link to="/page/published" :class="[menu === 'published' ? 'active' : '', 'list-group-item']">
+                <span class="hidden-sm-up"><i class="fas fa-columns"></i></span>
+                <span class="hidden-xs-down">
+                    {{ trans('page.published_box') }}
+                    <span v-if="statistics.published">
+                        ({{ statistics.published }})
+                    </span>
+                </span>
+            </router-link>
+        </div>
+    </div>
+</template>
+2018_07_13_124411_create_posts_table.php
+<script>
+    export default {
+        props: {
+            menu: {
+                default: ''
+            },
+            statistics: {}
+        }
+    }
+</script>
diff --git a/resources/assets/js/views/page/Published.vue b/resources/assets/js/views/page/Published.vue
new file mode 100755
index 0000000..03623e3
--- /dev/null
+++ b/resources/assets/js/views/page/Published.vue
@@ -0,0 +1,148 @@
+<template>
+    <div>
+        <div class="row page-titles">
+            <div class="col-md-6 col-8 align-self-center">
+                <h3 class="text-themecolor m-b-0 m-t-0">{{ trans('page.pages') }}</h3>
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item">
+                        <router-link to="/home">{{ trans('general.home') }}</router-link>
+                    </li>
+                    <li class="breadcrumb-item active">{{ trans('page.published_box') }}</li>
+                </ol>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="row">
+                            <page-sidebar menu="published" :statistics="statistics"></page-sidebar>
+                            <div class="col-10 col-lg-10 col-md-10">
+                                <h4 class="card-title">{{ trans('page.published_box') }}</h4>
+                                <h6 class="card-subtitle" v-if="pages">
+                                    {{ trans('general.total_result_found',{'count': pages.total}) }}</h6>
+                                <h6 class="card-subtitle" v-else>{{ trans('general.no_result_found') }}</h6>
+                                <div class="table-responsive">
+                                    <table class="table" v-if="pages.total">
+                                        <thead>
+                                        <tr>
+                                            <th>{{ trans('page.title') }}</th>
+                                            <th>{{ trans('page.published_at') }}</th>
+                                            <th class="table-option">{{ trans('general.action') }}</th>
+                                        </tr>
+                                        </thead>
+                                        <tbody>
+                                        <tr v-for="published in pages.data">
+                                            <td v-text="published.title"></td>
+                                            <td>{{ published.created_at }}</td>
+                                            <td class="table-option">
+                                                <div class="btn-group">
+                                                    <router-link :to="`/page/${published.slug}/edit`"
+                                                                 class="btn btn-info btn-sm"
+                                                                 v-tooltip="trans('page.edit_published')">
+                                                        <i class="fas fa-edit"></i>
+                                                    </router-link>
+                                                    <button class="btn btn-danger btn-sm"
+                                                            :key="published.id"
+                                                            v-confirm="{ok: confirmDelete(published)}"
+                                                            v-tooltip="trans('page.delete_published')">
+                                                        <i class="fas fa-trash"></i>
+                                                    </button>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <pagination-record :page-length.sync="filterPageForm.page_length" :records="pages"
+                                                   @updateRecords="getPages"
+                                                   @change.native="getPages"></pagination-record>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+
+<script>
+    import pageSidebar from './PageSidebar'
+    import dateRangePicker from '../../components/DateRangePicker'
+
+    export default {
+        components: {pageSidebar, dateRangePicker},
+        data() {
+            return {
+                pages: {
+                    total: 0,
+                    data: []
+                },
+                filterPageForm: {
+                    page_length: helper.getConfig('page_length')
+                },
+                statistics: {
+                    published: 0,
+                }
+            };
+        },
+        mounted() {
+            if (!helper.hasPermission('access-page')) {
+                helper.notAccessibleMsg();
+                this.$router.push('/home');
+            }
+            this.getPages();
+            this.getStatistics();
+        },
+        methods: {
+            getStatistics() {
+                axios.post('/api/page/statistics')
+                    .then(response => response.data)
+                    .then(response => {
+                        this.statistics.published = response.published;
+                    })
+                    .catch(error => {
+                        helper.showDataErrorMsg(error);
+                    });
+            },
+            getPages(page) {
+                if (typeof page !== 'number') {
+                    page = 1;
+                }
+                let url = helper.getFilterURL(this.filterPageForm);
+                axios.get('/api/page/published?page=' + page + url)
+                    .then(response => response.data)
+                    .then(response => {
+                        this.pages = response.pages;
+                    })
+                    .catch(error => {
+                        helper.showDataErrorMsg(error);
+                    });
+            },
+            confirmDelete(published) {
+                return dialog => this.deletePage(published);
+            },
+            deletePage(published) {
+                axios.delete('/api/page/' + published.slug)
+                    .then(response => response.data)
+                    .then(response => {
+                        toastr.success(response.page);
+                        this.statistics.published -= 1;
+                        this.getPages();
+                    })
+                    .catch(error => {
+                        helper.showDataErrorMsg(error);
+                    });
+            }
+        },
+        watch: {
+            filterPageForm: {
+                handler(val) {
+                    this.getPages();
+                },
+                deep: true
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/js/views/page/View.vue b/resources/assets/js/views/page/View.vue
new file mode 100755
index 0000000..3d1ba73
--- /dev/null
+++ b/resources/assets/js/views/page/View.vue
@@ -0,0 +1,93 @@
+<template>
+    <div v-if="page">
+        <div class="container-fluid">
+            <div class="row">
+                <div class="col-12 m-t-30">
+                    <div class="card">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-md-9">
+                                    <h1 class="card-title post-title">{{ page.title }}</h1>
+                                    <div class="card-text" v-html="page.body"></div>
+                                </div>
+                                <div class="col-md-3" v-if="page.body">
+                                    <social-sharing
+                                            :url="`${getConfig('app_url')}/${page.slug}`"
+                                            :title="`${page.title}`">
+                                    </social-sharing>
+                                    <div class="text-muted card-caps mt-3 mb-1">{{ trans('general.contact_info') }}</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div v-else>
+        <page-not-found></page-not-found>
+    </div>
+</template>
+
+<script>
+    import pageNotFound from '../errors/PageNotFound'
+    import socialSharing from '../../components/SocialSharing'
+
+    export default {
+        metaInfo() {
+            return {
+                title: `${this.documentTitle}`,
+                meta: [
+                    {name: 'description', content: this.page ? this.limitWords(this.page.stripped_body) : ''},
+                    {name: 'twitter:card', content: 'summary_large_image'},
+                    {name: 'twitter:title', content: this.page ? this.page.title : ''},
+                    {name: 'twitter:description', content: this.page ? this.limitWords(this.page.stripped_body) : ''},
+                    {name: 'twitter:image', content: `${this.getConfig('app_url')}/uploads/images/cover-default.png`},
+                    {property: 'og:type', content: 'website'},
+                    {property: 'og:site_name', content: this.getConfig('company_name')},
+                    {property: 'og:url', content: this.page ? `${this.getConfig('app_url')}/${this.page.slug}` : ''},
+                    {property: 'og:title', content: this.page ? this.page.title : ''},
+                    {property: 'og:description', content: this.page ? this.limitWords(this.page.stripped_body) : ''},
+                    {property: 'og:image', content: `${this.getConfig('app_url')}/uploads/images/cover-default.png`}
+                ]
+            }
+        },
+        components: {
+            pageNotFound, socialSharing
+        },
+        data() {
+            return {
+                slug: '',
+                page: {},
+                documentTitle: ''
+            };
+        },
+        mounted() {
+            this.slug = this.$route.params.slug;
+            helper.showSpinner();
+            axios.get('/api/pages/' + this.slug)
+                .then(response => response.data)
+                .then(response => {
+                    this.page = response.page;
+                    if (this.page) {
+                        this.documentTitle = `${this.page.title} | ${helper.getConfig('company_name')}`;
+                    } else {
+                        this.documentTitle = `${i18n.general.page_not_found_heading} | ${helper.getConfig('company_name')}`;
+                    }
+                    helper.hideSpinner();
+                })
+                .catch(error => {
+                    helper.showDataErrorMsg(error);
+                    helper.hideSpinner();
+                });
+        },
+        methods: {
+            getConfig(name) {
+                return helper.getConfig(name);
+            },
+            limitWords(str) {
+                return helper.limitWords(str, 35);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/js/views/pages/Main.vue b/resources/assets/js/views/pages/Main.vue
index 8795834..94a9baa 100755
--- a/resources/assets/js/views/pages/Main.vue
+++ b/resources/assets/js/views/pages/Main.vue
@@ -55,12 +55,14 @@
                 </div>
             </div>
         </div>
+        <page-list></page-list>
         <post-list></post-list>
     </section>
 </template>
 
 <script>
     import postList from '../post/List'
+    import pageList from '../page/List'
     import buttonSpinner from '../../components/ButtonSpinner';
 
     export default {
@@ -75,6 +77,7 @@
         },
         components: {
             postList,
+            pageList,
             buttonSpinner
         },
         computed: {
diff --git a/resources/assets/js/views/post/List.vue b/resources/assets/js/views/post/List.vue
index 9e77074..b4e3a19 100644
--- a/resources/assets/js/views/post/List.vue
+++ b/resources/assets/js/views/post/List.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container-fluid">
         <div class="row" v-for="items in splitted">
-            <div class="col-12 m-t-20 m-b-20">
+            <div class="col-12 m-b-20">
                 <div v-if="items.length === 3" class="card-deck">
                     <post-card v-for="post in items" :post="post" :key="post.id"></post-card>
                 </div>
diff --git a/resources/assets/js/views/post/View.vue b/resources/assets/js/views/post/View.vue
index 1f29f02..64beb68 100755
--- a/resources/assets/js/views/post/View.vue
+++ b/resources/assets/js/views/post/View.vue
@@ -48,7 +48,7 @@
                     {name: 'twitter:image', content: this.post ? `${this.getConfig('app_url')}/${this.post.cover}` : ''},
                     {property: 'og:type', content: 'website'},
                     {property: 'og:site_name', content: this.getConfig('company_name')},
-                    {property: 'og:url', content: `${this.getConfig('app_url')}/${this.categorySlug}/${this.post.slug}`},
+                    {property: 'og:url', content: this.post ? `${this.getConfig('app_url')}/${this.categorySlug}/${this.post.slug}` : ''},
                     {property: 'og:title', content: this.post ? this.post.title : ''},
                     {property: 'og:description', content: this.post ? this.limitWords(this.post.stripped_body) : ''},
                     {property: 'og:image', content: this.post ? `${this.getConfig('app_url')}/${this.post.cover}` : ''}
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 5849b94..efaf970 100755
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -2656,4 +2656,8 @@ samp {
 
 .list-text {
   line-height: 22px;
+}
+
+.page-title {
+  font-size: 21px;
 }
\ No newline at end of file
diff --git a/resources/assets/sass/pages.scss b/resources/assets/sass/pages.scss
index ac89cee..e65848e 100755
--- a/resources/assets/sass/pages.scss
+++ b/resources/assets/sass/pages.scss
@@ -3728,7 +3728,6 @@ Error Page
 }
 
 .error-body {
-  padding-top: 5%;
   h1 {
     font-size: 210px;
     font-weight: 900;
diff --git a/resources/lang/en/page.php b/resources/lang/en/page.php
new file mode 100755
index 0000000..f9653c0
--- /dev/null
+++ b/resources/lang/en/page.php
@@ -0,0 +1,25 @@
+<?php
+
+return [
+    'body' => 'Body',
+    'cancel' => 'Cancel',
+    'could_not_find' => 'Could not find :type',
+    'delete_published' => 'Delete published page',
+    'deleted' => ':type deleted.',
+    'edit' => 'Edit',
+    'edit_published' => 'Edit published page',
+    'invalid_action' => 'Invalid action.',
+    'last_pages' => 'Last Pages',
+    'page' => 'Page',
+    'pages' => 'Pages',
+    'page_processed' => 'Page :action',
+    'new' => 'New',
+    'publish' => 'Publish',
+    'published' => 'published.',
+    'published_at' => 'Published at',
+    'published_box' => 'Published',
+    'slug' => 'Slug',
+    'slug_exists' => 'This slug already exists',
+    'title' => 'Title',
+    'view' => 'View',
+];
\ No newline at end of file
diff --git a/resources/lang/ru/page.php b/resources/lang/ru/page.php
new file mode 100755
index 0000000..93d1ae0
--- /dev/null
+++ b/resources/lang/ru/page.php
@@ -0,0 +1,25 @@
+<?php
+
+return [
+    'body' => 'Содержание',
+    'cancel' => 'Отменить',
+    'could_not_find' => 'Не удалось найти :type',
+    'delete_published' => 'Удалить страницу',
+    'deleted' => ':type удалена.',
+    'edit' => 'Редактировать',
+    'edit_published' => 'Редактировать страницу',
+    'invalid_action' => 'Действие не валидно.',
+    'last_pages' => 'Последине страницы',
+    'page' => 'Страница',
+    'pages' => 'Страницы',
+    'page_processed' => 'Страница :action',
+    'new' => 'Новая',
+    'publish' => 'Опубликовать',
+    'published' => 'опубликована.',
+    'published_at' => 'Опубликована',
+    'published_box' => 'Страницы',
+    'slug' => 'Слаг',
+    'slug_exists' => 'Такой слаг уже сущесвует',
+    'title' => 'Заголовок',
+    'view' => 'Просмотр',
+];
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index 5951726..c6dab38 100755
--- a/routes/api.php
+++ b/routes/api.php
@@ -18,6 +18,11 @@
     Route::get('/{category}/{slug}','PostController@getPublicPost');
 });
 
+Route::group(['prefix' => 'pages'], function () {
+    Route::get('/','PageController@getPublicPages');
+    Route::get('/{slug}','PageController@getPublicPage');
+});
+
 Route::group(['prefix' => 'auth'], function () {
     Route::post('/login', 'AuthController@authenticate');
     Route::post('/check', 'AuthController@check');
@@ -93,4 +98,11 @@
     Route::get('/category/{id}', 'CategoryController@show');
     Route::post('/category', 'CategoryController@store');
     Route::delete('/category/{id}', 'CategoryController@destroy');
+
+    Route::post('/page/statistics','PageController@statistics');
+    Route::post('/page/new','PageController@store');
+    Route::get('/page/published','PageController@getPublishedList');
+    Route::delete('/page/{slug}','PageController@destroy');
+    Route::get('/page/{slug}','PageController@show');
+    Route::post('/page/upload/image','PageController@uploadImage');
 });