Display all published post for the visitors

kutaloweb · Aug 3, 2018 · edced36 · edced36
1 parent 20f9167
commit edced36
Show file tree

Hide file tree

Showing 21 changed files with 267 additions and 6 deletions.
diff --git a/app/Http/Controllers/PostController.php b/app/Http/Controllers/PostController.php
@@ -62,7 +62,17 @@ public function __construct(Request $request, PostRepository $repo, ActivityLogR
         $this->activity = $activity;
         $this->user = $user;
         $this->category = $category;
-        $this->middleware('permission:access-post');
+        $this->middleware('permission:access-post')->except(['index']);
+    }
+
+    /**
+     * Display all posts
+     *
+     * @return Post[]|Collection
+     */
+    public function index()
+    {
+        return $this->repo->getPosts($this->request->all());
     }
 
     /**
@@ -200,9 +210,7 @@ public function uploadCover($id)
         $filename = uniqid();
         request()->file('image')->move($image_path, $filename . "." . $extension);
         $img = \Image::make($image_path . $filename . "." . $extension);
-        $img->resize(500, null, function ($constraint) {
-            $constraint->aspectRatio();
-        });
+        $img->resize(600, 300);
         $img->save($image_path . $filename . "." . $extension);
         $post->cover = $image_path . $filename . "." . $extension;
         $post->save();

diff --git a/app/Post.php b/app/Post.php
@@ -17,6 +17,7 @@
  * @property string|null $cover
  * @property \Carbon\Carbon|null $created_at
  * @property \Carbon\Carbon|null $updated_at
+ * @property-read string|null $stripped_body
  * @property-read \App\User $user
  * @property-read \App\Category $category
  */
@@ -34,6 +35,13 @@ class Post extends Model
         'body'
     ];
 
