Various UI fixes

resources/assets/v2/app.js

@@ -1,187 +0,0 @@
-// import './bootstrap';
-// import {
-//     addMonths,
-//     endOfDay,
-//     endOfMonth,
-//     endOfQuarter,
-//     endOfWeek,
-//     startOfDay,
-//     startOfMonth,
-//     startOfQuarter,
-//     startOfWeek,
-//     startOfYear,
-//     subDays,
-//     subMonths
-// } from "date-fns";
-// import format from './util/format'
-//
-// export default () => ({
-//     range: {
-//         start: null, end: null
-//     },
-//     defaultRange: {
-//         start: null, end: null
-//     },
-//
-//     init() {
-//         console.log('MainApp init');
-//         // get values from store and use them accordingly.
-//         // this.viewRange = window.BasicStore.get('viewRange');
-//         // this.locale = window.BasicStore.get('locale');
-//         // this.language = window.BasicStore.get('language');
-//         // this.locale = 'equal' === this.locale ? this.language : this.locale;
-//         // window.__localeId__ = this.language;
-//         //
-//         // // the range is always null but later on we will store it in BasicStore.
-//         // if (null === this.range.start && null === this.range.end) {
-//         //     console.log('start + end = null, calling setDatesFromViewRange()');
-//         //     this.range = this.setDatesFromViewRange(new Date);
-//         // }
-//         // console.log('MainApp: set defaultRange');
-//         // this.defaultRange = this.setDatesFromViewRange(new Date);
-//         // // default range is always the current period (initialized ahead)
-//     },
-//
-//
-//     buildDateRange() {
-//         console.log('MainApp: buildDateRange');
-//         // generate ranges
-//         let nextRange = this.getNextRange();
-//         let prevRange = this.getPrevRange();
-//         let last7 = this.lastDays(7);
-//         let last30 = this.lastDays(30);
-//         let mtd = this.mtd();
-//         let ytd = this.ytd();
-//
-//         // set the title:
-//         let element = document.getElementsByClassName('daterange-holder')[0];
-//         element.textContent = format(this.range.start) + ' - ' + format(this.range.end);
-//         element.setAttribute('data-start', format(this.range.start, 'yyyy-MM-dd'));
-//         element.setAttribute('data-end', format(this.range.end, 'yyyy-MM-dd'));
-//
-//         // set the current one
-//         element = document.getElementsByClassName('daterange-current')[0];
-//         element.textContent = format(this.defaultRange.start) + ' - ' + format(this.defaultRange.end);
-//         element.setAttribute('data-start', format(this.defaultRange.start, 'yyyy-MM-dd'));
-//         element.setAttribute('data-end', format(this.defaultRange.end, 'yyyy-MM-dd'));
-//
-//         // generate next range
-//         element = document.getElementsByClassName('daterange-next')[0];
-//         element.textContent = format(nextRange.start) + ' - ' + format(nextRange.end);
-//         element.setAttribute('data-start', format(nextRange.start, 'yyyy-MM-dd'));
-//         element.setAttribute('data-end', format(nextRange.end, 'yyyy-MM-dd'));
-//
-//         // previous range.
-//         element = document.getElementsByClassName('daterange-prev')[0];
-//         element.textContent = format(prevRange.start) + ' - ' + format(prevRange.end);
-//         element.setAttribute('data-start', format(prevRange.start, 'yyyy-MM-dd'));
-//         element.setAttribute('data-end', format(prevRange.end, 'yyyy-MM-dd'));
-//
-//         // last 7
-//         element = document.getElementsByClassName('daterange-7d')[0];
-//         element.setAttribute('data-start', format(last7.start, 'yyyy-MM-dd'));
-//         element.setAttribute('data-end', format(last7.end, 'yyyy-MM-dd'));
-//
-//         // last 30
-//         element = document.getElementsByClassName('daterange-90d')[0];
-//         element.setAttribute('data-start', format(last30.start, 'yyyy-MM-dd'));
-//         element.setAttribute('data-end', format(last30.end, 'yyyy-MM-dd'));
-//
-//         // MTD
-//         element = document.getElementsByClassName('daterange-mtd')[0];
-//         element.setAttribute('data-start', format(mtd.start, 'yyyy-MM-dd'));
-//         element.setAttribute('data-end', format(mtd.end, 'yyyy-MM-dd'));
-//
-//         // YTD
-//         element = document.getElementsByClassName('daterange-ytd')[0];
-//         element.setAttribute('data-start', format(ytd.start, 'yyyy-MM-dd'));
-//         element.setAttribute('data-end', format(ytd.end, 'yyyy-MM-dd'));
-//
-//         // custom range.
-//         console.log('MainApp: buildDateRange end');
-//     },
-//
-//     getNextRange() {
-//         let start = startOfMonth(this.range.start);
-//         let nextMonth = addMonths(start, 1);
-//         let end = endOfMonth(nextMonth);
-//         return {start: nextMonth, end: end};
-//     },
-//
-//     getPrevRange() {
-//         let start = startOfMonth(this.range.start);
-//         let prevMonth = subMonths(start, 1);
-//         let end = endOfMonth(prevMonth);
-//         return {start: prevMonth, end: end};
-//     },
-//
-//     ytd() {
-//         let end = new Date;
-//         let start = startOfYear(this.range.start);
-//         return {start: start, end: end};
-//     },
-//
-//     mtd() {
-//
-//         let end = new Date;
-//         let start = startOfMonth(this.range.start);
-//         return {start: start, end: end};
-//     },
-//
-//     lastDays(days) {
-//         let end = new Date;
-//         let start = subDays(end, days);
-//         return {start: start, end: end};
-//     },
-//
-//     changeDateRange(e) {
-//         console.log('MainApp: changeDateRange');
-//         let target = e.currentTarget;
-//         //alert('OK 3');
-//         let start = new Date(target.getAttribute('data-start'));
-//         let end = new Date(target.getAttribute('data-end'));
-//         console.log('MainApp: Change date range', start, end);
-//         e.preventDefault();
-//         // TODO send start + end to the store and trigger this again?
-//         window.app.setStart(start);
-//         window.app.setEnd(end);
-//         window.app.buildDateRange();
-//         console.log('MainApp: end changeDateRange');
-//         return false;
-//     },
-//
-//     setStart(date) {
-//         console.log('MainApp: setStart');
-//         this.range.start = date;
-//         window.BasicStore.store('start', date);
-//     },
-//
-//     setEnd(date) {
-//         console.log('MainApp: setEnd');
-//         this.range.end = date;
-//         window.BasicStore.store('end', date);
-//     },
-// });
-//
-// // let app = new MainApp();
-// //
-// // // Listen for the basic store, we need it to continue with the
-// // document.addEventListener("BasicStoreReady", (e) => {
-// //     console.log('MainApp: app.js from event handler');
-// //     app.init();
-// //     app.buildDateRange();
-// //     const event = new Event("AppReady");
-// //     document.dispatchEvent(event);
-// // }, false,);
-// //
-// // if (window.BasicStore.isReady()) {
-// //     console.log('MainApp: app.js from store ready');
-// //     app.init();
-// //     app.buildDateRange();
-// //     const event = new Event("AppReady");
-// //     document.dispatchEvent(event);
-// // }
-// //
-// // window.app = app;
-// //
-// // export default app;

