Add search feature

resources/js/app.js

@@ -12,10 +12,10 @@ import Edit         from './views/Edit'
 import NotFound     from './views/Error'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
+import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen);
+library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen, faSearch);
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 

resources/js/views/Accounts.vue

@@ -1,8 +1,21 @@
 <template>
     <div>
         <div class="container" v-if="this.showAccounts">
+            <div class="columns is-gapless is-mobile is-centered">
+                <div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
+                    <div class="field">
+                        <div class="control has-icons-right">
+                            <input type="text" class="input is-rounded is-search" v-model="search" placeholder="">
+                            <span class="icon is-small is-right">
+                                <font-awesome-icon :icon="['fas', 'search']"  v-if="!search" />
+                                <a class="delete" v-if="search" @click="search = '' "></a>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div class="buttons are-large is-centered">
-                <span v-for="account in accounts" class="button is-black has-background-black-bis twofaccount" >
+                <span v-for="account in filteredAccounts" class="button is-black has-background-black-bis twofaccount" >
                     <span @click.stop="getAccount(account.id)">
                         <img :src="'storage/icons/' + account.icon" v-if="account.icon">
                         {{ account.service }}
@@ -88,6 +101,7 @@
                 accounts : [],
                 ShowTwofaccountInModal : false,
                 twofaccount: {},
+                search: '',
                 token : null,
                 username : null,
                 editMode: this.InitialEditMode,
@@ -96,6 +110,17 @@
             }
         },
 
+        computed: {
+            filteredAccounts() {
+                return this.accounts.filter(
+                    item => {
+                        return item.service.toLowerCase().includes(this.search.toLowerCase()) || item.account.toLowerCase().includes(this.search.toLowerCase());
+                    }
+                );
+            }
+            
+        },
+
         props: ['InitialEditMode'],
 
         mounted(){

resources/js/views/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="section">
+    <div class="section main-section">
         <main class="py-4">
             <router-view></router-view>
         </main>

resources/sass/app.scss

@@ -8,6 +8,10 @@
 //@import '~bootstrap/scss/bootstrap';
 @import '~bulma/bulma';
 
+.main-section {
+  padding: 1.5rem 1.5rem 8rem 1.5rem;
+}
+
 nav.level {
     padding: 0 20px;
     /*postion: fixed;*/
@@ -104,6 +108,14 @@ nav.level {
   color: hsl(0, 0%, 48%);
 }
 
+.control.has-icons-left .icon, .control.has-icons-right .icon {
+  color: inherit;
+}
+
+.is-search {
+  border-color: hsl(0, 0%, 21%);
+}
+
 .modal .field.is-grouped:last-child {
   justify-content: flex-end;
   padding-top: 20px;