fix: fix birthdate selection UX (monicahq#3318)

pol · Dec 22, 2019 · 927b1f0 · 927b1f0
1 parent 2d1343a
commit 927b1f0
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -22,6 +22,7 @@
 
 ### Fixes:
 
+* Fix birthdate selection UX
 * Fix OAuth login process with WebAuthn activated
 * Fix journal entry edit
 * Fix register in case country is not detected from ip address

diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,7 +1,7 @@
 {
     "/js/manifest.js": "/js/manifest.js?id=7db827d654313dce4250",
     "/js/vendor.js": "/js/vendor.js?id=1363a5be6cbb2bfab4c3",
-    "/js/app.js": "/js/app.js?id=58aa6de864d9ae9c9aa8",
+    "/js/app.js": "/js/app.js?id=ce74ca952199a01737cb",
     "/css/app-ltr.css": "/css/app-ltr.css?id=ff41d6c39e7fba5cf37e",
     "/css/app-rtl.css": "/css/app-rtl.css?id=ee3f6d81111cdc99f35d",
     "/css/stripe.css": "/css/stripe.css?id=76c70a7b11ae5f38a725",

diff --git a/resources/js/components/partials/SpecialDate.vue b/resources/js/components/partials/SpecialDate.vue
@@ -12,6 +12,7 @@
           :value="'unknown'"
           :dclass="'flex mb3'"
           :iclass="[ dirltr ? 'mr2' : 'ml2' ]"
+          @change="event => { _saveOption(); }"
         >
           <template slot="label">
             {{ $t('people.information_edit_unknown') }}
@@ -23,7 +24,7 @@
           :value="'approximate'"
           :dclass="'flex mb3'"
           :iclass="[ dirltr ? 'mr2' : 'ml2' ]"
-          @change="event => { _focusAge() }"
+          @change="event => { if (this.selectedOptionSave !== 'approximate') {_focusAge();} _saveOption(); }"
         >
           <template slot="label">
             {{ $t('people.information_edit_probably') }}
@@ -45,7 +46,7 @@
           :value="'almost'"
           :dclass="'flex mb3'"
           :iclass="[ dirltr ? 'mr2' : 'ml2' ]"
-          @change="event => { _focusMonth() }"
+          @change="event => { if (this.selectedOptionSave !== 'almost') {_focusMonth();} _saveOption(); }"
         >
           <template slot="label">
             {{ $t('people.information_edit_not_year') }}
@@ -76,7 +77,7 @@
           :value="'exact'"
           :dclass="'flex mb3'"
           :iclass="[ dirltr ? 'mr2' : 'ml2' ]"
-          @change="event => { _focusBirthday() }"
+          @change="event => { if (this.selectedOptionSave !== 'exact') {_focusBirthday();} _saveOption(); }"
         >
           <template slot="label">
             {{ $t('people.information_edit_exact') }}
@@ -156,6 +157,7 @@ export default {
     return {
       selectedDate: null,
       selectedOption: null,
+      selectedOptionSave: null,
       selectedMonth: 0,
       selectedDay: 0,
       hasBirthdayReminder: false
@@ -173,6 +175,7 @@ export default {
 
   mounted() {
     this.selectedOption = this.value != '' ? this.value : 'unknown';
+    this.selectedOptionSave = this.selectedOption;
     this.selectedMonth = this.month;
     this.selectedDay = this.day;
     this.hasBirthdayReminder = this.reminder;
@@ -194,6 +197,9 @@ export default {
         this.$refs.birthday.focus();
       }, 100);
     },
+    _saveOption() {
+      this.selectedOptionSave = this.selectedOption;
+    },
   }
 };
 </script>