From 01efcd2a7e27226f46861ff56bbf66fb6d40f535 Mon Sep 17 00:00:00 2001
From: Matteo Cominetti <matteo@speckle.systems>
Date: Tue, 3 Aug 2021 21:18:49 +0200
Subject: [PATCH] feat(frontend): ticking off various items

---
 .../src/components/ListItemActivity.vue       | 80 ++++++++++++++-----
 .../src/components/SourceAppAvatar.vue        |  2 +-
 packages/frontend/src/views/Frontend.vue      |  7 +-
 packages/frontend/src/views/ProfileUser.vue   | 39 +++++++--
 .../frontend/src/views/stream/Activity.vue    |  4 +-
 .../frontend/src/views/stream/Details.vue     | 43 ++++++----
 6 files changed, 127 insertions(+), 48 deletions(-)

diff --git a/packages/frontend/src/components/ListItemActivity.vue b/packages/frontend/src/components/ListItemActivity.vue
index 3f2cb49f3..f69000e7a 100644
--- a/packages/frontend/src/components/ListItemActivity.vue
+++ b/packages/frontend/src/components/ListItemActivity.vue
@@ -25,35 +25,71 @@
           flat
         >
           <v-card-text class="pa-5 body-1">
-            <v-chip v-if="targetUser" pill :color="activityInfo.color">
-              <v-avatar left>
-                <user-avatar
-                  :id="targetUser.id"
-                  :avatar="targetUser.avatar"
-                  :size="30"
-                  :name="targetUser.name"
-                />
-              </v-avatar>
+            <v-container>
+              <v-row class="align-center">
+                <v-chip v-if="targetUser" pill :color="activityInfo.color">
+                  <v-avatar left>
+                    <user-avatar
+                      :id="targetUser.id"
+                      :avatar="targetUser.avatar"
+                      :size="30"
+                      :name="targetUser.name"
+                    />
+                  </v-avatar>
 
-              {{ targetUser.name }}
-            </v-chip>
+                  {{ targetUser.name }}
+                </v-chip>
 
-            <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
-            <v-chip v-if="activity.info.role" small outlined class="ml-3">
-              <v-icon small left>mdi-account-key-outline</v-icon>
-              {{ activity.info.role.split(':')[1] }}
-            </v-chip>
+                <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
+                <v-chip v-if="activity.info.role" small outlined class="ml-3">
+                  <v-icon small left>mdi-account-key-outline</v-icon>
+                  {{ activity.info.role.split(':')[1] }}
+                </v-chip>
+                <v-spacer />
+
+                <v-btn
+                  v-if="targetUser && activity.actionType === `stream_permissions_add`"
+                  text
+                  outlined
+                  small
+                  :to="'/profile/' + targetUser.id"
+                  color="primary"
+                >
+                  view
+                </v-btn>
+              </v-row>
+            </v-container>
           </v-card-text>
         </v-card>
 
         <!-- STREAM -->
         <v-card v-else-if="activity.resourceType === 'stream' && stream" class="activity-card" flat>
           <v-card-text class="pa-5 body-1">
-            <router-link :to="url" class="title">
-              <v-icon color="primary" small>mdi-compare-vertical</v-icon>
-              {{ stream.name }}
-            </router-link>
-            <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
+            <v-container>
+              <v-row class="align-center">
+                <router-link :to="url" class="title">
+                  <v-icon color="primary" small>mdi-compare-vertical</v-icon>
+                  {{ stream.name }}
+                </router-link>
+                <span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
+
+                <v-spacer />
+
+                <v-btn
+                  v-if="
+                    activity.actionType === `stream_create` ||
+                    activity.actionType === `stream_update`
+                  "
+                  text
+                  outlined
+                  small
+                  color="primary"
+                >
+                  view
+                </v-btn>
+              </v-row>
+            </v-container>
+
             <div
               v-if="activityInfo.description"
               class="mt-3"
@@ -93,7 +129,7 @@
                 <v-icon small class="mr-2 float-left">mdi-source-commit</v-icon>
                 {{ stream.commits.totalCount }}
               </v-btn>
-              <v-chip small outlined class="ml-3">
+              <v-chip small outlined class="ml-3 no-hover">
                 <v-icon small left>mdi-account-key-outline</v-icon>
                 {{ stream.role.split(':')[1] }}
               </v-chip>
diff --git a/packages/frontend/src/components/SourceAppAvatar.vue b/packages/frontend/src/components/SourceAppAvatar.vue
index 0799709a2..e03e55881 100644
--- a/packages/frontend/src/components/SourceAppAvatar.vue
+++ b/packages/frontend/src/components/SourceAppAvatar.vue
@@ -3,7 +3,7 @@
     <template #activator="{ on, attrs }">
       <v-chip
         small
