fix: fix datepicker input format for locales (#2334)

monicahq · Jan 24, 2019 · d487b43 · d487b43
1 parent ba236dd
commit d487b43
Show file tree

Hide file tree

Showing 19 changed files with 68 additions and 44 deletions.
diff --git a/CHANGELOG b/CHANGELOG
@@ -21,6 +21,7 @@ Enhancements:
 
 Fixes:
 
+* Fix vue.js DateTime picker to type a date in other format than en-us one
 * Fix DateTime parse when compact format is used
 * Fix contact and relationship edit with reminder enabled
 * Fix broken migration for the activities table

diff --git a/app/Http/Controllers/Api/Misc/ApiCountryController.php b/app/Http/Controllers/Api/Misc/ApiCountryController.php
@@ -3,8 +3,8 @@
 namespace App\Http\Controllers\Api\Misc;
 
 use Illuminate\Http\Request;
-use App\Helpers\LocaleHelper;
 use App\Helpers\CountriesHelper;
+use Illuminate\Support\Facades\App;
 use Illuminate\Support\Facades\Cache;
 use App\Http\Controllers\Api\ApiController;
 use App\Http\Resources\Country\Country as CountryResource;
@@ -18,7 +18,7 @@ class ApiCountryController extends ApiController
      */
     public function index(Request $request)
     {
-        $key = 'countries.'.LocaleHelper::getLocale();
+        $key = 'countries.'.App::getLocale();
 
         $countries = Cache::rememberForever($key, function () {
             return CountriesHelper::getAll();

diff --git a/app/Http/Controllers/Contacts/AddressesController.php b/app/Http/Controllers/Contacts/AddressesController.php
@@ -3,10 +3,10 @@
 namespace App\Http\Controllers\Contacts;
 
 use Illuminate\Http\Request;
-use App\Helpers\LocaleHelper;
 use App\Models\Contact\Address;
 use App\Models\Contact\Contact;
 use App\Helpers\CountriesHelper;
+use Illuminate\Support\Facades\App;
 use App\Http\Controllers\Controller;
 use Illuminate\Support\Facades\Auth;
 use App\Traits\JsonRespondController;
@@ -38,7 +38,7 @@ public function index(Contact $contact)
      */
     public function getCountries()
     {
-        $key = 'countries.'.LocaleHelper::getLocale();
+        $key = 'countries.'.App::getLocale();
 
         $countries = Cache::rememberForever($key, function () {
             return CountriesHelper::getAll();

diff --git a/app/Http/Controllers/Contacts/ConversationsController.php b/app/Http/Controllers/Contacts/ConversationsController.php
@@ -25,7 +25,6 @@ public function create(Request $request, Contact $contact)
     {
         return view('people.conversations.new')
             ->withContact($contact)
-            ->withLocale(auth()->user()->locale)
             ->withContactFieldTypes(auth()->user()->account->contactFieldTypes);
     }
 
@@ -137,7 +136,6 @@ public function edit(Request $request, Contact $contact, Conversation $conversat
 
         return view('people.conversations.edit')
             ->withContact($contact)
-            ->withLocale(auth()->user()->locale)
             ->withConversation($conversation)
             ->withMessages($messages)
             ->withContactFieldTypes(auth()->user()->account->contactFieldTypes);

diff --git a/package.json b/package.json
@@ -59,6 +59,6 @@
     "vue-notification": "^1.3.6",
     "vue-resource": "^1.3.6",
     "vue-select": "^2.4.0",
-    "vuejs-datepicker": "^1.0.4"
+    "vuejs-datepicker-tmp": "^1.5.4"
   }
 }
diff --git a/public/js/app.js b/public/js/app.js
diff --git a/public/js/vendor.js b/public/js/vendor.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,10 +1,10 @@
 {
     "/js/manifest.js": "/js/manifest.js?id=01c8731923a46c30aaed",
-    "/js/app.js": "/js/app.js?id=e93e1335c28da7ce937c",
+    "/js/app.js": "/js/app.js?id=9eef0681570edc43f211",
     "/css/app-ltr.css": "/css/app-ltr.css?id=9d5c67e058757ccc7b5f",
     "/css/app-rtl.css": "/css/app-rtl.css?id=26961bfc239e7ce6ea27",
     "/css/stripe.css": "/css/stripe.css?id=2de4e0ce557016a0327e",
     "/js/stripe.js": "/js/stripe.js?id=0608bca2559c3585636f",
-    "/js/vendor.js": "/js/vendor.js?id=d866d4e54528ba808b10",
+    "/js/vendor.js": "/js/vendor.js?id=743c679325b38a071f35",
     "/js/u2f-api.js": "/js/u2f-api.js?id=1948d3efdfd801bed14a"
 }
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
@@ -339,6 +339,7 @@ loadLanguageAsync(window.Laravel.locale, true).then((lang) => {
       date_met_the_contact: 'known',
       global_relationship_form_new_contact: true,
       htmldir: window.Laravel.htmldir,
+      locale: lang,
       global_profile_default_view: window.Laravel.profileDefaultView,
     },
     mounted: function() {

diff --git a/resources/assets/js/components/partials/form/Date.vue b/resources/assets/js/components/partials/form/Date.vue
@@ -4,20 +4,22 @@
 <template>
   <div>
     <datepicker :value="selectedDate"
-                :format="customFormatter"
+                :format="displayValue"
+                :format-typed-date="formatTypedValue"
                 :language="language"
                 :monday-first="mondayFirst"
                 :input-class="'br2 f5 ba b--black-40 pa2 outline-0'"
-                @input="update"
-                @selected="$emit('selected', getDateInEloquentFormat($event))"
+                :typeable="true"
+                @input="$emit('input', exchangeValue($event))"
+                @selected="update"
     />
     <input :name="id" type="hidden" :value="value" />
   </div>
 </template>
 
 <script>
-import Datepicker from 'vuejs-datepicker';
-import * as Languages from 'vuejs-datepicker/dist/locale';
+import Datepicker from 'vuejs-datepicker-tmp';
+import * as Languages from 'vuejs-datepicker-tmp/dist/locale';
 import moment from 'moment';
 
 export default {
@@ -43,46 +45,69 @@ export default {
 
   data() {
     return {
+      /**
+       * Value of the date in exchange format
+       */
       value: '',
+
       selectedDate: '',
       language: Languages.en,
       mondayFirst: false
     };
   },
 
+  computed: {
+    /**
+     * Exchange format with controller (moment format type).
+     */
+    exchangeFormat() {
+      return 'YYYY-MM-DD';
+    },
+
+    /**
+     * Display format (moment format type).
+     */
+    displayFormat() {
+      return 'L';
+    },
+  },
+
   mounted() {
     this.language = Languages[this.locale];
-    this.selectedDate = moment(this.defaultDate, this.exchangeFormat()).toDate();
+    this.selectedDate = moment(this.defaultDate, this.exchangeFormat).toDate();
     this.mondayFirst = moment.localeData().firstDayOfWeek() == 1;
     this.update(this.selectedDate);
   },
 
   methods: {
-    customFormatter(date) {
-      return moment(date).format('L');
+    displayValue(date) {
+      return moment(date).format(this.displayFormat);
     },
 
-    getDateInEloquentFormat(date) {
-      return moment(date).format(this.exchangeFormat());
+    exchangeValue(date) {
+      return moment(date).format(this.exchangeFormat);
     },
 
     /**
-          * Update the value of hidden input, in exchange format value
-          */
+     * Update the value of hidden input.
+     * Store it in exchange format value.
+     */
     update(date) {
       var mdate = moment(date);
       if (! mdate.isValid()) {
         mdate = moment();
       }
-      this.value = mdate.format(this.exchangeFormat());
+      this.value = mdate.format(this.exchangeFormat);
     },
 
     /**
-          * Exchange format with controller (moment format type)
-          */
-    exchangeFormat() {
-      return 'YYYY-MM-DD';
-    }
+     * Format the typed value with the locale specicifcation.
+     * Return in exchange format value.
+     */
+    formatTypedValue(date) {
+      return moment(date, this.displayFormat).format(this.exchangeFormat);
+    },
+
   }
 };
 </script>
diff --git a/resources/assets/js/components/partials/form/SpecialDate.vue b/resources/assets/js/components/partials/form/SpecialDate.vue
@@ -131,10 +131,6 @@ export default {
       type: String,
       default: '',
     },
-    locale: {
-      type: String,
-      default: 'en',
-    },
     reminder: {
       type: Number,
       default: 0,
@@ -154,6 +150,9 @@ export default {
   computed: {
     dirltr() {
       return this.$root.htmldir == 'ltr';
+    },
+    locale() {
+      return this.$root.locale;
     }
   },
 

diff --git a/resources/assets/js/components/people/calls/PhoneCallList.vue b/resources/assets/js/components/people/calls/PhoneCallList.vue
@@ -42,8 +42,7 @@
                 <form-date
                   v-model="newCall.called_at"
                   :default-date="todayDate"
-                  :locale="'en'"
-                  @selected="updateDate($event)"
+                  :locale="locale"
                 />
               </div>
             </div>
@@ -283,6 +282,9 @@ export default {
   computed: {
     dirltr() {
       return this.$root.htmldir == 'ltr';
+    },
+    locale() {
+      return this.$root.locale;
     }
   },
 

diff --git a/resources/views/changelog/index.blade.php b/resources/views/changelog/index.blade.php
@@ -7,7 +7,7 @@
       <div class="mt4 mw7 center mb3">
         <h3>{{ trans('changelog.title') }}</h3>
 
-        @if (\App\Helpers\LocaleHelper::getLocale() != 'en')
+        @if (\App::getLocale() != 'en')
         <p>{{ trans('changelog.note') }}</p>
         @endif
       </div>

diff --git a/resources/views/people/conversations/edit.blade.php b/resources/views/people/conversations/edit.blade.php
@@ -50,7 +50,7 @@
               <form-date
                 :id="'conversationDate'"
                 :default-date="'{{ now(\App\Helpers\DateHelper::getTimezone()) }}'"
-                :locale="'{{ $locale }}'">
+                :locale="'{{ \App::getLocale() }}'">
               </form-date>
             </div>
           </div>

diff --git a/resources/views/people/conversations/new.blade.php b/resources/views/people/conversations/new.blade.php
@@ -44,7 +44,7 @@
               <form-date
                 :id="'conversationDate'"
                 :default-date="'{{ now(\App\Helpers\DateHelper::getTimezone()) }}'"
-                :locale="'{{ $locale }}'">
+                :locale="'{{ \App::getLocale() }}'">
               </form-date>
             </div>
           </div>

diff --git a/resources/views/people/edit.blade.php b/resources/views/people/edit.blade.php
@@ -136,7 +136,6 @@
           :day="{{ $day }}"
           :age="'{{ $age }}'"
           :default-date="'{{ $birthdate }}'"
-          :locale="'{{ auth()->user()->locale }}'"
           :reminder="{{ json_encode($hasBirthdayReminder) }}"
           :value="'{{ $birthdayState }}'"
         ></form-specialdate>

diff --git a/resources/views/people/relationship/edit.blade.php b/resources/views/people/relationship/edit.blade.php
@@ -107,7 +107,6 @@
       <form-specialdate
         :months="{{ $months }}"
         :days="{{ $days }}"
-        :locale="'{{ auth()->user()->locale }}'"
         :month="{{ $month }}"
         :day="{{ $day }}"
         :age="'{{ $age }}'"

diff --git a/resources/views/people/relationship/new.blade.php b/resources/views/people/relationship/new.blade.php
@@ -110,7 +110,6 @@
           :months="{{ $months }}"
           :days="{{ $days }}"
           :default-date="'{{ $birthdate }}'"
-          :locale="'{{ auth()->user()->locale }}'"
         ></form-specialdate>
 
         <div class="pa4-ns ph3 pv2 bb b--gray-monica">

diff --git a/yarn.lock b/yarn.lock
@@ -7820,9 +7820,10 @@ vue@^2.5.21:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.21.tgz#3d33dcd03bb813912ce894a8303ab553699c4a85"
   integrity sha512-Aejvyyfhn0zjVeLvXd70h4hrE4zZDx1wfZqia6ekkobLmUZ+vNFQer53B4fu0EjWBSiqApxPejzkO1Znt3joxQ==
 
-vuejs-datepicker@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/vuejs-datepicker/-/vuejs-datepicker-1.0.4.tgz#1f2c1c19a512bae175fe24d4273e99249f80f60a"
+vuejs-datepicker-tmp@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/vuejs-datepicker-tmp/-/vuejs-datepicker-tmp-1.5.4.tgz#8435db77cd6536adde95e5be89bb6d0ff21f2e4f"
+  integrity sha512-nX0QkcTjxQz3TYcZwZN3BY9bzu04EW3K2HQm9HaIBmOJoeGfNSwV4KRKmsYbR2lQtNPrK4gpN7jlvN8edMEYiw==
 
 watchpack@^1.5.0:
   version "1.6.0"