Dev/dashboard listing

assets/js/DashboardContentList.vue

@@ -1,27 +1,17 @@
 <template>
     <div>
-        <div v-if="isLoading" class="row col">
+        <div v-if="loading" class="row col">
             <p>Loading...</p>
         </div>
 
-        <div v-else-if="hasError" class="row col">
-            <div class="alert alert-danger" role="alert">
-                {{ error }}
-            </div>
-        </div>
-
-        <div v-else-if="!hasContent" class="row col">
-            No content!
-        </div>
-
         <div v-else>
             <h3>Latest {{ type }}</h3>
             <table>
                 <tbody>
-                    <template v-for="item in content.slice(0, limit)" class="row col">
-                        <tr :key="item.id">
-                            <td>{{ item.id }}</td>
-                            <td>{{ item.fields[0].value.value }}</td>
+                    <template v-for="record in records" class="row col">
+                        <tr :key="record.id">
+                            <td>{{ record.id }}</td>
+                            <td><a :href="'edit/'+record.id">{{ record.fields[0].value.value }}</a></td>
                         </tr>
                         <!-- Maybe is better to have a component to print each row? -->
                         <!-- <Context :id="item.id" :key="item.id" :contenttype="content.contenttype" :title="item.fields[0]"></Context> -->
@@ -34,6 +24,7 @@
 
 <script>
     // import Context from './Content';
+    import ContentAPI from './service/api/content';
 
     export default {
         name: 'context',
@@ -47,28 +38,21 @@
         data () {
             return {
                 message: '',
+                loading: true,
+                records: []
             };
         },
         created () {
-            this.$store.dispatch('content/fetchContent', this.type);
-        },
-        computed: {
-            isLoading () {
-                // return this.state == 'loading'; // ComponentState.LOADING;
-                return this.$store.getters['content/isLoading'];
-            },
-            hasError () {
-                return this.$store.getters['content/hasError'];
-            },
-            error () {
-                return this.$store.getters['content/error'];
-            },
-            hasContent () {
-                return this.$store.getters['content/hasContent'];
-            },
-            content () {
-                return this.$store.getters['content/content'];
-            },
+            this.records = ContentAPI.getRecords(this.type)
+
+            ContentAPI.fetchRecords(this.type)
+                .then( records => {
+                    this.records = records
+                })
+                .catch(error => console.log(error))
+                .finally(() => {
+                    this.loading = false
+                });
         },
     }
 </script>

assets/js/Sidebar.vue

@@ -3,38 +3,66 @@
     <div class="header item logo">
       <h2>Bolt</h2>
     </div>
-    <a href="/bolt/" class="active item">
-      <span class="fa-stack">
-        <i class="fas fa-square fa-stack-2x"></i>
-        <i class="fas fa-tachometer-alt fa-stack-1x"></i>
-      </span>
-     Dashboard
-    </a>
-
-    <div class="ui dropdown item">
-      <i class="dropdown icon"></i>
-      <span class="fa-stack">
-        <i class="fas fa-square fa-stack-2x"></i>
-        <i class="fas fa-flag fa-stack-1x"></i>
-      </span>
-      Settings
-      <div class="menu">
-        <div class="header">Text Size</div>
-        <a class="item">Small</a>
-        <a class="item">Medium</a>
-        <a class="item">Large</a>
+    <!-- TODO: Maybe we need to parse the data somewhere else -->
+    <template v-for="menuitem in JSON.parse(sidebarmenudata)">
+      <a :href="menuitem.link" class="item" v-if="!menuitem.contenttype" :key="menuitem.id">
+        <span class="fa-stack">
+          <i class="fas fa-square fa-stack-2x"></i>
+          <i class="fas fa-stack-1x" :class="menuitem.icon"></i>
+        </span>
+        {{ menuitem.name }}
+      </a>
+      <div class="ui dropdown item" :key="menuitem.id" v-else="">
+        <!-- {{menuitem.contenttype}} -->
+        <i class="dropdown icon"></i>
+        <span class="fa-stack">
+          <i class="fas fa-square fa-stack-2x"></i>
+          <i class="fas fa-stack-1x" :class="menuitem.icon"></i>
+        </span>
+        {{ menuitem.name }}
+        <div class="menu">
+          <!-- TODO: Print Links to latest edited record per contenttype -->
+          <div class="header">Text Size</div>
+          <a class="item">Small</a>
+          <a class="item">Medium</a>
+          <a class="item">Large</a>
+        </div>
       </div>
