Merge pull request #172 from specklesystems/matteo/dev

feat(frontend): adds invite buttons to stream page and homepage, adds…

packages/frontend/src/components/GettingStartedSteps.vue

@@ -146,6 +146,9 @@ export default {
       return window.location.origin
     }
   },
+  mounted() {
+    this.$matomo && this.$matomo.trackEvent('onboarding', 'start')
+  },
   methods: {
     skip() {
       this.$matomo && this.$matomo.trackPageView(`onboarding/skip`)
@@ -166,10 +169,12 @@ export default {
     },
     downloadManager() {
       this.$matomo && this.$matomo.trackPageView(`onboarding/managerdownload`)
+      this.$matomo && this.$matomo.trackEvent('onboarding', 'managerdownload')
       window.open('https://releases.speckle.dev/manager/SpeckleManager%20Setup.exe', '_blank')
     },
     addAccount() {
       this.$matomo && this.$matomo.trackPageView(`onboarding/accountadd`)
+      this.$matomo && this.$matomo.trackEvent('onboarding', 'accountadd')
       window.open(`speckle://accounts?add_server_account=${this.rootUrl}`, '_blank')
     }
   }

packages/frontend/src/components/SidebarStream.vue

@@ -101,18 +101,32 @@
         </template>
       </v-row>
       <v-divider class="pb-2 mt-2"></v-divider>
+
       <v-btn
         v-if="userRole === 'owner'"
         small
         plain
         color="primary"
         text
-        class="px-0"
+        class="px-0 d-block"
         @click="dialogShare = true"
       >
         <v-icon small class="mr-2">mdi-account-multiple</v-icon>
         Manage
       </v-btn>
+      <v-btn
+        v-if="userRole === 'owner'"
+        small
+        plain
+        color="primary"
+        text
+        class="px-0 d-block"
+        @click="showStreamInviteDialog"
+      >
+        <v-icon small class="mr-2">mdi-email-send-outline</v-icon>
+        Send an invite
+      </v-btn>
+      <stream-invite-dialog ref="streamInviteDialog" :stream-id="stream.id" />
       <v-dialog v-model="dialogShare" max-width="500">
         <stream-share-dialog
           :users="stream.collaborators"
@@ -129,12 +143,14 @@ import streamQuery from '../graphql/stream.gql'
 import StreamEditDialog from '../components/dialogs/StreamEditDialog'
 import StreamShareDialog from '../components/dialogs/StreamShareDialog'
 import UserAvatar from '../components/UserAvatar'
+import StreamInviteDialog from '../components/dialogs/StreamInviteDialog'
 
 export default {
   components: {
     StreamEditDialog,
     StreamShareDialog,
-    UserAvatar
+    UserAvatar,
+    StreamInviteDialog
   },
   props: {
     userRole: {
@@ -175,6 +191,9 @@ export default {
       let options = { year: 'numeric', month: 'short', day: 'numeric' }
 
       return date.toLocaleString(undefined, options)
+    },
+    showStreamInviteDialog() {
+      this.$refs.streamInviteDialog.show()
     }
   }
 }

packages/frontend/src/components/UserMenuTop.vue

@@ -21,7 +21,7 @@
             <v-icon>mdi-account</v-icon>
           </v-list-item-action>
         </v-list-item>
-        <v-list-item @click="inviteDialog++">
+        <v-list-item @click="showServerInviteDialog">
           <v-list-item-content>
             <v-list-item-title>
               <b>Send an invite</b>
@@ -60,7 +60,7 @@
       </v-list>
     </v-menu>
 
-    <server-invite-dialog :show="inviteDialog" />
+    <server-invite-dialog ref="serverInviteDialog" />
   </div>
 </template>
 <script>
@@ -83,11 +83,12 @@ export default {
     }
   },
   data() {
-    return {
-      inviteDialog: 1
-    }
+    return {}
   },
   methods: {
+    showServerInviteDialog() {
+      this.$refs.serverInviteDialog.show()
+    },
     signOut() {
       signOut()
     },

packages/frontend/src/components/dialogs/ServerInviteDialog.vue

@@ -35,12 +35,6 @@ import gql from 'graphql-tag'
 
 export default {
   name: 'ServerInviteDialog',
-  props: {
-    show: {
-      type: Number,
-      default: 0
-    }
-  },
   data() {
     return {
       showDialog: false,
@@ -59,9 +53,6 @@ export default {
     }
   },
   watch: {
-    show() {
-      this.showDialog = true
-    },
     showDialog() {
       this.clear()
       this.email = null
@@ -69,16 +60,20 @@ export default {
     }
   },
   methods: {
+    show() {
+      this.showDialog = true
+    },
     clear() {
       this.error = null
       this.showError = false
       this.success = false
-      this.$refs.form.resetValidation()
+      if (this.$refs.form) this.$refs.form.resetValidation()
     },
     async sendInvite() {
       if (!this.$refs.form.validate()) return
 
       this.$matomo && this.$matomo.trackPageView('invite/create')
+      this.$matomo && this.$matomo.trackEvent('invite', 'server')
       try {
         await this.$apollo.mutate({
           mutation: gql`

packages/frontend/src/components/dialogs/StreamInviteDialog.vue

@@ -14,7 +14,6 @@
             We will send an invite link for this server to the email below and once your guest will
             accept the invite,
             <b>they will be granted access to this stream</b>
-            . You can also add a personal message if you want to.
           </v-card-text>
           <v-card-text class="pt-0 mt-0">
             <v-text-field
@@ -36,12 +35,8 @@
 import gql from 'graphql-tag'
 
 export default {
-  name: 'ServerInviteDialog',
+  name: 'StreamInviteDialog',
   props: {
-    show: {
-      type: Number,
-      default: 0
-    },
     streamId: {
       type: String,
       default: null
@@ -65,9 +60,6 @@ export default {
     }
   },
   watch: {
-    show() {
-      this.showDialog = true
-    },
     showDialog() {
       this.clear()
       this.email = null
@@ -75,16 +67,20 @@ export default {
     }
   },
   methods: {
+    show() {
+      this.showDialog = true
+    },
     clear() {
       this.error = null
       this.showError = false
       this.success = false
-      this.$refs.form.resetValidation()
+      if (this.$refs.form) this.$refs.form.resetValidation()
     },
     async sendInvite() {
       if (!this.$refs.form.validate()) return
 
       this.$matomo && this.$matomo.trackPageView('invite/stream/create')
+      this.$matomo && this.$matomo.trackEvent('invite', 'stream')
       try {
         await this.$apollo.mutate({
           mutation: gql`

packages/frontend/src/components/dialogs/StreamShareDialog.vue

@@ -28,7 +28,7 @@
         </v-list-item>
         <v-list-item v-if="filteredSearchResults.length === 0" class="px-0 mx-0">
           <v-list-item-content>
-            <v-btn block color="primary" @click="inviteDialog++">Invite {{ search }}</v-btn>
+            <v-btn block color="primary" @click="showStreamInviteDialog">Invite {{ search }}</v-btn>
           </v-list-item-content>
         </v-list-item>
         <v-list-item
@@ -58,7 +58,7 @@
         </v-list-item>
       </v-list>
     </v-card-text>
-    <stream-invite-dialog :show="inviteDialog" :stream-id="stream.id" />
+    <stream-invite-dialog ref="streamInviteDialog" :stream-id="stream.id" />
     <v-card-title>Existing collaborators</v-card-title>
     <v-card-text class="px-0">
       <p v-if="collaborators.length === 0" class="ml-6">This stream has no collaborators.</p>
@@ -123,8 +123,7 @@ export default {
     selectedRole: null,
     userSearch: { items: [] },
     serverInfo: { roles: [] },
-    loading: false,
-    inviteDialog: 0
+    loading: false
   }),
   apollo: {
     stream: {
@@ -240,6 +239,9 @@ export default {
       } catch (e) {
         console.log(e)
       }
+    },
+    showStreamInviteDialog() {
+      this.$refs.streamInviteDialog.show()
     }
   }
 }

packages/frontend/src/views/Stream.vue

@@ -32,29 +32,25 @@
         </v-btn>
       </template>
     </v-snackbar>
-    <stream-invite-dialog v-if="stream" :show="inviteDialog" :stream-id="stream.id" />
   </v-container>
 </template>
 <script>
 import SidebarStream from '../components/SidebarStream'
 import ErrorBlock from '../components/ErrorBlock'
 import streamQuery from '../graphql/stream.gql'
-import StreamInviteDialog from '../components/dialogs/StreamInviteDialog'
 import gql from 'graphql-tag'
 
 export default {
   name: 'Stream',
   components: {
     SidebarStream,
-    ErrorBlock,
-    StreamInviteDialog
+    ErrorBlock
   },
   data() {
     return {
       error: '',
       commitSnackbar: false,
       commitSnackbarInfo: {},
-      inviteDialog: 1,
       shouldOpenInvite: false
     }
   },
@@ -114,15 +110,6 @@ export default {
       else return null
     }
   },
-  watch: {
-    '$apollo.loading'(newVal) {
-      if (!newVal && this.shouldOpenInvite) {
-        setTimeout(() => {
-          this.inviteDialog++
-        }, 500)
-      }
-    }
-  },
   mounted() {
     if (this.$route.query.invite) {
       this.shouldOpenInvite = true

packages/frontend/src/views/StreamMain.vue

@@ -77,7 +77,7 @@
             </v-list-item>
           </v-list>
           <!-- LAST 2 COMMITS -->
-          <v-list dense color="transparent" class="mb-0 pa-0">
+          <v-list v-if="selectedBranch" dense color="transparent" class="mb-0 pa-0">
             <div v-for="(commit, i) in selectedBranch.commits.items" :key="commit.id">
               <v-list-item
                 v-if="i > 0"

packages/frontend/src/views/Streams.vue

@@ -73,10 +73,14 @@
                   </v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
-              <v-divider v-if="i < recentActivity.length - 1" />
+              <v-divider />
             </div>
           </v-list>
-          <v-card-actions></v-card-actions>
+          <v-btn small plain color="primary" text class="d-block" @click="showServerInviteDialog">
+            <v-icon small class="mr-2">mdi-email-send-outline</v-icon>
+            Send an invite
+          </v-btn>
+          <server-invite-dialog ref="serverInviteDialog" />
         </v-card>
       </v-col>
       <v-col cols="12" sm="12" md="8" lg="9" xl="8">
@@ -127,11 +131,19 @@ import UserAvatar from '../components/UserAvatar'
 import streamsQuery from '../graphql/streams.gql'
 import userQuery from '../graphql/user.gql'
 import InfiniteLoading from 'vue-infinite-loading'
+import ServerInviteDialog from '../components/dialogs/ServerInviteDialog.vue'
 import gql from 'graphql-tag'
 
 export default {
   name: 'Streams',
-  components: { ListItemStream, StreamNewDialog, InfiniteLoading, UserAvatar, NoDataPlaceholder },
+  components: {
+    ListItemStream,
+    StreamNewDialog,
+    InfiniteLoading,
+    UserAvatar,
+    NoDataPlaceholder,
+    ServerInviteDialog
+  },
   apollo: {
     streams: {
       prefetch: true,
@@ -228,6 +240,9 @@ export default {
         return -1
       }
       return 0
+    },
+    showServerInviteDialog() {
+      this.$refs.serverInviteDialog.show()
     }
   }
 }