Half way through app re-organisation

.env.local

@@ -1,7 +1,7 @@
 # Replace these with the app id and app secret that you get once registering 
 # an application on the Speckle Server! 
-VUE_APP_SPECKLE_ID=c2c12aaad2
+VUE_APP_SPECKLE_ID=daf0e0546d
-VUE_APP_SPECKLE_SECRET=3b4109dc32
+VUE_APP_SPECKLE_SECRET=3c92fff425
 # Make sure you change this to use the server of your choice!
-VUE_APP_SERVER_URL=https://speckle.xyz
+VUE_APP_SERVER_URL=https://latest.speckle.dev
-VUE_APP_SPECKLE_NAME="Speckle Demo App"
+VUE_APP_SPECKLE_NAME="Speckle — Revit Dashboard"

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "speckle-demo-app",
+  "name": "speckle-revit-dashboard-app",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@speckle/objectloader": "^2.0.0",
-    "@speckle/viewer": "^2.0.1",
+    "@speckle/viewer": "^2.1.0",
     "core-js": "^3.6.5",
     "debounce": "^1.2.1",
     "register-service-worker": "^1.7.1",

src/App.vue

@@ -15,11 +15,15 @@
             width="40"
             height="24"
         />
-        <h3>Speckle Demo App</h3>
+        <h3>Speckle</h3>
       </div>
 
       <v-spacer></v-spacer>
 
+      <stream-search @selected="$store.dispatch('handleStreamSelection', $event)"/>
+
+      <v-spacer></v-spacer>
+
       <div v-if="isAuthenticated" class="mr-1">
         Welcome <b>{{ this.$store.state.user.name }}</b>!
       </div>
@@ -43,8 +47,11 @@
 </template>
 
 <script>