+    /**
+     * The accessors to append to the model's array form.
+     *
+     * @var array
+     */
+    protected $appends = ['stripped_body'];
+
     /**
      * Get the user that owns the post.
      *
@@ -74,6 +82,26 @@ 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']);
+    }
+
+    /**
+     * Get cover image.
+     *
+     * @return string
+     */
+    public function getCoverAttribute()
+    {
+        return $this->attributes['cover'] ?: 'uploads/images/cover-default.png';
+    }
+
     /**
      * Sets the title and the readable slug.
      *

diff --git a/app/Repositories/PostRepository.php b/app/Repositories/PostRepository.php
@@ -24,6 +24,25 @@ public function __construct(Post $post)
         $this->post = $post;
     }
 
+    /**
+     * Get published posts.
+     *
+     * @param array $params
+     *
+     * @return Post[]|Collection
+     */
+    public function getPosts($params = [])
+    {
+        $page_length = isset($params['page_length']) ? $params['page_length'] : config('config.page_length');
+        $published = $this->post->with('user', 'user.profile', 'category')->filterByIsDraft(0);
+
+        if (!isset($params['page_length'])) {
+            return $published->get();
+        }
+
+        return $published->orderBy('created_at', 'desc')->paginate($page_length);
+    }
+
     /**
      * Get post query.
      *

diff --git a/public/uploads/images/cover-default.jpg b/public/uploads/images/cover-default.jpg
diff --git a/public/uploads/images/cover-default.png b/public/uploads/images/cover-default.png
diff --git a/resources/assets/js/components/PaginationRecord.vue b/resources/assets/js/components/PaginationRecord.vue
@@ -3,7 +3,7 @@
         <div class="col-md-8">
             <pagination :data="records" :limit=3 v-on:pagination-change-page="getRecords"></pagination>
         </div>
-        <div class="col-md-4" v-if="records.total">
+        <div class="col-md-4" v-if="records.total && showPageLength">
             <div class="pull-right">
                 <select name="page_length" class="custom-select pagination-select form-control" :value="pageLength" @change="updateValue">
                     <option v-for="option in getConfig('pagination')" :value="option">
@@ -20,7 +20,18 @@
 
     export default {
         components: {pagination},
-        props: ['pageLength', 'records'],
+        props: {
+            pageLength: {
+                required: true
+            },
+            records: {
+                required: true
+            },
+            showPageLength: {
+                type: Boolean,
+                default: true
+            }
+        },
         methods: {
             getConfig(config) {
                 return helper.getConfig(config);

diff --git a/resources/assets/js/views/auth/Login.vue b/resources/assets/js/views/auth/Login.vue
@@ -43,6 +43,38 @@
                 <guest-footer></guest-footer>
             </div>
         </div>
+        <div class="page-wrapper" style="margin-left:0">
+            <div class="container-fluid">
+                <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>
+                        </div>
+                    </div>
+                </div>
+                <pagination-record
+                        :page-length.sync="filterPostForm.page_length"
+                        :records="posts"
+                        :show-page-length="false"
+                        @updateRecords="getPosts"
+                        @change.native="getPosts">
+                </pagination-record>
+            </div>
+        </div>
     </section>
 </template>
 
@@ -52,6 +84,14 @@
     export default {
         data() {
             return {
+                posts: {
+                    total: 0,
+                    data: []
+                },
+                splitted: [],
+                filterPostForm: {
+                    page_length: 9
+                },
                 loginForm: new Form({
                     email: '',
                     password: ''
@@ -70,6 +110,9 @@
                 return '/uploads/config/background/background.jpg'
             }
         },
+        mounted() {
+            this.getPosts();
+        },
         methods: {
             submit() {
                 this.loginForm.post('/api/auth/login')
@@ -93,6 +136,47 @@
             },
             getConfig(config) {
                 return helper.getConfig(config);
+            },
+            getPosts(page) {
+                if (typeof page !== 'number') {
+                    page = 1;
+                }
+                let url = helper.getFilterURL(this.filterPostForm);
+                axios.get('/api/posts?page=' + page + url)
+                    .then(response => response.data)
+                    .then(response => {
+                        this.posts = response;
+                        this.splitted = this.chunk(response.data, 3);
+                    })
+                    .catch(error => {
+                        helper.showDataErrorMsg(error);
+                    });
+            },
+            chunk(arr, len) {
+                let chunks = [];
+                let i = 0;
+                let n = arr.length;
+                while (i < n) {
+                    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/sass/app.scss b/resources/assets/sass/app.scss
@@ -30,6 +30,7 @@ html {
 
 a:hover, a:focus {
   text-decoration: none;
+  color: $bodytext;
 }
 
 a.link {
@@ -2545,4 +2546,17 @@ samp {
 .input-group > .form-control:not(:last-child),
 .input-group > .custom-select:not(:last-child) {
   border-radius: 0.25rem !important;
+}
+
+.card:focus .card-img img, .card:hover .card-img img {
+  opacity: .8
+}
+
+.card-img img {
+  opacity: 1;
+  transition: opacity .3s ease-in-out;
+}
+
+.cover-img {
+  background-color: #fff !important;
 }
diff --git a/resources/assets/sass/colors/blue-dark.scss b/resources/assets/sass/colors/blue-dark.scss
@@ -66,6 +66,10 @@ a.link {
     background-color: $themecolor !important;
 }
 
+.card-img {
+    background-color: $themecolor;
+}
+
 .pagination > .active > a,
 .pagination > .active > span,
 .pagination > .active > a:hover,
@@ -76,6 +80,10 @@ a.link {
     border-color: $themecolor;
 }
 
+.post-title {
+    color: $themecolor;
+}
+
 .right-sidebar {
     .rpanel-title {
         background: $themecolor;

diff --git a/resources/assets/sass/colors/blue.scss b/resources/assets/sass/colors/blue.scss
@@ -54,6 +54,10 @@ a.link {
     background-color: $themecolor !important;
 }
 
+.card-img {
+    background-color: $themecolor;
+}
+
 .pagination > .active > a,
 .pagination > .active > span,
 .pagination > .active > a:hover,
@@ -64,6 +68,10 @@ a.link {
     border-color: $themecolor;
 }
 
+.post-title {
+    color: $themecolor;
+}
+
 .right-sidebar {
     .rpanel-title {
         background: $themecolor;

diff --git a/resources/assets/sass/colors/default-dark.scss b/resources/assets/sass/colors/default-dark.scss
@@ -52,6 +52,10 @@ a.link {
     background-color: $themecolor !important;
 }
 
+.card-img {
+    background-color: $themecolor;
+}
+
 .pagination > .active > a,
 .pagination > .active > span,
 .pagination > .active > a:hover,
@@ -62,6 +66,10 @@ a.link {
     border-color: $themecolor;
 }
 
+.post-title {
+    color: $themecolor;
+}
+
 .right-sidebar {
     .rpanel-title {
         background: $themecolor;

diff --git a/resources/assets/sass/colors/default.scss b/resources/assets/sass/colors/default.scss
@@ -42,6 +42,10 @@ a.link {
     background-color: $themecolor !important;
 }
 
+.card-img {
+    background-color: $themecolor;
+}
+
 .pagination > .active > a,
 .pagination > .active > span,
 .pagination > .active > a:hover,
@@ -52,6 +56,10 @@ a.link {
     border-color: $themecolor;
 }
 
+.post-title {
+    color: $themecolor;
+}
+
 .right-sidebar {
     .rpanel-title {
         background: $themecolor;

diff --git a/resources/assets/sass/colors/green-dark.scss b/resources/assets/sass/colors/green-dark.scss
@@ -66,6 +66,10 @@ a.link {
     background-color: $themecolor !important;
 }
 
+.card-img {
+    background-color: $themecolor;
+}
+
 .pagination > .active > a,
 .pagination > .active > span,
 .pagination > .active > a:hover,
@@ -76,6 +80,10 @@ a.link {
     border-color: $themecolor;
 }
 
+.post-title {
+    color: $themecolor;
+}
+
 .right-sidebar {
     .rpanel-title {
         background: $themecolor;