resources/assets/v2/boot/bootstrap.js

@@ -1,3 +1,23 @@
+/*
+ * bootstrap.js
+ * Copyright (c) 2023 james@firefly-iii.org
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
@@ -9,15 +29,13 @@ import axios from 'axios';
 import store from "store";
 import observePlugin from 'store/plugins/observe';
 import Alpine from "alpinejs";
-import * as bootstrap from 'bootstrap'
 
-// add plugin to store and put in window
 store.addPlugin(observePlugin);
 window.store = store;
 
 // import even more
-import {getVariable} from "./store/get-variable.js";
+import {getVariable} from "../store/get-variable.js";
-import {getViewRange} from "./support/get-viewrange.js";
+import {getViewRange} from "../support/get-viewrange.js";
 
 // wait for 3 promises, because we need those later on.
 window.bootstrapped = false;

resources/assets/v2/index.js

@@ -1 +0,0 @@
-// NOT IN USE

resources/assets/v2/pages/dashboard/dashboard.js

@@ -18,15 +18,15 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import './bootstrap.js';
+import '../../boot/bootstrap.js';
-import dates from './pages/shared/dates.js';
+import dates from '../../pages/shared/dates.js';
-import boxes from './pages/dashboard/boxes.js';
+import boxes from './boxes.js';
-import accounts from './pages/dashboard/accounts.js';
+import accounts from './accounts.js';
-import budgets from './pages/dashboard/budgets.js';
+import budgets from './budgets.js';
-import categories from './pages/dashboard/categories.js';
+import categories from './categories.js';
-import sankey from './pages/dashboard/sankey.js';
+import sankey from './sankey.js';
-import subscriptions from './pages/dashboard/subscriptions.js';
+import subscriptions from './subscriptions.js';
-import piggies from './pages/dashboard/piggies.js';
+import piggies from './piggies.js';
 
 
 import {

resources/assets/v2/store/Basic.js

@@ -1,100 +0,0 @@
-// basic store for preferred date range and some other vars.
-// used in layout.
-import Get from '../api/preferences/index.js';
-import store from 'store';
-
-
-/**
- * A basic store for Firefly III persistent UI data and preferences.
- */
-const Basic = () => {
-
-    // currently availabel variables:
-    const viewRange = '1M';
-    const darkMode = 'browser';
-    const language = 'en-US';
-    const locale = 'en-US';
-
-    // start and end are used by most pages to allow the user to browse back and forth.
-    const start = null;
-    const end = null;
-
-    // others, to be used in the future.
-    const listPageSize = 10;
-    const currencyCode = 'AAA';
-    const currencyId = '0';
-    const ready = false;
-    //
-    // a very basic way to signal the store now contains all variables.
-    const count = 0;
-    const readyCount = 4;
-
-    /**
-     *
-     */
-    const init = () => {
-        this.loadVariable('viewRange')
-        this.loadVariable('darkMode')
-        this.loadVariable('language')
-        this.loadVariable('locale')
-    }
-
-    /**
-     * Load a variable, fresh or from storage.
-     * @param name
-     */
-    const loadVariable = (name) => {
-
-        // currently unused, window.X can be used by the blade template
-        // to make things available quicker than if the store has to grab it through the API.
-        // then again, it's not that slow.
-        if (window.hasOwnProperty(name)) {
-            this[name] = window[name];
-            this.triggerReady();
-            return;
-        }
-        // load from store
-        if (store.get(name)) {
-            this[name] = store.get(name);
-            this.triggerReady();
-            return;
-        }
-        // grab
-        let getter = (new Get);
-        getter.getByName(name).then((response) => this.parseResponse(name, response));
-    }
-    //
-    const parseResponse = (name, response) => {
-        let value = response.data.data.attributes.data;
-        this[name] = value;
-        // TODO store.
-        store.set(name, value);
-        this.triggerReady();
-    }
-    //
-    // set(name, value) {
-    //     this[name] = value;
-    //     store.set(name, value);
-    // }
-    //
-    // get(name) {
-    //     return store.get(name, this[name]);
-    // }
-    //
-    const isReady = () => {
-        return this.count === this.readyCount;
-    }
-
-    const triggerReady = () => {
-        this.count++;
-        if (this.count === this.readyCount) {
-            // trigger event:
-            const event = new Event("BasicStoreReady");
-            document.dispatchEvent(event);
-        }
-    }
-    return {
-        init
-    };
-}
-export const basic = Basic();

