Search Functionality #109

modules/Web/Views/partials/search.php

@@ -0,0 +1,13 @@
+<li>
+    <a class="search-tab">
+        <form action="<?php echo base_url(true) . '/' . current_lang() ?>/posts" method="get" class="form-search">
+            <input class="search-bar"
+                   name="q" type="search"
+                   placeholder="Search"
+                   autocomplete="off"
+                   value="<?php echo !empty($search_text) ? $search_text : '' ?>"
+                <?php echo !empty($search_text) ? 'autofocus' : '' ?>>
+        </form>
+        <i class="material-icons search-bar-img"></i>
+    </a>
+</li>

public/assets/css/custom.css

@@ -676,6 +676,54 @@ div.polaroid {
     min-width: 300px !important;
 }
 
+
+.search-bar {
+    border: none !important;
+    outline: none !important;
+    width: 30px !important;
+    font-size: 0 !important;
+    cursor: pointer;
+    position: absolute;
+    margin: 0;
+}
+
+.search-bar:focus{
+    width: 300px !important;
+    position: relative;
+    font-size: 16px !important;
+    cursor: auto;
+    color: #fff;
+    border-bottom: 1px solid #fff !important;
+    height: 30px !important;
+}
+
+.search-bar-img:before {
+    content: "\e8b6";
+}
+
+.search-tab {
+    display: flex;
+}
+
+#mobile-demo .search-bar {
+    color: #000;
+    width: 100% !important;
+    border-bottom: 1px solid #9e9e9e !important;
+    font-size: 16px !important;
+    position: relative;
+    height: 30px;
+    margin: 0;
+    cursor: auto;
+}
+
+#mobile-demo .search-bar-img {
+    display: none;
+}
+
+#mobile-demo .search-tab {
+    background-color: unset;
+}
+
 @media only screen and (max-width: 1500px) {
     .content_no_img {
         width: 100% !important;

public/assets/js/custom.js

@@ -1,30 +1,60 @@
-jQuery(document).ready(function ($) {
+class Custom {
+    constructor() {
+        this.timeOut = null;
+
+        this.initPlugins();
+        this.events();
+    }
 
-    $(".dropdown-trigger").dropdown();
+    initPlugins() {
+        $(".dropdown-trigger").dropdown();
+        $('textarea#content').characterCounter();
+        $('.modal').modal();
+        $('.sidenav').sidenav();
 
-    $('textarea#content').characterCounter();
 
-    $('.modal').modal();
+        $('.visibility-icon').on('click', function () {
 
-    $('.modal-trigger').on('click', function () {
-        $('#modal-confirm').attr('href', $(this).data('url'));
+        })
+    }
+
+    modalTrigger(e) {
+        $('#modal-confirm').attr('href', $(e.currentTarget).data('url'));
         $('.modal').modal('open');
-    });
+    }
 
-    $('.visibility-icon').on('click', function () {
-        if ($(this).hasClass('on')) {
+    visibilityIcon(e) {
+        if ($(e.currentTarget).hasClass('on')) {
             $('.off').removeClass('hide');
-            $(this).parent('.input-field').find('input[type=text]').attr('type', 'password');
+            $(e.currentTarget).parent('.input-field').find('input[type=text]').attr('type', 'password');
 
         } else {
             $('.on').removeClass('hide');
-            $(this).parent('.input-field').find('input[type=password]').attr('type', 'text');
+            $(e.currentTarget).parent('.input-field').find('input[type=password]').attr('type', 'text');
+        }
+
+        $(e.currentTarget).addClass('hide');
+    }
+
+    search(e) {
+        if (this.timeOut) {
+            clearTimeout(this.timeOut);
         }
 
-        $(this).addClass('hide');
-    })
+        this.timeOut = setTimeout(() => {
+            $(e.currentTarget).closest('form.form-search').submit();
+        }, 1000)
+    }
 
-    $('.sidenav').sidenav();
+    events() {
+        $(document).on('click', '.modal-trigger', this.modalTrigger.bind(this));
+        $(document).on('click', '.visibility-icon', this.visibilityIcon.bind(this));
+        $(document).on('input', '.search-bar', this.search.bind(this));
+    }
+}
+
+jQuery(document).ready(function ($) {
+    new Custom();
 });
 
 

shared/Services/PostService.php

@@ -51,9 +51,9 @@ class PostService extends QtService
      * @throws ModelException
      * @throws ReflectionException
      */
-    public function getPosts(int $perPage, int $currentPage): PaginatorInterface
+    public function getPosts(int $perPage, int $currentPage, ?string $search = null): PaginatorInterface
     {
-        return ModelFactory::get(Post::class)
+        $query = ModelFactory::get(Post::class)
             ->joinThrough(ModelFactory::get(User::class))
             ->select(
                 'posts.uuid',
@@ -65,8 +65,20 @@ public function getPosts(int $perPage, int $currentPage): PaginatorInterface
                 ['users.lastname' => 'lastname'],
                 ['users.uuid' => 'user_directory']
             )
-            ->orderBy('updated_at', 'desc')
-            ->paginate($perPage, $currentPage);
+            ->orderBy('updated_at', 'desc');
+
+        if (!empty($search)) {
+            $searchTerm = '%' . $search . '%';
+
+            $criterias = [
+                ['title', 'LIKE', $searchTerm],
+                ['content', 'LIKE', $searchTerm]
+            ];
+
+            $query->criterias($criterias);
+        }
+
+        return $query->paginate($perPage, $currentPage);
     }
 
     /**