added search functionality

justijndepover · Nov 5, 2020 · ea2486b · ea2486b
1 parent 0173ef4
commit ea2486b
Show file tree

Hide file tree

Showing 8 changed files with 130 additions and 8 deletions.
diff --git a/public/app.js b/public/app.js
@@ -1970,7 +1970,18 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
-/* harmony default export */ __webpack_exports__["default"] = ({});
+/* harmony default export */ __webpack_exports__["default"] = ({
+  computed: {
+    search: {
+      get: function get() {
+        this.$store.state.search;
+      },
+      set: function set(value) {
+        this.$store.dispatch('setSearch', value);
+      }
+    }
+  }
+});
 
 /***/ }),
 
@@ -2023,6 +2034,13 @@ __webpack_require__.r(__webpack_exports__);
     mails: function mails() {
       return this.$store.getters.getMails;
     },
+    filteredMails: function filteredMails() {
+      var _this = this;
+
+      return this.mails.filter(function (mail) {
+        return mail.tags.toLowerCase().includes(_this.$store.getters.getSearch.toLowerCase());
+      });
+    },
     mailsLoadStatus: function mailsLoadStatus() {
       return this.$store.getters.getMailsLoadStatus;
     },
@@ -2778,9 +2796,26 @@ var render = function() {
     ),
     _vm._v(" "),
     _c("input", {
+      directives: [
+        {
+          name: "model",
+          rawName: "v-model",
+          value: _vm.search,
+          expression: "search"
+        }
+      ],
       staticClass:
         "w-full pl-8 py-1 pr-3 text-sm leading-5 rounded bg-gray-900 focus:bg-gray-200 text-gray-500 focus:text-gray-800 focus:placeholder-gray-800 transition duration-300 focus:outline-none",
-      attrs: { type: "search", placeholder: "Search..." }
+      attrs: { type: "search", placeholder: "Search..." },
+      domProps: { value: _vm.search },
+      on: {
+        input: function($event) {
+          if ($event.target.composing) {
+            return
+          }
+          _vm.search = $event.target.value
+        }
+      }
     })
   ])
 }
