Added item management to frontend

frontend/src/App.vue

@@ -6,6 +6,7 @@
         <router-link to="/books" class="item" v-lang.nav.books></router-link>
         <router-link to="/authors" class="item" v-lang.nav.authors></router-link>
         <router-link to="/publishers" class="item" v-lang.nav.publishers></router-link>
+        <router-link to="/items" class="item" v-lang.nav.items></router-link>
         <div class="right menu">
           <img v-bind:src="gravatar" class="menu-avatar"/>
           <div class="ui item"> {{ user.infos.username }}</div>

frontend/src/components/Authors.vue

@@ -109,8 +109,8 @@ export default {
   },
   computed: {
     filteredData: function () {
-      var filterKey = this.searchQuery && this.searchQuery.toLowerCase()
-      var data = this.authors
+      let filterKey = this.searchQuery && this.searchQuery.toLowerCase()
+      let data = this.authors
       if (filterKey) {
         data = data.filter(function (row) {
           return Object.keys(row).some(function (key) {

frontend/src/components/ItemOverview.vue

@@ -0,0 +1,91 @@
+<template>
+  <div v-if="user.authenticated">
+    <h1>{{ item.title }}</h1>
+
+    <div class="ui info message" v-if="loading">
+      <icon name="refresh" spin></icon>&nbsp;&nbsp;
+      <span v-lang.general.loading></span>
+    </div>
+
+    <div v-if="!loading">
+
+      <router-link :to="{ name: 'item-edit', params: { id: itemID} }" class="ui teal labeled icon button" style="float: right;">
+        <i class="edit icon"></i>
+        <span v-lang.general.edit></span>
+      </router-link>
+
+      <list :infos="itemList"/>
+    </div>
+  </div>
+</template>
+
+<script>
+  import auth from '../auth'
+  import {HTTP} from '../http-common'
+
+  export default {
+    name: 'Item',
+    data () {
+      return {
+        user: auth.user,
+        item: {},
+        itemID: this.$route.params.id,
+        itemList: []
+      }
+    },
+    created () {
+      this.loadItem()
+    },
+    watch: {
+      // call again the method if the route changes
+      '$route': 'loadItem'
+    },
+    methods: {
+      loadItem () {
+        this.loading = true
+        this.item = {}
+        HTTP.get(`items/` + this.itemID)
+          .then(response => {
+            this.item = response.data
+
+            // Make a list
+            this.itemList = [
+              {
+                header: this.translate('items').gridColumns.title,
+                content: this.item.title
+              },
+              {
+                header: this.translate('items').gridColumns.price,
+                content: this.item.price
+              },
+              {
+                header: this.translate('items').description,
+                content: this.item.description
+              },
+              {
+                header: this.translate('items').gridColumns.quantity,
+                content: this.item.quantity
+              }
+            ]
+
+            this.loading = false
+          })
+          .catch(e => {
+            this.loading = false
+            // Build the notification text from error response
+            let err = e.message
+            if (e.response.data.Message) {
+              err += '<br/>' + e.response.data.Message
+            }
+
+            // Fire a notification
+            this.$notify({
+              type: 'error',
+              title: this.translate('general').error,
+              text: err
+            })
+          })
+      }
+    }
+  }
+</script>

frontend/src/components/Items.vue

@@ -0,0 +1,247 @@
+<template>
+  <div v-if="user.authenticated">
+    <h1 v-lang.items.title></h1>
+
+    <div class="ui info message" v-if="loading">
+      <icon name="refresh" spin></icon>&nbsp;&nbsp;
+      <span v-lang.general.loading></span>
+    </div>
+
+    <div v-if="!loading">
+
+      <router-link to="/items/add" class="ui green labeled icon button" style="float: right;">
+        <i class="plus icon"></i>
+        <span v-lang.items.newItem></span>
+      </router-link>
+
+      <button @click="loadItems()" class="ui teal labeled icon button" style="float: right;">
+        <i class="refresh icon"></i>
+        <span v-lang.general.refresh></span>
+      </button>
+
+      <form id="search">
+        <div class="ui icon input">
+          <input :placeholder="langGeneral.search" type="text" v-model="searchQuery" v-focus>
+          <i class="search icon"></i>
+        </div>
+      </form>
+      <paginate
+        name="items"
+        :list="filteredData"
+        :per="35"
+        tag="div"
+      >
+        <grid
+          :data="paginated('items')"
+          :columns="gridColumns"
+          :buttons="gridButtons"
+          :btnclick="gridBtnClicked"
+        >
+        </grid>
+      </paginate>
+      <div class="pagination-container">
+        <paginate-links
+          tag="div"
+          for="items"
+          :hide-single-page="true"
+          :classes="{
+            'ul': ['ui', 'pagination', 'menu'],
+            'li': 'items',
+            'li a': 'pagination-link'
+          }"
+        >
+        </paginate-links>
+        <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" v-lang.items.deleteHeader></span>
+      <p slot="text" v-lang.items.deleteText></p>
+    </modal>
+  </div>
+</template>
+
+<script>
+import auth from '../auth'
+import {HTTP} from '../http-common'
+import router from '../router'
+
+export default {
+  name: 'Item',
+  data () {
+    return {
+      user: auth.user,
+      items: [],
+      searchQuery: '',
+      gridColumns: [],
+      gridButtons: [
+        {
+          text: '',
+          icon: 'trash',
+          action: this.DeleteItem,
+          css: 'ui red icon button'
+        },
+        {
+          text: '',
+          icon: 'edit',
+          action: this.editItem,
+          css: 'ui blue icon button'
+        }
+      ],
+      loading: false,
+      paginate: ['items'],
+      allStatus: [],
+      showModal: false
+    }
+  },
+  created () {
+    this.loadItems()
+
+    this.gridButtons[0].text = this.translate('general').delete
+    let langGrid = this.translate('items').gridColumns
+    this.gridColumns = [
+      langGrid.title,
+      langGrid.price,
+      langGrid.quantity
+    ]
+  },
+  watch: {
+    // call again the method if the route changes
+    '$route': 'loadItems'
+  },
+  computed: {
+    filteredData: function () {
+      let filterKey = this.searchQuery && this.searchQuery.toLowerCase()
+      let data = this.items
+      if (filterKey) {
+        data = data.filter(function (row) {
+          return Object.keys(row).some(function (key) {
+            if (row[key].content) {
+              return String(row[key].content).toLowerCase().indexOf(filterKey) > -1
+            } else {
+              return String(row[key]).toLowerCase().indexOf(filterKey) > -1
+            }
+          })
+        })
+      }
+      return data
+    },
+    langGeneral () {
+      return this.translate('general')
+    }
+  },
+  methods: {
+    errorNotification (e) {
+      // Build the notification text from error response
+      let err = e.message
+      if (e.response.data.Message) {
+        err += '<br/>' + e.response.data.Message
+      }
+
+      // Fire a notification
+      this.$notify({
+        type: 'error',
+        title: this.langGeneral.error,
+        text: err
+      })
+    },
+    loadItems () {
+      this.loading = true
+      this.items = []
+      HTTP.get(`items`)
+        .then(response => {
+          let is = response.data
+          let i = 0
+
+          // Loop throught the data we got from our API and prepare an array to display all items
+          for (const it in is) {
+            this.items[i] = {
+              id: {content: is[it].id, hide: true}, // Don't show the ID
+              title: {content: is[it].title, link: '/items/' + is[it].id},
+              price: is[it].price,
+              quantity: is[it].quantity
+            }
+
+            // increment dat shit
+            i++
+          }
+
+          this.loading = false
+        })
+        .catch(e => {
+          this.loading = false
+          this.errorNotification(e)
+        })
+    },
+    gridBtnClicked (opt, gridObject) {
+      opt.action(gridObject)
+    },
+    deleteBtnSuccess () { // Event helper function
+      this.$emit('delete-submit')
+    },
+    DeleteItem (obj) {
+      this.showModal = true
+      this.$on('delete-submit', function () {
+        // Prevent deleting already deleted item
+        if (obj) {
+          HTTP.delete('items/' + obj.id.content)
+            .then(response => {
+              if (response.status === 200 && response.data.Message === 'success') {
+                // Fire a notification
+                this.$notify({
+                  type: 'success',
+                  title: this.langGeneral.success,
+                  text: this.translate('items').deleteSuccess
+                })
+                this.loadItems()
+              }
+            })
+            .catch(e => {
+              this.errorNotification(e)
+              this.loadItems()
+            })
+        }
+        obj = null
+        this.showModal = false
+      })
+    },
+    editItem (items) {
+      router.push({ name: 'item-edit', params: { id: items.id.content } })
+    }
+  }
+}
+</script>
+
+<style>
+  a.pagination-link{
+    margin: -5px -1.14286em -18px;
+    display: block;
+    position: absolute;
+    cursor: pointer;
+    padding: 0.928571em 1.14286em;
+    color: rgba(0,0,0,.87);
+
+    -webkit-transition: background-color 200ms; /* Safari */
+    transition: background-color 200ms;
+  }
+
+  a.pagination-link:hover{
+    background: rgba(0,0,0,.02);
+  }
+
+  .pagination{
+    padding: 0;
+  }
+
+  .pagination-container{
+    margin-top: 1rem;
+    text-align: center;
+  }
+
+  #search{
+    margin-bottom: 1rem;
+  }
+</style>

frontend/src/components/ItemsAddEdit.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div class="ui positive message" v-if="success">
+      <div class="header" v-lang.general.success></div>
+      {{ success }}
+    </div>
+
+    <form class="ui form" v-bind:class="{ loading: loading }" v-if="!success" @submit.prevent="insertOrUpdateItem">
+      <div class="field">
+        <label v-lang.items.gridColumns.title></label>
+        <input name="title" :placeholder="langItems.gridColumns.title" type="text" v-model="item.title" v-focus required>
+      </div>
+
+      <div class="field">
+        <label v-lang.items.description></label>
+        <textarea name="description" :placeholder="langItems.description" rows="3" v-model="item.description"></textarea>
+      </div>
+
+      <div class="two fields">
+        <div class="field">
+          <label v-lang.items.gridColumns.price></label>
+          <input name="price" :placeholder="langItems.gridColumns.price" type="number" v-model.number="item.price" step="0.01" min="0">
+        </div>
+
+        <div class="field">
+          <label v-lang.items.gridColumns.quantity></label>
+          <input name="quantity" :placeholder="langItems.gridColumns.quantity" type="number" v-model.number="item.quantity" step="1">
+        </div>
+      </div>
+
+      <button class="ui blue button" type="submit" v-lang.general.submit></button>
+    </form>
+  </div>
+</template>
+
+<script>
+  import {HTTP} from '../http-common'
+  import router from '../router'
+
+  export default {
+    name: 'ItemsAddEdit',
+    data () {
+      return {
+        success: '',
+        loading: false,
+        itemID: this.$route.params.id,
+        edit: false,
+        item: {
+          title: '',
+          price: 0,
+          description: '',
+          quantity: 0
+        }
+      }
+    },
+    created () {
+      this.loading = true
+
+      // Look if we're in edit mode and get the item infos if nessesary
+      if (this.itemID) {
+        HTTP.get('items/' + this.itemID)
+          .then(response => {
+            this.item = response.data
+            this.edit = true
+          })
+          .catch(e => {
+            this.errorNotification(e)
+          })
+      }
+      this.loading = false
+    },
+    computed: {
+      langItems () {
+        return this.translate('items')
+      }
+    },
+    methods: {
+      errorNotification (e) {
+        // Build the notification text from error response
+        let err = e.message
+        if (e.response.data.Message) {
+          err += '<br/>' + e.response.data.Message
+        }
+
+        // Fire a notification
+        this.$notify({
+          type: 'error',
+          title: this.translate('general').error,
+          text: err
+        })
+      },
+      insertOrUpdateItem: function () {
+        if (this.item.Lastname === '') {
+          // Fire a notification
+          this.$notify({
+            type: 'warn',
+            text: this.translate('items').errorNoTitle
+          })
+        } else {
+          this.loading = true
+
+          // Finally Send it
+          // If we want to newly insert it, make a different request
+          if (this.edit) {
+            HTTP.post('items/' + this.item.id, {item: this.item})
+              .then(response => {
+                this.loading = false
+
+                // Fire a notification
+                this.$notify({
+                  type: 'success',
+                  title: this.translate('general').success,
+                  text: this.translate('items').updatedSuccess
+                })
+              })
+              .catch(e => {
+                this.loading = false
+                this.errorNotification(e)
+              })
+          } else { // insert a new item
+            HTTP.put('items', {item: this.item})
+              .then(response => {
+                this.loading = false
+
+                // Fire a notification
+                this.$notify({
+                  type: 'success',
+                  title: this.translate('general').success,
+                  text: this.translate('items').insertedSuccess
+                })
+              })
+              .catch(e => {
+                this.loading = false
+                this.errorNotification(e)
+              })
+          }
+
+          // Redirect to books list
+          router.push({ name: 'items' })
+        }
+      }
+    }
+  }
+</script>

frontend/src/lang/en.js

@@ -33,7 +33,8 @@ export default {
     home: 'Home',
     books: 'Books',
     authors: 'Authors',
-    publishers: 'Publishers'
+    publishers: 'Publishers',
+    items: 'Items'
   },
   books: {
     title: 'Books overview',
@@ -77,5 +78,21 @@ export default {
     errorNoName: 'Please provide a name.',
     updatedSuccess: 'The publisher was successfully updated!',
     insertedSuccess: 'The publisher was successfully inserted!'
+  },
+  items: {
+    title: 'Items overview',
+    newItem: 'Add new item',
+    description: 'Description',
+    gridColumns: {
+      title: 'Title',
+      price: 'Price',
+      quantity: 'Quantity'
+    },
+    deleteHeader: 'Delete this item',
+    deleteText: 'Are you sure you want to delete this item? <b>This cannot be undone!</b>',
+    deleteSuccess: 'The item was deleted successfully.',
+    errorNoTitle: 'Please provide at least a title.',
+    updatedSuccess: 'The item was successfully updated!',
+    insertedSuccess: 'The item was successfully inserted!'
   }
 }

frontend/src/router/index.js

@@ -11,6 +11,9 @@ import AuthorOverview from '@/components/AuthorOverview'
 import Publishers from '@/components/Publishers'
 import PublishersAddEdit from '@/components/PublishersAddEdit'
 import PublisherOverview from '@/components/PublisherOverview'
+import Items from '@/components/Items'
+import ItemsOverview from '@/components/ItemOverview'
+import ItemsAddEdit from '@/components/ItemsAddEdit'
 
 Vue.use(Router)
 
@@ -85,6 +88,26 @@ export default new Router({
       path: '/publishers/:id/edit',
       name: 'publisher-edit',
       component: PublishersAddEdit
+    },
+    {
+      path: '/items',
+      name: 'items',
+      component: Items
+    },
+    {
+      path: '/items/add',
+      name: 'item-add',
+      component: ItemsAddEdit
+    },
+    {
+      path: '/items/:id',
+      name: 'item-show',
+      component: ItemsOverview
+    },
+    {
+      path: '/items/:id/edit',
+      name: 'item-edit',
+      component: ItemsAddEdit
     }
   ],
   linkActiveClass: 'active'

routes/api/v1/items_add_update.go

@@ -7,6 +7,7 @@ import (
 	"net/http"
 	"strconv"
 	"strings"
+	"fmt"
 )
 
 type itemPayload struct {
@@ -22,6 +23,7 @@ func ItemAddOrUpdate(c echo.Context) error {
 	if itemFromString == "" {
 		b := new(itemPayload)
 		if err := c.Bind(b); err != nil {
+			fmt.Println(err)
 			return c.JSON(http.StatusBadRequest, models.Message{"No item model provided"})
 		}
 		datItem = b.Item

routes/routes.go

@@ -56,6 +56,8 @@ func RegisterRoutes(e *echo.Echo) {
 	a.OPTIONS("/publishers/:id", SetCORSHeader)
 	a.OPTIONS("/status", SetCORSHeader)
 	a.OPTIONS("/status/:id", SetCORSHeader)
+	a.OPTIONS("/items", SetCORSHeader)
+	a.OPTIONS("/items/:id", SetCORSHeader)
 
 	a.POST("/login", Login)