support modify transaction time zone

pkg/api/transactions.go

@@ -454,13 +454,14 @@ func (a *TransactionsApi) TransactionModifyHandler(c *core.Context) (interface{}
 	transactionTagIds := allTransactionTagIds[transaction.TransactionId]
 
 	newTransaction := &models.Transaction{
-		TransactionId:   transaction.TransactionId,
+		TransactionId:     transaction.TransactionId,
-		Uid:             uid,
+		Uid:               uid,
-		CategoryId:      transactionModifyReq.CategoryId,
+		CategoryId:        transactionModifyReq.CategoryId,
-		TransactionTime: utils.GetMinTransactionTimeFromUnixTime(transactionModifyReq.Time),
+		TransactionTime:   utils.GetMinTransactionTimeFromUnixTime(transactionModifyReq.Time),
-		AccountId:       transactionModifyReq.SourceAccountId,
+		TimezoneUtcOffset: transactionModifyReq.UtcOffset,
-		Amount:          transactionModifyReq.SourceAmount,
+		AccountId:         transactionModifyReq.SourceAccountId,
-		Comment:         transactionModifyReq.Comment,
+		Amount:            transactionModifyReq.SourceAmount,
+		Comment:           transactionModifyReq.Comment,
 	}
 
 	if transaction.Type == models.TRANSACTION_DB_TYPE_TRANSFER_OUT {
@@ -470,6 +471,7 @@ func (a *TransactionsApi) TransactionModifyHandler(c *core.Context) (interface{}
 
 	if newTransaction.CategoryId == transaction.CategoryId &&
 		utils.GetUnixTimeFromTransactionTime(newTransaction.TransactionTime) == utils.GetUnixTimeFromTransactionTime(transaction.TransactionTime) &&
+		newTransaction.TimezoneUtcOffset == transaction.TimezoneUtcOffset &&
 		newTransaction.AccountId == transaction.AccountId &&
 		newTransaction.Amount == transaction.Amount &&
 		(transaction.Type != models.TRANSACTION_DB_TYPE_TRANSFER_OUT || newTransaction.RelatedAccountId == transaction.RelatedAccountId) &&
@@ -487,9 +489,10 @@ func (a *TransactionsApi) TransactionModifyHandler(c *core.Context) (interface{}
 		addTransactionTagIds = tagIds
 	}
 
-	transactionEditable := user.CanEditTransactionByTransactionTime(newTransaction.TransactionTime, transactionModifyReq.UtcOffset)
+	transactionEditable := user.CanEditTransactionByTransactionTime(transaction.TransactionTime, transaction.TimezoneUtcOffset)
+	newTransactionEditable := user.CanEditTransactionByTransactionTime(newTransaction.TransactionTime, transactionModifyReq.UtcOffset)
 
-	if !transactionEditable {
+	if !transactionEditable || !newTransactionEditable {
 		return nil, errs.ErrCannotModifyTransactionWithThisTransactionTime
 	}
 

pkg/services/transactions.go

@@ -567,6 +567,10 @@ func (s *TransactionService) ModifyTransaction(transaction *models.Transaction,
 			updateCols = append(updateCols, "transaction_time")
 		}
 
+		if transaction.TimezoneUtcOffset != oldTransaction.TimezoneUtcOffset {
+			updateCols = append(updateCols, "timezone_utc_offset")
+		}
+
 		if transaction.AccountId != oldTransaction.AccountId {
 			updateCols = append(updateCols, "account_id")
 		}

src/Mobile.vue

@@ -234,6 +234,10 @@ i.icon.la, i.icon.las, i.icon.lab {
     align-self: normal !important;
 }
 
+.list-item-no-item-after .item-after {
+    display: none;
+}
+
 .list .item-content .input.list-title-input {
     margin-top: calc(-1 * var(--f7-list-item-padding-vertical));
     margin-bottom: calc(-1 * var(--f7-list-item-padding-vertical));

src/filters/moment.js

@@ -1,9 +1,17 @@
 import utils from '../lib/utils.js';
 
-export default function (value, format) {
+export default function (value, format, options) {
-    if (utils.isNumber(value)) {
+    if (!utils.isNumber(value)) {
-        return utils.formatUnixTime(value, format);
+        value = utils.getUnixTime(value);
-    } else {
-        return utils.formatTime(value, format);
     }
+
+    if (utils.isObject(options) && utils.isNumber(options.utcOffset)) {
+        if (!utils.isNumber(options.currentUtcOffset)) {
+            options.currentUtcOffset = utils.getTimezoneOffsetMinutes();
+        }
+
+        value = utils.getDummyUnixTimeForLocalDisplay(value, options.utcOffset, options.currentUtcOffset);
+    }
+
+    return utils.formatUnixTime(value, format);
 }

src/lib/utils.js

@@ -80,6 +80,14 @@ function getTimezoneOffsetMinutes(timezone) {
     return getUtcOffsetMinutesByUtcOffset(utcOffset);
 }
 
+function getActualUnixTimeForStore(unixTime, utcOffset, currentUtcOffset) {
+    return unixTime - (utcOffset - currentUtcOffset) * 60;
+}
+
+function getDummyUnixTimeForLocalDisplay(unixTime, utcOffset, currentUtcOffset) {
+    return unixTime + (utcOffset - currentUtcOffset) * 60;
+}
+
 function getCurrentUnixTime() {
     return moment().unix();
 }
@@ -616,6 +624,8 @@ export default {
     getUtcOffsetByUtcOffsetMinutes,
     getTimezoneOffset,
     getTimezoneOffsetMinutes,
+    getActualUnixTimeForStore,
+    getDummyUnixTimeForLocalDisplay,
     getCurrentUnixTime,
     parseDateFromUnixTime,
     formatUnixTime,

src/locales/en.js

@@ -786,6 +786,7 @@ export default {
     'Source Account': 'Source Account',
     'Destination Account': 'Destination Account',
     'Transaction Time': 'Transaction Time',
+    'Transaction Time Zone': 'Transaction Time Zone',
     'Tags': 'Tags',
     'Your transaction description (optional)': 'Your transaction description (optional)',
     'Are you sure you want to save this transaction whose amount is 0?': 'Are you sure you want to save this transaction whose amount is 0?',

src/locales/zh_Hans.js

@@ -786,6 +786,7 @@ export default {
     'Source Account': '来源账户',
     'Destination Account': '目标账户',
     'Transaction Time': '交易时间',
+    'Transaction Time Zone': '交易时区',
     'Tags': '标签',
     'Your transaction description (optional)': '你的交易描述 (可选)',
     'Are you sure you want to save this transaction whose amount is 0?': '您确定要保存这个金额为0的交易？',

src/mobile-main.js

@@ -150,7 +150,7 @@ Vue.component('NumberPadSheet', NumberPadSheet);
 Vue.component('TransactionTagSelectionSheet', TransactionTagSelectionSheet);
 
 Vue.filter('localized', (value, options) => localizedFilter({ i18n }, value, options));
-Vue.filter('moment', (value, format) => momentFilter(value, format));
+Vue.filter('moment', (value, format, options) => momentFilter(value, format, options));
 Vue.filter('percent', (value, precision, lowPrecisionValue) => percentFilter(value, precision, lowPrecisionValue));
 Vue.filter('itemFieldContent', (value, fieldName, defaultValue, translate) => itemFieldContentFilter({ i18n }, value, fieldName, defaultValue, translate));
 Vue.filter('currency', (value, currencyCode) => currencyFilter({ i18n }, value, currencyCode));

src/store/index.js

@@ -417,14 +417,16 @@ const stores = {
             }
 
             if (transactions.items && transactions.items.length) {
+                const currentUtcOffset = utils.getTimezoneOffsetMinutes();
                 let currentMonthListIndex = -1;
                 let currentMonthList = null;
 
                 for (let i = 0; i < transactions.items.length; i++) {
                     const item = transactions.items[i];
-                    fillTransactionObject(state, item);
+                    fillTransactionObject(state, item, currentUtcOffset);
 
-                    const transactionTime = utils.parseDateFromUnixTime(item.time);
+                    const transactionUnixTimeForLocalUsage = utils.getDummyUnixTimeForLocalDisplay(item.time, item.utcOffset, currentUtcOffset);
+                    const transactionTime = utils.parseDateFromUnixTime(transactionUnixTimeForLocalUsage);
                     const transactionYear = utils.getYear(transactionTime);
                     const transactionMonth = utils.getMonth(transactionTime);
                     const transactionYearMonth = utils.getYearAndMonth(transactionTime);
@@ -547,6 +549,8 @@ const stores = {
             }
         },
         [SAVE_TRANSACTION_IN_TRANSACTION_LIST] (state, { transaction, defaultCurrency }) {
+            const currentUtcOffset = utils.getTimezoneOffsetMinutes();
+
             for (let i = 0; i < state.transactions.length; i++) {
                 const transactionMonthList = state.transactions[i];
 
@@ -558,7 +562,7 @@ const stores = {
 
                 for (let j = 0; j < transactionMonthList.items.length; j++) {
                     if (transactionMonthList.items[j].id === transaction.id) {
-                        fillTransactionObject(state, transaction);
+                        fillTransactionObject(state, transaction, currentUtcOffset);
 
                         if ((state.transactionsFilter.categoryId && state.transactionsFilter.categoryId !== '0' && state.transactionsFilter.categoryId !== transaction.categoryId) ||
                             (state.transactionsFilter.accountId && state.transactionsFilter.accountId !== '0' && state.transactionsFilter.accountId !== transaction.sourceAccountId && state.transactionsFilter.accountId !== transaction.destinationAccountId)) {

src/store/transaction.js

@@ -279,12 +279,13 @@ export function hasMoreTransaction(state) {
     return state.transactionsNextTimeId > 0;
 }
 
-export function fillTransactionObject(state, transaction) {
+export function fillTransactionObject(state, transaction, currentUtcOffset) {
     if (!transaction) {
         return;
     }
 
-    const transactionTime = utils.parseDateFromUnixTime(transaction.time);
+    const transactionUnixTimeForLocalUsage = utils.getDummyUnixTimeForLocalDisplay(transaction.time, transaction.utcOffset, currentUtcOffset);
+    const transactionTime = utils.parseDateFromUnixTime(transactionUnixTimeForLocalUsage);
 
     transaction.day = utils.getDay(transactionTime);
     transaction.dayOfWeek = utils.getDayOfWeek(transactionTime);

src/views/mobile/transactions/Edit.vue

@@ -27,6 +27,7 @@
                     <f7-list-item class="transaction-edit-category" header="Category" title="Category Names" link="#"></f7-list-item>
                     <f7-list-item class="transaction-edit-account" header="Account" title="Account Name" link="#"></f7-list-item>
                     <f7-list-input label="Transaction Time" placeholder="YYYY/MM/DD HH:mm"></f7-list-input>
+                    <f7-list-item class="transaction-edit-timezone" header="Transaction Time Zone" title="(UTC XX:XX) System Default" link="#"></f7-list-item>
                     <f7-list-item header="Tags" link="#">
                         <f7-block class="margin-top-half no-padding" slot="footer">
                             <f7-chip class="transaction-edit-tag" text="None"></f7-chip>
@@ -201,6 +202,21 @@
                     >
                     </f7-list-input>
 
+                    <f7-list-item
+                        class="transaction-edit-timezone list-item-no-item-after"
+                        :header="$t('Transaction Time Zone')"
+                        smart-select :smart-select-params="{ openIn: 'popup', pageTitle: $t('Transaction Time Zone'), searchbar: true, searchbarPlaceholder: $t('Timezone'), searchbarDisableText: $t('Cancel'), closeOnSelect: true, popupCloseLinkText: $t('Done'), scrollToSelectedItem: true }">
+                        <select v-model="transaction.timeZone">
+                            <option v-for="timezone in allTimezones"
+                                    :key="timezone.name"
+                                    :value="timezone.name">{{ `(UTC${timezone.utcOffset}) ${timezone.displayName}` }}</option>
+                        </select>
+                        <f7-block slot="title" class="transaction-edit-timezone-title no-padding">
+                            <span>{{ transaction.utcOffset | utcOffset }}</span>
+                            <span class="transaction-edit-timezone-name" v-if="transaction.timeZone || transaction.timeZone === ''">{{ transaction.timeZone | timeZoneName(allTimezones) }}</span>
+                        </f7-block>
+                    </f7-list-item>
+
                     <f7-list-item
                         link="#"
                         :header="$t('Tags')"
@@ -252,6 +268,7 @@ export default {
         const self = this;
         const query = self.$f7route.query;
         const now = self.$utilities.getCurrentUnixTime();
+        const currentTimezone = self.$locale.getTimezone();
 
         let defaultType = self.$constants.transaction.allTransactionTypes.Expense;
 
@@ -268,6 +285,8 @@ export default {
                 type: defaultType,
                 unixTime: now,
                 time: self.$utilities.formatUnixTime(now, 'YYYY-MM-DDTHH:mm'),
+                timeZone: currentTimezone,
+                utcOffset: self.$utilities.getTimezoneOffsetMinutes(currentTimezone),
                 expenseCategory: '',
                 incomeCategory: '',
                 transferCategory: '',
@@ -330,6 +349,12 @@ export default {
         defaultCurrency() {
             return this.$store.getters.currentUserDefaultCurrency || this.$t('default.currency');
         },
+        defaultTimezoneOffset() {
+            return this.$locale.defaultTimezoneOffset;
+        },
+        allTimezones() {
+            return this.$locale.getAllTimezones(true);
+        },
         allAccounts() {
             return this.$store.getters.allPlainAccounts;
         },
@@ -496,6 +521,14 @@ export default {
             if (this.$utilities.formatUnixTime(this.transaction.unixTime, 'YYYY-MM-DDTHH:mm') !== newValue) {
                 this.transaction.unixTime = this.$utilities.getUnixTime(newValue);
             }
+        },
+        'transaction.timeZone': function (newValue) {
+            for (let i = 0; i < this.allTimezones.length; i++) {
+                if (this.allTimezones[i].name === newValue) {
+                    this.transaction.utcOffset = this.allTimezones[i].utcOffsetMinutes;
+                    break;
+                }
+            }
         }
     },
     created() {
@@ -608,8 +641,10 @@ export default {
                 }
 
                 if (self.mode === 'edit' || self.mode === 'view') {
-                    self.transaction.unixTime = transaction.time;
+                    self.transaction.utcOffset = transaction.utcOffset;
-                    self.transaction.time = self.$utilities.formatUnixTime(transaction.time, 'YYYY-MM-DDTHH:mm');
+                    self.transaction.timeZone = null;
+                    self.transaction.unixTime = self.$utilities.getDummyUnixTimeForLocalDisplay(transaction.time, self.transaction.utcOffset, self.$utilities.getTimezoneOffsetMinutes());
+                    self.transaction.time = self.$utilities.formatUnixTime(self.transaction.unixTime, 'YYYY-MM-DDTHH:mm');
                 }
 
                 self.transaction.sourceAccountId = transaction.sourceAccountId;
@@ -657,14 +692,14 @@ export default {
 
             const submitTransaction = {
                 type: self.transaction.type,
-                time: self.transaction.unixTime,
+                time: self.$utilities.getActualUnixTimeForStore(self.transaction.unixTime, self.transaction.utcOffset, self.$utilities.getTimezoneOffsetMinutes()),
                 sourceAccountId: self.transaction.sourceAccountId,
                 sourceAmount: self.transaction.sourceAmount,
                 destinationAccountId: '0',
                 destinationAmount: 0,
                 tagIds: self.transaction.tagIds,
                 comment: self.transaction.comment,
-                utcOffset: self.$utilities.getTimezoneOffsetMinutes()
+                utcOffset: self.transaction.utcOffset
             };
 
             if (self.transaction.type === self.$constants.transaction.allTransactionTypes.Expense) {
@@ -800,6 +835,15 @@ export default {
 
             return '';
         },
+        timeZoneName(timeZoneName, allTimezones) {
+            for (let i = 0; i < allTimezones.length; i++) {
+                if (allTimezones[i].name === timeZoneName) {
+                    return allTimezones[i].displayName;
+                }
+            }
+
+            return '';
+        },
         tagName(tagId, allTags) {
             for (let i = 0; i < allTags.length; i++) {
                 if (allTags[i].id === tagId) {
@@ -835,7 +879,9 @@ export default {
     padding-top: calc(var(--f7-typography-padding) / 2);
 }
 
-.transaction-edit-category .item-header, .transaction-edit-account .item-header {
+.transaction-edit-category .item-header,
+.transaction-edit-account .item-header,
+.transaction-edit-timezone .item-header{
     margin-bottom: 11px;
 }
 
@@ -843,6 +889,15 @@ export default {
     max-width: inherit;
 }
 
+.transaction-edit-timezone-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.transaction-edit-timezone-name {
+    padding-left: 4px;
+}
+
 .transaction-edit-tag {
     margin-right: 4px;
 }

src/views/mobile/transactions/List.vue

@@ -320,7 +320,7 @@
                                     <span>{{ transaction.comment }}</span>
                                 </div>
                                 <div slot="footer" class="transaction-footer">
-                                    <span>{{ transaction.time | applyTimezoneOffset(transaction.utcOffset, currentTimezoneOffsetMinutes) | moment($t('format.hourMinute.long')) }}</span>
+                                    <span>{{ transaction.time | moment($t('format.hourMinute.long'), { utcOffset: transaction.utcOffset, currentUtcOffset: currentTimezoneOffsetMinutes }) }}</span>
                                     <span v-if="transaction.utcOffset !== currentTimezoneOffsetMinutes">{{ transaction.utcOffset | utcOffset }}</span>
                                     <span v-if="transaction.sourceAccount">·</span>
                                     <span v-if="transaction.sourceAccount">{{ transaction.sourceAccount.name }}</span>
@@ -868,9 +868,6 @@ export default {
                 color: 'transparent'
             }
         },
-        applyTimezoneOffset(unixTime, utcOffsetMinutes, currentTimezoneOffsetMinutes) {
-            return unixTime + (utcOffsetMinutes - currentTimezoneOffsetMinutes) * 60;
-        },
         dateRangeName(dateRangeType, allDateRanges, defaultName) {
             if (dateRangeType === allDateRanges.All.type) {
                 return defaultName;