migrated new vue component system to vue native translations

vue/src/components/AddRecipeToBook.vue

@@ -1,15 +1,15 @@
 <template>
 
   <div>
-    <b-modal class="modal" id="id_modal_add_book" :title="_('Add to Book')" :ok-title="_('Add')"
-             :cancel-title="_('Close')" @ok="addToBook()">
+    <b-modal class="modal" id="id_modal_add_book" :title="$t('Add_to_Book')" :ok-title="$t('Add')"
+             :cancel-title="$t('Close')" @ok="addToBook()">
 
       <multiselect
           v-model="selected_book"
           :options="books"
 
           :preserve-search="true"
-          :placeholder="_('Select Book')"
+          :placeholder="$t('Select_Book')"
           label="name"
           track-by="id"
           id="id_books"
@@ -23,7 +23,6 @@
 
 <script>
 
-import {GettextMixin} from "@/utils/utils";
 import Multiselect from 'vue-multiselect'
 
 import moment from 'moment'
@@ -38,9 +37,6 @@ Vue.use(BootstrapVue)
 
 export default {
   name: 'AddRecipeToBook',
-  mixins: [
-    GettextMixin,
-  ],
   components: {
     Multiselect
   },

vue/src/components/CookLog.vue

@@ -1,21 +1,21 @@
 <template>
 
   <div>
-    <b-modal class="modal" id="id_modal_cook_log" :title="_('Log Recipe Cooking')" :ok-title="_('Save')"
-             :cancel-title="_('Close')" @ok="logCook()">
+    <b-modal class="modal" id="id_modal_cook_log" :title="$t('Log_Recipe_Cooking')" :ok-title="$t('Save')"
+             :cancel-title="$t('Close')" @ok="logCook()">
 
-      <p>{{ _('All fields are optional and can be left empty.') }}</p>
+      <p>{{ $t('all_fields_optional') }}</p>
       <form>
 
-        <label for="id_log_servings">{{ _('Servings') }}</label>
+        <label for="id_log_servings">{{ $t('Servings') }}</label>
         <input class="form-control" type="number" id="id_log_servings" v-model="logObject.servings">
 
-        <label style="margin-top: 2vh">{{ _('Rating') }} - <span
+        <label style="margin-top: 2vh">{{ $t('Rating') }} - <span
             id="id_rating_show">{{ logObject.rating }}/5</span></label>
 
         <b-form-rating v-model="logObject.rating"></b-form-rating>
 
-        <label for="id_date" style="margin-top: 2vh">{{ _('Date') }}</label>
+        <label for="id_date" style="margin-top: 2vh">{{ $t('Date') }}</label>
         <input type="datetime-local" id="id_date" class="form-control" v-model="logObject.created_at">
       </form>
     </b-modal>
@@ -24,8 +24,6 @@
 
 <script>
 
-import {GettextMixin} from "@/utils/utils";
-
 import moment from 'moment'
 
 Vue.prototype.moment = moment
@@ -38,9 +36,6 @@ Vue.use(BootstrapVue)
 
 export default {
   name: 'CookLog',
-  mixins: [
-    GettextMixin,
-  ],
   props: {
     recipe: Object,
   },

vue/src/components/ImageViewer.vue

@@ -1,21 +1,18 @@
 <template>
 
   <div style="text-align: center">
-    <b-img :src="pdfUrl"  :alt="_('External Recipe Image')"></b-img>
+    <b-img :src="pdfUrl"  :alt="$t('External_Recipe_Image')"></b-img>
   </div>
 
 </template>
 
 <script>
 
-import {GettextMixin, resolveDjangoUrl} from "@/utils/utils";
+import {resolveDjangoUrl} from "@/utils/utils";
 
 
 export default {
   name: 'ImageViewer',
-  mixins: [
-    GettextMixin,
-  ],
   props: {
     recipe: Object,
   },

vue/src/components/Nutrition.vue

@@ -6,13 +6,13 @@
       <div class="card-body">
         <div class="row">
           <div class="col-12">
-            <h4 class="card-title"><i class="fas fa-carrot"></i> {{ _('Nutrition') }}</h4>
+            <h4 class="card-title"><i class="fas fa-carrot"></i> {{ $t('Nutrition') }}</h4>
           </div>
         </div>
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-fire fa-fw text-primary"></i> {{ _('Calories') }}
+            <i class="fas fa-fire fa-fw text-primary"></i> {{ $t('Calories') }}
           </div>
           <div class="col-6">
             <span v-html="calculateAmount(recipe.nutrition.calories)"></span> kcal
@@ -21,7 +21,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-bread-slice fa-fw text-primary"></i> {{ _('Carbohydrates') }}
+            <i class="fas fa-bread-slice fa-fw text-primary"></i> {{ $t('Carbohydrates') }}
           </div>
           <div class="col-6">
             <span v-html="calculateAmount(recipe.nutrition.carbohydrates)"></span>  g
@@ -30,7 +30,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-cheese fa-fw text-primary"></i> {{ _('Fats') }}
+            <i class="fas fa-cheese fa-fw text-primary"></i> {{ $t('Fats') }}
           </div>
           <div class="col-6">
             <span v-html="calculateAmount(recipe.nutrition.fats)"></span> g
@@ -39,7 +39,7 @@
 
         <div class="row">
           <div class="col-6">
-            <i class="fas fa-drumstick-bite fa-fw text-primary"></i> {{ _('Proteins') }}
+            <i class="fas fa-drumstick-bite fa-fw text-primary"></i> {{ $t('Proteins') }}
           </div>
           <div class="col-6">
             <span v-html="calculateAmount(recipe.nutrition.proteins)"></span> g
@@ -54,14 +54,10 @@
 
 <script>
 
-import {GettextMixin} from "@/utils/utils";
 import {calculateAmount} from "@/utils/utils";
 
 export default {
   name: 'Nutrition',
-  mixins: [
-    GettextMixin,
-  ],
   props: {
     recipe: Object,
     ingredient_factor: Number,

vue/src/components/RecipeContextMenu.vue

@@ -10,39 +10,39 @@
       <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
 
         <a class="dropdown-item" :href="resolveDjangoUrl('edit_recipe', recipe.id)"><i
-            class="fas fa-pencil-alt fa-fw"></i> {{ _('Edit') }}</a>
+            class="fas fa-pencil-alt fa-fw"></i> {{ $t('Edit') }}</a>
 
         <a class="dropdown-item" :href="resolveDjangoUrl('edit_convert_recipe', recipe.id)" v-if="!recipe.internal"><i
-            class="fas fa-exchange-alt fa-fw"></i> {{ _('Convert to internal recipe') }}</a>
+            class="fas fa-exchange-alt fa-fw"></i> {{ $t('convert_internal') }}</a>
 
         <button class="dropdown-item" @click="$bvModal.show('id_modal_add_book')">
-          <i class="fas fa-bookmark fa-fw"></i> {{ _('Add to Book') }}
+          <i class="fas fa-bookmark fa-fw"></i> {{ $t('Add_to_Book') }}
         </button>
 
         <a class="dropdown-item" :href="`${resolveDjangoUrl('view_shopping') }?r=[${recipe.id},${servings_value}]`"
            v-if="recipe.internal" target="_blank" rel="noopener noreferrer">
-          <i class="fas fa-shopping-cart fa-fw"></i> {{ _('Add to Shopping') }}
+          <i class="fas fa-shopping-cart fa-fw"></i> {{ $t('Add_to_Shopping') }}
         </a>
 
         <a class="dropdown-item" :href="`${resolveDjangoUrl('new_meal_plan') }?recipe=${recipe.id}`"
            target="_blank" rel="noopener noreferrer"><i
-            class="fas fa-calendar fa-fw"></i> {{ _('Add to Plan') }}
+            class="fas fa-calendar fa-fw"></i> {{ $t('Add_to_Plan') }}
         </a>
 
 
         <button class="dropdown-item" @click="$bvModal.show('id_modal_cook_log')"><i
-            class="fas fa-clipboard-list fa-fw"></i> {{ _('Log Cooking') }}
+            class="fas fa-clipboard-list fa-fw"></i> {{ $t('Log_Cooking') }}
         </button>
 
         <button class="dropdown-item" onclick="window.print()"><i
-            class="fas fa-print fa-fw"></i> {{ _('Print') }}
+            class="fas fa-print fa-fw"></i> {{ $t('Print') }}
         </button>
 
         <a class="dropdown-item" :href="resolveDjangoUrl('view_export') + '?r=' + recipe.id" target="_blank"
-           rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ _('Export') }}</a>
+           rel="noopener noreferrer"><i class="fas fa-file-export fa-fw"></i> {{ $t('Export') }}</a>
 
         <a class="dropdown-item" :href="resolveDjangoUrl('new_share_link', recipe.id)" target="_blank"
-           rel="noopener noreferrer" v-if="recipe.internal"><i class="fas fa-share-alt fa-fw"></i> {{ _('Share') }}</a>
+           rel="noopener noreferrer" v-if="recipe.internal"><i class="fas fa-share-alt fa-fw"></i> {{ $t('Share') }}</a>
       </div>
 
 
@@ -54,14 +54,13 @@
 
 <script>
 
-import {GettextMixin, ResolveUrlMixin} from "@/utils/utils";
+import {ResolveUrlMixin} from "@/utils/utils";
 import CookLog from "@/components/CookLog";
 
 export default {
   name: 'RecipeContextMenu',
   mixins: [
-    ResolveUrlMixin,
-    GettextMixin
+    ResolveUrlMixin
   ],
   components: {
     CookLog

vue/src/components/Step.vue

@@ -8,9 +8,9 @@
         <div class="col col-md-8">
           <h5 class="text-primary">
             <template v-if="step.name">{{ step.name }}</template>
-            <template v-else>{{ _('Step') }} {{ index + 1 }}</template>
+            <template v-else>{{ $t('Step') }} {{ index + 1 }}</template>
             <small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fas fa-user-clock"></i>
-              {{ step.time }} {{ _('min') }}
+              {{ step.time }} {{ $t('min') }}
 
             </small>
             <small v-if="start_time !== ''" class="d-print-none">
@@ -51,10 +51,10 @@
         <div class="col-md-8 offset-md-2" style="text-align: center">
           <h4 class="text-primary">
             <template v-if="step.name">{{ step.name }}</template>
-            <template v-else>{{ _('Step') }} {{ index + 1 }}</template>
+            <template v-else>{{ $t('Step') }} {{ index + 1 }}</template>
           </h4>
           <span style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i class="fa fa-stopwatch"></i>
-              {{ step.time }} {{ _('min') }}</span>
+              {{ step.time }} {{ $t('min') }}</span>
           <b-link class="d-print-none" :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#" v-if="start_time !== ''">
             {{ moment(start_time).add(step.time_offset, 'minutes').format('HH:mm') }}
           </b-link>
@@ -83,7 +83,7 @@
           triggers="click"
           placement="bottom"
           :ref="`id_reactive_popover_${step.id}`"
-          :title="_('Step start time')">
+          :title="$t('Step start time')">
         <div>
           <b-form-group
               label="Time"