add transaction list page for desktop

src/lib/datetime.js

@@ -331,6 +331,70 @@ export function getDateRangeByDateType(dateType, firstDayOfWeek) {
     };
 }
 
+export function getRecentMonthDateRanges(monthCount) {
+    const recentDateRanges = [];
+    const thisMonthFirstUnixTime = getThisMonthFirstUnixTime();
+
+    for (let i = 0; i < monthCount; i++) {
+        let minTime = thisMonthFirstUnixTime;
+
+        if (i > 0) {
+            minTime = getUnixTimeBeforeUnixTime(thisMonthFirstUnixTime, i, 'months');
+        }
+
+        let maxTime = getUnixTimeBeforeUnixTime(getUnixTimeAfterUnixTime(minTime, 1, 'months'), 1, 'seconds');
+        let dateType = dateTimeConstants.allDateRanges.Custom.type;
+        let year = getYear(parseDateFromUnixTime(minTime));
+        let month = getMonth(parseDateFromUnixTime(minTime));
+
+        if (i === 0) {
+            dateType = dateTimeConstants.allDateRanges.ThisMonth.type;
+        } else if (i === 1) {
+            dateType = dateTimeConstants.allDateRanges.LastMonth.type;
+        }
+
+        recentDateRanges.push({
+            dateType: dateType,
+            minTime: minTime,
+            maxTime: maxTime,
+            year: year,
+            month: month
+        });
+    }
+
+    return recentDateRanges;
+}
+
+export function getRecentDateRangeType(allRecentMonthDateRanges, dateType, minTime, maxTime, firstDayOfWeek) {
+    let dateRange = getDateRangeByDateType(dateType, firstDayOfWeek);
+
+    if (dateRange && dateRange.dateType === dateTimeConstants.allDateRanges.All.type) {
+        return allRecentMonthDateRanges.length - 1; // Custom
+    }
+
+    if (!dateRange && (!maxTime || !minTime)) {
+        return allRecentMonthDateRanges.length - 1; // Custom
+    }
+
+    if (!dateRange) {
+        dateRange = {
+            dateType: dateTimeConstants.allDateRanges.Custom.type,
+            maxTime: maxTime,
+            minTime: minTime
+        };
+    }
+
+    for (let i = 0; i < allRecentMonthDateRanges.length - 1; i++) {
+        const recentDateRange = allRecentMonthDateRanges[i];
+
+        if (recentDateRange.minTime === dateRange.minTime && recentDateRange.maxTime === dateRange.maxTime) {
+            return i;
+        }
+    }
+
+    return allRecentMonthDateRanges.length - 1; // Custom
+}
+
 export function isDateRangeMatchFullYears(minTime, maxTime) {
     const minDateTime = parseDateFromUnixTime(minTime).set({ second: 0, millisecond: 0 });
     const maxDateTime = parseDateFromUnixTime(maxTime).set({ second: 59, millisecond: 999 });

src/lib/i18n.js

@@ -22,6 +22,7 @@ import {
     getBrowserTimezoneOffset,
     getBrowserTimezoneOffsetMinutes,
     getDateTimeFormatType,
+    getRecentMonthDateRanges,
     isDateRangeMatchFullYears,
     isDateRangeMatchFullMonths
 } from './datetime.js';
@@ -388,10 +389,18 @@ function getMonthShortName(month, translateFn) {
     return translateFn(`datetime.${month}.short`);
 }
 
+function getMonthLongName(month, translateFn) {
+    return translateFn(`datetime.${month}.long`);
+}
+
 function getWeekdayShortName(weekDay, translateFn) {
     return translateFn(`datetime.${weekDay}.short`);
 }
 
+function getWeekdayLongName(weekDay, translateFn) {
+    return translateFn(`datetime.${weekDay}.long`);
+}
+
 function getI18nLongDateFormat(translateFn, formatTypeValue) {
     const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
     return getDateTimeFormat(translateFn, datetime.allLongDateFormat, datetime.allLongDateFormatArray, 'format.longDate', defaultLongDateFormatTypeName, datetime.defaultLongDateFormat, formatTypeValue);
@@ -588,6 +597,35 @@ function getAllDateRanges(includeCustom, translateFn) {
     return allDateRanges;
 }
 
+function getAllRecentMonthDateRanges(userStore, includeCustom, translateFn) {
+    const allRecentMonthDateRanges = [];
+    const recentDateRanges = getRecentMonthDateRanges(12);
+
+    for (let i = 0; i < recentDateRanges.length; i++) {
+        const recentDateRange = recentDateRanges[i];
+
+        allRecentMonthDateRanges.push({
+            dateType: recentDateRange.dateType,
+            minTime: recentDateRange.minTime,
+            maxTime: recentDateRange.maxTime,
+            year: recentDateRange.year,
+            month: recentDateRange.month,
+            displayName: formatUnixTime(recentDateRange.minTime, getI18nLongYearMonthFormat(translateFn, userStore.currentUserLongDateFormat))
+        });
+    }
+
+    if (includeCustom) {
+        allRecentMonthDateRanges.push({
+            dateType: datetime.allDateRanges.Custom.type,
+            minTime: 0,
+            maxTime: 0,
+            displayName: translateFn('Custom Date')
+        });
+    }
+
+    return allRecentMonthDateRanges;
+}
+
 function getDateRangeDisplayName(userStore, dateType, startTime, endTime, translateFn) {
     if (dateType === datetime.allDateRanges.All.type) {
         return translateFn(datetime.allDateRanges.All.name);
@@ -993,7 +1031,9 @@ export function i18nFunctions(i18nGlobal) {
         getAllLongTimeFormats: () => getAllLongTimeFormats(i18nGlobal.t),
         getAllShortTimeFormats: () => getAllShortTimeFormats(i18nGlobal.t),
         getMonthShortName: (month) => getMonthShortName(month, i18nGlobal.t),
+        getMonthLongName: (month) => getMonthLongName(month, i18nGlobal.t),
         getWeekdayShortName: (weekDay) => getWeekdayShortName(weekDay, i18nGlobal.t),
+        getWeekdayLongName: (weekDay) => getWeekdayLongName(weekDay, i18nGlobal.t),
         formatUnixTimeToLongDateTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat) + ' ' + getI18nLongTimeFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToShortDateTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nShortDateFormat(i18nGlobal.t, userStore.currentUserShortDateFormat) + ' ' + getI18nShortTimeFormat(i18nGlobal.t, userStore.currentUserShortTimeFormat), utcOffset, currentUtcOffset),
         formatUnixTimeToLongDate: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nLongDateFormat(i18nGlobal.t, userStore.currentUserLongDateFormat), utcOffset, currentUtcOffset),
@@ -1014,6 +1054,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllCurrencies: () => getAllCurrencies(i18nGlobal.t),
         getAllWeekDays: () => getAllWeekDays(i18nGlobal.t),
         getAllDateRanges: (includeCustom) => getAllDateRanges(includeCustom, i18nGlobal.t),
+        getAllRecentMonthDateRanges: (userStore, includeCustom) => getAllRecentMonthDateRanges(userStore, includeCustom, i18nGlobal.t),
         getDateRangeDisplayName: (userStore, dateType, startTime, endTime) => getDateRangeDisplayName(userStore, dateType, startTime, endTime, i18nGlobal.t),
         getAllStatisticsChartDataTypes: () => getAllStatisticsChartDataTypes(i18nGlobal.t),
         getAllStatisticsSortingTypes: () => getAllStatisticsSortingTypes(i18nGlobal.t),

src/lib/services.js

@@ -13,7 +13,7 @@ let needBlockRequest = false;
 let blockedRequests = [];
 
 axios.defaults.baseURL = api.baseApiUrlPath;
-axios.defaults.timeout = 10000; // 10s
+axios.defaults.timeout = 100000; // 10s
 axios.interceptors.request.use(config => {
     const token = userState.getToken();
 
@@ -240,6 +240,9 @@ export default {
     getTransactions: ({ maxTime, minTime, type, categoryId, accountId, keyword }) => {
         return axios.get(`v1/transactions/list.json?max_time=${maxTime}&min_time=${minTime}&type=${type}&category_id=${categoryId}&account_id=${accountId}&keyword=${keyword}&count=50&trim_account=true&trim_category=true&trim_tag=true`);
     },
+    getAllTransactionsByMonth: ({ year, month, type, categoryId, accountId, keyword }) => {
+        return axios.get(`v1/transactions/list/by_month.json?year=${year}&month=${month}&type=${type}&category_id=${categoryId}&account_id=${accountId}&keyword=${keyword}&trim_account=true&trim_category=true&trim_tag=true`);
+    },
     getTransactionStatistics: ({ startTime, endTime }) => {
         const queryParams = [];
 

src/lib/ui.desktop.js

@@ -0,0 +1,52 @@
+export function getOuterHeight(element) {
+    if (!element) {
+        return 0;
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+
+    return ['height', 'padding-top', 'padding-bottom', 'margin-top', 'margin-bottom']
+        .map((key) => parseInt(computedStyle.getPropertyValue(key), 10))
+        .reduce((prev, cur) => prev + cur);
+}
+
+export function getCssValue(element, name) {
+    if (!element) {
+        return 0;
+    }
+
+    const computedStyle = window.getComputedStyle(element);
+    return computedStyle.getPropertyValue(name);
+}
+
+export function scrollToMenuListItem(listContentEl) {
+    if (!listContentEl) {
+        return;
+    }
+
+    const lists = listContentEl.querySelectorAll('div.v-list');
+
+    if (!lists.length || !lists[0]) {
+        return;
+    }
+
+    const container = lists[0];
+    const selectedItems = container.querySelectorAll('div.v-list-item.list-item-selected');
+
+    if (!selectedItems.length || !selectedItems[0]) {
+        return;
+    }
+
+    const selectedItem = selectedItems[0];
+    const containerOuterHeight = getOuterHeight(container);
+    const selectedItemOuterHeight = getOuterHeight(selectedItem);
+
+    const targetPos = selectedItem.offsetTop - container.offsetTop - parseInt(getCssValue(container, 'padding-top'), 10)
+        - (containerOuterHeight - selectedItemOuterHeight) / 2;
+
+    if (targetPos <= 0) {
+        return;
+    }
+
+    container.scrollTop = targetPos;
+}