Display detailed d:h:m duration schedule on campaigns page. Closes #2460.

Author: knadh

frontend/src/utils.js

@@ -5,9 +5,11 @@ import {
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import duration from 'dayjs/plugin/duration';
 
 dayjs.extend(updateLocale);
 dayjs.extend(relativeTime);
+dayjs.extend(duration);
 
 const reEmail = /(.+?)@(.+?)/ig;
 const prefKey = 'listmonk_pref';
@@ -71,11 +73,15 @@ export default class Utils {
   duration = (start, end) => {
     const a = dayjs(start);
     const b = dayjs(end);
+    const d = dayjs.duration(Math.abs(b.diff(a)));
 
-    // Get the duration string, eg: "2 days".
-    const diff = b.from(a, true);
+    const parts = [
+      Math.floor(d.asDays()) && `${Math.floor(d.asDays())}d`,
+      d.hours() && `${d.hours()}h`,
+      d.minutes() && `${d.minutes()}m`,
+    ].filter(Boolean);
 
-    return `${b.isBefore(a) ? '-' : ''}${diff}`;
+    return `${b.isBefore(a) ? '-' : ''}${parts.join(' ')}`;
   };
 
   // Simple, naive, e-mail address check.

frontend/src/views/Campaigns.vue

@@ -145,8 +145,7 @@
             <label for="#"><b-icon icon="speedometer" size="is-small" /></label>
             <span class="send-rate">
               <b-tooltip
-                :label="`${stats.netRate} / ${$t('campaigns.rateMinuteShort')} @
-                                                                                          ${$utils.duration(stats.startedAt, stats.updatedAt)}`"
+                :label="`${stats.netRate} / ${$t('campaigns.rateMinuteShort')} @ ${$utils.duration(stats.startedAt, stats.updatedAt)}`"
                 type="is-dark">
                 {{ stats.rate.toFixed(0) }} / {{ $t('campaigns.rateMinuteShort') }}
               </b-tooltip>