From fbdd8e9b1042a5cc5acb0a3516f97b90c9835648 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arsenije=20Savi=C4=87?= <arsenijesavic@me.com>
Date: Thu, 7 Sep 2023 08:18:49 -0600
Subject: [PATCH] fix(custom-period-input): parse initial period correctly
 (DEV-847) (#2423)

---
 src/components/form/custom-period-input.vue | 25 ++++++++++++++++-----
 src/locales/en.json                         |  2 ++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/components/form/custom-period-input.vue b/src/components/form/custom-period-input.vue
index ced79791c..6a687b989 100644
--- a/src/components/form/custom-period-input.vue
+++ b/src/components/form/custom-period-input.vue
@@ -7,6 +7,7 @@ const secondsToInterval = (seconds) => {
 
   let period = ''
 
+  const minutes = Math.floor(seconds / 60)
   const hours = Math.floor(seconds / 3600)
   const days = Math.floor(seconds / 86400)
   const weeks = Math.floor(seconds / 604800)
@@ -20,16 +21,18 @@ const secondsToInterval = (seconds) => {
     period = 'days'
   } else if (hours > 0) {
     period = 'hours'
+  } else if (minutes > 0) {
+    period = 'minutes'
   }
 
-  return { period, months, weeks, days, hours }
+  return { period, months, weeks, days, hours, minutes }
 }
 
 export default {
   name: 'custom-period-input',
   data () {
     return {
-      period: 'days'
+      period: ''
     }
   },
 
@@ -51,6 +54,7 @@ export default {
       },
       set (value) {
         if (this.type === 'time' && this.period !== '') {
+          if (this.period === 'minutes') { value = (value * 60) }
           if (this.period === 'hours') { value = (value * 60) * 60 }
           if (this.period === 'days') { value = value * 24 * 60 * 60 }
           if (this.period === 'weeks') { value = value * 7 * 24 * 60 * 60 }
@@ -65,8 +69,15 @@ export default {
     label  () { return this.$t(`periods.${this.period}`) }
   },
 
-  mounted () {
-    this.period = secondsToInterval(this.value).period
+  watch: {
+    value: {
+      handler: function (value) {
+        if (value && !this.period) {
+          this.period = secondsToInterval(this.value).period
+        }
+      },
+      immediate: true
+    }
   }
 
 }
@@ -87,7 +98,11 @@ div.custom-period-input
     .col-6
       q-btn-dropdown.full-width(:disable="disable" :label="label" outline no-caps rounded unelevated)
         q-list
-          q-item(clickable v-close-popup @click="period = 'hours'")
+          q-item(clickable v-close-popup @click="period = 'minutes'")
+            q-item-section
+              q-item-label {{ $t('periods.minutes') }}
+
+          q-item(clickable v-close-popup @click="period = 'minutes'")
             q-item-section
               q-item-label {{ $t('periods.hours') }}
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 6a90a4d04..8a2b2c816 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -3,6 +3,8 @@
     "delete": "Delete"
   },
   "periods": {
+    "minute": "Minute",
+    "minutes": "Minutes",
     "hour": "Hour",
     "hours": "Hours",
     "day": "Day",