Display published post

kutaloweb · Aug 4, 2018 · 03a3950 · 03a3950
1 parent edced36
commit 03a3950
Show file tree

Hide file tree

Showing 10 changed files with 201 additions and 40 deletions.
diff --git a/app/Http/Controllers/PostController.php b/app/Http/Controllers/PostController.php
@@ -62,19 +62,34 @@ public function __construct(Request $request, PostRepository $repo, ActivityLogR
         $this->activity = $activity;
         $this->user = $user;
         $this->category = $category;
-        $this->middleware('permission:access-post')->except(['index']);
+        $this->middleware('permission:access-post')->except(['getPublicPosts', 'getPublicPost']);
     }
 
     /**
-     * Display all posts
+     * Display all public posts
      *
      * @return Post[]|Collection
      */
-    public function index()
+    public function getPublicPosts()
     {
         return $this->repo->getPosts($this->request->all());
     }
 
+    /**
+     * Display a public post
+     *
+     * @param string $category
+     * @param string $slug
+     *
+     * @return JsonResponse
+     */
+    public function getPublicPost($category, $slug)
+    {
+        $post = $this->repo->getByCategoryAndSlug($category, $slug);
+
+        return $this->success(compact('post'));
+    }
+
     /**
      * Get pre-requisites for post module
      *

diff --git a/app/Post.php b/app/Post.php
@@ -161,6 +161,20 @@ public function scopeFilterBySlug($query, $slug = null)
         return $query->where('slug', '=', $slug);
     }
 
+    /**
+     * Scope a query to only include post with the given category and slug.
+     *
+     * @param \Illuminate\Database\Eloquent\Builder $query
+     * @param Category $category
+     * @param string $slug
+     *
+     * @return \Illuminate\Database\Eloquent\Builder
+     */
+    public function scopeFilterByCategoryAndSlug($query, $category, $slug)
+    {
+        return $query->where('slug', '=', $slug)->where('category_id', '=', $category->id);
+    }
+
     /**
      * Scope a query to only include post with the given id.
      *

diff --git a/app/Repositories/PostRepository.php b/app/Repositories/PostRepository.php
@@ -2,6 +2,7 @@
 
 namespace App\Repositories;
 
+use App\Category;
 use App\Post;
 use Carbon\Carbon;
 use Illuminate\Support\Collection;
@@ -77,7 +78,7 @@ public function countDateBetween($start_date, $end_date)
     }
 
     /**
-     * Get valid post.
+     * Get valid post by slug.
      *
      * @param string $slug
      *
@@ -98,6 +99,33 @@ public function getBySlug($slug)
         return $post;
     }
 
+    /**
+     * Get valid post by category and slug.
+     *
+     * @param string $category
+     * @param string $slug
+     *
+     * @return Post
+     */
+    public function getByCategoryAndSlug($category, $slug)
+    {
+        $category = Category::where('name', $category)->first();
+
+        if (!$category) {
+            return null;
+        }
+
+        $post = $this->post->with('user', 'user.profile', 'category')
+            ->filterByCategoryAndSlug($category, $slug)
+            ->first();
+
+        if (!$post) {
+            return null;
+        }
+
+        return $post;
+    }
+
     /**
      * Find post by Id
      *

diff --git a/database/migrations/2018_07_13_124411_create_posts_table.php b/database/migrations/2018_07_13_124411_create_posts_table.php
@@ -19,7 +19,7 @@ public function up()
             $table->boolean('is_draft')->default(0);
             $table->string('title')->nullable();
             $table->string('slug')->nullable();
-            $table->text('body')->nullable();
+            $table->longText('body')->nullable();
             $table->string('cover')->nullable();
             $table->timestamps();
         });

diff --git a/resources/assets/js/routes.js b/resources/assets/js/routes.js
@@ -8,7 +8,7 @@ let routes = [
     {
         path: '/',
         component: require('./views/auth/Login.vue'),
-        meta: {title: appName + ' | ' + i18n.auth.login}
+        meta: {title: appName}
     },
     {
         path: '/',
@@ -212,6 +212,11 @@ let routes = [
             }
         ]
     },
+    {
+        path: '/:category/:slug',
+        component: require('./views/post/View.vue'),
+        meta: {title: appName + ' | ' + i18n.post.view}
+    },
     {
         path: '*',
         component: require('./layouts/ErrorPage.vue'),

diff --git a/resources/assets/js/views/auth/Login.vue b/resources/assets/js/views/auth/Login.vue
@@ -48,21 +48,7 @@
                 <div class="row" v-for="items in splitted">
                     <div class="col-12 m-t-20 m-b-20">
                         <div class="card-deck">
-                            <a class="card" v-for="post in items" :href="post.category.name + '/' + post.slug">
-                                <div class="card-img" :class="[post.cover !== 'uploads/images/cover-default.png' ? 'cover-img' : '']">
-                                    <img class="card-img-top img-responsive" :src="post.cover" :alt="post.title">
-                                </div>
-                                <div class="card-body">
-                                    <h3 class="card-title post-title">{{ post.title }}</h3>
-                                    <h5 class="card-text">{{ limitWords(post.stripped_body, 35) }}</h5>
-                                    <p class="card-text">
-                                        <small class="text-muted">
-                                            <i class="far fa-clock"></i>
-                                            {{ post.created_at }}
-                                        </small>
-                                    </p>
-                                </div>
-                            </a>
+                            <post-card v-for="post in items" :post="post" :key="post.id"></post-card>
                         </div>
                     </div>
                 </div>
@@ -80,6 +66,7 @@
 
 <script>
     import guestFooter from '../../layouts/GuestFooter'
+    import postCard from '../post/PostCard'
 
     export default {
         data() {
@@ -99,7 +86,8 @@
             }
         },
         components: {
-            guestFooter
+            guestFooter,
+            postCard
         },
         computed: {
             getBackground() {
@@ -160,23 +148,6 @@
                     chunks.push(arr.slice(i, i += len));
                 }
                 return chunks;
-            },
-            limitWords(textToLimit, wordLimit) {
-                let finalText = "";
-                let text2 = textToLimit.replace(/\s+/g, ' ');
-                let text3 = text2.split(' ');
-                let numberOfWords = text3.length;
-                let i = 0;
-
-                if (numberOfWords > wordLimit) {
-                    for (i = 0; i < wordLimit; i++) {
-                        finalText = finalText + " " + text3[i] + " ";
-                    }
-
-                    return finalText + "...";
-                }
-
-                return textToLimit;
             }
         }
     }

diff --git a/resources/assets/js/views/post/PostCard.vue b/resources/assets/js/views/post/PostCard.vue
@@ -0,0 +1,45 @@
+<template>
+    <router-link class="card" :to="`${post.category.name}/${post.slug}`">
+        <div class="card-img"
+             :class="[post.cover !== 'uploads/images/cover-default.png' ? 'cover-img' : '']">
+            <img class="card-img-top img-responsive" :src="post.cover" :alt="post.title">
+        </div>
+        <div class="card-body">
+            <h3 class="card-title post-title">{{ post.title }}</h3>
+            <h5 class="card-text">{{ limitWords(post.stripped_body, 35) }}</h5>
+            <p class="card-text">
+                <small class="text-muted card-caps">
+                    {{ toWord(post.category.name) }} / {{ post.created_at }}
+                </small>
+            </p>
+        </div>
+    </router-link>
+</template>
+
+<script>
+    export default {
+        props: ['post'],
+        methods: {
+            limitWords(textToLimit, wordLimit) {
+                let finalText = "";
+                let text2 = textToLimit.replace(/\s+/g, ' ');
+                let text3 = text2.split(' ');
+                let numberOfWords = text3.length;
+                let i = 0;
+
+                if (numberOfWords > wordLimit) {
+                    for (i = 0; i < wordLimit; i++) {
+                        finalText = finalText + " " + text3[i] + " ";
+                    }
+
+                    return finalText + "...";
+                }
+
+                return textToLimit;
+            },
+            toWord(str) {
+                return helper.toWord(str);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/js/views/post/View.vue b/resources/assets/js/views/post/View.vue
@@ -0,0 +1,75 @@
+<template>
+    <div v-if="post">
+        <section id="wrapper">
+            <div class="page-wrapper" style="margin-left:0">
+                <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-9 col-md-9">
+                                            <h1 class="card-title post-title">{{ post.title }}</h1>
+                                            <span class="text-muted card-caps">
+                                                {{ toWord(categoryName) }} / {{ post.created_at }}
+                                            </span>
+                                            <hr>
+                                            <div class="card-text" v-html="post.body"></div>
+                                        </div>
+                                        <div class="col-3 col-md-3">
+
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <div v-else>
+        <page-not-found></page-not-found>
+    </div>
+</template>
+
+<script>
+    import pageNotFound from '../errors/PageNotFound'
+
+    export default {
+        components: {
+            pageNotFound,
+        },
+        data() {
+            return {
+                category: '',
+                categoryName: '',
+                slug: '',
+                post: {}
+            };
+        },
+        mounted() {
+            this.category = this.$route.params.category;
+            this.slug = this.$route.params.slug;
+            axios.get('/api/posts/' + this.category + '/' + this.slug)
+                .then(response => response.data)
+                .then(response => {
+                    this.post = response.post;
+                    this.categoryName = response.post.category.name;
+                    if (this.post) {
+                        document.title = `${helper.getConfig('company_name')} | ${this.post.title}`;
+                    } else {
+                        document.title = `${helper.getConfig('company_name')} | ${i18n.general.page_not_found_heading}`;
+                    }
+                })
+                .catch(error => {
+                    helper.showDataErrorMsg(error);
+                });
+        },
+        methods: {
+            toWord(str) {
+                return helper.toWord(str);
+            }
+        }
+    }
+</script>
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
@@ -2559,4 +2559,8 @@ samp {
 
 .cover-img {
   background-color: #fff !important;
+}
+
+.card-caps {
+  text-transform: uppercase;
 }
diff --git a/routes/api.php b/routes/api.php
@@ -12,7 +12,11 @@
 */
 
 Route::get('/configuration/variable', 'ConfigurationController@getConfigurationVariable');
-Route::get('/posts','PostController@index');
+
+Route::group(['prefix' => 'posts'], function () {
+    Route::get('/','PostController@getPublicPosts');
+    Route::get('/{category}/{slug}','PostController@getPublicPost');
+});
 
 Route::group(['prefix' => 'auth'], function () {
     Route::post('/login', 'AuthController@authenticate');