extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-06-19 11:26:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Set Pull to Refresh feature on Accounts list

Browse Source
This commit is contained in:
Bubka 2020-02-09 23:04:46 +01:00
parent 0db83e9908
commit 94d57aff4f
2 changed files with 45 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,28 +27,35 @@
</div> </div>
<!-- accounts --> <!-- accounts -->
<div class="accounts columns is-multiline is-centered"> <div class="accounts columns is-multiline is-centered">
<div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts"> <vue-pull-refresh :on-refresh="onRefresh" :config="{
<div class="tfa-container"> errorLabel: 'error',
<div class="tfa-checkbox" v-if="editMode"> startLabel: '',
<div class="field"> readyLabel: '',
<input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts"> loadingLabel: 'refreshing'
<label :for="'ckb_' + account.id"></label> }">
<div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts">
<div class="tfa-container">
<div class="tfa-checkbox" v-if="editMode">
<div class="field">
<input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" :value="account.id" type="checkbox" :name="'ckb_' + account.id" v-model="selectedAccounts">
<label :for="'ckb_' + account.id"></label>
</div>
</div> </div>
</div> <div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)">
<div class="tfa-content is-size-3 is-size-4-mobile" @click.stop="showAccount(account)"> <div class="tfa-text has-ellipsis">
<div class="tfa-text has-ellipsis"> <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
<img :src="'/storage/icons/' + account.icon" v-if="account.icon"> {{ account.service }}
{{ account.service }} <span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span>
<span class="is-family-primary is-size-6 is-size-7-mobile has-text-grey ">{{ account.account }}</span> </div>
</div>
<div class="tfa-dots has-text-grey" v-if="editMode">
<router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark is-rounded">
{{ $t('commons.edit') }}
</router-link>
</div> </div>
</div>
<div class="tfa-dots has-text-grey" v-if="editMode">
<router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark is-rounded">
{{ $t('commons.edit') }}
</router-link>
</div> </div>
</div> </div>
</div> </vue-pull-refresh>
</div> </div>
</div> </div>
<!-- No account --> <!-- No account -->
@ -131,6 +138,7 @@
import Modal from '../components/Modal' import Modal from '../components/Modal'
import TwofaccountShow from '../components/TwofaccountShow' import TwofaccountShow from '../components/TwofaccountShow'
import Form from './../components/Form' import Form from './../components/Form'
import vuePullRefresh from 'vue-pull-refresh';
export default { export default {
data(){ data(){
@ -141,11 +149,10 @@
search: '', search: '',
username : null, username : null,
editMode: this.InitialEditMode, editMode: this.InitialEditMode,
QuickFormIsVisible: false, showQuickForm: false,
form: new Form({ form: new Form({
qrcode: null qrcode: null
}), }),
axiosIsComplete: null,
} }
}, },
@ -159,14 +166,8 @@
}, },
showAccounts() { showAccounts() {
return this.accounts.length > 0 && !this.QuickFormIsVisible ? true : false return this.accounts.length > 0 && !this.showQuickForm ? true : false
}, },
showQuickForm: {
get: function() { return (this.QuickFormIsVisible || this.accounts.length === 0) && this.axiosIsComplete },
set: function(value) { this.QuickFormIsVisible = value }
},
}, },
props: ['InitialEditMode'], props: ['InitialEditMode'],
@ -187,10 +188,22 @@
components: { components: {
Modal, Modal,
TwofaccountShow, TwofaccountShow,
'vue-pull-refresh': vuePullRefresh
}, },
methods: { methods: {
onRefresh() {
var that = this
return new Promise(function (resolve, reject) {
setTimeout(function () {
that.fetchAccounts()
resolve();
}, 1000);
});
},
async uploadQrcode(event) { async uploadQrcode(event) {
let imgdata = new FormData(); let imgdata = new FormData();
@ -216,7 +229,7 @@
}) })
}) })
this.axiosIsComplete = true this.showQuickForm = response.data.length === 0 ? true: false
}) })
}, },

4
resources/sass/app.scss vendored
View File

@ -52,6 +52,10 @@ a:hover {
background-color: hsl(0, 0%, 14%) !important; background-color: hsl(0, 0%, 14%) !important;
} }
.pull-down-header {
background-color: hsl(0, 0%, 21%) !important;
}
.tfa { .tfa {
border-radius: 6px; border-radius: 6px;
text-align: center; text-align: center;