@@ -2853,7 +2888,7 @@ var render = function() {
       _vm.mailsLoadStatus == 2
         ? _c(
             "div",
-            _vm._l(_vm.mails, function(mail) {
+            _vm._l(_vm.filteredMails, function(mail) {
               return _c(
                 "router-link",
                 {
@@ -20151,7 +20186,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var vue__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(vue__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var vuex__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! vuex */ "./node_modules/vuex/dist/vuex.esm.js");
 /* harmony import */ var _mails__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mails */ "./resources/js/store/mails.js");
-/* harmony import */ var _sidemenu__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./sidemenu */ "./resources/js/store/sidemenu.js");
+/* harmony import */ var _search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./search */ "./resources/js/store/search.js");
+/* harmony import */ var _sidemenu__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./sidemenu */ "./resources/js/store/sidemenu.js");
+
 
 
 
@@ -20160,7 +20197,8 @@ vue__WEBPACK_IMPORTED_MODULE_0___default.a.use(vuex__WEBPACK_IMPORTED_MODULE_1__
 /* harmony default export */ __webpack_exports__["default"] = (new vuex__WEBPACK_IMPORTED_MODULE_1__["default"].Store({
   modules: {
     mails: _mails__WEBPACK_IMPORTED_MODULE_2__["default"],
-    sidemenu: _sidemenu__WEBPACK_IMPORTED_MODULE_3__["default"]
+    search: _search__WEBPACK_IMPORTED_MODULE_3__["default"],
+    sidemenu: _sidemenu__WEBPACK_IMPORTED_MODULE_4__["default"]
   }
 }));
 
@@ -20240,6 +20278,39 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
+/***/ "./resources/js/store/search.js":
+/*!**************************************!*\
+  !*** ./resources/js/store/search.js ***!
+  \**************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony default export */ __webpack_exports__["default"] = ({
+  state: {
+    search: ''
+  },
+  getters: {
+    getSearch: function getSearch(state) {
+      return state.search;
+    }
+  },
+  mutations: {
+    setSearchState: function setSearchState(state, data) {
+      state.search = data;
+    }
+  },
+  actions: {
+    setSearch: function setSearch(_ref, data) {
+      var commit = _ref.commit;
+      commit('setSearchState', data);
+    }
+  }
+});
+
+/***/ }),
+
 /***/ "./resources/js/store/sidemenu.js":
 /*!****************************************!*\
   !*** ./resources/js/store/sidemenu.js ***!

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=b79fb71b63ac65545ee0",
+    "/app.js": "/app.js?id=acae4ff7da071498662b",
     "/app.css": "/app.css?id=6ef9fb9e910c36af7c6e"
 }
diff --git a/resources/js/components/SearchBar.vue b/resources/js/components/SearchBar.vue
@@ -8,11 +8,21 @@
             </span>
         </div>
 
-        <input class="w-full pl-8 py-1 pr-3 text-sm leading-5 rounded bg-gray-900 focus:bg-gray-200 text-gray-500 focus:text-gray-800 focus:placeholder-gray-800 transition duration-300 focus:outline-none" type="search" placeholder="Search...">
+        <input v-model="search" class="w-full pl-8 py-1 pr-3 text-sm leading-5 rounded bg-gray-900 focus:bg-gray-200 text-gray-500 focus:text-gray-800 focus:placeholder-gray-800 transition duration-300 focus:outline-none" type="search" placeholder="Search...">
     </div>
 </template>
 
 <script>
 export default {
+    computed: {
+        search: {
+            get() {
+                this.$store.state.search;
+            },
+            set(value) {
+                this.$store.dispatch('setSearch', value);
+            }
+        }
+    },
 }
 </script>
diff --git a/resources/js/components/Sidebar.vue b/resources/js/components/Sidebar.vue
@@ -9,7 +9,7 @@
         </button>
 
         <div v-if="mailsLoadStatus == 2">
-            <router-link v-for="mail in mails" :key="mail.id" :to="{ name: 'mail', params: {id: mail.id} }" class="block bg-white hover:bg-gray-100 text-sm" active-class="border-l-4 border-indigo-600 bg-gray-100">
+            <router-link v-for="mail in filteredMails" :key="mail.id" :to="{ name: 'mail', params: {id: mail.id} }" class="block bg-white hover:bg-gray-100 text-sm" active-class="border-l-4 border-indigo-600 bg-gray-100">
                 <div class="p-6 border-b" @click="closeMenu">
                     <div class="flex justify-between">
                         <span class="font-semibold">{{ mail.to_name }}</span>
@@ -39,6 +39,11 @@ export default {
         mails() {
             return this.$store.getters.getMails;
         },
+        filteredMails() {
+            return this.mails.filter(mail => {
+                return mail.tags.toLowerCase().includes(this.$store.getters.getSearch.toLowerCase());
+            });
+        },
         mailsLoadStatus() {
             return this.$store.getters.getMailsLoadStatus;
         },

diff --git a/resources/js/store/index.js b/resources/js/store/index.js
@@ -1,13 +1,15 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import mails from './mails';
+import search from './search';
 import sidemenu from './sidemenu';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
     modules: {
         mails,
+        search,
         sidemenu,
     }
 });
diff --git a/resources/js/store/search.js b/resources/js/store/search.js
@@ -0,0 +1,20 @@
+export default {
+    state: {
+        search: '',
+    },
+    getters: {
+        getSearch(state) {
+            return state.search;
+        }
+    },
+    mutations: {
+        setSearchState(state, data) {
+            state.search = data;
+        }
+    },
+    actions: {
+        setSearch({ commit }, data) {
+            commit('setSearchState', data);
+        },
+    }
+}
diff --git a/src/Controllers/EmailApiController.php b/src/Controllers/EmailApiController.php
@@ -16,6 +16,7 @@ public function index()
                     'to_name' => $email->to_name,
                     'subject' => $email->subject,
                     'created_at' => $email->created_at->format('d/m/Y'),
+                    'tags' => $email->getTags(),
                 ];
             });
 

diff --git a/src/Models/Email.php b/src/Models/Email.php
@@ -17,4 +17,17 @@ public function getBccAttribute($bcc)
     {
         return json_decode($bcc);
     }
+
+    public function getTags()
+    {
+        return implode(' ', [
+            $this->from_email,
+            $this->from_name,
+            $this->to_email,
+            $this->to_name,
+            $this->cc,
+            $this->bcc,
+            $this->subject,
+        ]);
+    }
 }