Merge branch 'master' into feat/state_mileage_option

ui/src/components/createQuickEntry.vue

@@ -20,7 +20,7 @@ export default {
         }
       } else {
         if (this.file == null) {
-          return 'Upload Photo'
+          return this.$t('uploadphoto')
         } else {
           return ''
         }
@@ -39,7 +39,7 @@ export default {
         .post(`/api/quickEntries`, formData)
         .then((data) => {
           this.$buefy.toast.open({
-            message: 'Quick Entry Created Successfully',
+            message: this.$t('quickentrycreatedsuccessfully'),
             type: 'is-success',
             duration: 3000,
           })
@@ -68,9 +68,9 @@ export default {
   <div class="section box">
     <div class="columns">
       <div class="column is-two-thirds">
-        <p class="title">Quick Entry</p>
+        <p class="title">{{ $tc('quickentry',1) }}</p>
         <p class="subtitle"
-          >Take a pic of the invoice or the fuel pump display to make an entry later.</p
+          >{{ $t('quickentrydesc') }}</p
         ></div
       >
       <div class="column is-one-third is-flex is-align-content-center">
@@ -99,10 +99,10 @@ export default {
                 native-type="submit"
                 :disabled="tryingToCreate"
                 type="is-primary"
-                value="Upload File"
+                :value="this.$t('uploadfile')"
                 class="control"
               >
-                Upload File
+                {{ $t('uploadfile') }}
               </b-button>
             </div></div
           >

ui/src/components/nav-bar.vue

@@ -10,42 +10,42 @@ export default {
       persistentNavRoutes: [
         {
           name: 'home',
-          title: 'Home',
+          title: this.$t('menu.home'),
         },
       ],
       loggedInNavRoutes: [
         {
           name: 'quickEntries',
-          title: () => 'Quick Entries',
+          title: () => this.$t('menu.quickentries'),
           badge: () => this.unprocessedQuickEntries.length,
         },
         {
           name: 'import',
-          title: () => 'Import',
+          title: () => this.$t('menu.import'),
         },
         {
           name: 'settings',
-          title: 'Settings',
+          title: this.$t('menu.settings'),
         },
         {
           name: 'logout',
-          title: 'Log out',
+          title: this.$t('menu.logout'),
         },
       ],
       loggedOutNavRoutes: [
         {
           name: 'login',
-          title: 'Log in',
+          title: this.$t('menu.login'),
         },
       ],
       adminNavRoutes: [
         {
           name: 'site-settings',
-          title: 'Site Settings',
+          title: this.$t('menu.sitesettings'),
         },
         {
           name: 'users',
-          title: 'Users',
+          title: this.$t('menu.users'),
         },
       ],
     }
@@ -72,7 +72,7 @@ export default {
         <NavBarRoutes :routes="persistentNavRoutes" />
         <NavBarRoutes v-if="loggedIn" :routes="loggedInNavRoutes" />
         <NavBarRoutes v-else :routes="loggedOutNavRoutes" />
-        <b-navbar-dropdown v-if="loggedIn && isAdmin" label="Admin">
+        <b-navbar-dropdown v-if="loggedIn && isAdmin" :label="$t('menu.admin')">
           <NavBarRoutes :routes="adminNavRoutes" />
         </b-navbar-dropdown>
       </template>

ui/src/components/quickEntryDisplay.vue

@@ -50,12 +50,12 @@ export default {
       <b-select
         v-if="unprocessedQuickEntries.length"
         v-model="quickEntry"
-        placeholder="Refer quick entry"
+        :placeholder="this.$t('referquickentry')"
         expanded
         @input="showQuickEntry($event)"
       >
         <option v-for="option in unprocessedQuickEntries" :key="option.id" :value="option">
-          Taken: {{ parseAndFormatDateTime(option.createdAt) }}
+          {{ $t('created') }}: {{ parseAndFormatDateTime(option.createdAt) }}
         </option>
       </b-select>
       <p class="control">

ui/src/components/shareVehicle.vue

@@ -55,7 +55,7 @@ export default {
         return
       }
       this.$buefy.dialog.confirm({
-        title: 'Transfer Vehicle',
+        title: this.$t('transfervehicle'),
         message: 'Are you sure you want to do this? You will lose ownership and all editing rights if you confirm.',
         cancelText: 'Cancel',
         confirmText: 'Go Ahead',
@@ -90,7 +90,7 @@ export default {
 
 <template>
   <div class="box" style="max-width:600px">
-    <h1 class="subtitle">Share {{ vehicle.nickname }}</h1>
+    <h1 class="subtitle">{{ $t('share') }} {{ vehicle.nickname }}</h1>
     <section>
       <div class="columns is-mobile" v-for="model in models" :key="model.id">
         <div class="column is-one-third">
@@ -101,7 +101,7 @@ export default {
           </b-field> </div
         ><div class="column is-three-quarters">
           <b-field>
-            <b-button v-if="model.isShared && !model.isOwner" type="is-primary is-small" @click="transferVehicle(model)">Make Owner</b-button>
+            <b-button v-if="model.isShared && !model.isOwner" type="is-primary is-small" @click="transferVehicle(model)">{{ $t('makeowner') }}</b-button>
           </b-field></div
         ></div
       >

ui/src/components/statsWidget.vue

@@ -1,6 +1,6 @@
 <script>
 import { addDays, addMonths } from 'date-fns'
-import currencyFormtter from 'currency-formatter'
+import currencyFormatter from 'currency-formatter'
 import { mapState } from 'vuex'
 
 import axios from 'axios'
@@ -14,12 +14,12 @@ export default {
   data: function() {
     return {
       dateRangeOptions: [
-        { label: 'This week', value: 'this_week' },
-        { label: 'This month', value: 'this_month' },
-        { label: 'Past 30 days', value: 'past_30_days' },
-        { label: 'Past 3 months', value: 'past_3_months' },
-        { label: 'This year', value: 'this_year' },
-        { label: 'All Time', value: 'all_time' },
+        { label: this.$t('thisweek'), value: 'this_week' },
+        { label: this.$t('thismonth'), value: 'this_month' },
+        { label: this.$tc('pastxdays', 30), value: 'past_30_days' },
+        { label: this.$tc('pastxmonths', 3), value: 'past_3_months' },
+        { label: this.$t('thisyear'), value: 'this_year' },
+        { label: this.$t('alltime'), value: 'all_time' },
       ],
       dateRangeOption: 'past_30_days',
       stats: [],
@@ -32,15 +32,15 @@ export default {
         return [
           [
             {
-              label: 'Total Expenditure',
+              label: this.$t('totalexpenses'),
               value: this.formatCurrency(0, this.user.currency),
             },
             {
-              label: 'Fillup Costs',
+              label: this.$t('fillupcost'),
               value: `${this.formatCurrency(0, this.user.currency)} (0)`,
             },
             {
-              label: 'Other Expenses',
+              label: this.$t('otherexpenses'),
               value: `${this.formatCurrency(0, this.user.currency)} (0)`,
             },
           ],
@@ -49,15 +49,15 @@ export default {
       return this.stats.map((x) => {
         return [
           {
-            label: 'Total Expenditure',
+            label: this.$t('totalexpenses'),
             value: this.formatCurrency(x.expenditureTotal, x.currency),
           },
           {
-            label: 'Fillup Costs',
+            label: this.$t('fillupcost'),
             value: `${this.formatCurrency(x.expenditureFillups, x.currency)} (${x.countFillups})`,
           },
           {
-            label: 'Other Expenses',
+            label: this.$t('otherexpenses'),
             value: `${this.formatCurrency(x.expenditureExpenses, x.currency)} (${x.countExpenses})`,
           },
         ]
@@ -80,7 +80,7 @@ export default {
       if (!currencyCode) {
         currencyCode = this.me.currency
       }
-      return currencyFormtter.format(number, { code: currencyCode })
+      return currencyFormatter.format(number, { code: currencyCode })
     },
     getStats() {
       axios
@@ -129,7 +129,7 @@ export default {
 <template>
   <div>
     <div class="columns">
-      <div class="column" :class="isMobile ? 'has-text-centered' : ''"> <h1 class="title">Stats</h1></div>
+      <div class="column" :class="isMobile ? 'has-text-centered' : ''"> <h1 class="title">{{ $t('statistics') }}</h1></div>
       <div class="column">
         <b-select v-model="dateRangeOption" class="is-pulled-right is-medium">
           <option v-for="option in dateRangeOptions" :key="option.value" :value="option.value">