From 00cd0965f87f06bed522f630dc29dcaf2c61916a Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@cominetti.org>
Date: Tue, 6 Oct 2020 11:40:38 +0100
Subject: [PATCH] feat(ui): adds empty stream page and stream query

---
 frontend/src/AppFrontend.vue          | 10 +++-
 frontend/src/components/CommitBox.vue | 73 ++++++++++++-----------
 frontend/src/components/StreamBox.vue | 84 ++++++++++++++++-----------
 frontend/src/graphql/stream.gql       | 44 ++++++++++++++
 frontend/src/router/index.js          | 13 +++--
 frontend/src/views/Home.vue           | 18 ++++--
 frontend/src/views/Stream.vue         | 31 ++++++++++
 7 files changed, 193 insertions(+), 80 deletions(-)
 create mode 100644 frontend/src/graphql/stream.gql
 create mode 100644 frontend/src/views/Stream.vue

diff --git a/frontend/src/AppFrontend.vue b/frontend/src/AppFrontend.vue
index aad5965e2..7a8e55be5 100644
--- a/frontend/src/AppFrontend.vue
+++ b/frontend/src/AppFrontend.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-app id="inspire">
+  <v-app id="speckle">
     <v-app-bar app color="white" flat>
       <v-container class="py-0 fill-height">
         <v-btn text to="/">
@@ -62,8 +62,12 @@
               </div>
               <div>{{ serverInfo.company }}</div>
               <div>{{ serverInfo.description }}</div>
-              <div>{{ serverInfo.adminContact }}</div>
-              <code>{{ serverInfo.canonicalUrl }}</code>
+              <div v-if="serverInfo.adminContact">
+                {{ serverInfo.adminContact }}
+              </div>
+              <code v-if="serverInfo.canonicalUrl">
+                {{ serverInfo.canonicalUrl }}
+              </code>
             </v-sheet>
           </v-col>
 
diff --git a/frontend/src/components/CommitBox.vue b/frontend/src/components/CommitBox.vue
index 705aa76a3..3b3ebedf7 100644
--- a/frontend/src/components/CommitBox.vue
+++ b/frontend/src/components/CommitBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card class="mb-2" elevation="0" rounded="lg">
+  <div>
     <v-row class="caption pl-4 pr-4">
       <v-col>
         <v-icon small color="grey lighten-1">mdi-cube-outline</v-icon>
@@ -9,44 +9,49 @@
         <span v-if="commit.items">{{ commit.items.length }} commits</span>
         <span v-else>a commit</span>
         to
-        <strong>{{ commit.streamName }}</strong>
+        <strong>
+          <router-link :to="'streams/' + commit.streamId">
+            {{ commit.streamName }}
+          </router-link>
+        </strong>
         &nbsp;
         <timeago :datetime="parseInt(commit.createdAt)"></timeago>
       </v-col>
     </v-row>
 
