Added foo List component

Author: alOneh

templates/vue/components/foo/List.vue

@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <h1>{{{ title }}} List</h1>
+
+    <div v-if="loading" class="alert alert-info">Loading...</div>
+    <div v-if="deletedItem" class="alert alert-success">\{{ deletedItem['@id'] }} deleted.</div>
+    <div v-if="error" class="alert alert-danger">\{{ error }}</div>
+
+    <span v-if="view">
+      <button
+        type="button"
+        class="btn btn-basic btn-sm"
+        @click="getPage(view['hydra:first'])"
+        :disabled="!view['hydra:first']"
+      >First</button>
+      &nbsp;
+      <button
+        type="button"
+        class="btn btn-basic btn-sm"
+        @click="getPage(view['hydra:previous'])"
+        :disabled="!view['hydra:previous']"
+      >Previous</button>
+      &nbsp;
+      <button
+        type="button" class="btn btn-basic btn-sm"
+        @click="getPage(view['hydra:next'])"
+        :disabled="!view['hydra:next']"
+      >Next</button>
+      &nbsp;
+      <button
+        type="button" class="btn btn-basic btn-sm"
+        @click="getPage(view['hydra:last'])"
+        :disabled="!view['hydra:last']"
+      >Last</button>
+      &nbsp;
+    </span>
+
+    <div class="table-responsive">
+        <table class="table table-striped table-hover">
+        <thead>
+          <tr>
+            <th>Id</th>
+{{#each fields}}
+            <th>{{name}}</th>
+{{/each }}
+            <th></th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in items">
+            <td><router-link :to="{name: '{{{titleUcFirst}}}Show', params: { id: item['@id'] }}">\{{ item['@id'] }}</router-link></td>
+{{#each fields}}
+            <td><router-link v-if="item['{{{ name }}}']" :to="{name: '{{{titleUcFirst}}}Show', params: { id: item['@id'] }}">\{{ item['{{{ name }}}'] }}</router-link></td>
+{{/each}}
+            <td>
+              <router-link :to="{name: '{{{titleUcFirst}}}Show', params: { id: item['@id'] }}">
+                <span class="glyphicon glyphicon-search" aria-hidden="true"/>
+                <span class="sr-only">Show</span>
+              </router-link>
+            </td>
+            <td>
+              <router-link :to="{name: '{{{titleUcFirst}}}Update', params: { id: item['@id'] }}">
+                <span class="glyphicon glyphicon-search" aria-hidden="true"/>
+                <span class="sr-only">Edit</span>
+              </router-link>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <router-link :to="{ name: '{{{titleUcFirst}}}Create' }" class="btn btn-default">Create</router-link>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+
+export default {
+  computed: mapGetters([
+    'items',
+    'view'
+  ]),
+  methods: mapActions([
+    'getPage'
+  ]),
+  created () {
+    this.$store.dispatch('getItems')
+  }
+}
+</script>