-        class="ma-1 caption white--text"
+        class="ma-1 caption white--text no-hover"
         :color="color"
         :size="size"
         v-bind="attrs"
diff --git a/packages/frontend/src/views/Frontend.vue b/packages/frontend/src/views/Frontend.vue
index 6a47e9f91..63b7cc5ac 100644
--- a/packages/frontend/src/views/Frontend.vue
+++ b/packages/frontend/src/views/Frontend.vue
@@ -104,13 +104,15 @@
           </v-list-item>
         </v-list-item-group>
       </v-list>
+      <div class="mx-5 m t-5">
       <v-btn
         v-if="stream.role === 'stream:owner'"
         outlined
         color="primary"
         rounded
+        block
         height="50"
-        class="ma-3 d-block"
+     
         @click="showStreamInviteDialog"
       >
         <v-icon small class="mr-2">mdi-email-send-outline</v-icon>
@@ -118,6 +120,7 @@
         <br />
         stream by email
       </v-btn>
+      </div>
       <stream-invite-dialog ref="streamInviteDialog" :stream-id="stream.id" />
     </v-navigation-drawer>
     <v-main :style="background">
@@ -329,4 +332,6 @@ export default {
 .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
   opacity: 0;
 }
+
+.no-hover:before {display: none}
 </style>
diff --git a/packages/frontend/src/views/ProfileUser.vue b/packages/frontend/src/views/ProfileUser.vue
index 135cbeb8d..de9537329 100644
--- a/packages/frontend/src/views/ProfileUser.vue
+++ b/packages/frontend/src/views/ProfileUser.vue
@@ -19,18 +19,26 @@
           </v-card-title>
         </v-card>
         <v-row>
-        <v-col cols="12" sm="12" md="6" lg="6" xl="4"  v-for="(stream, i) in user.streams.items" :key="i">
-          <list-item-stream :stream="stream"></list-item-stream>
-        </v-col >
+          <v-col
+            v-for="(stream, i) in user.streams.items"
+            :key="i"
+            cols="12"
+            sm="12"
+            md="6"
+            lg="6"
+            xl="4"
+          >
+            <list-item-stream :stream="stream"></list-item-stream>
+          </v-col>
         </v-row>
       </v-col>
     </v-row>
   </v-container>
 </template>
 <script>
-import userById from '../graphql/userById.gql'
 import UserInfoCard from '../components/UserInfoCard'
 import ListItemStream from '../components/ListItemStream'