-    <v-divider></v-divider>
-    <v-card-title v-if="!commit.items" class="subtitle-2">
-      {{ commit.message }}
-    </v-card-title>
-    <v-expansion-panels v-else flat>
-      <v-expansion-panel>
-        <v-expansion-panel-header class="pl-4">
-          <span class="subtitle-2">
-            {{ commit.message }}
-          </span>
-        </v-expansion-panel-header>
-        <v-expansion-panel-content>
-          <v-list dense>
-            <v-list-item v-for="(item, i) in commit.items" :key="i">
-              <div style="width: 100%">
-                <v-row class="caption">
-                  <v-col>
-                    <span class="caption">{{ item.message }}</span>
-                  </v-col>
-                  <v-spacer></v-spacer>
-                  <v-col class="text-right">
-                    <timeago :datetime="parseInt(item.createdAt)"></timeago>
-                  </v-col>
-                </v-row>
-                <v-divider v-if="i < commit.items.length - 1"></v-divider>
-              </div>
-            </v-list-item>
-          </v-list>
-        </v-expansion-panel-content>
-      </v-expansion-panel>
-    </v-expansion-panels>
-  </v-card>
+    <v-card class="mb-3" elevation="0" rounded="lg">
+      <v-card-title v-if="!commit.items" class="subtitle-2">
+        {{ commit.message }}
+      </v-card-title>
+      <v-expansion-panels v-else flat>
+        <v-expansion-panel>
+          <v-expansion-panel-header class="pl-4">
+            <span class="subtitle-2">
+              {{ commit.message }}
+            </span>
+          </v-expansion-panel-header>
+          <v-expansion-panel-content>
+            <v-list dense>
+              <v-list-item v-for="(item, i) in commit.items" :key="i">
+                <div style="width: 100%">
+                  <v-row class="caption">
+                    <v-col>
+                      <span class="caption">{{ item.message }}</span>
+                    </v-col>
+                    <v-spacer></v-spacer>
+                    <v-col class="text-right">
+                      <timeago :datetime="parseInt(item.createdAt)"></timeago>
+                    </v-col>
+                  </v-row>
+                  <v-divider v-if="i < commit.items.length - 1"></v-divider>
+                </div>
+              </v-list-item>
+            </v-list>
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-card>
+  </div>
 </template>
 <script>
 export default {
diff --git a/frontend/src/components/StreamBox.vue b/frontend/src/components/StreamBox.vue
index d17d7bfdf..d1f9e7cef 100644
--- a/frontend/src/components/StreamBox.vue
+++ b/frontend/src/components/StreamBox.vue
@@ -1,6 +1,6 @@
 <template>
-  <v-card class="mb-2" elevation="0" rounded="lg">
-    <v-row class="caption pl-4 pr-4">
+  <div>
+    <v-row v-if="isFeed" class="caption pl-4 pr-4">
       <v-col>
         <v-icon small color="grey lighten-1">mdi-compare-vertical</v-icon>
         &nbsp;
@@ -8,38 +8,52 @@
         created a new stream &nbsp;
         <timeago :datetime="parseInt(stream.createdAt)"></timeago>
       </v-col>
-      <v-spacer></v-spacer>
-      <v-col class="mr-4 text-right">
-        <span class="caption streamid">
-          {{ stream.id }}
-        </span>
-        <v-icon small>mdi-key-outline</v-icon>
-        <span class="ma-2"></span>
-        <span class="caption">{{ stream.branches.totalCount }}</span>
-        <v-icon small>mdi-source-branch</v-icon>
-        <span class="ma-2"></span>
-        <span class="caption">{{ stream.commits.totalCount }}</span>
-        <v-icon small>mdi-cube-outline</v-icon>
-        <span class="ma-2"></span>
-        <span class="caption">{{ stream.collaborators.length }}</span>
-        <v-icon small>mdi-account-outline</v-icon>
-        <span class="ma-2"></span>
-        <v-icon v-if="stream.isPublic" small>mdi-lock-open</v-icon>
-        <v-icon v-else small>mdi-lock-outline</v-icon>
-      </v-col>
     </v-row>
-    <v-divider></v-divider>
-    <v-row align="end">
-      <v-col class="pt-0 pb-0">
-        <v-card-title class="subtitle-2">
-          {{ stream.name }}
-        </v-card-title>
-        <v-card-subtitle>
-          {{ stream.description }}
-        </v-card-subtitle>
-      </v-col>
-    </v-row>
-  </v-card>
+    <v-card class="mb-3" elevation="0" rounded="lg">
+      <v-row>
+        <v-col class="pt-0 pb-0">
+          <v-card-title class="subtitle-2">
+            <router-link :to="'streams/' + stream.id">
+              {{ stream.name }}
+            </router-link>
+          </v-card-title>
+          <v-card-subtitle>
+            {{ stream.description }}
+          </v-card-subtitle>
+        </v-col>
+        <v-spacer></v-spacer>
+        <v-col class="mr-4 caption text-right">
+          <div class="mt-1">
+            <span class="streamid">
+              <router-link :to="'streams/' + stream.id">
+                {{ stream.id }}
+              </router-link>
+            </span>
+            <v-icon small>mdi-key-outline</v-icon>
+            <span class="ma-2"></span>
+            <span>{{ stream.branches.totalCount }}</span>
+            <v-icon small>mdi-source-branch</v-icon>
+            <span class="ma-2"></span>
+            <span>{{ stream.commits.totalCount }}</span>
+            <v-icon small>mdi-cube-outline</v-icon>
+            <span class="ma-2"></span>
+            <span>{{ stream.collaborators.length }}</span>
+            <v-icon small>mdi-account-outline</v-icon>
+            <span class="ma-2"></span>
+            <v-icon v-if="stream.isPublic" small>mdi-lock-open</v-icon>
+            <v-icon v-else small>mdi-lock-outline</v-icon>
+          </div>
+
+          <div v-if="!isFeed" class="mt-1 grey--text text--lighten-1">
+            Created
+            <timeago :datetime="parseInt(stream.createdAt)"></timeago>
+            , updated
+            <timeago :datetime="parseInt(stream.updatedAt)"></timeago>
+          </div>
+        </v-col>
+      </v-row>
+    </v-card>
+  </div>
 </template>
 <script>
 export default {
@@ -49,6 +63,10 @@ export default {
       default: function () {
         return {}
       }
+    },
+    isFeed: {
+      type: Boolean,
+      default: false
     }
   }
 }
