Merge branch 'release/4.1.20'

* release/4.1.20:
  updated the changelog
  added dynamic pagination to filtered lists

changelog.md

@@ -1,5 +1,10 @@
 # Release Notes
 
+## [v4.1.20](https://github.com/cnvs/canvas/compare/v4.1.19...v4.1.20)
+
+### Added
+- Added dynamic pagination to Vue component filtered lists ([ec087a4](https://github.com/cnvs/canvas/commit/ec087a4fcea738775df95df2d795e695b12d6b1d))
+
 ## [v4.1.19](https://github.com/cnvs/canvas/compare/v4.1.18...v4.1.19)
 
 ### Changed

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
-    "/js/app.js": "/js/app.js?id=e14eab4148aca57fd14d",
+    "/js/app.js": "/js/app.js?id=7ed9ca64baed70416578",
     "/css/app.css": "/css/app.css?id=30702a620a23ba741c32",
     "/css/app-dark.css": "/css/app-dark.css?id=ceb9852370c32c15e835",
-    "/js/app.js.map": "/js/app.js.map?id=b49f81db61bd83e7ae34",
+    "/js/app.js.map": "/js/app.js.map?id=9bbcbd4034997da44ae1",
     "/favicon.png": "/favicon.png?id=d1ff042f5749eb7e2f66"
 }

resources/js/components/PostList.vue

@@ -5,7 +5,44 @@
         data() {
             return {
                 search: '',
-                postList: this.models ? this.models : []
+                postList: this.models ? this.models : [],
+                limit: 7,
+                load: false
+            }
+        },
+
+        methods: {
+            /**
+             * Return a number formatted with a suffix.
+             *
+             * @return string
+             */
+            suffixedNumber(n) {
+                let format = '';
+                let suffix = '';
+
+                if (n < 900) {
+                    format = n.toFixed();
+                    suffix = '';
+                } else if (n < 900000) {
+                    let n_total = n / 1000;
+                    format = n_total.toFixed(1);
+                    suffix = 'K';
+                } else if (n < 900000000) {
+                    let n_total = n / 1000000;
+                    format = n_total.toFixed(1);
+                    suffix = 'M';
+                } else if (n < 900000000000) {
+                    let n_total = n / 1000000000;
+                    format = n_total.toFixed(1);
+                    suffix = 'B';
+                } else {
+                    let n_total = n / 1000000000000;
+                    format = n_total.toFixed(1);
+                    suffix = 'T';
+                }
+
+                return format + suffix;
             }
         },
 
@@ -16,10 +53,18 @@
              * @source https://codepen.io/AndrewThian/pen/QdeOVa
              */
             filteredList() {
-                return this.postList.filter(post => {
+                let filtered = this.postList.filter(post => {
                     return post.title.toLowerCase().includes(this.search.toLowerCase())
-                })
+                });
+
+                if (Object.keys(filtered).length > this.limit) {
+                    this.load = true;
+                } else {
+                    this.load = false;
+                }
+
+                return this.limit ? filtered.slice(0, this.limit) : this.postList;
             }
         },
     }
-</script>
+</script>

resources/js/components/TagList.vue

@@ -5,7 +5,9 @@
         data() {
             return {
                 search: '',
-                tagList: this.models ? this.models : []
+                tagList: this.models ? this.models : [],
+                limit: 10,
+                load: false
             }
         },
 
@@ -16,10 +18,18 @@
              * @source https://codepen.io/AndrewThian/pen/QdeOVa
              */
             filteredList() {
-                return this.tagList.filter(tag => {
+                let filtered = this.tagList.filter(tag => {
                     return tag.name.toLowerCase().includes(this.search.toLowerCase())
-                })
+                });
+
+                if (Object.keys(filtered).length > this.limit) {
+                    this.load = true;
+                } else {
+                    this.load = false;
+                }
+
+                return this.limit ? filtered.slice(0, this.limit) : this.tagList;
             }
         },
     }
-</script>
+</script>

resources/js/components/TopicList.vue

@@ -5,7 +5,9 @@
         data() {
             return {
                 search: '',
-                topicList: this.models ? this.models : []
+                topicList: this.models ? this.models : [],
+                limit: 10,
+                load: false
             }
         },
 
