feat: allow to set locale and load language (#924)

resources/js/app.js

@@ -10,7 +10,8 @@ const langs = require('./langs').default;
 
 const el = document.getElementById('app');
 
-langs.loadLanguage('en', true).then((locale) => {
+langs.loadLanguage(document.querySelector('html').getAttribute('lang'), true)
+.then((locale) => {
 
   const app = createApp({
     locale,

resources/js/langs.js

@@ -2,12 +2,14 @@
 
 import { createI18n } from 'vue-i18n';
 import messages from '../../public/js/langs/en.json';
+import pluralization from './pluralization.js';
 
 export default {
   i18n: createI18n({
-    locale: 'en', // set locale
+    locale: 'en',
     fallbackLocale: 'en',
     messages: {'en': messages},
+    pluralizationRules: pluralization,
   }),
 
   loadedLanguages : ['en'], // our default language that is preloaded
@@ -21,8 +23,8 @@ export default {
   _loadLanguageAsync (lang) {
     if (this.i18n.locale !== lang) {
       if (!this.loadedLanguages.includes(lang)) {
-        return axios.get(`js/langs/${lang}.json`).then(msgs => {
-          this.i18n.setLocaleMessage(lang, msgs.data);
+        return this._loadLanguageMessagesAsync(lang).then(msgs => {
+          this.i18n.global.setLocaleMessage(lang, msgs);
           this.loadedLanguages.push(lang);
           return this.i18n;
         });
@@ -31,7 +33,17 @@ export default {
     return Promise.resolve(this.i18n);
   },
 
-  loadLanguage: function(lang, set) {
+  _loadLanguageMessagesAsync (lang) {
+    const src = document.getElementById('app-js').getAttribute('src');
+    const q = src.indexOf('?');
+    const query = q > 0 ? src.substring(q) : '';
+
+    return axios.get(`js/langs/${lang}.json${query}`).then(msgs => {
+      return msgs.data;
+    });
+  },
+
+  loadLanguage (lang, set) {
     return this._loadLanguageAsync(lang).then(i18n => {
       if (set) {
         this._setI18nLanguage(lang);

resources/js/pluralization.js

@@ -0,0 +1,53 @@
+/**
+ * Pluralization form for every langage not following engl-ish like form.
+ *
+ * 'plurals' functions represent possible plural form transformations.
+ * This return a list of lang/plural function to apply.
+ *
+ * @see https://github.com/laravel/framework/blob/master/src/Illuminate/Translation/MessageSelector.php
+ */
+
+function pluralA (choice, choicesLength) {
+  return 0;
+}
+function pluralB (choice, choicesLength) {
+  let number = Math.abs(choice);
+  number = ((number == 0) || (number == 1)) ? 0 : 1;
+  return Math.min(number, choicesLength - 1);
+}
+function pluralC (choice, choicesLength) {
+  let number = Math.abs(choice);
+  number = (number == 1) ? 0 : (((number >= 2) && (number <= 4)) ? 1 : 2);
+  return Math.min(number, choicesLength - 1);
+}
+function pluralD (choice, choicesLength) {
+  let number = Math.abs(choice);
+  number = ((number % 10 == 1) && (number % 100 != 11)) ? 0 : (((number % 10 >= 2) && (number % 10 <= 4) && ((number % 100 < 10) || (number % 100 >= 20))) ? 1 : 2);
+  return Math.min(number, choicesLength - 1);
+}
+function pluralE (choice, choicesLength) {
+  let number = Math.abs(choice);
+  number = (number == 0) ? 0 : ((number == 1) ? 1 : ((number == 2) ? 2 : (((number % 100 >= 3) && (number % 100 <= 10)) ? 3 : (((number % 100 >= 11) && (number % 100 <= 99)) ? 4 : 5))));
+  return Math.min(number, choicesLength - 1);
+}
+function pluralF (choice, choicesLength) {
+  let number = Math.abs(choice);
+  number = (number == 1) ? 0 : ((number == 2) ? 1 : (number < 10 && number % 10 == 0) ? 2 : 3);
+  return Math.min(number, choicesLength - 1);
+}
+
+export default {
+  'ar': pluralE,
+  'cs': pluralC,
+  'fr': pluralB,
+  'he': pluralF,
+  'hr': pluralD,
+  'id': pluralA,
+  'ja': pluralA,
+  'ru': pluralD,
+  'tr': pluralA,
+  'uk': pluralD,
+  'vi': pluralA,
+  'zh': pluralA,
+  'zh-TW': pluralA,
+};

resources/lang/en/account.php

@@ -68,7 +68,7 @@
     'employee_new_hr' => 'Human Resource Representative',
     'employee_new_user' => 'Employee',
     'employee_new_administrator_desc' => 'Can do everything, including account management. Caution: the employee will have access to everything, including all private data of other employees.',
-    'employee_new_hr_desc' => 'Have access to most features, including reading and writing private information, but can\'t manage the account itself.',
+    'employee_new_hr_desc' => 'Have access to most features, including reading and writing private information, but can’t manage the account itself.',
     'employee_new_user_desc' => 'Can see all teams and employees, but can not manage the account or read private information.',
     'employee_new_send_email' => 'Send an email to this person with a link to setup the account.',
     'employee_new_send_email_optional' => 'This is optional - you will be able to invite this person later.',
@@ -85,7 +85,7 @@
     'team_view_audit_logs' => 'View audit logs',
     'team_confirm_deletion' => 'Are you sure you want to delete the team called {name}? This will remove all the team members from this team, as well as delete all the notes, news and associated data with it.',
     'employee_statuses_title' => 'All the employee statuses in {company}',
-    'employee_statuses_number_positions' => '{company} has one employee status. | {company} has {count} employee statuses.',
+    'employee_statuses_number_positions' => '{company} has one employee status.|{company} has {count} employee statuses.',
     'employee_statuses_cta' => 'Add an employee status',
     'employee_statuses_blank' => 'Statuses are terms that describe the employment status of an employee. Like full-time, part-time, etc…',
     'employee_statuses_new_title' => 'Status name',
@@ -98,7 +98,7 @@
     'employee_statuses_internal' => 'internal',
     'employee_statuses_external' => 'external',
     'positions_title' => 'All the positions used in {company}',
-    'positions_number_positions' => '{company} has one position. | {company} has {count} positions.',
+    'positions_number_positions' => '{company} has one position.|{company} has {count} positions.',
     'positions_cta' => 'Add a position',
     'positions_blank' => 'Positions are terms that describe in a few words what an employee does. Like Marketing Coordinator for example.',
     'position_new_title' => 'Position name',
@@ -107,7 +107,7 @@
     'position_success_destroy' => 'The position has been destroyed',
     'flows_title' => 'All the flows in {company}',
     'flows_cta' => 'Create a flow',
-    'flows_number_flows' => '{company} has one flow. | {company} has {count} flows.',
+    'flows_number_flows' => '{company} has one flow.|{company} has {count} flows.',
     'flows_blank' => 'Flows lets you define how the system should react when something in the company happens. It’s… quite powerful.',
     'flow_new_flow' => 'What is the name of the flow?',
     'flow_new_help' => 'This is an internal name, only used to identify the flow.',
@@ -490,7 +490,7 @@
     'question_deactivate_success' => 'The question is now deactivated',
     'question_status_active' => 'active',
     'question_status_inactive' => 'inactive',
-    'question_number_of_answers' => '{count} answer | {count} answers',
+    'question_number_of_answers' => '{count} answer|{count} answers',
     'hardware_title' => 'Manage company hardware',
     'hardware_blank' => 'Here you can keep track of all the hardware your company buys, and whose employee has what.',
     'hardware_description' => 'This is all the hardware that you have in your company.',

resources/lang/en/auth.php

@@ -5,7 +5,7 @@
     'register_salute' => 'Hi friend!',
     'register_title' => 'You are one step away from being happier at work.',
     'register_email' => 'Your email address',
-    'register_email_help' => 'We\'ll never spam. You\'ll receive one email to confirm your email address once you sign up, and won\'t be added to any nasty email marketing campaigns, nor will you receive emails from a sales team.',
+    'register_email_help' => 'We’ll never spam. You’ll receive one email to confirm your email address once you sign up, and won’t be added to any nasty email marketing campaigns, nor will you receive emails from a sales team.',
     'register_password' => 'Enter a hard-to-guess password',
     'register_terms' => 'I agree to the beta <a href="{url}">terms of use</a>.',
     'register_cta' => 'Create your account →',
@@ -33,7 +33,7 @@
     'invitation_unlogged_create_account_instead' => 'Login with an existing account instead.',
     'invitation_unlogged_login_instead' => 'Create a new account instead.',
     'invitation_unlogged_choice_account_title' => 'Create an account',
-    'invitation_unlogged_choice_account_desc' => 'Use this option if you don\'t have an account',
+    'invitation_unlogged_choice_account_desc' => 'Use this option if you don’t have an account',
     'invitation_unlogged_choice_login_title' => 'Use an existing OfficeLife account',
     'invitation_unlogged_choice_login_desc' => 'Use this option if you already have an account on OfficeLife',
     'invitation_unlogged_choice_account' => 'Create an account',

resources/lang/en/employee.php

@@ -40,12 +40,12 @@
     'hierarchy_blank' => 'Add a manager or a direct report to position this employee within the company.',
     'hierarchy_modal_add_manager' => 'Add a manager',
     'hierarchy_modal_add_direct_report' => 'Add a direct report',
-    'hierarchy_modal_add_manager_search' => 'Assign an employee as {name}\'s manager',
-    'hierarchy_modal_add_direct_report_search' => 'Assign an employee as {name}\'s direct report',
+    'hierarchy_modal_add_manager_search' => 'Assign an employee as {name}’s manager',
+    'hierarchy_modal_add_direct_report_search' => 'Assign an employee as {name}’s direct report',
     'hierarchy_search_placeholder' => 'Enter the first letters of the name',
     'hierarchy_search_results' => 'Search results:',
-    'hierarchy_list_manager_title' => 'Manager | Managers',
-    'hierarchy_list_direct_report_title' => 'Direct report | Direct reports',
+    'hierarchy_list_manager_title' => 'Manager|Managers',
+    'hierarchy_list_direct_report_title' => 'Direct report|Direct reports',
     'hierarchy_modal_add_manager_success' => 'The manager has been set',
     'hierarchy_modal_add_direct_report_success' => 'The direct report has been set',
     'hierarchy_modal_remove_manager_success' => 'The manager has been unassigned',

resources/views/app.blade.php

@@ -7,7 +7,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <base href="{{ url('/') }}/" />
   <link rel="stylesheet" href="{{ asset(mix('css/app.css')) }}">
-  <script src="{{ asset(mix('js/app.js')) }}" defer></script>
+  <script id="app-js" src="{{ asset(mix('js/app.js')) }}" defer></script>
   <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('img/favicon.png') }}" />
   <title>@yield('title', config('app.name'))</title>