Show countdown on scheduled campaigns UI
This commit is contained in:
parent
e2e65b1bc0
commit
76f4fd68f8
|
@ -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);
|
||||
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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) }}
|
||||
– {{ $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();
|
||||
|
|
Loading…
Reference in New Issue