resources/assets/v2/util/index.js

@@ -1,24 +0,0 @@
-
-const domContentLoadedCallbacks = [];
-// from admin LTE
-const onDOMContentLoaded = (callback) => {
-    if (document.readyState === 'loading') {
-        // add listener on the first call when the document is in loading state
-        if (!domContentLoadedCallbacks.length) {
-            document.addEventListener('DOMContentLoaded', () => {
-                for (const callback of domContentLoadedCallbacks) {
-                    callback()
-                }
-            })
-        }
-
-        domContentLoadedCallbacks.push(callback)
-    } else {
-        callback()
-    }
-}
-
-
-export {
-    onDOMContentLoaded,
-}

resources/views/v2/index.blade.php

@@ -1,6 +1,6 @@
 @extends('layout.v2')
 @section('vite')
-    @vite(['resources/assets/v2/sass/app.scss', 'resources/assets/v2/dashboard.js'])
+    @vite(['resources/assets/v2/sass/app.scss', 'resources/assets/v2/pages/dashboard/dashboard.js'])
 @endsection
 @section('content')
 

resources/views/v2/partials/layout/sidebar.blade.php

@@ -22,7 +22,7 @@
             <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu"
                 data-accordion="false">
                 <li class="nav-item menu-open">
-                    <a href="#" class="nav-link active">
+                    <a href="{{ route('index') }}" class="nav-link active">
                         <em class="nav-icon fa-solid fa-gauge-high"></em>
                         <p>
                             {{ __('firefly.dashboard')  }}