fix: use formatDate(with user timezone), formatAsTimeAgo from frappeui

This commit is contained in:
Shariq Ansari 2024-11-28 12:25:24 +05:30
parent 75d365328d
commit c5cf1ca07a
24 changed files with 63 additions and 103 deletions

View File

@ -204,7 +204,7 @@
/>
</div>
<div class="ml-auto whitespace-nowrap">
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
<Tooltip :text="formatDate(activity.creation)">
<div class="text-sm text-ink-gray-5">
{{ __(timeAgo(activity.creation)) }}
</div>
@ -290,7 +290,7 @@
</div>
<div class="ml-auto whitespace-nowrap">
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
<Tooltip :text="formatDate(activity.creation)">
<div class="text-sm text-ink-gray-5">
{{ __(timeAgo(activity.creation)) }}
</div>
@ -353,9 +353,7 @@
</div>
<div class="ml-auto whitespace-nowrap">
<Tooltip
:text="dateFormat(activity.creation, dateTooltipFormat)"
>
<Tooltip :text="formatDate(activity.creation)">
<div class="text-sm text-ink-gray-5">
{{ __(timeAgo(activity.creation)) }}
</div>
@ -481,13 +479,7 @@ import CommunicationArea from '@/components/CommunicationArea.vue'
import WhatsappTemplateSelectorModal from '@/components/Modals/WhatsappTemplateSelectorModal.vue'
import AllModals from '@/components/Activities/AllModals.vue'
import FilesUploader from '@/components/FilesUploader/FilesUploader.vue'
import {
timeAgo,
dateFormat,
dateTooltipFormat,
secondsToDuration,
startCase,
} from '@/utils'
import { timeAgo, formatDate, secondsToDuration, startCase } from '@/utils'
import { globalStore } from '@/stores/global'
import { usersStore } from '@/stores/users'
import { contactsStore } from '@/stores/contacts'

View File