diff --git a/frontend/src/graphql/stream.gql b/frontend/src/graphql/stream.gql
new file mode 100644
index 000000000..2c907f05b
--- /dev/null
+++ b/frontend/src/graphql/stream.gql
@@ -0,0 +1,44 @@
+query Stream($id: String!) {
+  stream(id: $id) {
+    id
+    name
+    description
+    isPublic
+    createdAt
+    updatedAt
+    collaborators {
+      id
+      name
+      role
+    }
+    branches {
+      totalCount
+      cursor
+      items {
+        id
+        name
+        author {
+          id
+          suuid
+          email
+          name
+          bio
+          company
+          avatar
+        }
+        description
+        commits {
+          totalCount
+          cursor
+          items {
+            id
+            message
+            authorName
+            authorId
+            createdAt
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 18d179d57..8cb697637 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,7 +1,5 @@
 import Vue from "vue"
 import VueRouter from "vue-router"
-import Home from "../views/Home.vue"
-import Streams from "../views/Streams.vue"
 
 Vue.use(VueRouter)
 
@@ -9,12 +7,17 @@ const routes = [
   {
     path: "/",
     name: "home",
-    component: Home
+    component: () => import("../views/Home.vue")
   },
   {
     path: "/streams",
-    name: "streams",
-    component: Streams
+    name: "Streams",
+    component: () => import("../views/Streams.vue")
+  },
+  {
+    path: "/streams/:id",
+    name: "Stream",
+    component: () => import("../views/Stream.vue")
   },
   {
     path: "/help",
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 35c965c02..0007f5cab 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -13,15 +13,13 @@
       </v-chip-group>
     </v-card>
     <div v-for="(activity, i) in recentActivity" :key="i">
-      <!-- STREAM -->
       <stream-box
         v-if="activity.__typename === 'Stream'"
         :stream="activity"
+        :is-feed="true"
       ></stream-box>
-
-      <!-- COMMIT -->
       <commit-box
-        v-if="activity.__typename === 'CommitCollectionUserNode'"
+        v-else-if="activity.__typename === 'CommitCollectionUserNode'"
         :commit="activity"
       ></commit-box>
     </div>
@@ -82,6 +80,7 @@ export default {
           if (group.length > 1) {
             activityGrouped.push({
               streamName: group[0].streamName,
+              streamId: group[0].streamId,
               createdAt: group[0].createdAt,
               message: group[0].message,
               __typename: "CommitCollectionUserNode",
@@ -97,6 +96,7 @@ export default {
           if (group.length > 1) {
             activityGrouped.push({
               streamName: group[0].streamName,
+              streamId: group[0].streamId,
               createdAt: group[0].createdAt,
               message: group[0].message,
               __typename: "CommitCollectionUserNode",
@@ -122,8 +122,16 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style>
 .streamid {
   font-family: monospace !important;
 }
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
 </style>
diff --git a/frontend/src/views/Stream.vue b/frontend/src/views/Stream.vue
new file mode 100644
index 000000000..5b875b1fa
--- /dev/null
+++ b/frontend/src/views/Stream.vue
@@ -0,0 +1,31 @@
+<template>
+  <v-sheet v-if="stream" rounded="lg" class="pa-15 text-center">
+    <h1>{{ stream.name }}</h1>
+    <p class="ma-10 subtitle-1 font-weight-light">{{ stream.description }}</p>
+  </v-sheet>
+</template>
+<script>
+import streamQuery from "../graphql/stream.gql"
+
+export default {
+  name: "Stream",
+  apollo: {
+    stream: {
+      prefetch: true,
+      query: streamQuery,
+      variables() {
+        // Use vue reactive properties here
+        return {
+          id: this.$route.params.id
+        }
+      }
+    }
+  },
+  data: () => ({}),
+  watch: {
+    stream(val) {
+      console.log(val)
+    }
+  }
+}
+</script>