@@ -16,10 +18,18 @@
              * @source https://codepen.io/AndrewThian/pen/QdeOVa
              */
             filteredList() {
-                return this.topicList.filter(topic => {
+                let filtered = this.topicList.filter(topic => {
                     return topic.name.toLowerCase().includes(this.search.toLowerCase())
-                })
+                });
+
+                if (Object.keys(filtered).length > this.limit) {
+                    this.load = true;
+                } else {
+                    this.load = false;
+                }
+
+                return this.limit ? filtered.slice(0, this.limit) : this.topicList;
             }
         },
     }
-</script>
+</script>

resources/views/posts/index.blade.php

@@ -63,6 +63,10 @@ class="mr-2"
                                 </div>
                             </div>
 
+                            <div class="d-flex justify-content-center">
+                                <a href="#!" class="btn btn-link" @click="limit += 7" v-if="load">Show more <i class="fa fa-fw fa-angle-down"></i></a>
+                            </div>
+
                             <p class="mt-4" v-if="!filteredList.length">No posts matched the given search criteria.</p>
                         </div>
                     @else
@@ -72,4 +76,4 @@ class="mr-2"
             </div>
         </div>
     </post-list>
-@endsection
+@endsection

resources/views/stats/index.blade.php

@@ -32,41 +32,41 @@
                             <div class="card-body">
                                 <h5 class="card-title text-muted small text-uppercase font-weight-bold">Publishing</h5>
                                 <ul>
-                                    <li>{{ $data['posts']['published']->count() }} Published Post(s)</li>
-                                    <li>{{ $data['posts']['drafts']->count() }} Draft(s)</li>
+                                    <li>{{ $data['posts']['published_count'] }} Published Post(s)</li>
+                                    <li>{{ $data['posts']['drafts_count'] }} Draft(s)</li>
                                 </ul>
                             </div>
                         </div>
                     </div>
 
                     <line-chart :views="{{ $data['views']['trend'] }}"></line-chart>
 
-                    <div class="mt-4">
-                        @foreach($data['posts']['published'] as $post)
-                            <div class="d-flex border-top py-3 align-items-center">
-                                <div class="mr-auto">
-                                    <p class="mb-1 mt-2">
-                                        <a href="{{ route('canvas.stats.show', $post->id) }}"
-                                           class="font-weight-bold lead">{{ $post->title }}</a>
-                                    </p>
-                                    <p class="text-muted mb-2">
-                                            {{ $post->read_time }} ― <a
-                                                href="{{ route('canvas.post.edit', $post->id) }}">Edit
-                                                post</a> ― <a
-                                                href="{{ route('canvas.stats.show', $post->id) }}">Details</a>
+                    <post-list :models="{{ $data['posts']['all'] }}" inline-template>
+                        <div class="mt-4">
+                            <div v-cloak>
+                                <div class="d-flex border-top py-3 align-items-center" v-for="post in filteredList">
+                                    <div class="mr-auto">
+                                        <p class="mb-1 mt-2">
+                                            <a :href="'/canvas/stats/' + post.id" class="font-weight-bold lead">@{{ post.title }}</a>
                                         </p>
+                                        <p class="text-muted mb-2">
+                                            @{{ post.read_time }} ―
+                                            <a :href="'/canvas/posts/' + post.id + '/edit'">Edit post</a> ―
+                                            <a :href="'/canvas/stats/' + post.id">Details</a>
+                                        </p>
+                                    </div>
+                                    <div class="ml-auto d-none d-lg-block">
+                                        <span class="text-muted mr-3">@{{ suffixedNumber(post.views_count) }} View(s)</span>
+                                        Created @{{ moment(post.created_at).fromNow() }}
+                                    </div>
                                 </div>
-                                <div class="ml-auto d-none d-lg-block">
-                                    <span class="text-muted mr-3">{{ \Canvas\SuffixedNumber::format($post->views_count) }} View(s)</span>
-                                    Created {{ \Carbon\Carbon::parse($post->created_at)->diffForHumans() }}
+
+                                <div class="d-flex justify-content-center">
+                                    <a href="#!" class="btn btn-link" @click="limit += 7" v-if="load">Show more <i class="fa fa-fw fa-angle-down"></i></a>
                                 </div>
                             </div>
