Show countdown on scheduled campaigns UI

This commit is contained in:
Kailash Nadh 2020-07-26 20:54:05 +05:30
parent e2e65b1bc0
commit 76f4fd68f8
3 changed files with 13 additions and 11 deletions

View File

@ -2,6 +2,10 @@ import {
ToastProgrammatic as Toast,
DialogProgrammatic as Dialog,
} from 'buefy';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);
const reEmail = /(.+?)@(.+?)/ig;
@ -27,6 +31,10 @@ export default class utils {
return out;
};
static duration(start, end) {
return dayjs(end).from(dayjs(start), true);
}
// Simple, naive, e-mail address check.
static validateEmail = (e) => e.match(reEmail);

View File

@ -83,7 +83,8 @@
</div>
<div class="column">
<br />
<b-field v-if="form.sendLater">
<b-field v-if="form.sendLater"
:message="$utils.duration(Date(), form.sendAtDate)">
<b-datetimepicker
v-model="form.sendAtDate"
:disabled="!canEdit"

View File

@ -35,7 +35,8 @@
<b-tooltip label="Scheduled" type="is-dark">
<span class="is-size-7 has-text-grey scheduled">
<b-icon icon="alarm" size="is-small" />
{{ $utils.niceDate(props.row.sendAt, true) }}
{{ $utils.duration(Date(), props.row.sendAt, true) }}
&ndash; {{ $utils.niceDate(props.row.sendAt, true) }}
</span>
</b-tooltip>
</p>
@ -79,7 +80,7 @@
<p v-if="stats.startedAt && stats.updatedAt"
class="is-capitalized" title="Duration">
<label><b-icon icon="alarm" size="is-small" /></label>
{{ duration(stats.startedAt, stats.updatedAt) }}
{{ $utils.duration(stats.startedAt, stats.updatedAt) }}
</p>
</div>
</b-table-column>
@ -189,13 +190,9 @@
<script>
import Vue from 'vue';
import { mapState } from 'vuex';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import CampaignPreview from '../components/CampaignPreview.vue';
import EmptyPlaceholder from '../components/EmptyPlaceholder.vue';
dayjs.extend(relativeTime);
export default Vue.extend({
components: {
CampaignPreview,
@ -254,10 +251,6 @@ export default Vue.extend({
return '';
},
duration(start, end) {
return dayjs(end).from(dayjs(start), true);
},
onPageChange(p) {
this.queryParams.page = p;
this.getCampaigns();