+import StreamSearch from "@/components/StreamSearch";
+
 export default {
   name: 'App',
+  components: {StreamSearch},
   computed: {
     isAuthenticated() {
       return this.$store.getters.isAuthenticated

src/components/RevitProjectInfo.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: "RevitProjectInfo"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/RevitStream.vue

@@ -0,0 +1,40 @@
+<template>
+  <v-container id="revitStream" class="pa-6">
+    <h2 class="pt-6 primary--text">
+      <span v-if="stream">
+        {{ stream.name }} — {{ stream.id }}
+        <v-btn outlined text small class="ml-3" :href="serverUrl+'/streams/'+stream.id">View in server</v-btn>
+        <v-btn outlined text small class="ml-3" color="error" @click="$store.dispatch('clearStreamSelection')">Clear selection</v-btn>
+      </span>
+      <span v-else>
+        <em>No stream selected. Find one using the search bar 👆🏼</em>
+      </span>
+    </h2>
+  </v-container>
+</template>
+
+<script>
+export default {
+  name: "RevitStream.vue",
+  props: [ "streamId" ],
+  data(){
+    return {
+      stream: null
+    }
+  },
+  computed: {
+    isRevitCommit: () => true
+  },
+  watch: {
+    streamId: {
+      handler: (val, oldVal) => {
+        console.log("stream id changed")
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/WelcomeView.vue

@@ -1,7 +1,7 @@
 <template lang="html">
   <v-container fill-height class="home flex-column justify-center align-center primary--text">
-    <h1>Welcome to the Speckle Demo App!</h1>
+    <h1>Welcome to the Speckle Revit Dashboard App</h1>
-    <h3>This app part of our developer guide on how to create your very own Speckle App.</h3>
+    <h3>This app allows you to analyse the data sent from Revit to a Speckle server.</h3>
     <v-alert type="info" text color="primary" class="my-5 dark">
       Check out <a href="https://speckle.guide/dev/apps" target="_blank">the tutorial</a>!
     </v-alert>

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
 import store from '../store/index.js'
+import WelcomeView from "@/components/WelcomeView";
 
 Vue.use(VueRouter)
 
@@ -9,7 +10,15 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    meta: {
+      isProtected: true
+    }
+  },
+  {
+    path: '/login',
+    name: 'Login',
+    component: WelcomeView
   }
 ]
 
@@ -30,14 +39,14 @@ router.beforeEach( async (to, from, next) => {
     // Whatever happens, go home.
     next("/")
   }
+  else if(to.meta.isProtected){
+    await store.dispatch("getUser")
+    var isAuth = store.getters.isAuthenticated
+    if(!isAuth) next("/login")
+    else next()
+  }
   else {
-    try {
+    next()
-      // Check on every route change if you still have access.
-      var goto = await store.dispatch("getUser")
-      next(goto)
-    } catch (err) {
-      next("/")
-    }
   }
 })
 

src/speckleQueries.js

@@ -26,6 +26,7 @@ export const streamCommitsQuery = (streamId, itemsPerPage, cursor) => `query {
                 }
               }`
 
+
 export const streamSearchQuery = (search) => `query {
       streams(query: "${search}") {
         totalCount

src/store/index.js

@@ -24,9 +24,6 @@ export default new Vuex.Store({
     user: null,
     serverInfo: null,
     currentStream: null,
-    latestCommits: null,
-    previousCursors: [null],
-    tableOptions: null
   },
   getters: {
     isAuthenticated: (state) => state.user != null
@@ -40,18 +37,6 @@ export default new Vuex.Store({
     },
     setCurrentStream(state, stream) {
       state.currentStream = stream
-    },
-    setCommits(state, commits) {
-      state.latestCommits = commits
-    },
-    setTableOptions(state, options) {
-      state.tableOptions = options
-    },
-    resetPrevCursors(state) {
-      state.previousCursors = [ null ]
-    },
-    addCursorToPreviousList(state, cursor){
-      state.previousCursors.push(cursor)
     }
   },
   actions: {
@@ -60,9 +45,6 @@ export default new Vuex.Store({
       context.commit("setUser", null)
       context.commit("setServerInfo", null)
       context.commit("setCurrentStream", null)
-      context.commit("setCommits", null)
-      context.commit("setTableOptions", null)
-      context.commit("resetPrevCursors")
       // Wipe the tokens
       speckleLogOut()
     },
@@ -85,20 +67,9 @@ export default new Vuex.Store({
     },
     async handleStreamSelection(context, stream) {
       context.commit("setCurrentStream", stream)
-      context.commit("setTableOptions", { itemsPerPage: 5 })
-      context.commit("resetPrevCursors")
-      var json = await getStreamCommits(stream.id, 5, null)
-      context.commit("setCommits", json.data.stream.commits)
-    },
-    async getCommits(context, cursor) {
-      var json = await getStreamCommits(context.state.currentStream.id, 5, cursor)
-      context.commit("setCommits", json.data.stream.commits)
     },
     clearStreamSelection(context){
       context.commit("setCurrentStream", null)
-      context.commit("setCommits", null)
-      context.commit("setTableOptions", null)
-      context.commit("resetPrevCursors", [ null ])
     }
   },
   modules: {}

src/views/CommitTable.vue

@@ -0,0 +1,89 @@
+<template lang="html">
+  <div class="pt-6">
+    <v-select
+        v-model="selectedKeys"
+        :items="availableKeys"
+        chips
+        label="Select data to display"
+        multiple
+    ></v-select>
+    <h3 class="pa-2 primary--text">Stream commits:</h3>
+    <v-data-table
+        :loading="loading"
+        :headers="filteredHeaders"
+        :items="commits ? commits.items : []"
+        :options.sync="options"
+        :server-items-length="commits ? commits.totalCount : null"
+        disable-sort
+        disable-filtering
+        :disable-pagination="loading"
+        class="elevation-1"
+    ></v-data-table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'CommitTable',
+  data: () => {
+    return {
+      loading: false,
+      options: {
+        itemsPerPage: 5
+      },
+      selectedKeys: ["id", "message", "branchName", "authorName"],
+    }
+  },
+  mounted() {
+    var storedOpts = this.$store.state.tableOptions
+    if (storedOpts) this.options = storedOpts
+  },
+  computed: {
+    commits: function () {
+      return this.$store.state.latestCommits
+    },
+    previousCursors: function () {
+      return this.$store.state.previousCursors || [null]
+    },
+    availableKeys: function () {
+      var keys = {}
+      this.commits?.items.forEach(obj => {
+        Object.keys(obj).forEach(key => {
+          if (!keys[key]) {
+            keys[key] = true
+          }
+        })
+      })
+      return Object.keys(keys)
+    },
+    filteredHeaders: function () {
+      return this.selectedKeys.map(key => {
+        return {text: key, value: key}
+      })
+    },
+  },
+  watch: {
+    options: {
+      async handler(val, oldval) {
+        this.$store.commit("setTableOptions", val)
+        if (oldval.page && val.page != oldval.page) {
+          if (val.page > oldval.page) {
+            this.loading = true
+            var cursor = this.$store.state.latestCommits.cursor
+            await this.$store.dispatch("getCommits", cursor)
+            this.$store.commit("addCursorToPreviousList", cursor)
+            this.loading = false
+
+          } else {
+            console.log("page down")
+            this.loading = true
+            await this.$store.dispatch("getCommits", this.previousCursors[val.page - 1])
+            this.loading = false
+          }
+        }
+      },
+      deep: true
+    }
+  }
+
+}
+</script>

src/views/Home.vue

@@ -1,113 +1,28 @@
 <template lang="html">
-  <WelcomeView v-if="!$store.getters.isAuthenticated"/>
+  <v-container class="home pa-6">
-  <v-container v-else class="home pa-6">
+    <revit-stream :stream-id="selectedStream.id"/>
-    <stream-search @selected="$store.dispatch('handleStreamSelection', $event)"/>
-    <h2 class="pt-6 primary--text">
-      <span v-if="selectedStream">
-        {{ selectedStream.name }} — {{ selectedStream.id }}
-        <v-btn outlined text small class="ml-3" :href="serverUrl+'/streams/'+selectedStream.id">View in server</v-btn>
-        <v-btn outlined text small class="ml-3" color="error" @click="$store.dispatch('clearStreamSelection')">Clear selection</v-btn>
-      </span>
-      <span v-else>
-        <em>No stream selected. Find one using the search bar 👆🏼</em>
-      </span>
-    </h2>
-
-    <div class="pt-6">
-      <v-select
-          v-model="selectedKeys"
-          :items="availableKeys"
-          chips
-          label="Select data to display"
-          multiple
-      ></v-select>
-      <h3 class="pa-2 primary--text">Stream commits:</h3>
-      <v-data-table
-          :loading="loading"
-          :headers="filteredHeaders"
-          :items="commits ? commits.items : []"
-          :options.sync="options"
-          :server-items-length="commits ? commits.totalCount : null"
-          disable-sort
-          disable-filtering
-          :disable-pagination="loading"
-          class="elevation-1"
-      ></v-data-table>
-    </div>
   </v-container>
 </template>
 
 <script>
 import StreamSearch from "@/components/StreamSearch";
 import WelcomeView from "@/components/WelcomeView";
+import CommitTable from "./CommitTable";
+import RevitStream from "@/components/RevitStream"
 
 export default {
   name: 'Home',
-  components: {WelcomeView, StreamSearch},
+  components: {RevitStream},
   data: () => {
     return {
-      loading: false,
-      options: {
-        itemsPerPage: 5
-      },
       serverUrl: process.env.VUE_APP_SERVER_URL,
-      selectedKeys: ["id", "message", "branchName", "authorName"],
     }
   },
-  mounted() {
-    var storedOpts = this.$store.state.tableOptions
-    if (storedOpts) this.options = storedOpts
-  },
   methods: {},
   computed: {
     selectedStream: function () {
       return this.$store.state.currentStream
     },
-    previousCursors: function () {
-      return this.$store.state.previousCursors || [null]
-    },
-    commits: function () {
-      return this.$store.state.latestCommits
-    },
-    availableKeys: function () {
-      var keys = {}
-      this.commits?.items.forEach(obj => {
-        Object.keys(obj).forEach(key => {
-          if (!keys[key]) {
-            keys[key] = true
-          }
-        })
-      })
-      return Object.keys(keys)
-    },
-    filteredHeaders: function () {
-      return this.selectedKeys.map(key => {
-        return {text: key, value: key}
-      })
-    }
-  },
-  watch: {
-    options: {
-      async handler(val, oldval) {
-        this.$store.commit("setTableOptions", val)
-        if (oldval.page && val.page != oldval.page) {
-          if (val.page > oldval.page) {
-            this.loading = true
-            var cursor = this.$store.state.latestCommits.cursor
-            await this.$store.dispatch("getCommits", cursor)
-            this.$store.commit("addCursorToPreviousList", cursor)
-            this.loading = false
-
-          } else {
-            console.log("page down")
-            this.loading = true
-            await this.$store.dispatch("getCommits", this.previousCursors[val.page - 1])
-            this.loading = false
-          }
-        }
-      },
-      deep: true
-    }
   }
 }
 </script>