extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2024-11-25 17:54:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add search feature

Browse Source
This commit is contained in:
Bubka 2020-01-11 16:46:59 +01:00
parent 02bbf59083
commit 0894b3fd25
4 changed files with 41 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/app.js vendored
View File

@ -12,10 +12,10 @@ import Edit from './views/Edit'
import NotFound from './views/Error' import NotFound from './views/Error'
import { library } from '@fortawesome/fontawesome-svg-core' 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' 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) Vue.component('font-awesome-icon', FontAwesomeIcon)

27
resources/js/views/Accounts.vue
View File

@ -1,8 +1,21 @@
<template> <template>
<div> <div>
<div class="container" v-if="this.showAccounts"> <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"> <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)"> <span @click.stop="getAccount(account.id)">
<img :src="'storage/icons/' + account.icon" v-if="account.icon"> <img :src="'storage/icons/' + account.icon" v-if="account.icon">
{{ account.service }} {{ account.service }}
@ -88,6 +101,7 @@
accounts : [], accounts : [],
ShowTwofaccountInModal : false, ShowTwofaccountInModal : false,
twofaccount: {}, twofaccount: {},
search: '',
token : null, token : null,
username : null, username : null,
editMode: this.InitialEditMode, 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'], props: ['InitialEditMode'],
mounted(){ mounted(){

2
resources/js/views/App.vue
View File

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

12
resources/sass/app.scss vendored
View File

@ -8,6 +8,10 @@
//@import '~bootstrap/scss/bootstrap'; //@import '~bootstrap/scss/bootstrap';
@import '~bulma/bulma'; @import '~bulma/bulma';
.main-section {
padding: 1.5rem 1.5rem 8rem 1.5rem;
}
nav.level { nav.level {
padding: 0 20px; padding: 0 20px;
/*postion: fixed;*/ /*postion: fixed;*/
@ -104,6 +108,14 @@ nav.level {
color: hsl(0, 0%, 48%); 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 { .modal .field.is-grouped:last-child {
justify-content: flex-end; justify-content: flex-end;
padding-top: 20px; padding-top: 20px;