@ -32,7 +32,7 @@
</div>
</div>
<div class="flex flex-col items-end gap-2 flex-shrink-0">
<Tooltip :text="dateFormat(attachment.creation, dateTooltipFormat)">
<Tooltip :text="formatDate(attachment.creation)">
<div class="text-sm text-ink-gray-5">
{{ __(timeAgo(attachment.creation)) }}
</div>
@ -79,13 +79,7 @@ import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
import { globalStore } from '@/stores/global'
import { call, Tooltip } from 'frappe-ui'
import {
dateFormat,
timeAgo,
dateTooltipFormat,
convertSize,
isImage,
} from '@/utils'
import { formatDate, timeAgo, convertSize, isImage } from '@/utils'
const props = defineProps({
attachments: Array,

View File

@ -17,7 +17,7 @@
}}</span>
</div>
<div class="ml-auto whitespace-nowrap">
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
<Tooltip :text="formatDate(activity.creation)">
<div class="text-sm text-ink-gray-5">
{{ __(timeAgo(activity.creation)) }}
</div>
@ -56,7 +56,7 @@
</div>
</div>
<div class="flex items-center flex-wrap gap-2">
<Badge :label="dateFormat(activity.creation, 'MMM D, dddd')">
<Badge :label="formatDate(activity.creation, 'MMM d, EEEE')">
<template #prefix>
<CalendarIcon class="size-3" />
</template>
@ -97,7 +97,7 @@ import DurationIcon from '@/components/Icons/DurationIcon.vue'
import MultipleAvatar from '@/components/MultipleAvatar.vue'
import AudioPlayer from '@/components/Activities/AudioPlayer.vue'
import { statusLabelMap, statusColorMap } from '@/utils/callLog.js'
import { dateFormat, timeAgo, dateTooltipFormat } from '@/utils'
import { formatDate, timeAgo } from '@/utils'
import { Avatar, Badge, Tooltip } from 'frappe-ui'
const props = defineProps({

View File

@ -12,7 +12,7 @@
</span>
</div>
<div class="ml-auto whitespace-nowrap">
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
<Tooltip :text="formatDate(activity.creation)">
<div class="text-sm text-ink-gray-5">
{{ __(timeAgo(activity.creation)) }}
</div>
@ -38,7 +38,7 @@
import UserAvatar from '@/components/UserAvatar.vue'
import AttachmentItem from '@/components/AttachmentItem.vue'
import { Tooltip } from 'frappe-ui'
import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
import { timeAgo, formatDate } from '@/utils'
const props = defineProps({
activity: Object,
})

View File

@ -22,7 +22,7 @@
variant="subtle"
:theme="status.color"
/>
<Tooltip :text="dateFormat(activity.creation, dateTooltipFormat)">
<Tooltip :text="formatDate(activity.creation)">
<div class="text-sm text-ink-gray-5">
{{ __(timeAgo(activity.creation)) }}
</div>
@ -92,7 +92,7 @@ import ReplyAllIcon from '@/components/Icons/ReplyAllIcon.vue'
import AttachmentItem from '@/components/AttachmentItem.vue'
import EmailContent from '@/components/Activities/EmailContent.vue'
import { Badge, Tooltip } from 'frappe-ui'
import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
import { timeAgo, formatDate } from '@/utils'
import { computed } from 'vue'
const props = defineProps({

View File

@ -41,7 +41,7 @@
{{ getUser(note.owner).full_name }}
</div>
</div>
<Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
<Tooltip :text="formatDate(note.modified)">
<div class="truncate text-sm text-ink-gray-7">
{{ __(timeAgo(note.modified)) }}
</div>
@ -51,7 +51,7 @@
</template>
<script setup>
import UserAvatar from '@/components/UserAvatar.vue'
import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
import { timeAgo, formatDate } from '@/utils'
import { Tooltip, Dropdown, TextEditor } from 'frappe-ui'
import { usersStore } from '@/stores/users'

View File

@ -19,11 +19,11 @@
</div>
<div v-if="task.due_date">
<Tooltip
:text="dateFormat(task.due_date, 'ddd, MMM D, YYYY | hh:mm a')"
:text="formatDate(task.due_date, 'E, MMM d, yyyy | hh:mm aaa')"
>
<div class="flex gap-2">
<CalendarIcon />
<div>{{ dateFormat(task.due_date, 'D MMM, hh:mm a') }}</div>
<div>{{ formatDate(task.due_date, 'd MMM, hh:mm aaa') }}</div>
</div>
</Tooltip>
</div>
@ -94,7 +94,7 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
import DotIcon from '@/components/Icons/DotIcon.vue'
import UserAvatar from '@/components/UserAvatar.vue'
import { dateFormat, taskStatusOptions } from '@/utils'
import { formatDate, taskStatusOptions } from '@/utils'
import { usersStore } from '@/stores/users'
import { globalStore } from '@/stores/global'
import { Tooltip, Dropdown } from 'frappe-ui'

View File

@ -127,9 +127,9 @@
/>
</div>
<div class="-mb-1 flex shrink-0 items-end gap-1 text-ink-gray-5">
<Tooltip :text="dateFormat(whatsapp.creation, 'ddd, MMM D, YYYY')">
<Tooltip :text="formatDate(whatsapp.creation, 'E, MMM d, yyyy')">
<div class="text-2xs">
{{ dateFormat(whatsapp.creation, 'hh:mm a') }}
{{ formatDate(whatsapp.creation, 'hh:mm aaa') }}
</div>
</Tooltip>
<div v-if="whatsapp.type == 'Outgoing'">
@ -173,7 +173,7 @@ import CheckIcon from '@/components/Icons/CheckIcon.vue'
import DoubleCheckIcon from '@/components/Icons/DoubleCheckIcon.vue'
import DocumentIcon from '@/components/Icons/DocumentIcon.vue'
import ReactIcon from '@/components/Icons/ReactIcon.vue'
import { dateFormat } from '@/utils'
import { formatDate } from '@/utils'
import { capture } from '@/telemetry'
import { Tooltip, Dropdown, createResource } from 'frappe-ui'
import { ref } from 'vue'

View File

@ -126,7 +126,7 @@
import FileTextIcon from '@/components/Icons/FileTextIcon.vue'
import FileAudioIcon from '@/components/Icons/FileAudioIcon.vue'
import FileVideoIcon from '@/components/Icons/FileVideoIcon.vue'
import { createToast, dateFormat, convertSize } from '@/utils'
import { createToast, formatDate, convertSize } from '@/utils'
import { FormControl, CircularProgressBar, createResource } from 'frappe-ui'
import { ref, onMounted } from 'vue'
@ -242,7 +242,7 @@ function captureImage() {
}
function uploadViaCamera() {
const nowDatetime = dateFormat(new Date(), 'YYYY_MM_DD_HH_mm_ss')
const nowDatetime = formatDate(new Date(), 'yyyy_MM_dd_HH_mm_ss')
let filename = `capture_${nowDatetime}.png`
urlToFile(cameraImage.value, filename, 'image/png').then((file) => {
addFiles([file])

View File

@ -40,12 +40,12 @@
>
<div v-if="column.key === 'due_date'">
<Tooltip
:text="item && dateFormat(item, 'ddd, MMM D, YYYY | hh:mm a')"
:text="item && formatDate(item, 'E, MMM d, yyyy | hh:mm aaa')"
>
<div class="flex items-center gap-2 truncate text-base">
<div><CalendarIcon /></div>
<div v-if="item" class="truncate">
{{ dateFormat(item, 'D MMM, hh:mm a') }}
{{ formatDate(item, 'd MMM, hh:mm aaa') }}
</div>
</div>
</Tooltip>
@ -167,7 +167,7 @@ import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
import CalendarIcon from '@/components/Icons/CalendarIcon.vue'
import ListBulkActions from '@/components/ListBulkActions.vue'
import { dateFormat } from '@/utils'
import { formatDate } from '@/utils'
import {
Avatar,
ListView,

View File

@ -43,7 +43,7 @@
</template>
<script setup>
import { Dropdown, Tooltip } from 'frappe-ui'
import { timeAgo, dateFormat, formatTime, dateTooltipFormat } from '@/utils'
import { timeAgo, formatDate, formatTime } from '@/utils'
import { statusesStore } from '@/stores/statuses'
import { capture } from '@/telemetry'
import { computed, defineModel } from 'vue'
@ -69,7 +69,7 @@ let slaSection = computed(() => {
if (status == 'just now') {
status = 'In less than a minute'
}
tooltipText = dateFormat(data.value.response_by, dateTooltipFormat)
tooltipText = formatDate(data.value.response_by)
if (new Date(data.value.response_by) < new Date()) {
color = 'red'
if (status == __('In less than a minute')) {
@ -78,7 +78,7 @@ let slaSection = computed(() => {
}
} else if (['Fulfilled', 'Failed'].includes(status)) {
status = __(status) + ' in ' + formatTime(data.value.first_response_time)
tooltipText = dateFormat(data.value.first_responded_on, dateTooltipFormat)
tooltipText = formatDate(data.value.first_responded_on)
}
sections.push(

View File

@ -214,8 +214,7 @@ import DealsListView from '@/components/ListViews/DealsListView.vue'
import SidePanelModal from '@/components/Settings/SidePanelModal.vue'
import AddressModal from '@/components/Modals/AddressModal.vue'
import {
dateFormat,
dateTooltipFormat,
formatDate,
timeAgo,
formatNumberIntoCurrency,
createToast,
@ -628,7 +627,7 @@ function getDealRowObject(deal) {
...(deal.deal_owner && getUser(deal.deal_owner)),
},
modified: {
label: dateFormat(deal.modified, dateTooltipFormat),
label: formatDate(deal.modified),
timeAgo: __(timeAgo(deal.modified)),
},
}

View File

@ -81,7 +81,7 @@ import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
import ContactsListView from '@/components/ListViews/ContactsListView.vue'
import ViewControls from '@/components/ViewControls.vue'
import { organizationsStore } from '@/stores/organizations.js'
import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
import { formatDate, timeAgo } from '@/utils'
import { ref, computed } from 'vue'
const { getOrganization } = organizationsStore()
@ -122,7 +122,7 @@ const rows = computed(() => {
}
} else if (['modified', 'creation'].includes(row)) {
_rows[row] = {
label: dateFormat(contact[row], dateTooltipFormat),
label: formatDate(contact[row]),
timeAgo: __(timeAgo(contact[row])),
}
}

View File

@ -287,8 +287,7 @@ import { organizationsStore } from '@/stores/organizations'
import { statusesStore } from '@/stores/statuses'
import { callEnabled } from '@/composables/settings'
import {
dateFormat,
dateTooltipFormat,
formatDate,
timeAgo,
website,
formatNumberIntoCurrency,
@ -418,7 +417,7 @@ function parseRows(rows) {
: 'orange'
if (value == 'First Response Due') {
value = __(timeAgo(deal.response_by))
tooltipText = dateFormat(deal.response_by, dateTooltipFormat)
tooltipText = formatDate(deal.response_by)
if (new Date(deal.response_by) < new Date()) {
color = 'red'
}
@ -445,7 +444,7 @@ function parseRows(rows) {
}))
} else if (['modified', 'creation'].includes(row)) {
_rows[row] = {
label: dateFormat(deal[row], dateTooltipFormat),
label: formatDate(deal[row]),
timeAgo: __(timeAgo(deal[row])),
}
} else if (
@ -455,7 +454,7 @@ function parseRows(rows) {
) {
let field = row == 'response_by' ? 'response_by' : 'first_responded_on'
_rows[row] = {
label: deal[field] ? dateFormat(deal[field], dateTooltipFormat) : '',
label: deal[field] ? formatDate(deal[field]) : '',
timeAgo: deal[row]
? row == 'first_response_time'
? formatTime(deal[row])

View File

@ -75,7 +75,7 @@ import LayoutHeader from '@/components/LayoutHeader.vue'
import ViewControls from '@/components/ViewControls.vue'
import EmailTemplatesListView from '@/components/ListViews/EmailTemplatesListView.vue'
import EmailTemplateModal from '@/components/Modals/EmailTemplateModal.vue'
import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
import { formatDate, timeAgo } from '@/utils'
import { computed, ref } from 'vue'
const emailTemplatesListView = ref(null)
@ -100,7 +100,7 @@ const rows = computed(() => {
if (['modified', 'creation'].includes(row)) {
_rows[row] = {
label: dateFormat(emailTemplate[row], dateTooltipFormat),
label: formatDate(emailTemplate[row]),
timeAgo: timeAgo(emailTemplate[row]),
}
}

View File

@ -307,13 +307,7 @@ import { globalStore } from '@/stores/global'
import { usersStore } from '@/stores/users'
import { statusesStore } from '@/stores/statuses'
import { callEnabled } from '@/composables/settings'
import {
dateFormat,
dateTooltipFormat,
timeAgo,
website,
formatTime,
} from '@/utils'
import { formatDate, timeAgo, website, formatTime } from '@/utils'
import { Avatar, Tooltip, Dropdown } from 'frappe-ui'
import { useRoute } from 'vue-router'
import { ref, computed, reactive, h } from 'vue'
@ -435,7 +429,7 @@ function parseRows(rows) {
: 'orange'
if (value == 'First Response Due') {
value = __(timeAgo(lead.response_by))
tooltipText = dateFormat(lead.response_by, dateTooltipFormat)
tooltipText = formatDate(lead.response_by)
if (new Date(lead.response_by) < new Date()) {
color = 'red'
}
@ -462,7 +456,7 @@ function parseRows(rows) {
}))
} else if (['modified', 'creation'].includes(row)) {
_rows[row] = {
label: dateFormat(lead[row], dateTooltipFormat),
label: formatDate(lead[row]),
timeAgo: __(timeAgo(lead[row])),
}
} else if (
@ -472,7 +466,7 @@ function parseRows(rows) {
) {
let field = row == 'response_by' ? 'response_by' : 'first_responded_on'
_rows[row] = {
label: lead[field] ? dateFormat(lead[field], dateTooltipFormat) : '',
label: lead[field] ? formatDate(lead[field]) : '',
timeAgo: lead[row]
? row == 'first_response_time'
? formatTime(lead[row])

View File

@ -187,8 +187,7 @@ import DealsIcon from '@/components/Icons/DealsIcon.vue'
import DealsListView from '@/components/ListViews/DealsListView.vue'
import AddressModal from '@/components/Modals/AddressModal.vue'
import {
dateFormat,
dateTooltipFormat,
formatDate,
timeAgo,
formatNumberIntoCurrency,
createToast,
@ -606,7 +605,7 @@ function getDealRowObject(deal) {
...(deal.deal_owner && getUser(deal.deal_owner)),
},
modified: {
label: dateFormat(deal.modified, dateTooltipFormat),
label: formatDate(deal.modified),
timeAgo: __(timeAgo(deal.modified)),
},
}

View File

@ -181,8 +181,7 @@ import { usersStore } from '@/stores/users'
import { statusesStore } from '@/stores/statuses'
import { getView } from '@/utils/view'
import {
dateFormat,
dateTooltipFormat,
formatDate,
timeAgo,
formatNumberIntoCurrency,
createToast,
@ -468,7 +467,7 @@ function getDealRowObject(deal) {
...(deal.deal_owner && getUser(deal.deal_owner)),
},
modified: {
label: dateFormat(deal.modified, dateTooltipFormat),
label: formatDate(deal.modified),
timeAgo: __(timeAgo(deal.modified)),
},
}
@ -489,7 +488,7 @@ function getContactRowObject(contact) {
logo: props.organization?.organization_logo,
},
modified: {
label: dateFormat(contact.modified, dateTooltipFormat),
label: formatDate(contact.modified),
timeAgo: __(timeAgo(contact.modified)),
},
}

View File

@ -65,7 +65,7 @@
{{ getUser(note.owner).full_name }}
</div>
</div>
<Tooltip :text="dateFormat(note.modified, dateTooltipFormat)">
<Tooltip :text="formatDate(note.modified)">
<div class="text-sm text-ink-gray-7">
{{ __(timeAgo(note.modified)) }}
</div>
@ -110,7 +110,7 @@ import NoteIcon from '@/components/Icons/NoteIcon.vue'
import NoteModal from '@/components/Modals/NoteModal.vue'
import ViewControls from '@/components/ViewControls.vue'
import { usersStore } from '@/stores/users'
import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
import { timeAgo, formatDate } from '@/utils'
import { TextEditor, call, Dropdown, Tooltip, ListFooter } from 'frappe-ui'
import { ref, watch } from 'vue'

View File

@ -216,8 +216,7 @@ import { usersStore } from '@/stores/users'
import { statusesStore } from '@/stores/statuses'
import { getView } from '@/utils/view'
import {
dateFormat,
dateTooltipFormat,
formatDate,
timeAgo,
formatNumberIntoCurrency,
createToast,
@ -503,7 +502,7 @@ function getDealRowObject(deal) {
...(deal.deal_owner && getUser(deal.deal_owner)),
},
modified: {
label: dateFormat(deal.modified, dateTooltipFormat),
label: formatDate(deal.modified),
timeAgo: __(timeAgo(deal.modified)),
},
}
@ -524,7 +523,7 @@ function getContactRowObject(contact) {
logo: props.organization?.organization_logo,
},
modified: {
label: dateFormat(contact.modified, dateTooltipFormat),
label: formatDate(contact.modified),
timeAgo: __(timeAgo(contact.modified)),
},
}

View File

@ -78,13 +78,7 @@ import OrganizationModal from '@/components/Modals/OrganizationModal.vue'
import QuickEntryModal from '@/components/Modals/QuickEntryModal.vue'
import OrganizationsListView from '@/components/ListViews/OrganizationsListView.vue'
import ViewControls from '@/components/ViewControls.vue'
import {
dateFormat,
dateTooltipFormat,
timeAgo,
website,
formatNumberIntoCurrency,
} from '@/utils'
import { formatDate, timeAgo, website, formatNumberIntoCurrency } from '@/utils'
import { ref, computed } from 'vue'
const organizationsListView = ref(null)
@ -123,7 +117,7 @@ const rows = computed(() => {
)
} else if (['modified', 'creation'].includes(row)) {
_rows[row] = {
label: dateFormat(organization[row], dateTooltipFormat),
label: formatDate(organization[row]),
timeAgo: __(timeAgo(organization[row])),
}
}

View File

@ -205,7 +205,7 @@ import TasksListView from '@/components/ListViews/TasksListView.vue'
import KanbanView from '@/components/Kanban/KanbanView.vue'
import TaskModal from '@/components/Modals/TaskModal.vue'
import { usersStore } from '@/stores/users'
import { dateFormat, dateTooltipFormat, timeAgo } from '@/utils'
import { formatDate, timeAgo } from '@/utils'
import { Tooltip, Avatar, TextEditor, Dropdown, call } from 'frappe-ui'
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
@ -261,7 +261,7 @@ function parseRows(rows) {
if (['modified', 'creation'].includes(row)) {
_rows[row] = {
label: dateFormat(task[row], dateTooltipFormat),
label: formatDate(task[row]),
timeAgo: __(timeAgo(task[row])),
}
} else if (row == 'assigned_to') {

View File

@ -1,9 +1,4 @@
import {
secondsToDuration,
dateFormat,
dateTooltipFormat,
timeAgo,
} from '@/utils'
import { secondsToDuration, formatDate, timeAgo } from '@/utils'
import { usersStore } from '@/stores/users'
import { contactsStore } from '@/stores/contacts'
@ -52,7 +47,7 @@ export function getCallLogDetail(row, log) {
}
} else if (['modified', 'creation'].includes(row)) {
return {
label: dateFormat(log[row], dateTooltipFormat),
label: formatDate(log[row]),
timeAgo: __(timeAgo(log[row])),
}
}

View File

@ -1,9 +1,8 @@
import TaskStatusIcon from '@/components/Icons/TaskStatusIcon.vue'
import TaskPriorityIcon from '@/components/Icons/TaskPriorityIcon.vue'
import { useDateFormat, useTimeAgo } from '@vueuse/core'
import { usersStore } from '@/stores/users'
import { gemoji } from 'gemoji'
import { toast } from 'frappe-ui'
import { toast, convertToUserTimezone, formatAsTimeAgo } from 'frappe-ui'
import { h } from 'vue'
export function createToast(options) {
@ -38,17 +37,14 @@ export function formatTime(seconds) {
return formattedTime.trim()
}
export function dateFormat(date, format) {
const _format = format || 'DD-MM-YYYY HH:mm:ss'
return useDateFormat(date, _format).value
export function formatDate(date, format = 'E, MMM d, yyyy h:mm a') {
return convertToUserTimezone(date, format)
}
export function timeAgo(date) {
return useTimeAgo(date).value
return formatAsTimeAgo(date)
}
export const dateTooltipFormat = 'ddd, MMM D, YYYY h:mm A'
export function taskStatusOptions(action, data) {
return ['Backlog', 'Todo', 'In Progress', 'Done', 'Canceled'].map(
(status) => {