Merge branch 'release/4.1.7'

* release/4.1.7: polishing up the filters Renaming the list filters compiling assets Apply fixes from StyleCI (#440) Added filters to the model indexes Cleanup Cleanup
austintoddj · Mar 4, 2019 · 047ab1f · 047ab1f
2 parents 473c5d3 + c739282
commit 047ab1f
Show file tree

Hide file tree

Showing 20 changed files with 249 additions and 112 deletions.
diff --git a/config/canvas.php b/config/canvas.php
@@ -7,9 +7,9 @@
     | Route Middleware
     |--------------------------------------------------------------------------
     |
-    | You may assign any custom middleware that you choose to the Canvas
-    | routes in your application. They will be protected by basic
-    | user authentication by default.
+    | Assign any custom middleware to limit access to the admin interface.
+    | If your app needs roles or permissions that allow for specific
+    | users to manage the blog, create and add a middleware here.
     |
     */
 
@@ -23,9 +23,9 @@
     | Uploads Disk
     |--------------------------------------------------------------------------
     |
-    | This is the storage disk Canvas will use to put file uploads, you can use
-    | any of the disks defined in your config/filesystems.php file. You may
-    | also configure the path where the files should be stored.
+    | This is the storage disk Canvas will use to put file uploads, you can
+    | use any of the disks defined in your config/filesystems.php file.
+    | You may also configure the path files should be stored at.
     |
     */
 

diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/js/app.js.map b/public/js/app.js.map
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,6 +1,6 @@
 {
-    "/js/app.js": "/js/app.js?id=c09314617cfd4bbabf34",
+    "/js/app.js": "/js/app.js?id=85577627b51c6fe6aace",
     "/css/app.css": "/css/app.css?id=f13a10a1564f49e2b5f0",
-    "/js/app.js.map": "/js/app.js.map?id=6bb04d2ec806545765cc",
+    "/js/app.js.map": "/js/app.js.map?id=28b80c57c98ffab2c36d",
     "/favicon.png": "/favicon.png?id=39d853e8c2bdbc38fde3"
 }
diff --git a/resources/js/components/Editor.vue b/resources/js/components/Editor.vue
@@ -1,11 +1,11 @@
 <script type="text/ecmascript-6">
     import Quill from 'quill';
     import Parchment from 'parchment';
-    import ImageUploader from './editorComponents/ImageUploader.vue';
-    import HTMLEmbedder from './editorComponents/HTMLEmbedder.vue';
+    import HTMLBlot from './editorComponents/HTMLBlot.js';
     import ImageBlot from './editorComponents/ImageBlot.js';
     import DividerBlot from './editorComponents/DividerBlot.js';
-    import HTMLBlot from './editorComponents/HTMLBlot.js';
+    import HTMLEmbedder from './editorComponents/HTMLEmbedder.vue';
+    import ImageUploader from './editorComponents/ImageUploader.vue';
 
     /**
      * Create an instance of the QuillJS editor.
@@ -14,8 +14,8 @@
      */
     export default {
         components: {
-            'image-uploader': ImageUploader,
-            'html-embedder': HTMLEmbedder
+            'html-embedder': HTMLEmbedder,
+            'image-uploader': ImageUploader
         },
 
         props: {
@@ -53,7 +53,7 @@
                 const icons = Quill.import('ui/icons');
                 icons.header[3] = require('!html-loader!quill/assets/icons/header-3.svg');
 
-                return new Quill(this.$refs.editor, {
+                let quill = new Quill(this.$refs.editor, {
                     modules: {
                         syntax: true,
                         toolbar: [
@@ -66,6 +66,17 @@
                     scrollingContainer: 'html, body',
                     placeholder: "Tell your story..."
                 });
+
+                /**
+                 * Temporary workaround for customizing the link tooltip.
+                 *
+                 * @source: https://github.com/quilljs/quill/issues/1107#issuecomment-259938173
+                 */
+                let tooltip = quill.theme.tooltip;
+                let input = tooltip.root.querySelector("input[data-link]");
+                input.dataset.link = 'Paste or type a link...';
+
+                return quill;
             },
 
             // Handle the editor value

diff --git a/resources/js/components/LineChart.vue b/resources/js/components/LineChart.vue
@@ -1,7 +1,7 @@
 <script type="text/ecmascript-6">
     import Vue from 'vue'
-    import Chart from 'vue2-frappe'
     import moment from 'moment';
+    import Chart from 'vue2-frappe'
 
     Vue.use(Chart);
     Vue.prototype.moment = moment;
@@ -22,7 +22,7 @@
 </script>
 
 <template>
-    <div>
+    <div v-cloak>
         <vue-frappe
                 id="stats"
                 :labels="this.labels"

diff --git a/resources/js/components/PostList.vue b/resources/js/components/PostList.vue
@@ -0,0 +1,25 @@
+<script type="text/ecmascript-6">
+    export default {
+        props: ['models'],
+
+        data() {
+            return {
+                search: '',
+                postList: this.models ? this.models : []
+            }
+        },
+
+        computed: {
+            /**
+             * Filter posts by their title.
+             *
+             * @source https://codepen.io/AndrewThian/pen/QdeOVa
+             */
+            filteredList() {
+                return this.postList.filter(post => {
+                    return post.title.toLowerCase().includes(this.search.toLowerCase())
+                })
+            }
+        },
+    }
+</script>
diff --git a/resources/js/components/Slug.vue b/resources/js/components/Slug.vue
@@ -1,10 +1,10 @@
 <script type="text/ecmascript-6">
     export default {
-        props: ['entity'],
+        props: ['model'],
 
         data() {
             return {
-                name: this.entity ? this.entity.name : ''
+                name: this.model ? this.model.name : ''
             }
         },
 

diff --git a/resources/js/components/TagList.vue b/resources/js/components/TagList.vue
@@ -0,0 +1,25 @@
+<script type="text/ecmascript-6">
+    export default {
+        props: ['models'],
+
+        data() {
+            return {
+                search: '',
+                tagList: this.models ? this.models : []
+            }
+        },
+
+        computed: {
+            /**
+             * Filter tags by their name.
+             *
+             * @source https://codepen.io/AndrewThian/pen/QdeOVa
+             */
+            filteredList() {
+                return this.tagList.filter(tag => {
+                    return tag.name.toLowerCase().includes(this.search.toLowerCase())
+                })
+            }
+        },
+    }
+</script>
diff --git a/resources/js/components/TopicList.vue b/resources/js/components/TopicList.vue
@@ -0,0 +1,25 @@
+<script type="text/ecmascript-6">
+    export default {
+        props: ['models'],
+
+        data() {
+            return {
+                search: '',
+                topicList: this.models ? this.models : []
+            }
+        },
+
+        computed: {
+            /**
+             * Filter topics by their name.
+             *
+             * @source https://codepen.io/AndrewThian/pen/QdeOVa
+             */
+            filteredList() {
+                return this.topicList.filter(topic => {
+                    return topic.name.toLowerCase().includes(this.search.toLowerCase())
+                })
+            }
+        },
+    }
+</script>
diff --git a/resources/views/components/forms/tag/create.blade.php b/resources/views/components/forms/tag/create.blade.php
@@ -3,7 +3,7 @@
     <input type="hidden" name="id" hidden value="{{ $data['id'] }}">
 
     <slug inline-template>
-        <div>
+        <div v-cloak>
             <div class="form-group row my-5">
                 <div class="col-lg-12">
                     <input type="text" name="name" v-model="name" title="Name"

diff --git a/resources/views/components/forms/tag/edit.blade.php b/resources/views/components/forms/tag/edit.blade.php
@@ -2,8 +2,8 @@
     @method('PUT')
     @csrf
 
-    <slug :entity="{{ $data['tag'] }}" inline-template>
-        <div>
+    <slug :model="{{ $data['tag'] }}" inline-template>
+        <div v-cloak>
             <div class="form-group row my-5">
                 <div class="col-lg-12">
                     <input type="text" name="name" v-model="name" value="{{ $data['tag']->name }}"

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -5,7 +5,7 @@
     @stack('meta')
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="csrf-token" content="{{ csrf_token() }}">
 
     <!-- Title -->

diff --git a/resources/views/posts/index.blade.php b/resources/views/posts/index.blade.php
@@ -7,55 +7,67 @@
 @endsection
 
 @section('content')
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-10">
-                <h1 class="mb-4 mt-2">Posts</h1>
+    <post-list :models="{{ $data['posts'] }}" inline-template>
+        <div class="container" v-cloak>
+            <div class="row justify-content-center">
+                <div class="col-md-10">
+                    <div class="d-flex justify-content-between">
+                        <h1 class="mb-4 mt-2">Posts</h1>
+                        <div class="dropdown my-auto">
+                            <a href="#" id="navbarDropdown" class="nav-link px-0 text-secondary pt-0" role="button"
+                               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre
+                               style="margin-top: -8px">
+                                <i class="fas fa-search"></i>
+                            </a>
+                            <div class="dropdown-menu dropdown-menu-right py-0" style="min-width: 15rem;" aria-labelledby="dropdownMenuButton">
+                                <form class="pl-2 w-100">
+                                    <div class="form-group mb-0">
+                                        <input v-model="search"
+                                               type="text"
+                                               class="form-control border-0 pl-0"
+                                               id="search"
+                                               placeholder="Search..."
+                                               autofocus>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
 
-                @if(count($data['posts']))
-                    @foreach($data['posts'] as $post)
-                        <div class="d-flex border-top py-3 align-items-center">
+                    @if(count($data['posts']))
+                        <div class="d-flex border-top py-3 align-items-center" v-for="post in filteredList">
                             <div class="mr-auto py-1">
                                 <p class="mb-1">
-                                    <a href="{{ route('canvas.post.edit', $post->id) }}"
-                                       class="font-weight-bold lead">{{ $post->title }}</a>
+                                    <a :href="'/canvas/posts/' + post.id + '/edit'" class="font-weight-bold lead">@{{ post.title }}</a>
                                 </p>
-                                @if($post->summary)
-                                    <p class="mb-1">{!! str_limit(strip_tags($post->body), 90) !!}</p>
-                                @endif
+                                <p class="mb-1" v-if="post.summary">@{{ post.summary }}</p>
                                 <p class="text-muted mb-0">
-                                        @if($post->published)
-                                        Published {{ \Carbon\Carbon::parse($post->published_at)->diffForHumans() }}
-                                    @else
-                                        <span class="text-danger">Draft</span>
-                                    @endif
-                                        ―
-                                        Updated {{ \Carbon\Carbon::parse($post->updated_at)->diffForHumans() }}
+                                    <span v-if="post.published_at <= new Date().toJSON().slice(0, 19).replace('T', ' ')">Published @{{ moment(post.published_at).fromNow() }}</span>
+                                    <span v-else class="text-danger">Draft</span>
+                                    ―
+                                    Updated @{{ moment(post.updated_at).fromNow() }}
                                 </p>
                             </div>
                             <div class="ml-auto d-none d-lg-block">
-                                <a href="{{ route('canvas.post.edit', $post->id) }}">
-                                    @isset($post->featured_image)
-                                        <div class="mr-2" style="background-size: cover;background-image: url({{ $post->featured_image }});width: 57px; height: 57px; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;"></div>
-                                    @else
-                                        <span class="fa-stack fa-2x align-middle">
-                                            <i class="fas fa-circle fa-stack-2x text-black-50"></i>
-                                            <i class="fas fa-fw fa-stack-1x fa-camera fa-inverse"></i>
-                                        </span>
-                                    @endisset
+                                <a :href="'/canvas/posts/' + post.id + '/edit'">
+                                    <div v-if="post.featured_image"
+                                         class="mr-2"
+                                         :style="{ backgroundImage: 'url(' + post.featured_image + ')' }"
+                                         style="background-size: cover;width: 57px; height: 57px; -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;"></div>
+                                    <span v-else class="fa-stack fa-2x align-middle">
+                                        <i class="fas fa-circle fa-stack-2x text-black-50"></i>
+                                        <i class="fas fa-fw fa-stack-1x fa-camera fa-inverse"></i>
+                                    </span>
                                 </a>
                             </div>
                         </div>
-                    @endforeach
 
-                    <div class="d-flex justify-content-center">
-                        {{ $data['posts']->links() }}
-                    </div>
-                @else
-                    <p class="mt-4">No posts were found, start by <a href="{{ route('canvas.post.create') }}">adding a
-                            new post</a>.</p>
-                @endif
+                        <p class="mt-4" v-if="!filteredList.length">No posts matched the given search criteria.</p>
+                    @else
+                        <p class="mt-4">No posts were found, start by <a href="{{ route('canvas.post.create') }}">adding a new post</a>.</p>
+                    @endif
+                </div>
             </div>
         </div>
-    </div>
-@endsection
+    </post-list>
+@endsection