Set Pull to Refresh feature on Accounts list

resources/js/views/Accounts.vue

@@ -27,6 +27,12 @@
             </div>
             <!-- accounts -->
             <div class="accounts columns is-multiline is-centered">
+                <vue-pull-refresh :on-refresh="onRefresh" :config="{
+                    errorLabel: 'error',
+                    startLabel: '',
+                    readyLabel: '',
+                    loadingLabel: 'refreshing'
+                    }">
                     <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">
@@ -49,6 +55,7 @@
                             </div>
                         </div>
                     </div>
+                </vue-pull-refresh>
             </div>
         </div>
         <!-- No account -->
@@ -131,6 +138,7 @@
     import Modal from '../components/Modal'
     import TwofaccountShow from '../components/TwofaccountShow'
     import Form from './../components/Form'
+    import vuePullRefresh from 'vue-pull-refresh';
 
     export default {
         data(){
@@ -141,11 +149,10 @@
                 search: '',
                 username : null,
                 editMode: this.InitialEditMode,
-                QuickFormIsVisible: false,
+                showQuickForm: false,
                 form: new Form({
                     qrcode: null
                 }),
-                axiosIsComplete: null,
             }
         },
 
@@ -159,14 +166,8 @@
             },
 
             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'],
@@ -187,10 +188,22 @@
         components: {
             Modal,
             TwofaccountShow,
+            'vue-pull-refresh': vuePullRefresh
         },
 
         methods: {
 
+            onRefresh() {
+                var that = this
+
+                return new Promise(function (resolve, reject) {
+                    setTimeout(function () {
+                        that.fetchAccounts()
+                        resolve();
+                    }, 1000);
+                });
+            },
+
             async uploadQrcode(event) {
 
                 let imgdata = new FormData();
@@ -216,7 +229,7 @@
                         })
                     })
                     
-                    this.axiosIsComplete = true
+                    this.showQuickForm = response.data.length === 0 ? true: false
                 })
             },
 

resources/sass/app.scss

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