feat(@desktop/wallet): Update activity feed sections date markers (#11332)

closes #11306
This commit is contained in:
Cuteivist 2023-06-30 14:55:59 +02:00 committed by GitHub
parent 08ef5efda5
commit d0f3b6d652
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 9 deletions

View File

@ -236,9 +236,16 @@ QtObject {
// return full days between 2 dates
function daysBetween(firstDate, secondDate) {
firstDate.setHours(0, 0, 0) // discard time
secondDate.setHours(0, 0, 0)
return Math.round(Math.abs((firstDate - secondDate) / d.msInADay)) // Math.round: not all days are 24 hours long!
return Math.abs(daysTo(firstDate, secondDate))
}
// return full days from first to second date
function daysTo(firstDate, secondDate) {
const d1 = new Date(firstDate)
const d2 = new Date(secondDate)
d1.setHours(0, 0, 0) // discard time
d2.setHours(0, 0, 0)
return Math.round((d1 - d2) / d.msInADay) // Math.round: not all days are 24 hours long!
}
/**
@ -288,13 +295,27 @@ QtObject {
return value.toLocaleString(loc, formatString)
}
/**
Returns the Date of the first day of the current week.
*/
function getFirstDayOfTheCurrentWeek() {
const loc = Qt.locale()
let firstDayOfWeek = new Date()
// NOTE returned value is always Sunday, so day must be adjusted by locale first day of week
let result = new Date(firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + loc.firstDayOfWeek))
if (result > new Date()) {
result.setDate(firstDayOfWeek.getDate() - 7)
}
return result
}
// TODO use JS Intl.RelativeTimeFormat in Qt 6?
function formatRelativeTimestamp(timestamp) {
function formatRelativeTimestamp(timestamp, weekFromBeginning=false) {
const now = new Date()
const value = d.readDate(timestamp)
const loc = Qt.locale()
const formatString = d.fixupTimeFormatString(loc.timeFormat(Locale.ShortFormat)) // format string for the time part
const dayDifference = daysBetween(d.readDate(timestamp), now)
const dayDifference = daysBetween(value, now)
// within last day, 2 or 7 days
if (dayDifference < 1) // today -> "Today 14:23"
@ -303,8 +324,17 @@ QtObject {
if (dayDifference < 2) // yesterday -> "Yesterday 14:23"
return qsTr("Yesterday %1").arg(value.toLocaleTimeString(loc, formatString))
if (dayDifference < 7) // last 7 days -> "Mon 14:23"
let isLastWeek = false
if (weekFromBeginning) { // Use only for date from beggining of the week
const daysToBeginingOfThisWeek = daysTo(value, getFirstDayOfTheCurrentWeek())
isLastWeek = daysToBeginingOfThisWeek >= 0
} else {
isLastWeek = dayDifference < 7
}
if (isLastWeek) { // last 7 days -> "Mon 14:23"
return qsTr("%1 %2").arg(loc.standaloneDayName(value.getDay(), Locale.ShortFormat)).arg(value.toLocaleTimeString(loc, formatString))
}
// otherwise
var fullFormatString = d.fixupTimeFormatString(loc.dateTimeFormat(Locale.ShortFormat))

View File

@ -101,11 +101,33 @@ ColumnLayout {
sourceModel: RootStore.historyTransactions
// LocaleUtils is not accessable from inside expression, but local function works
property var formatDate: (ms) => LocaleUtils.formatDate(ms, Locale.ShortFormat)
property var daysTo: (d1, d2) => LocaleUtils.daysTo(d1, d2)
property var daysBetween: (d1, d2) => LocaleUtils.daysBetween(d1, d2)
property var getFirstDayOfTheCurrentWeek: () => LocaleUtils.getFirstDayOfTheCurrentWeek()
proxyRoles: ExpressionRole {
name: "date"
expression: {
return model.activityEntry.timestamp > 0 ? txModel.formatDate(model.activityEntry.timestamp * 1000) : (d.isLoading ? " " : "") // not empty, because section will not be displayed when loading if empty
if (model.activityEntry.timestamp === 0)
return ""
const currDate = new Date()
const timestampDate = new Date(model.activityEntry.timestamp * 1000)
const daysDiff = txModel.daysBetween(currDate, timestampDate)
const daysToBeginingOfThisWeek = txModel.daysTo(timestampDate, txModel.getFirstDayOfTheCurrentWeek())
if (daysDiff < 1) {
return qsTr("Today")
} else if (daysDiff < 2) {
return qsTr("Yesterday")
} else if (daysToBeginingOfThisWeek >= 0) {
return qsTr("Earlier this week")
} else if (daysToBeginingOfThisWeek > -7) {
return qsTr("Last week")
} else if (currDate.getMonth() === timestampDate.getMonth()) {
return qsTr("Earlier this month")
} else if ((new Date(new Date().setDate(0))).getMonth() === timestampDate.getMonth()) {
return qsTr("Last month")
}
return timestampDate.toLocaleDateString(Qt.locale(), "MMM yyyy")
}
}
}
@ -281,7 +303,7 @@ ColumnLayout {
networkName: isModelDataValid ? RootStore.getNetworkFullName(modelData.chainId) : ""
symbol: isModelDataValid && !!modelData.symbol ? modelData.symbol : ""
transactionStatus: isModelDataValid ? modelData.status : 0
timeStampText: isModelDataValid ? LocaleUtils.formatRelativeTimestamp(modelData.timestamp * 1000) : ""
timeStampText: isModelDataValid ? LocaleUtils.formatRelativeTimestamp(modelData.timestamp * 1000, true) : ""
addressNameTo: isModelDataValid ? WalletStores.RootStore.getNameForAddress(modelData.recipient) : ""
addressNameFrom: isModelDataValid ? WalletStores.RootStore.getNameForAddress(modelData.sender) : ""
rootStore: RootStore