-                        @endforeach
-
-                        <div class="d-flex justify-content-center">
-                            {{ $data['posts']['all']->links() }}
                         </div>
-                    </div>
+                    </post-list>
                 @else
                     <p class="mt-4">There are no published posts for which you can view stats.</p>
                 @endif

resources/views/tags/index.blade.php

@@ -49,6 +49,10 @@ class="font-weight-bold lead">@{{ tag.name }}</a>
                                 </div>
                             </div>
 
+                            <div class="d-flex justify-content-center">
+                                <a href="#!" class="btn btn-link" @click="limit += 10" v-if="load">Show more <i class="fa fa-fw fa-angle-down"></i></a>
+                            </div>
+
                             <p class="mt-4" v-if="!filteredList.length">No tags matched the given search criteria.</p>
                         </div>
                     @else
@@ -58,4 +62,4 @@ class="font-weight-bold lead">@{{ tag.name }}</a>
             </div>
         </div>
     </tag-list>
-@endsection
+@endsection

resources/views/topics/index.blade.php

@@ -49,6 +49,10 @@ class="font-weight-bold lead">@{{ topic.name }}</a>
                                 </div>
                             </div>
 
+                            <div class="d-flex justify-content-center">
+                                <a href="#!" class="btn btn-link" @click="limit += 7" v-if="load">Show more <i class="fa fa-fw fa-angle-down"></i></a>
+                            </div>
+
                             <p class="mt-4" v-if="!filteredList.length">No topics matched the given search criteria.</p>
                         </div>
                     @else

src/Http/Controllers/StatsController.php

@@ -22,17 +22,28 @@ class StatsController extends Controller
      */
     public function index()
     {
-        $posts = Post::withCount('views')->orderByDesc('created_at')->paginate();
+        // Get all of the posts
+        $posts = Post::select('id', 'title', 'published_at', 'created_at')->withCount('views')->get();
+
+        // Filter out posts that are not published
+        $postList = $posts->filter(function ($value, $key) {
+            return $value->published;
+        });
+
+        // Append the reading time attribute
+        $postList->each->append('read_time');
+
+        // Get views for the last [X] days
         $views = View::whereBetween('created_at', [
             now()->subDays(self::DAYS_PRIOR)->toDateTimeString(),
             now()->toDateTimeString(),
         ])->select('created_at')->get();
 
         $data = [
             'posts' => [
-                'all'       => $posts,
-                'published' => $posts->where('published_at', '<=', now()->toDateTimeString()),
-                'drafts'    => $posts->where('published_at', '>', now()->toDateTimeString()),
+                'all'             => $posts,
+                'published_count' => $posts->where('published_at', '<=', now()->toDateTimeString())->count(),
+                'drafts_count'    => $posts->where('published_at', '>', now()->toDateTimeString())->count(),
             ],
             'views' => [
                 'count' => $views->count(),

yarn.lock

@@ -4014,9 +4014,9 @@ [email protected]:
   integrity sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==
 
 mime@^2.3.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.0.tgz#e051fd881358585f3279df333fe694da0bcffdd6"
-  integrity sha512-ikBcWwyqXQSHKtciCcctu9YfPbFYZ4+gbHEmE0Q8jzcTYQg5dHCr3g2wwAZjPoJfQVXZq6KXAjpXOTf5/cjT7w==
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.1.tgz#19eb7357bebbda37df585b14038347721558c715"
+  integrity sha512-VRUfmQO0rCd3hKwBymAn3kxYzBHr3I/wdVMywgG3HhXOwrCQgN84ZagpdTm2tZ4TNtwsSmyJWYO88mb5XvzGqQ==
 
 mimic-fn@^2.0.0:
   version "2.1.0"
@@ -4681,9 +4681,9 @@ pkg-dir@^3.0.0:
     find-up "^3.0.0"
 
 popper.js@^1.12:
-  version "1.14.7"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.7.tgz#e31ec06cfac6a97a53280c3e55e4e0c860e7738e"
-  integrity sha512-4q1hNvoUre/8srWsH7hnoSJ5xVmIL4qgz+s4qf2TnJIMyZFUFMGH+9vE7mXynAlHSZ/NdTmmow86muD0myUkVQ==
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
+  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
 
 portfinder@^1.0.9:
   version "1.0.20"