Option for showing active/inactive accounts.

frontend/src/components/accounts/Index.vue

@@ -142,7 +142,9 @@ export default {
   data() {
     return {
       accounts: [],
+      allAccounts: [],
       type: 'all',
+      downloaded: false,
       loading: false,
       ready: false,
       fields: [],
@@ -170,22 +172,22 @@ export default {
       this.getAccountList();
     },
     orderMode: function (value) {
+      // update the table headers
       this.updateFieldList();
-      this.sortableOptions.disabled = !value;
+
-      this.sortableOptions.onEnd = this.saveAccountSort;
+      // reorder the accounts:
-      if (true === value) {
+      this.reorderAccountList(value);
-        this.reorderAccountList();
+
-      }
+      // make table sortable:
-      // make sortable of table:
+      this.makeTableSortable(value);
-      if (null === this.sortable) {
+    },
-        this.sortable = Sortable.create(this.$refs.table.$el.querySelector('tbody'), this.sortableOptions);
+    activeFilter: function (value) {
-      }
+      this.filterAccountList();
-      this.sortable.option('disabled', this.sortableOptions.disabled);
     }
   },
   computed: {
     ...mapGetters('root', ['listPageSize']),
-    ...mapGetters('accounts/index', ['orderMode']),
+    ...mapGetters('accounts/index', ['orderMode', 'activeFilter']),
     ...mapGetters('dashboard/index', ['start', 'end',]),
     'indexReady': function () {
       return null !== this.start && null !== this.end && null !== this.listPageSize && this.ready;
@@ -213,7 +215,10 @@ export default {
       for (let i in this.accounts) {
         if (this.accounts.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
           let current = this.accounts[i];
+
+          // the actual account
           if (current.id === identifier) {
+            this.accounts[i].order = newOrder;
             let newOrder = parseInt(current.order) + (newIndex - oldIndex);
             let url = './api/v1/accounts/' + current.id;
             axios.put(url, {order: newOrder}).then(response => {
@@ -224,11 +229,24 @@ export default {
         }
       }
     },
-    reorderAccountList() {
+    reorderAccountList: function (orderMode) {
-      this.sortBy = 'order';
+      if (orderMode) {
-      this.sortDesc = false;
+        this.sortBy = 'order';
+        this.sortDesc = false;
+      }
     },
-    updateFieldList() {
+    makeTableSortable: function (orderMode) {
+      this.sortableOptions.disabled = !orderMode;
+      this.sortableOptions.onEnd = this.saveAccountSort;
+
+      // make sortable of table:
+      if (null === this.sortable) {
+        this.sortable = Sortable.create(this.$refs.table.$el.querySelector('tbody'), this.sortableOptions);
+      }
+      this.sortable.option('disabled', this.sortableOptions.disabled);
+    },
+
+    updateFieldList: function () {
       this.fields = [];
 
       this.fields = [{key: 'title', label: this.$t('list.name'), sortable: !this.orderMode}];
@@ -241,14 +259,24 @@ export default {
       this.fields.push({key: 'menu', label: ' ', sortable: false});
     },
     getAccountList: function () {
-      if (this.indexReady && !this.loading) {
+      console.log('getAccountList()');
+      if (this.indexReady && !this.loading && !this.downloaded) {
+        console.log('Index ready, not loading and not already downloaded. Reset.');
         this.loading = true;
         this.perPage = this.listPageSize ?? 51;
         this.accounts = [];
+        this.allAccounts = [];
         this.downloadAccountList(1);
       }
+      if (this.indexReady && !this.loading && this.downloaded) {
+        console.log('Index ready, not loading and not downloaded.');
+        this.loading = true;
+        this.filterAccountList();
+        // TODO filter accounts.
+      }
     },
-    downloadAccountList(page) {
+    downloadAccountList: function (page) {
+      console.log('downloadAccountList(' + page + ')');
       axios.get('./api/v1/accounts?type=' + this.type + '&page=' + page)
           .then(response => {
                   let currentPage = parseInt(response.data.meta.pagination.current_page);
@@ -258,12 +286,39 @@ export default {
                   if (currentPage < totalPage) {
                     let nextPage = currentPage + 1;
                     this.downloadAccountList(nextPage);
-                  } else {
+                  }
-                    this.loading = false;
+                  if (currentPage >= totalPage) {
+                    console.log('Looks like all downloaded.');
+                    this.downloaded = true;
+                    this.filterAccountList();
                   }
                 }
           );
     },
+    filterAccountList: function () {
+      console.log('filterAccountList()');
+      this.accounts = [];
+      for (let i in this.allAccounts) {
+        if (this.allAccounts.hasOwnProperty(i) && /^0$|^[1-9]\d*$/.test(i) && i <= 4294967294) {
+          // 1 = active only
+          // 2 = inactive only
+          // 3 = both
+          if (1 === this.activeFilter && false === this.allAccounts[i].active) {
+            console.log('Skip account #' + this.allAccounts[i].id + ' because not active.');
+            continue;
+          }
+          if (2 === this.activeFilter && true === this.allAccounts[i].active) {
+            console.log('Skip account #' + this.allAccounts[i].id + ' because active.');
+            continue;
+          }
+          console.log('Include account #' + this.allAccounts[i].id + '.');
+
+          this.accounts.push(this.allAccounts[i]);
+        }
+      }
+      this.total = this.accounts.length;
+      this.loading = false;
+    },
     roleTranslate: function (role) {
       if (null === role) {
         return '';
@@ -272,8 +327,10 @@ export default {
     },
     parsePages: function (data) {
       this.total = parseInt(data.pagination.total);
+      //console.log('Total is now ' + this.total);
     },
     parseAccounts: function (data) {
+      console.log('In parseAccounts()');
       for (let key in data) {
         if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
           let current = data[key];
@@ -281,6 +338,7 @@ export default {
           acct.id = parseInt(current.id);
           acct.order = current.attributes.order;
           acct.title = current.attributes.name;
+          acct.active = current.attributes.active;
           acct.role = this.roleTranslate(current.attributes.account_role);
           acct.account_number = current.attributes.account_number;
           acct.current_balance = current.attributes.current_balance;
@@ -291,15 +349,15 @@ export default {
             acct.iban = current.attributes.iban.match(/.{1,4}/g).join(' ');
           }
 
-
+          this.allAccounts.push(acct);
-          this.accounts.push(acct);
           if ('asset' === this.type) {
-            this.getAccountBalanceDifference(this.accounts.length - 1, current);
+            this.getAccountBalanceDifference(this.allAccounts.length - 1, current);
           }
         }
       }
     },
     getAccountBalanceDifference: function (index, acct) {
+      console.log('getAccountBalanceDifference(' + index + ')');
       // get account on day 0
       let promises = [];
 
@@ -320,17 +378,9 @@ export default {
         let index = responses[0].index;
         let startBalance = parseFloat(responses[1].data.data.attributes.current_balance);
         let endBalance = parseFloat(responses[2].data.data.attributes.current_balance);
-        this.accounts[index].balance_diff = endBalance - startBalance;
+        this.allAccounts[index].balance_diff = endBalance - startBalance;
       });
     },
-    loadAccounts: function (data) {
-      for (let key in data) {
-        if (data.hasOwnProperty(key) && /^0$|^[1-9]\d*$/.test(key) && key <= 4294967294) {
-          let acct = data[key];
-          this.accounts.push(acct);
-        }
-      }
-    },
   }
 }
 </script>

frontend/src/components/accounts/IndexOptions.vue

@@ -20,9 +20,32 @@
 
 <template>
   <div>
-    <p v-if="'asset' === type">
+    <div class="form-check">
-      <input type="checkbox" name="order_mode" id="order_mode" v-model="orderMode"> <label for="order_mode">Enable order mode</label>
+      <input class="form-check-input" type="checkbox" name="order_mode" id="order_mode" v-model="orderMode">
-    </p>
+      <label class="form-check-label" for="order_mode">
+        Enable order mode
+      </label>
+    </div>
+    <div class="form-check">
+      <input class="form-check-input" :disabled="orderMode" type="radio" value="1" v-model="activeFilter" id="active_filter_1">
+      <label class="form-check-label" for="active_filter_1">
+        Show active accounts
+      </label>
+    </div>
+
+    <div class="form-check">
+      <input class="form-check-input" :disabled="orderMode" type="radio" value="2" v-model="activeFilter" id="active_filter_2">
+      <label class="form-check-label" for="active_filter_2">
+        Show inactive accounts
+      </label>
+    </div>
+
+    <div class="form-check">
+      <input class="form-check-input" :disabled="orderMode" type="radio" value="3" v-model="activeFilter" id="active_filter_3">
+      <label class="form-check-label" for="active_filter_3">
+        Show both
+      </label>
+    </div>
   </div>
 </template>
 
@@ -35,6 +58,7 @@ export default {
       type: 'invalid'
     }
   },
+  // watch orderMode, if its false then go to active in filter.
   computed: {
     orderMode: {
       get() {
@@ -42,9 +66,19 @@ export default {
       },
       set(value) {
         this.$store.commit('accounts/index/setOrderMode', value);
+        if(true===value) {
+          this.$store.commit('accounts/index/setActiveFilter', 1);
+        }
+      }
+    },
+    activeFilter: {
+      get() {
+        return this.$store.getters["accounts/index/activeFilter"];
+      },
+      set(value) {
+        this.$store.commit('accounts/index/setActiveFilter', parseInt(value));
       }
     },
-
   },
   created() {
     let pathName = window.location.pathname;

frontend/src/components/store/modules/accounts/index.js

@@ -21,7 +21,8 @@
 // initial state
 const state = () => (
     {
-        orderMode: false
+        orderMode: false,
+        activeFilter: 1
     }
 )
 
@@ -31,6 +32,9 @@ const getters = {
     orderMode: state => {
         return state.orderMode;
     },
+    activeFilter: state => {
+        return state.activeFilter;
+    }
 }
 
 // actions
@@ -41,6 +45,9 @@ const mutations = {
     setOrderMode(state, payload) {
         state.orderMode = payload;
     },
+    setActiveFilter(state, payload) {
+        state.activeFilter = payload;
+    }
 }
 
 export default {