Added multilanguage for books

frontend/src/auth/index.js

@@ -36,6 +36,9 @@ export default {
         context.loading = false
         if (e.response) {
           context.error = e.response.data.Message
+          if (e.response.status === 401) {
+            context.error = context.translate('login').wrong
+          }
         }
       })
   },

frontend/src/components/BookOverview.vue

@@ -4,12 +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 class="header" v-lang.general.error>
       </div>
       {{ error.message }}
       <p v-if="error.response.data">
@@ -21,46 +20,34 @@
 
       <router-link :to="{ name: 'book-edit', params: { id: bookID} }" 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">
-            ISBN
-          </div>
+          <div class="header" v-lang.books.gridColumns.isbn></div>
           {{ book.Isbn }}
         </div>
         <div class="item">
-          <div class="header">
-            Year
-          </div>
+          <div class="header" v-lang.books.gridColumns.year></div>
           {{ book.Year }}
         </div>
         <div class="item">
-          <div class="header">
-            Price
-          </div>
+          <div class="header" v-lang.books.gridColumns.price></div>
           {{ book.Price }}
         </div>
         <div class="item">
-          <div class="header">
-            Status
-          </div>
+          <div class="header" v-lang.books.gridColumns.status></div>
           {{ book.Status }}
         </div>
         <div class="item">
-          <div class="header">
-            Publisher
-          </div>
+          <div class="header" v-lang.books.gridColumns.publisher></div>
           <router-link :to="{ name: 'publisher-show', params: { id: book.PublisherFull.ID} }">
             {{ book.PublisherFull.Name }}
           </router-link>
         </div>
         <div class="item">
-          <div class="header">
-            Authors
-          </div>
+          <div class="header" v-lang.books.gridColumns.authors></div>
           <template v-for="(author, index) in book.Authors">
             <router-link :to="{ name: 'author-show', params: { id: author.ID} }">
               {{ author.Lastname }} {{ author.Lastname }}

frontend/src/components/Books.vue

@@ -1,16 +1,14 @@
 <template>
   <div v-if="user.authenticated">
-    <h1>Books Overview</h1>
+    <h1 v-lang.books.title></h1>
 
     <div class="ui info message" v-if="loading">
       <icon name="refresh" spin></icon>&nbsp;&nbsp;
-      Loading...
+      <template v-lang.general.loading></template>
     </div>
 
     <div class="ui negative message" v-if="error">
-      <div class="header">
-        An error occured.
-      </div>
+      <div class="header" v-lang.general.error></div>
       {{ error.message }}
       <p v-if="error.response.data">
       {{ error.response.data.Message }}
@@ -18,9 +16,7 @@
     </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="/books/add" class="ui green labeled icon button" style="float: right;">
         <i class="plus icon"></i>
-        Add a book
+        <span v-lang.books.add></span>
       </router-link>
 
       <button @click="loadBooks()" 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 v-bind:placeholder="langGeneral.search" type="text" v-model="searchQuery" v-focus>
           <i class="search icon"></i>
         </div>
       </form>
@@ -68,8 +64,7 @@
           }"
         >
         </paginate-links>
-        <div v-if="$refs.paginator">
-          Viewing {{$refs.paginator.pageItemsCount}} results
+        <div v-if="$refs.paginator" v-lang.general.searchResultCount="$refs.paginator.pageItemsCount">
         </div>
       </div>
     </div>
@@ -77,8 +72,8 @@
       v-if="showModal"
       @close="showModal = false"
       v-on:submit="deleteBtnSuccess()">
-      <span slot="header">Delete this book</span>
-      <p slot="text">Are you sure you want to delete this book? This cannot be undone!</p>
+      <span slot="header" v-lang.books.deleteHeader></span>
+      <p slot="text" v-lang.books.deleteMsg></p>
     </modal>
   </div>
 </template>