-    </div>
-    <a class="item" href="/bolt/users">
-      <span class="fa-stack">
-        <i class="fas fa-square fa-stack-2x"></i>
-        <i class="fas fa-users fa-stack-1x"></i>
-      </span>
-     Users
-    </a>
+    </template>
   </div>
 </template>
 
+<script>
+    import ContentAPI from './service/api/content';
+
+    export default {
+        name: 'sidebar',
+        props: [
+            'sidebarmenudata',
+        ],
+        data () {
+            return {
+                message: '',
+                loading: true,
+                records: []
+            };
+        },
+        created () {
+          // TODO: This data is already initialized somewhere else, Use it!!
+            this.records = ContentAPI.getRecords('pages')
+
+            ContentAPI.fetchRecords('pages')
+                .then( records => {
+                    this.records = records
+                })
+                .catch(error => console.log(error))
+                .finally(() => {
+                    this.loading = false
+                });
+        },
+    }
+</script>
+
 <style>
 .ui.small.vertical.menu {
   border-radius: 0;
@@ -56,8 +84,4 @@
 .ui.inverted.blue.menu .active.item {
     background-color: rgba(255, 255, 255, 0.2) !important;
 }
-</style>
-
-<script>
-
-</script>
+</style>

assets/js/bolt.js

@@ -2,7 +2,6 @@
 
 import Vue from 'vue';
 import router from './router';
-import store from './store';
 // import './registerServiceWorker'
 
 // Bolt Components
@@ -11,7 +10,6 @@ import Sidebar from './Sidebar'
 import Topbar from './Topbar'
 import DashboardNews from './DashboardNews'
 import DashboardContentList from './DashboardContentList'
-import Content from './Content';
 import App from './App'
 import '../scss/bolt.scss'
 
@@ -27,9 +25,9 @@ Vue.component('dashboardcontentlist', DashboardContentList)
 const $ = require('jquery');
 global.$ = global.jQuery = $;
 
-new Vue({ el: 'header', router, store });
-new Vue({ el: '#sidebar', router, store });
-new Vue({ el: '#vuecontent', router, store });
+new Vue({ el: 'header', router });
+new Vue({ el: '#sidebar', router });
+new Vue({ el: '#vuecontent', router });
 
 new Vue({ el: 'dashboardnews' });
 

assets/js/service/api/content.js

@@ -1,9 +1,19 @@
 import axios from 'axios';
 
 export default {
-    getAll (type) {
+    getRecords (type) {
         // where = where || [];
         // implode
-        return axios.get('/api/contents.json?contentType=' + type);
+        let records = JSON.parse(localStorage.getItem('records-' + type));
+        return records;
     },
+
+    fetchRecords(type) {
+        return axios.get('/api/contents.json?contentType=' + type + '&pageSize=5')
+            .then(response => {
+                // save to localstorage _and_ return data
+                localStorage.setItem('records', JSON.stringify(response.data));
+                return response.data
+            });
+    }
 }

package.json

@@ -8,7 +8,6 @@
     "vue-loader": "^14",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.17",
-    "vuex": "^3.0.1",
     "workbox-webpack-plugin": "^3.6.1"
   },
   "dependencies": {

templates/bolt/base.html.twig

@@ -22,7 +22,7 @@
     </header>
 
     <div id="sidebar">
-            <Sidebar>side</Sidebar>
+            <Sidebar sidebarmenudata="{{ sidebarmenu()|json_encode() }}">side</Sidebar>
     </div>
 
     <div id="{% block container %}content{% endblock %}">

yarn.lock

@@ -5733,10 +5733,6 @@ vue@^2.5.17:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
 
-vuex@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.0.1.tgz#e761352ebe0af537d4bb755a9b9dc4be3df7efd2"
-
 watchpack@^1.4.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"