Various fixes

This commit is contained in:
James Cole
2023-07-14 06:04:48 +02:00
parent d943a5ae9b
commit ab3dbf9218
4 changed files with 99 additions and 42 deletions

View File

@@ -10,7 +10,8 @@ import {
startOfQuarter, startOfQuarter,
startOfWeek, startOfWeek,
startOfYear, startOfYear,
subDays, subMonths subDays,
subMonths
} from "date-fns"; } from "date-fns";
import format from './util/format' import format from './util/format'
@@ -26,8 +27,14 @@ class MainApp {
language = 'en-US'; language = 'en-US';
constructor() { constructor() {
//console.log('MainApp constructor'); let start = window.BasicStore.getFromLocalStorage('start');
// TODO load range from local storage (Apline) let end = window.BasicStore.getFromLocalStorage('end');
if (null !== start && null !== end) {
this.range = {
start: new Date(start),
end: new Date(end),
};
}
} }
init() { init() {
@@ -39,9 +46,8 @@ class MainApp {
window.__localeId__ = this.language; window.__localeId__ = this.language;
// the range is always null but later on we will store it in BasicStore. // the range is always null but later on we will store it in BasicStore.
if (null === this.range.start && null === this.range.end if (null === this.range.start && null === this.range.end && null === this.defaultRange.start && null === this.defaultRange.end) {
&& null === this.defaultRange.start && null === this.defaultRange.end this.range.start = new Date;
) {
this.setDatesFromViewRange(); this.setDatesFromViewRange();
} }
} }
@@ -51,7 +57,7 @@ class MainApp {
let end; let end;
let viewRange = this.viewRange; let viewRange = this.viewRange;
let today = new Date; let today = this.range.start;
switch (viewRange) { switch (viewRange) {
case 'last365': case 'last365':
start = startOfDay(subDays(today, 365)); start = startOfDay(subDays(today, 365));
@@ -142,7 +148,6 @@ class MainApp {
} }
buildDateRange() { buildDateRange() {
// generate ranges // generate ranges
let nextRange = this.getNextRange(); let nextRange = this.getNextRange();
let prevRange = this.getPrevRange(); let prevRange = this.getPrevRange();
@@ -199,54 +204,74 @@ class MainApp {
} }
getNextRange() { getNextRange() {
let nextMonth = addMonths(this.range.start, 1); let start = startOfMonth(this.range.start);
let nextMonth = addMonths(start, 1);
let end = endOfMonth(nextMonth); let end = endOfMonth(nextMonth);
return {start: nextMonth, end: end}; return {start: nextMonth, end: end};
} }
getPrevRange() { getPrevRange() {
let prevMonth = subMonths(this.range.start, 1); let start = startOfMonth(this.range.start);
let prevMonth = subMonths(start, 1);
let end = endOfMonth(prevMonth); let end = endOfMonth(prevMonth);
return {start: prevMonth, end: end}; return {start: prevMonth, end: end};
} }
ytd() { ytd() {
let end = this.range.start; let end = new Date;
let start = startOfYear(this.range.start); let start = startOfYear(this.range.start);
return {start: start, end: end}; return {start: start, end: end};
} }
mtd() { mtd() {
let end = this.range.start;
let end = new Date;
let start = startOfMonth(this.range.start); let start = startOfMonth(this.range.start);
return {start: start, end: end}; return {start: start, end: end};
} }
lastDays(days) { lastDays(days) {
let end = this.range.start; let end = new Date;
let start = subDays(end, days); let start = subDays(end, days);
return {start: start, end: end}; return {start: start, end: end};
} }
changeDateRange(e) {
let target = e.currentTarget;
//alert('OK 3');
let start = new Date(target.getAttribute('data-start'));
let end = new Date(target.getAttribute('data-end'));
e.preventDefault();
window.app.setStart(start);
window.app.setEnd(end);
window.app.buildDateRange();
return false;
}
setStart(date) {
this.range.start = date;
window.BasicStore.store('start', date);
}
setEnd(date) {
this.range.end = date;
window.BasicStore.store('end', date);
}
} }
let app = new MainApp(); let app = new MainApp();
// Listen for the basic store, we need it to continue with the // Listen for the basic store, we need it to continue with the
document.addEventListener( document.addEventListener("BasicStoreReady", (e) => {
"BasicStoreReady", app.init();
(e) => { app.buildDateRange();
// e.target matches elem }, false,);
app.init();
app.buildDateRange();
},
false,
);
function handleClick(e) { if (window.BasicStore.isReady()) {
console.log('here we are'); app.init();
e.preventDefault(); app.buildDateRange();
alert('OK');
return false;
} }
export {app, handleClick}; window.app = app;
export default app;

View File

@@ -5,14 +5,18 @@ import Get from '../api/preferences/index.js';
class Basic { class Basic {
viewRange = '1M'; viewRange = '1M';
darkMode = 'browser'; darkMode = 'browser';
listPageSize = 10;
locale = 'en-US';
language = 'en-US'; language = 'en-US';
locale = 'en-US';
// others, to be used in the future.
listPageSize = 10;
currencyCode = 'AAA'; currencyCode = 'AAA';
currencyId = '0'; currencyId = '0';
ready = false; ready = false;
count = 0; count = 0;
readyCount = 4; readyCount = 4;
start = null;
end = null;
constructor() { constructor() {
} }
@@ -27,11 +31,25 @@ class Basic {
loadVariable(name) { loadVariable(name) {
if (window.hasOwnProperty(name)) { if (window.hasOwnProperty(name)) {
this[name] = window[name]; this[name] = window[name];
this.count++;
if (this.count === this.readyCount) {
// trigger event:
const event = new Event("BasicStoreReady");
document.dispatchEvent(event);
}
return; return;
} }
// load from local storage // load from local storage
if (window.Alpine.store(name)) { if (localStorage.getItem(name)) {
this[name] = window.Alpine.store(name); this[name] = localStorage.getItem(name);
this.count++;
if (this.count === this.readyCount) {
// trigger event:
const event = new Event("BasicStoreReady");
document.dispatchEvent(event);
}
return; return;
} }
// grab // grab
@@ -43,12 +61,26 @@ class Basic {
this.count++; this.count++;
let value = response.data.data.attributes.data; let value = response.data.data.attributes.data;
this[name] = value; this[name] = value;
localStorage.setItem(name, value);
if (this.count === this.readyCount) { if (this.count === this.readyCount) {
// trigger event: // trigger event:
const event = new Event("BasicStoreReady"); const event = new Event("BasicStoreReady");
document.dispatchEvent(event); document.dispatchEvent(event);
} }
} }
store(name, value) {
this[name] = value;
localStorage.setItem(name, value);
}
getFromLocalStorage(name) {
return localStorage.getItem(name);
}
isReady() {
return this.count === this.readyCount;
}
} }
export default Basic; export default Basic;

View File

@@ -14,7 +14,7 @@
<button x-on:click="count++">Increment</button> <button x-on:click="count++">Increment</button>
<span x-text="count"></span> <span x-text="count"></span>
<button x-on:click="handleClick">KLIK</button> <button x-on:click="app.changeDateRange">KLIK</button>
</div> </div>
</div> </div>

View File

@@ -35,36 +35,36 @@
<!-- begin date range drop down --> <!-- begin date range drop down -->
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link daterange-holder" data-bs-toggle="dropdown" href="#"></a> <a class="nav-link daterange-holder" data-bs-toggle="dropdown" href="#"></a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end"> <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end" x-data="">
<a href="#" class="dropdown-item daterange-current" @click="handleClick"> <a href="#" class="dropdown-item daterange-current">
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" @click="handleClick" class="dropdown-item daterange-next"> <a href="#" x-on:click="app.changeDateRange" class="dropdown-item daterange-next">
next next
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-prev"> <a href="#" class="dropdown-item daterange-prev" @click="app.changeDateRange">
prev prev
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-7d"> <a href="#" class="dropdown-item daterange-7d" @click="app.changeDateRange">
{{ __('firefly.last_seven_days') }} {{ __('firefly.last_seven_days') }}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-90d"> <a href="#" class="dropdown-item daterange-90d" @click="app.changeDateRange">
{{ __('firefly.last_thirty_days') }} {{ __('firefly.last_thirty_days') }}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-mtd"> <a href="#" class="dropdown-item daterange-mtd" @click="app.changeDateRange">
{{ __('firefly.month_to_date') }} {{ __('firefly.month_to_date') }}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item daterange-ytd"> <a href="#" class="dropdown-item daterange-ytd" @click="app.changeDateRange">
{{ __('firefly.year_to_date') }} {{ __('firefly.year_to_date') }}
</a> </a>
<div class="dropdown-divider"></div> <div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer daterange-custom"> <a href="#" class="dropdown-item dropdown-footer daterange-custom" @click="app.doCustomRange">
{{ __('firefly.customRange') }} {{ __('firefly.customRange') }}
</a> </a>
</div> </div>