Added multilanguage for publishers

frontend/src/components/Authors.vue

@@ -64,8 +64,7 @@
           }"
         >
         </paginate-links>
-        <div v-if="$refs.paginator" v-lang.general.searchResultCount="$refs.paginator.pageItemsCount">
-        </div>
+        <div v-if="$refs.paginator" v-lang.general.searchResultCount="$refs.paginator.pageItemsCount"></div>
       </div>
     </div>
     <modal
@@ -93,7 +92,7 @@ export default {
       gridColumns: [],
       gridButtons: [
         {
-          text: 'Delete',
+          text: '',
           icon: 'trash',
           action: this.DeleteAuthor,
           css: 'ui red icon button'

frontend/src/components/Home.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
-    <p v-if="!user.authenticated">not logged in. <router-link to="/login">Login</router-link></p>
+    <p v-if="!user.authenticated">
+      <router-link to="/login" v-lang.login.title></router-link>
+    </p>
   </div>
 </template>
 

frontend/src/components/PublisherOverview.vue

@@ -4,13 +4,11 @@
 
     <div class="ui info message" v-if="loading">
       <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      Loading...
+      <span v-lang.general.loading></span>
     </div>
 
     <div class="ui negative message" v-if="error">
-      <div class="header">
-        An error occured.
-      </div>
+      <div class="header" v-lang.genral.error></div>
       {{ error.message }}
       <p v-if="error.response.data">
         {{ error.response.data.Message }}
@@ -21,14 +19,12 @@
 
       <router-link :to="{ name: 'publisher-edit', params: { id: publisherID} }" class="ui teal labeled icon button" style="float: right;">
         <i class="edit icon"></i>
-        Edit
+        <span v-lang.general.edit></span>
       </router-link>
 
       <div class="ui list">
         <div class="item">
-          <div class="header">
-            Name
-          </div>
+          <div class="header" v-lang.general.name></div>
           {{ publisher.Name }}
         </div>
       </div>

frontend/src/components/Publishers.vue

@@ -1,26 +1,22 @@
 <template>
   <div v-if="user.authenticated">
-    <h1>Publishers overview</h1>
+    <h1 v-lang.publishers.title></h1>
 
     <div class="ui info message" v-if="loading">
       <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      Loading...
+      <span v-lang.general.loading></span>
     </div>
 
     <div class="ui negative message" v-if="error">
-      <div class="header">
-        An error occured.
-      </div>
+      <div class="header" v-lang.genral.error></div>
       {{ error.message }}
       <p v-if="error.response.data">
-      {{ error.response.data.Message }}
+        {{ error.response.data.Message }}
       </p>
     </div>
 
     <div class="ui positive message" v-if="success">
-      <div class="header">
-        Success
-      </div>
+      <div class="header" v-lang.general.success></div>
       {{ success }}
     </div>
 
@@ -28,17 +24,17 @@
 
       <router-link to="/publishers/add" class="ui green labeled icon button" style="float: right;">
         <i class="plus icon"></i>
-        Add a new publisher
+        <span v-lang.publishers.newPublisher></span>
       </router-link>
 
       <button @click="loadPublishers()" class="ui teal labeled icon button" style="float: right;">
         <i class="refresh icon"></i>
-        Refresh
+        <span v-lang.general.refresh></span>
       </button>
 
       <form id="search">
         <div class="ui icon input">
-          <input placeholder="Search for anything..." type="text" v-model="searchQuery" v-focus>
+          <input :placeholder="langGeneral.search" type="text" v-model="searchQuery" v-focus>
           <i class="search icon"></i>
         </div>
       </form>
@@ -68,17 +64,15 @@
           }"
         >
         </paginate-links>
-        <div v-if="$refs.paginator">
-          Viewing {{$refs.paginator.pageItemsCount}} results
-        </div>
+        <div v-if="$refs.paginator" v-lang.general.searchResultCount="$refs.paginator.pageItemsCount"></div>
       </div>
     </div>
     <modal
       v-if="showModal"
       @close="showModal = false"
       v-on:submit="deleteBtnSuccess()">
-      <span slot="header">Delete this publisher</span>
-      <p slot="text">Are you sure you want to delete this publisher? This cannot be undone!</p>
+      <span slot="header" v-lang.publisher.deleteHeader></span>
+      <p slot="text" v-lang.publisher.deleteText></p>
     </modal>
   </div>
 </template>
@@ -95,10 +89,10 @@ export default {
       user: auth.user,
       publishers: [],
       searchQuery: '',
-      gridColumns: ['Name'],
+      gridColumns: [],
       gridButtons: [
         {
-          text: 'Delete',
+          text: '',
           icon: 'trash',
           action: this.DeletePublisher,
           css: 'ui red icon button'
@@ -120,6 +114,9 @@ export default {
   },
   created () {
     this.loadPublishers()
+
+    this.gridButtons[0].text = this.translate('general').delete
+    this.gridColumns = [this.translate('general').name]
   },
   watch: {
     // call again the method if the route changes
@@ -141,6 +138,9 @@ export default {
         })
       }
       return data
+    },
+    langGeneral () {
+      return this.translate('general')
     }
   },
   methods: {
@@ -183,7 +183,7 @@ export default {
           .then(response => {
             console.log(response)
             if (response.status === 200 && response.data.Message === 'success') {
-              this.success = 'The publisher was deleted successfully.'
+              this.success = this.translate('publishers').deleteSuccess
               this.loadPublishers()
             }
           })

frontend/src/components/PublishersAddEdit.vue

@@ -1,28 +1,24 @@
 <template>
   <div>
     <div class="ui negative message" v-if="error">
-      <div class="header">
-        An error occured.
-      </div>
+      <div class="header" v-lang.genral.error></div>
       {{ error.message }}
-      <template v-if="error.response">
-        <br/>{{ error.response.data.Message }}
-      </template>
+      <p v-if="error.response.data">
+        {{ error.response.data.Message }}
+      </p>
     </div>
 
     <div class="ui positive message" v-if="success">
-      <div class="header">
-        Success
-      </div>
+      <div class="header" v-lang.general.success></div>
       {{ success }}
     </div>
 
     <form class="ui form" v-bind:class="{ loading: loading }" v-if="!success" @submit.prevent="insertOrUpdatePublisher">
       <div class="field">
-        <label>Name</label>
-        <input name="Name" placeholder="Name" type="text" v-model="publisher.Name" required v-focus>
+        <label v-lang.general.name></label>
+        <input name="Name" :placeholder="langGeneral.name" type="text" v-model="publisher.Name" required v-focus>
       </div>
-      <button class="ui blue button" type="submit">Submit</button>
+      <button class="ui blue button" type="submit" v-lang.general.submit></button>
     </form>
   </div>
 </template>
@@ -60,10 +56,15 @@
       }
       this.loading = false
     },
+    computed: {
+      langGeneral () {
+        return this.translate('general')
+      }
+    },
     methods: {
       insertOrUpdatePublisher: function () {
         if (this.publisher.Lastname === '') {
-          this.error = {message: 'Please provide name.'}
+          this.error = {message: this.translate('publishers').errorNoName}
         } else {
           this.loading = true
 
@@ -73,7 +74,7 @@
             HTTP.post('publishers/' + this.publisher.ID, {publisher: this.publisher})
               .then(response => {
                 this.loading = false
-                this.success = 'The publisher was successfully updated!'
+                this.success = this.translate('publishers').updatedSuccess
                 this.error = ''
               })
               .catch(e => {
@@ -84,7 +85,7 @@
             HTTP.put('publishers', {publisher: this.publisher})
               .then(response => {
                 this.loading = false
-                this.success = 'The publisher was successfully inserted!'
+                this.success = this.translate('publishers').insertedSuccess
                 this.error = ''
               })
               .catch(e => {

frontend/src/lang/en.js

@@ -62,5 +62,15 @@ export default {
     deleteSuccess: 'The author was deleted successfully.',
     forename: 'Forename',
     lastname: 'Lastname'
+  },
+  publishers: {
+    title: 'Publishers overview',
+    newPublisher: 'Add a new publisher',
+    deleteHeader: 'Delete this publisher',
+    deleteText: 'Are you sure you want to delete this publisher? <b>This cannot be undone!</b>',
+    deleteSuccess: 'The publisher was deleted successfully.',
+    errorNoName: 'Please provide a name.',
+    updatedSuccess: 'The publisher was successfully updated!'
+    insertedSuccess: 'The publisher was successfully inserted!'
   }
 }