Implemented search

Closes #12

Author: PeeHaa

assets/js/Interface/NavBar.js

@@ -3,6 +3,11 @@ import Mail from './NavBar/Mail';
 export default class NavBar {
     constructor() {
         this.mails = {};
+
+        document.querySelector('#messages .search input').addEventListener('keyup', this.search.bind(this));
+        document.querySelector('#messages .search input').addEventListener('keypress', this.search.bind(this));
+        document.querySelector('#messages .search input').addEventListener('paste', this.search.bind(this));
+        document.querySelector('#messages .search input').addEventListener('input', this.search.bind(this));
     }
 
     addMails(mails) {
@@ -35,4 +40,10 @@ export default class NavBar {
             this.mails[id].deactivate();
         });
     }
+
+    search(e) {
+        Object.keys(this.mails).forEach((key)=> {
+            this.mails[key].filter(e.target.value.toLowerCase());
+        });
+    }
 }

assets/js/Interface/NavBar/Mail.js

@@ -10,6 +10,8 @@ export default class Mail {
         this.addSubject(mail.subject);
         this.addTimestamp(mail.timestamp);
         this.setReadStatus(mail.read);
+
+        this.searchableContent = mail.searchableContent;
     }
 
     addToDom() {
@@ -63,4 +65,22 @@ export default class Mail {
     markAsRead() {
         this.element.classList.remove('new');
     }
+
+    filter(search) {
+        if (this.searchableContent.indexOf(search)=== -1) {
+            this.hide();
+
+            return;
+        }
+
+        this.show();
+    }
+
+    hide() {
+        this.element.classList.add('filtered');
+    }
+
+    show() {
+        this.element.classList.remove('filtered');
+    }
 }

assets/scss/components/messages.scss

@@ -26,7 +26,6 @@ nav#messages {
         }
 
         button {
-            cursor: pointer;
             color: #ffffff;
         }
     }
@@ -41,6 +40,10 @@ nav#messages {
             color: #ffffff;
         }
 
+        &.filtered {
+            display: none;
+        }
+
         time {
             font-size: 11px;
             padding: 10px 10px 10px 15px;

examples/test.php

@@ -0,0 +1,32 @@
+<?php declare(strict_types=1);
+
+namespace PeeHaa\MailGrab\Examples;
+
+use PHPMailer\PHPMailer\PHPMailer;
+
+require_once __DIR__ . '/../vendor/autoload.php';
+
+$mail = new PHPMailer();
+
+$mail->isSMTP();
+$mail->Host = 'localhost';
+$mail->Port = 9025;
+$mail->SMTPDebug = true;
+
+$mail->setFrom('[email protected]', 'Mailer');
+$mail->addAddress('[email protected]', 'Joe User');     // Add a recipient
+$mail->addAddress('[email protected]');               // Name is optional
+$mail->addReplyTo('[email protected]', 'Information');
+$mail->addCC('[email protected]');
+$mail->addBCC('[email protected]');
+
+$mail->Subject = 'PHPMailer';
+$mail->Body = 'This is the HTML message body <b>in bold!</b>';
+$mail->isHTML(true);
+
+if(!$mail->send()) {
+    echo 'Message could not be sent.';
+    echo 'Mailer Error: ' . $mail->ErrorInfo;
+} else {
+    echo 'Message has been sent';
+}

public/css/bundle.css

@@ -17105,6 +17105,11 @@ var NavBar = function () {
         _classCallCheck(this, NavBar);
 
         this.mails = {};
+
+        document.querySelector('#messages .search input').addEventListener('keyup', this.search.bind(this));
+        document.querySelector('#messages .search input').addEventListener('keypress', this.search.bind(this));
+        document.querySelector('#messages .search input').addEventListener('paste', this.search.bind(this));
+        document.querySelector('#messages .search input').addEventListener('input', this.search.bind(this));
     }
 
     _createClass(NavBar, [{
@@ -17149,6 +17154,15 @@ var NavBar = function () {
                 _this3.mails[id].deactivate();
             });
         }
+    }, {
+        key: 'search',
+        value: function search(e) {
+            var _this4 = this;
+
+            Object.keys(this.mails).forEach(function (key) {
+                _this4.mails[key].filter(e.target.value.toLowerCase());
+            });
+        }
     }]);
 
     return NavBar;
@@ -17185,6 +17199,8 @@ var Mail = function () {
         this.addSubject(mail.subject);
         this.addTimestamp(mail.timestamp);
         this.setReadStatus(mail.read);
+
+        this.searchableContent = mail.searchableContent;
     }
 
     _createClass(Mail, [{
@@ -17249,6 +17265,27 @@ var Mail = function () {
         value: function markAsRead() {
             this.element.classList.remove('new');
         }
+    }, {
+        key: 'filter',
+        value: function filter(search) {
+            if (this.searchableContent.indexOf(search) === -1) {
+                this.hide();
+
+                return;
+            }
+
+            this.show();
+        }
+    }, {
+        key: 'hide',
+        value: function hide() {
+            this.element.classList.add('filtered');
+        }
+    }, {
+        key: 'show',
+        value: function show() {
+            this.element.classList.remove('filtered');
+        }
     }]);
 
     return Mail;

public/css/bundle.min.css

@@ -41,11 +41,12 @@ private function buildList(): array
         /** @var Mail $mail */
         foreach ($this->storage as $mail) {
             $list[] = [
-                'id'        => $mail->getId(),
-                'subject'   => $mail->getSubject(),
-                'timestamp' => $mail->getTimestamp()->format(\DateTime::RFC3339_EXTENDED),
-                'read'      => $mail->isRead(),
-                'project'   => $mail->getProject(),
+                'id'                => $mail->getId(),
+                'subject'           => $mail->getSubject(),
+                'searchableContent' => $mail->getSearchableContent(),
+                'timestamp'         => $mail->getTimestamp()->format(\DateTime::RFC3339_EXTENDED),
+                'read'              => $mail->isRead(),
+                'project'           => $mail->getProject(),
             ];
         }