Add Vue mixin for delayed job timers

1 files changed, 50 insertions, 0 deletions

diff --git a/app/assets/javascripts/jobs/mixins/delayed_job_mixin.js b/app/assets/javascripts/jobs/mixins/delayed_job_mixin.js
new file mode 100644
index 00000000000..8c7fb785a61
--- /dev/null
+++ b/app/assets/javascripts/jobs/mixins/delayed_job_mixin.js
@@ -0,0 +1,50 @@
+import { calculateRemainingMilliseconds, formatTime } from '~/lib/utils/datetime_utility';
+
+export default {
+  data() {
+    return {
+      remainingTime: formatTime(0),
+      remainingTimeIntervalId: null,
+    };
+  },
+
+  mounted() {
+    this.startRemainingTimeInterval();
+  },
+
+  beforeDestroy() {
+    if (this.remainingTimeIntervalId) {
+      clearInterval(this.remainingTimeIntervalId);
+    }
+  },
+
+  computed: {
+    isDelayedJob() {
+      return this.job && this.job.scheduled;
+    },
+  },
+
+  watch: {
+    isDelayedJob() {
+      this.startRemainingTimeInterval();
+    },
+  },
+
+  methods: {
+    startRemainingTimeInterval() {
+      if (this.remainingTimeIntervalId) {
+        clearInterval(this.remainingTimeIntervalId);
+      }
+
+      if (this.isDelayedJob) {
+        this.updateRemainingTime();
+        this.remainingTimeIntervalId = setInterval(() => this.updateRemainingTime(), 1000);
+      }
+    },
+
+    updateRemainingTime() {
+      const remainingMilliseconds = calculateRemainingMilliseconds(this.job.scheduled_at);
+      this.remainingTime = formatTime(remainingMilliseconds);
+    },
+  },
+};