@@ -95,10 +90,10 @@ export default {
       user: auth.user,
       books: [],
       searchQuery: '',
-      gridColumns: ['Title', 'ISBN', 'Year', 'Price', 'Author', 'Publisher', 'Quantity', 'Status'],
+      gridColumns: [],
       gridButtons: [
         {
-          text: 'Delete',
+          text: '',
           icon: 'trash',
           action: this.deleteBook,
           css: 'ui red icon button'
@@ -121,6 +116,20 @@ export default {
   created () {
     this.loadStatus()
     this.loadBooks()
+
+    // Set the delete button description
+    this.gridButtons[0].text = this.translate('general').delete
+    let gc = this.translate('books').gridColumns
+    this.gridColumns = [
+      gc.title,
+      gc.isbn,
+      gc.year,
+      gc.price,
+      gc.authors,
+      gc.publisher,
+      gc.quantity,
+      gc.status
+    ]
   },
   watch: {
     // call again the method if the route changes
@@ -142,6 +151,12 @@ export default {
         })
       }
       return data
+    },
+    langGeneral () {
+      return this.translate('general')
+    },
+    langBook () {
+      return this.translate('books')
     }
   },
   methods: {
@@ -218,9 +233,8 @@ export default {
       this.$on('delete-submit', function () {
         HTTP.delete('books/' + obj.ID.content)
           .then(response => {
-            console.log(response)
             if (response.status === 200 && response.data.Message === 'success') {
-              this.success = 'The book was deleted successfully.'
+              this.success = this.langBook.deleteSuccess
               this.loadBooks()
             }
           })

frontend/src/components/BooksAddEdit.vue

@@ -1,9 +1,7 @@
 <template>
   <div>
     <div class="ui negative message" v-if="error">
-      <div class="header">
-        An error occured.
-      </div>
+      <div class="header" v-lang.general.error></div>
       {{ error.message }}
       <template v-if="error.response">
         <br/>{{ error.response.data.Message }}
@@ -11,47 +9,45 @@
     </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="insertNewBook">
+    <form class="ui form" :class="{ loading: loading }" v-if="!success" @submit.prevent="insertNewBook">
       <div class="field">
-        <label>Title</label>
-        <input name="title" placeholder="Title" type="text" v-model="book.Title" required v-focus>
+        <label v-lang.books.gridColumns.title></label>
+        <input name="title" :placeholder="langBooks.gridColumns.title" type="text" v-model="book.Title" required v-focus>
       </div>
       <div class="three fields">
         <div class="field">
-          <label>ISBN</label>
-          <input name="isbn" placeholder="ISBN" type="text" v-model="book.Isbn">
+          <label v-lang.books.gridColumns.isbn></label>
+          <input name="isbn" :placeholder="langBooks.gridColumns.isbn" type="text" v-model="book.Isbn">
         </div>
         <div class="field">
-          <label>Price</label>
+          <label v-lang.books.gridColumns.price></label>
           <div class="ui right labeled input ">
-            <input name="price" placeholder="Price" type="number" step="0.01" min="0" v-model.number="book.Price">
+            <input name="price" :placeholder="langBooks.gridColumns.price" type="number" step="0.01" min="0" v-model.number="book.Price">
             <label class="ui label">€</label>
           </div>
         </div>
         <div class="field">
-          <label>Year</label>
-          <input name="year" placeholder="Year" type="number" step="1" min="1800" v-model.number="book.Year">
+          <label v-lang.books.gridColumns.year></label>
+          <input name="year" :placeholder="langBooks.gridColumns.year" type="number" step="1" min="1800" v-model.number="book.Year">
         </div>
         <div class="field">
-          <label>Quantity</label>
-          <input placeholder="Quantity" type="number" min="0" step="1" v-model.number="book.Quantity">
+          <label v-lang.books.gridColumns.quantity></label>
+          <input :placeholder="langBooks.gridColumns.quantity" type="number" min="0" step="1" v-model.number="book.Quantity">
         </div>
       </div>
 
       <div class="field" v-if="!addPublisherForm">
-        <label>Publisher</label>
+        <label v-lang.books.gridColumns.publisher></label>
         <a class="ui green icon button add-publisher-btn" @click="toggleAddPublisher()"><i class="plus icon"></i></a>
         <multiselect
           v-model="book.PublisherFull"
           track-by="ID"
-          label="Name"
-          placeholder="Select one"
+          :label="langGeneral.name"
+          :placeholder="langGeneral.selectOne"
           :options="publishers"
           :searchable="true"
           :allow-empty="false"
@@ -59,9 +55,9 @@
         </multiselect>
       </div>
       <div class="field" v-if="addPublisherForm">
-        <label>Add new Publisher</label>
+        <label v-lang.books.newPublisher></label>
         <a class="ui green icon button add-publisher-btn" @click="toggleAddPublisher()"><i class="list icon"></i></a>
-        <input name="name" placeholder="Publisher Name" type="text" v-model="book.PublisherFull.Name" class="add-publisher">
+        <input name="name" :placeholder="langBooks.newPublisher" type="text" v-model="book.PublisherFull.Name" class="add-publisher">
       </div>
 
       <div class="field">
@@ -69,8 +65,8 @@
         <multiselect
           v-model="book.Authors"
           track-by="ID"
-          label="Name"
-          placeholder="Select one or more"
+          :label="langGeneral.name"
+          :placeholder="langGeneral.selectOneOrMore"
           :options="authors"
           :searchable="true"
           :multiple="true"
@@ -80,18 +76,18 @@
 
       <template v-for="(inputModel, index) in addAuthorForm">
         <div class="field" v-if="addAuthorForm">
-          <label>Add new Author</label>
+          <label v-lang.books.newAuthor></label>
           <a class="ui red icon button add-publisher-btn" @click="removeAuthor(index)"><i class="cancel icon"></i></a>
-          <input name="name" placeholder="Author Name" v-model="newAuthors[inputModel.modelName]" type="text" class="add-publisher">
+          <input name="name" :placeholder="langBooks.gridColumns.authors" v-model="newAuthors[inputModel.modelName]" type="text" class="add-publisher">
         </div>
       </template>
 
       <div class="field">
-        <a class="ui green icon button" @click="addAddAuthor()"><i class="plus icon"></i> Add new Author</a>
+        <a class="ui green icon button" @click="addAddAuthor()"><i class="plus icon"></i> <span v-lang.books.newAuthor></span></a>
       </div>
 
       <div class="inline fields">
-        <label>Status</label>
+        <label v-lang.books.gridColumns.status></label>
         <div class="field" v-for="status in allStatus">
           <div class="ui radio checkbox">
             <input name="status" :id="status.ID" :value="status.ID" class="hidden" type="radio" v-model="book.Status"/>
@@ -100,7 +96,7 @@
         </div>
       </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>
@@ -139,6 +135,14 @@
         allStatus: []
       }
     },
+    computed: {
+      langBooks () {
+        return this.translate('books')
+      },
+      langGeneral () {
+        return this.translate('general')
+      }
+    },
     created () {
       this.loading = true
       this.loadPublishers()

frontend/src/components/Grid.vue

@@ -9,25 +9,23 @@
             
           <icon :name="sortOrders[key] > 0 ? 'sort-asc' : 'sort-desc'"></icon>
         </th>
-        <th v-if="buttons">Action</th>
+        <th v-if="buttons" v-lang.general.action></th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="entry in filteredData">
-        <td v-for="key in columns" v-if="!entry[key].hide">
-          <template v-if="entry[key].content">
-            <template v-if="entry[key].link">
-              <router-link v-bind:to="entry[key].link">{{entry[key].content}}</router-link>
+        <td v-for="item in entry" v-if="!item.hide">
+          <template v-if="item.content">
+            <template v-if="item.link">
+              <router-link v-bind:to="item.link">{{item.content}}</router-link>
             </template>
             <template v-else>
-              {{entry[key].content}}
+              {{item.content}}
             </template>
           </template>
-          <template v-else-if="entry[key].content === ''">
-
-          </template>
+          <template v-else-if="item.content === ''"></template>
           <template v-else>
-            {{entry[key]}}
+            {{item}}
           </template>
         </td>
         <td v-if="buttons">
@@ -67,6 +65,24 @@
         sortOrders: sortOrders
       }
     },
+    created () {
+      let data = this.data
+      let i = 0
+
+      for (const d in data) {
+        let ii = 0
+        for (const dd in d) {
+          console.log(dd)
+          if (dd.content === '') {
+            this.data[i][ii] = dd
+          } else {
+            this.data[i][ii] = dd.content
+          }
+          ii++
+        }
+        i++
+      }
+    },
     computed: {
       filteredData: function () {
         var sortKey = this.sortKey

frontend/src/components/Login.vue

@@ -3,30 +3,28 @@
     <div class="ui middle aligned center aligned grid">
       <div class="column">
         <h2 class="ui blue image header">
-          <div class="content">
-            Login
-          </div>
+          <div class="content" v-lang.login.title></div>
         </h2>
         <form class="ui large form" id="loginform" @submit.prevent="submit">
           <div class="ui stacked segment">
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
-                <input v-focus type="text" name="username" placeholder="Username" v-model="credentials.username" required>
+                <input v-focus type="text" name="username" v-bind:placeholder="login.username" v-model="credentials.username" required>
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
-                <input type="password" name="password" placeholder="Password" v-model="credentials.password" required>
+                <input type="password" name="password" v-bind:placeholder="login.password" v-model="credentials.password" required>
               </div>
             </div>
-            <button type="submit" class="ui fluid large blue submit button">Login</button>
+            <button type="submit" class="ui fluid large blue submit button" v-lang.login.btn></button>
           </div>
 
           <div class="ui info message" v-if="loading">
             <icon name="refresh" spin></icon>&nbsp;&nbsp;
-            Loggig you in...
+            <span v-lang.login.loading></span>
           </div>
 
           <div class="ui error message" v-if="error" style="display: block;">
@@ -73,6 +71,12 @@
 
         auth.login(this, credentials, 'home')
       }
+    },
+
+    computed: {
+      login () {
+        return this.translate('login')
+      }
     }
   }
 </script>

frontend/src/components/Modal.vue

@@ -14,11 +14,11 @@
           <div class="actions">
             <button class="ui red basic cancel inverted button" @click="$emit('close')">
               <i class="remove icon"></i>
-              Cancel
+              <span v-lang.general.cancel></span>
             </button>
             <button class="ui green ok inverted button" v-on:click="$emit('submit')">
               <i class="checkmark icon"></i>
-              Yes!
+              <span v-lang.general.approve></span>
             </button>
           </div>
         </div>

frontend/src/lang/de.js

@@ -1,9 +1,41 @@
 export default {
-  login: 'Einloggen',
+  general: {
+    loading: 'Laden...',
+    error: 'Es ist ein Fehler aufgetreten.',
+    success: '',
+    refresh: 'Neu laden',
+    search: 'Suche...',
+    searchResultCount: 'Zeige {0} Ergebnisse',
+    delete: 'Löschen',
+    edit: 'Bearbeiten',
+    cancel: 'Abbrechen',
+    approve: 'Ja!',
+    action: 'Aktion'
+  },
+  login: {
+    title: 'Einloggen',
+    username: 'Benutzername',
+    password: 'Passwort',
+    btn: 'Einloggen',
+    loading: 'Einloggen...',
+    wrong: 'Falscher Benutzername oder Passwort.'
+  },
+  language: {
+    en: 'English',
+    de: 'Deutsch',
+    fr: 'Français'
+  },
   nav: {
     home: 'Home',
     books: 'Bücher',
     authors: 'Autoren',
     publishers: 'Verlage'
+  },
+  books: {
+    title: 'Bücherübersicht',
+    add: 'Buch hinzufügen',
+    deleteHeader: 'Buch löschen',
+    deleteMsg: 'Bist du sicher dass du dieses Buch löschen willst? <b>Das kann nicht Rückgängig gemacht werden!</b>',
+    deleteSuccess: 'Das Buch wurde erfolgreich gelöscht'
   }
 }

frontend/src/lang/en.js

@@ -1,9 +1,57 @@
 export default {
-  login: 'Login',
+  general: {
+    loading: 'Loading...',
+    error: 'An error occured.',
+    success: 'Success',
+    refresh: 'Refresh',
+    search: 'Search for anything...',
+    searchResultCount: 'Viewing {0} resutlts',
+    delete: 'Delete',
+    edit: 'Edit',
+    cancel: 'Cancel',
+    approve: 'Yes!',
+    action: 'Action',
+    submit: 'Submit',
+    selectOne: 'Select one',
+    selectOneOrMore: 'Select one or more',
+    name: 'Name'
+  },
+  login: {
+    title: 'Login',
+    username: 'Username',
+    password: 'Password',
+    btn: 'Login',
+    loading: 'Loggig you in...',
+    wrong: 'Wrong username or password.'
+  },
+  language: {
+    en: 'English',
+    de: 'Deutsch',
+    fr: 'Français'
+  },
   nav: {
     home: 'Home',
     books: 'Books',
     authors: 'Authors',
     publishers: 'Publishers'
+  },
+  books: {
+    title: 'Books Overview',
+    add: 'Add a book',
+    deleteHeader: 'Delete this book',
+    deleteMsg: 'Are you sure you want to delete this book? <b>This cannot be undone!</b>',
+    deleteSuccess: 'The book was deleted successfully',
+    gridColumns: {
+      title: 'Title',
+      isbn: 'ISBN',
+      year: 'Year',
+      price: 'Price',
+      authors: 'Authors',
+      publisher: 'Publisher',
+      quantity: 'Quantity',
+      status: 'Status'
+    },
+    newPublisher: 'Add new publisher',
+    newAuthor: 'Add new author'
   }
 }