Better index for accounts.

resources/assets/v2/pages/accounts/index.js

@@ -23,129 +23,16 @@ import dates from "../shared/dates.js";
 import i18next from "i18next";
 import {format} from "date-fns";
 import formatMoney from "../../util/format-money.js";
-import Put from "../../api/v2/model/transaction/put.js";
-
-import {createGrid, ModuleRegistry} from "@ag-grid-community/core";
 
 import '@ag-grid-community/styles/ag-grid.css';
 import '@ag-grid-community/styles/ag-theme-alpine.css';
 import '../../css/grid-ff3-theme.css';
-
-import AmountEditor from "../../support/ag-grid/AmountEditor.js";
-
-import AccountDataSource from "../../support/ag-grid/AccountDataSource.js";
-import {InfiniteRowModelModule} from '@ag-grid-community/infinite-row-model';
-import DateTimeEditor from "../../support/ag-grid/DateTimeEditor.js";
-
-const ds = new AccountDataSource();
+import Get from "../../api/v2/model/account/get.js";
 
 // set type from URL
 const urlParts = window.location.href.split('/');
 const type = urlParts[urlParts.length - 1];
-ds.setType(type);
 
-document.addEventListener('cellEditRequest', () => {
-    console.log('Loaded through event listener.');
-    //loadPage();
-});
-let rowImmutableStore = [];
-
-let dataTable;
-const editableFields = ['description', 'amount', 'date'];
-
-const onCellEditRequestMethod = (event) => {
-    console.log('onCellEditRequestMethod');
-    const data = event.data;
-    const field = event.colDef.field;
-    let newValue = event.newValue;
-    if (!editableFields.includes(field)) {
-        console.log('Field ' + field + ' is not editable.');
-        return;
-    }
-
-    // this needs to be better
-    if ('amount' === field) {
-        newValue = event.newValue.amount;
-        console.log('New value is now' + newValue);
-    }
-
-    console.log('New value for field "' + field + '" in transaction journal #' + data.transaction_journal_id + ' of group #' + data.id + ' is "' + newValue + '"');
-    data[field] = newValue;
-    let rowNode = dataTable.getRowNode(String(event.rowIndex));
-    rowNode.updateData(data);
-
-    // then push update to Firefly III over API:
-    let submission = {
-        transactions: [
-            {
-                transaction_journal_id: data.transaction_journal_id,
-            }
-        ]
-    };
-    submission.transactions[0][field] = newValue;
-
-    // let putter = new Put();
-    // putter.put(submission, {id: data.id});
-
-
-};
-
-document.addEventListener('cellValueChanged', () => {
-    console.log('I just realized a cell value has changed.');
-});
-document.addEventListener('onCellValueChanged', () => {
-    console.log('I just realized a cell value has changed.');
-});
-
-let doOnCellValueChanged = function (e) {
-    console.log('I just realized a cell value has changed.');
-};
-
-const gridOptions = {
-    rowModelType: 'infinite',
-    datasource: ds,
-    onCellEditRequest: onCellEditRequestMethod,
-    readOnlyEdit: true,
-    cacheOverflowSize: 1,
-    cacheBlockSize: 20,
-    // Row Data: The data to be displayed.
-    // rowData: [
-    // { description: "Tesla", model: "Model Y", price: 64950, electric: true },
-    // { description: "Ford", model: "F-Series", price: 33850, electric: false },
-    // { description: "Toyota", model: "Corolla", price: 29600, electric: false },
-    // ],
-    // Column Definitions: Defines & controls grid columns.
-    columnDefs: [
-        {
-            field: "icon",
-            editable: false,
-            headerName: '',
-            sortable: false,
-            width: 40,
-            cellRenderer: function (params) {
-                if (params.getValue()) {
-                    return '<a href="./transactions/show/' + parseInt(params.value.id) + '"><em class="' + params.value.classes + '"></em></a>';
-                }
-                return '';
-            }
-        },
-        {
-            field: "name",
-            cellDataType: 'text',
-            editable: true,
-            cellRenderer: function (params) {
-                if (params.getValue()) {
-                    return '<a href="./accounts/show/' + parseInt(params.data.id) + '">'+params.getValue() +'</a>';
-                }
-                return '';
-            }
-
-        }
-    ]
-};
-
-
-ModuleRegistry.registerModules([InfiniteRowModelModule]);
 let index = function () {
     return {
         // notifications
@@ -158,31 +45,45 @@ let index = function () {
                 show: false, text: '',
 
             }
-        },
-        totalPages: 1,
-        page: 1,
-        // available columns:
+        }, totalPages: 1, page: 1, // available columns:
         tableColumns: {
             name: {
                 enabled: true
             },
         },
 
-        table: null,
+        accounts: [],
 
         formatMoney(amount, currencyCode) {
             return formatMoney(amount, currencyCode);
         },
+
         format(date) {
             return format(date, i18next.t('config.date_time_fns'));
         },
+
         init() {
             this.notifications.wait.show = true;
             this.notifications.wait.text = i18next.t('firefly.wait_loading_data')
+            this.loadAccounts();
+        },
 
-            // Your Javascript code to create the grid
-            dataTable = createGrid(document.querySelector('#grid'), gridOptions);
+        loadAccounts() {
+            // one page only.
+            (new Get()).index({type: type, page: this.page}).then(response => {
+                for (let i = 0; i < response.data.data.length; i++) {
+                    if (response.data.data.hasOwnProperty(i)) {
+                        let current = response.data.data[i];
+                        let account = {
+                            id: parseInt(current.id),
+                            name: current.attributes.name,
+                        };
+                        this.accounts.push(account);
+                    }
+                }
+                this.notifications.wait.show = false;
 
+            });
         },
     }
 }