+import gql from 'graphql-tag'
 
 export default {
   name: 'ProfileUser',
@@ -38,7 +46,28 @@ export default {
   data: () => ({}),
   apollo: {
     user: {
-      query: userById,
+      query: gql`
+        query User($id: String!) {
+          user(id: $id) {
+            id
+            email
+            name
+            bio
+            company
+            avatar
+            verified
+            profiles
+            role
+            suuid
+            streams {
+              totalCount
+            }
+            commits {
+              totalCount
+            }
+          }
+        }
+      `,
       variables() {
         return {
           id: this.$route.params.userId
diff --git a/packages/frontend/src/views/stream/Activity.vue b/packages/frontend/src/views/stream/Activity.vue
index d7b639401..dfbbf7d3f 100644
--- a/packages/frontend/src/views/stream/Activity.vue
+++ b/packages/frontend/src/views/stream/Activity.vue
@@ -5,7 +5,7 @@
       <h3 class="title font-italic font-weight-thin my-5">Recent activity on this Stream</h3>
     </v-col>
     <v-col cols="12">
-      <v-timeline v-if="stream" align-top :dense="$vuetify.breakpoint.mobile">
+      <v-timeline v-if="stream" align-top dense>
         <list-item-activity
           v-for="activity in stream.activity.items"
           :key="activity.time"
@@ -20,7 +20,7 @@
           <div slot="no-results">There are no ctivities to load</div>
         </infinite-loading>
       </v-timeline>
-      <v-timeline v-else-if="$apollo.loading" align-top :dense="$vuetify.breakpoint.mobile">
+      <v-timeline v-else-if="$apollo.loading" align-top dense>
         <v-timeline-item v-for="i in 6" :key="i" medium>
           <v-skeleton-loader type="article"></v-skeleton-loader>
         </v-timeline-item>
diff --git a/packages/frontend/src/views/stream/Details.vue b/packages/frontend/src/views/stream/Details.vue
index 05c0ce712..c559d7e42 100644
--- a/packages/frontend/src/views/stream/Details.vue
+++ b/packages/frontend/src/views/stream/Details.vue
@@ -7,9 +7,10 @@
     </v-col>
     <v-col v-if="stream" cols="12">
       <h1 class="display-1">{{ stream.name }}</h1>
-      <h3 class="title font-italic font-weight-thin my-5">
-        {{ truncate(stream.description) }}
-      </h3>
+      <h3
+        class="title font-italic font-weight-thin my-5"
+        v-html="hyperlink(truncate(stream.description))"
+      ></h3>
 
       <!-- <v-card class="mt-5 pa-4" elevation="0" rounded="lg"> -->
       <v-row v-if="stream">
@@ -87,7 +88,7 @@
                   </v-list-item-content>
                   <v-list-item-action>
                     <v-row align="center" justify="center">
-                      <v-chip small class="mr-2">
+                      <v-chip small class="mr-2 no-hover">
                         <v-icon small class="mr-2">mdi-source-commit</v-icon>
                         {{ latestCommit.id }}
                       </v-chip>
@@ -124,7 +125,7 @@
                     </v-list-item-content>
                     <v-list-item-action>
                       <v-row align="center" justify="center">
-                        <v-chip small class="mr-2">
+                        <v-chip small class="mr-2 no-hover">
                           <v-icon small class="mr-2">mdi-source-commit</v-icon>
                           {{ commit.id }}
                         </v-chip>
@@ -143,8 +144,8 @@
                   <v-row align="center" justify="center">
                     <span class="font-weight-bold primary--text py-3 my-4">
                       <v-icon class="mr-2 float-left" color="primary">mdi-source-commit</v-icon>
-                      SEE ALL ({{ selectedBranch.commits.totalCount }}) COMMITS ON
-                      {{ selectedBranch.name }}
+                      See all commits on
+                      {{ selectedBranch.name }} ({{ selectedBranch.commits.totalCount }})
                     </span>
                   </v-row>
                 </v-list-item>
@@ -159,20 +160,20 @@
         <v-col cols="12" sm="12" md="4" lg="3" xl="3">
           <h4 class="space-grotesk mb-3">About:</h4>
           <div>
-            <v-chip class="mr-3 mb-3">
+            <v-chip class="mr-3 mb-3 no-hover">
               <v-icon small left>mdi-source-branch</v-icon>
 
               {{ stream.branches.totalCount }}
               branch{{ stream.branches.totalCount === 1 ? '' : 'es' }}
             </v-chip>
-            <v-chip class="mr-3 mb-3">
+            <v-chip class="mr-3 mb-3 no-hover">
               <v-icon small left>mdi-source-commit</v-icon>
               &nbsp;
 
               {{ stream.commits.totalCount }}
               commit{{ stream.commits.totalCount === 1 ? '' : 's' }}
             </v-chip>
-            <v-chip class="mr-3 mb-3">
+            <v-chip class="mr-3 mb-3 no-hover">
               <span
                 v-if="stream.isPublic"
                 v-tooltip="`Anyone can view this stream. Only you and collaborators can edit it.`"
@@ -185,19 +186,23 @@
                 &nbsp; private
               </span>
             </v-chip>
-            <v-chip v-if="loggedIn" class="mr-3 mb-3">
+            <v-chip v-if="loggedIn" class="mr-3 mb-3 no-hover">
               <v-icon small left>mdi-account-key-outline</v-icon>
               {{ stream.role.split(':')[1] }}
             </v-chip>
           </div>
           <div class="my-3">
-            <div v-tooltip="formatDate(stream.createdAt)" class="caption mb-3">
-              Created
-              <timeago :datetime="stream.createdAt"></timeago>
+            <div class="caption mb-3">
+              <span v-tooltip="formatDate(stream.createdAt)">
+                Created
+                <timeago :datetime="stream.createdAt"></timeago>
+              </span>
             </div>
-            <div v-tooltip="formatDate(stream.updatedAt)" class="caption">
-              Updated
-              <timeago :datetime="stream.updatedAt"></timeago>
+            <div class="caption">
+              <span v-tooltip="formatDate(stream.updatedAt)">
+                Updated
+                <timeago :datetime="stream.updatedAt"></timeago>
+              </span>
             </div>
           </div>
           <h4 class="space-grotesk mt-7 mb-3">Collaborators:</h4>
@@ -356,6 +361,10 @@ export default {
   },
 
   methods: {
+    hyperlink(text) {
+      var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi
+      return text.replace(exp, '<a target="_blank" href="$1">$1</a>')
+    },
     truncate(input, length = 250) {
       if (!input) return ''
       if (input.length > length) {