huanld/speckle-server
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(frontent): re-adds onboarding wizard

Browse Source
This commit is contained in:
Matteo Cominetti
2021-07-28 10:43:38 +02:00
parent b3ffed4fb9
commit 0b12da31bb
6 changed files with 316 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/GettingStartedWizard.vue
+255
View File
@@ -0,0 +1,255 @@
<template>
<div v-if="quickstart > 0" class="ma-3">
<div v-if="user" class="ma-5 headline justify-center text-center">
Hello {{ user.name.split(' ')[0] }} 👋,
<br />
It seems you're new here, let's get you set up!
</div>
<v-stepper v-model="quickstart" flat shaped vertical class="rounded-lg quickstart-stepper mt-5">
<v-btn
small
text
class="white--grey"
style="position: absolute; top: 5px; right: 5px; z-index: 1002"
@click="skip"
>
Skip
</v-btn>
<v-stepper-step :complete="quickstart > 1" step="1">Create your first stream</v-stepper-step>
<v-stepper-content step="1" class="body-2">
<p>
Streams are the
<b>primary way Speckle organizes data</b>
. You can see them as a folder, a project or a repository.
</p>
<p>
Streams
<b>can be shared with others</b>
and can be made publicly visible on the web. Only the owner of a stream can manage its
permissions and visibility.
</p>
<p>
In order to use Speckle you first need to create a stream, so
<b>go ahead and create your first one</b>
!
</p>
</v-stepper-content>
<v-stepper-step :complete="quickstart > 2" step="2">Install Speckle Manager</v-stepper-step>
<v-stepper-content step="2" class="body-2">
<p>
Speckle Manager is a free
<b>desktop application</b>
that lets you install connectors for some of the most popular design and analysis
software.
</p>
<p>
The connectors
<b>exchange</b>
geometry and BIM data with Speckle, so that you can access it wherever you want!
</p>
<v-btn elevation="10" class="my-5" rounded color="primary" @click="downloadManager">
<v-icon small class="mr-4">mdi-download</v-icon>
Download Manager
</v-btn>
</v-stepper-content>
<v-stepper-step :complete="quickstart > 3" step="3">Set up Speckle Manager</v-stepper-step>
<v-stepper-content step="3">
<p>
With Speckle Manager installed,
<b>log into your account</b>
and then
<b>install the connectors</b>
for the software that you use.
</p>
<p>
<v-btn
elevation="10"
rounded
color="primary"
target="_blank"
@click="refreshApplications"
>
Done
</v-btn>
</p>
<p v-if="refreshFailied" class="red--text caption">
Please install Manager and log into your account to continue.
</p>
<p class="caption">Having issues logging in Manager? Try with the button below:</p>
<v-btn small text rounded color="primary" @click="addAccount">
<v-icon small class="mr-4">mdi-account-plus</v-icon>
Add account to manager
</v-btn>
</v-stepper-content>
<v-stepper-step step="4">Send data to Speckle</v-stepper-step>
<v-stepper-content step="4">
<p>Great progress 🥳!</p>
<p>
We're almost done here, and just need to send your first set of data to Speckle. By doing
so you will also be creating your first
<b>commit.</b>
</p>
<p>
Commits are
<b>snapshots or versions of your data in time.</b>
Every time you send to Speckle, a new commit is created for you.
</p>
<p>Send data to Speckle now by using one of our connetors!</p>
<p>
<v-btn
elevation="10"
class="my-5"
rounded
color="primary"
href="https://speckle.guide/user/connectors.html"
target="_blank"
>
Send Some Data
</v-btn>
</p>
</v-stepper-content>
</v-stepper>
</div>
</template>
<script>
import gql from 'graphql-tag'
export default {
apollo: {
user: {
query: gql`
query {
user {
id
name
streams {
totalCount
}
commits {
totalCount
}
}
}
`,
skip() {
return !this.loggedIn
}
},
authorizedApps: {
query: gql`
query {
user {
id
authorizedApps {
id
}
}
}
`,
update: (data) => data.user.authorizedApps
},
$subscribe: {
userStreamAdded: {
query: gql`
subscription {
userStreamAdded
}
`,
result() {
this.$apollo.queries.user.refetch()
},
skip() {
return !this.loggedIn
}
},
userStreamRemoved: {
query: gql`
subscription {
userStreamRemoved
}
`,
result() {
this.$apollo.queries.user.refetch()
},
skip() {
return !this.loggedIn
}
}
}
},
data: () => ({
streams: [],
hasClickedDownload: false,
refreshFailied: false,
skipped: false
}),
computed: {
loggedIn() {
return localStorage.getItem('uuid') !== null
},
rootUrl() {
return window.location.origin
},
quickstart() {
if (!this.user || this.skipped) return 0
if (this.user.streams.totalCount === 0) return 1
if (this.user.streams.totalCount > 0 && !this.hasManager && !this.hasClickedDownload) return 2
if (this.user.streams.totalCount > 0 && !this.hasManager && this.hasClickedDownload) return 3
if (this.hasManager && this.user.commits.totalCount === 0) return 4
if (this.user.commits.totalCount > 0) return 0
return 0
},
hasManager() {
if (!this.authorizedApps) return false
return this.authorizedApps.findIndex((a) => a.id === 'sdm') !== -1
}
},
watch: {
streams(val) {
if (val.items.length === 0 && !localStorage.getItem('onboarding')) {
this.$router.push('/onboarding')
}
}
},
mounted() {
this.skipped = localStorage.getItem('wizard')
},
methods: {
skip() {
localStorage.setItem('wizard', 'skipped')
this.skipped = true
},
downloadManager() {
this.hasClickedDownload = true
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')
},
async refreshApplications() {
await this.$apollo.queries.authorizedApps.refetch()
if (!this.hasManager) {
this.refreshFailied = true
} else this.refreshFailied = false
}
}
}
</script>
<style scoped>
.quickstart-stepper {
box-shadow: none !important;
}
</style>
packages/frontend/src/components/ListItemActivity.vue
+17 -12
View File
@@ -1,6 +1,6 @@
<template>
<div class="list-item-activity">
<div v-if="user" class="caption mb-2">
<div v-if="user" class="body-2 mb-2">
<user-avatar :id="user.id" :avatar="user.avatar" :size="30" :name="user.name" />
&nbsp;
<a target="_blank" :href="'/profile/' + user.id">{{ user.name }}</a>
@@ -16,6 +16,7 @@
<v-card
v-if="activity.actionType.includes('stream_permissions') && stream"
class="mb-5 ml-10 activity-card"
flat
>
<v-card-text class="pa-5 body-1">
<v-chip v-if="targetUser" pill :color="activityInfo.color">
@@ -43,9 +44,11 @@
<v-card
v-else-if="activity.resourceType === 'stream' && stream"
class="mb-5 ml-10 activity-card"
flat
>
<v-card-text class="pa-5 body-1">
<a :href="url" class="title">
<v-icon color="primary" small>mdi-compare-vertical</v-icon>
{{ stream.name }}
</a>
<span class="ml-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
@@ -95,7 +98,7 @@
</v-card>
<!-- BRANCHES -->
<v-card v-else-if="activity.resourceType === 'branch'" class="mb-5 ml-10 activity-card">
<v-card v-else-if="activity.resourceType === 'branch'" class="mb-5 ml-10 activity-card" flat>
<v-card-text class="pa-5 body-1">
<v-chip :to="url" :color="activityInfo.color">
<v-icon small class="mr-2 float-left" light>{{ activityInfo.icon }}</v-icon>
@@ -107,7 +110,7 @@
</v-card>
<!-- COMMITS -->
<v-card v-else-if="activity.resourceType === 'commit'" class="mb-5 ml-10 activity-card">
<v-card v-else-if="activity.resourceType === 'commit'" class="mb-5 ml-10 activity-card" flat>
<v-card-text class="pa-5">
<div>
<v-chip :to="url" :color="activityInfo.color">
@@ -115,7 +118,7 @@
{{ activity.resourceId }}
</v-chip>
<span class="mx-3 body-2 font-italic">{{ activityInfo.actionText }}</span>
<span v-if="activity.actionType === 'commit_create' && commit">
<span v-if="activity.actionType !== 'commit_delete' && commit">
<v-chip
:to="`/streams/${activity.streamId}/branches/${commit.branchName}`"
small
@@ -124,10 +127,12 @@
<v-icon small class="float-left" light>mdi-source-branch</v-icon>
{{ commit.branchName }}
</v-chip>
<span class="mx-3 body-2 font-italic">from</span>
<source-app-avatar :application-name="commit.sourceApplication" />
<span v-if="activity.actionType === 'commit_create'">
<span class="mx-3 body-2 font-italic">from</span>
<source-app-avatar :application-name="commit.sourceApplication" />
</span>
</span>
<span v-if="activity.actionType === 'commit_create' && !commit">[commit deleted]</span>
<span v-if="activity.actionType !== 'commit_delete' && !commit">[commit deleted]</span>
</div>
<div
v-if="activityInfo.description"
@@ -294,7 +299,7 @@ export default {
actionText: 'new stream',
description: this.activity?.info?.stream?.description
? this.truncate(this.activity.info.stream.description, 50)
: 'No description provided.'
: ''
}
case 'stream_update':
return {
@@ -322,11 +327,11 @@ export default {
return {
icon: 'mdi-source-branch-plus',
captionText: 'created a branch in',
actionText: 'new branch',
actionText: 'new branch in',
color: 'success',
description: this.activity?.info?.branch?.description
? this.truncate(this.activity.info.branch.description, 50)
: 'No description provided.'
: ''
}
case 'branch_delete':
return {
@@ -339,7 +344,7 @@ export default {
return {
icon: 'mdi-source-branch-sync',
captionText: 'updated a branch in',
actionText: 'branch updated',
actionText: 'branch updated in',
color: 'primary',
description: this.updatedDescription()
}
@@ -355,7 +360,7 @@ export default {
return {
icon: 'mdi-timeline-text-outline',
captionText: 'updated a commit in',
actionText: 'commit updated',
actionText: 'commit updated in',
color: 'primary',
description: this.updatedDescription()
}
packages/frontend/src/components/ListItemStream.vue
+1 -1
View File
@@ -3,7 +3,7 @@
<v-card
:to="'/streams/' + stream.id"
color=""
:elevation="hover ? 5 : 1"
:elevation="hover ? 5 : 0"
style="transition: all 0.2s ease-in-out"
>
<img
packages/frontend/src/graphql/user.gql
-13
View File
@@ -16,18 +16,5 @@ query {
commits {
totalCount
}
activity {
totalCount
cursor
items {
actionType
userId
resourceId
resourceType
streamId
message
time
}
}
}
}
packages/frontend/src/views/Streams.vue
+17 -175
View File
@@ -26,6 +26,9 @@
</v-col>
<v-col cols="12" sm="12" md="8" lg="9" xl="10">
<v-row>
<v-col cols="12">
<getting-started-wizard />
</v-col>
<v-col v-if="$apollo.loading">
<v-card elevation="0" color="transparent">
<div v-if="$apollo.loading" class="my-5">
@@ -70,127 +73,17 @@
</infinite-loading>
</v-row>
</v-col>
<v-col v-if="quickstart > 0">
<div v-if="quickstart === 1" class="ma-5 headline">
Hello 👋
<v-col v-else cols="12">
<div class="ma-5 headline justify-center text-center">
😿
<br />
It seems you're new here, let's get you set up:
Your don't have any streams!
<br />
<span class="subtitle-2 font-italic">
Create one now with the big blue button to the side.
</span>
</div>
<v-stepper
v-model="quickstart"
flat
shaped
vertical
class="rounded-lg quickstart-stepper mt-5"
>
<v-stepper-step :complete="quickstart > 1" step="1">
Create your first stream
</v-stepper-step>
<v-stepper-content step="1" class="body-2">
<p>
Streams are the
<b>primary way Speckle organizes data</b>
. You can see them as a folder, a project or a repository.
</p>
<p>
Streams
<b>can be shared with others</b>
and can be made publicly visible on the web. Only the owner of a stream can manage
its permissions and visibility.
</p>
<p>
In order to use Speckle you first need to create a stream, so
<b>go ahead and create your first one</b>
!
</p>
</v-stepper-content>
<v-stepper-step :complete="quickstart > 2" step="2">
Install Speckle Manager
</v-stepper-step>
<v-stepper-content step="2" class="body-2">
<p>
Speckle Manager is a free
<b>desktop application</b>
that lets you install connectors for some of the most popular design and analysis
software.
</p>
<p>
The connectors
<b>exchange</b>
geometry and BIM data with Speckle, so that you can access it wherever you want!
</p>
<v-btn elevation="10" class="my-5" rounded color="primary" @click="downloadManager">
<v-icon small class="mr-4">mdi-download</v-icon>
Download Manager
</v-btn>
</v-stepper-content>
<v-stepper-step :complete="quickstart > 3" step="3">
Set up Speckle Manager
</v-stepper-step>
<v-stepper-content step="3">
<p>
With Speckle Manager installed,
<b>log into your account</b>
and then
<b>install the connectors</b>
for the software that you use.
</p>
<p>
<v-btn
elevation="10"
rounded
color="primary"
target="_blank"
@click="refreshApplications"
>
Done
</v-btn>
</p>
<p v-if="refreshFailied" class="red--text caption">
Please install Manager and log into your account to continue.
</p>
<p class="caption">Having issues logging in Manager? Try with the button below:</p>
<v-btn small text rounded color="primary" @click="addAccount">
<v-icon small class="mr-4">mdi-account-plus</v-icon>
Add account to manager
</v-btn>
</v-stepper-content>
<v-stepper-step step="4">Send data to Speckle</v-stepper-step>
<v-stepper-content step="4">
<p>Great progress 🥳!</p>
<p>
We're almost done here, and just need to send your first set of data to Speckle.
By doing so you will also be creating your first
<b>commit.</b>
</p>
<p>
Commits are
<b>snapshots or versions of your data in time.</b>
Every time you send to Speckle, a new commit is created for you.
</p>
<p>Send data to Speckle now by using one of our connetors!</p>
<p>
<v-btn
elevation="10"
class="my-5"
rounded
color="primary"
href="https://speckle.guide/user/connectors.html"
target="_blank"
>
How to use connectors
</v-btn>
</p>
</v-stepper-content>
</v-stepper>
</v-col>
</v-row>
</v-col>
@@ -200,6 +93,7 @@
<script>
import ListItemStream from '../components/ListItemStream'
import StreamNewDialog from '../components/dialogs/StreamNewDialog'
import GettingStartedWizard from '../components/GettingStartedWizard'
import streamsQuery from '../graphql/streams.gql'
import userQuery from '../graphql/user.gql'
import InfiniteLoading from 'vue-infinite-loading'
@@ -212,7 +106,8 @@ export default {
ListItemStream,
StreamNewDialog,
InfiniteLoading,
ServerInviteDialog
ServerInviteDialog,
GettingStartedWizard
},
apollo: {
streams: {
@@ -253,43 +148,14 @@ export default {
return !this.loggedIn
}
}
},
authorizedApps: {
query: gql`
query {
user {
id
authorizedApps {
id
}
}
}
`,
update: (data) => data.user.authorizedApps
}
},
data: () => ({
activeTab: 'streams',
streams: [],
newStreamDialog: false,
hasClickedDownload: false,
refreshFailied: false
newStreamDialog: false
}),
computed: {
quickstart() {
if (!this.user) return 0
if (this.streams.totalCount === 0) return 1
if (this.streams.totalCount > 0 && !this.hasManager && !this.hasClickedDownload) return 2
if (this.streams.totalCount > 0 && !this.hasManager && this.hasClickedDownload) return 3
if (this.hasManager && this.user.commits.totalCount === 0) return 4
if (this.user.commits.totalCount > 0) return 0
return 0
},
hasManager() {
if (!this.authorizedApps) return false
return this.authorizedApps.findIndex((a) => a.id === 'sdm') !== -1
},
recentActivity() {
let activity = []
@@ -309,9 +175,6 @@ export default {
},
loggedIn() {
return localStorage.getItem('uuid') !== null
},
rootUrl() {
return window.location.origin
}
},
watch: {
@@ -325,23 +188,7 @@ export default {
showServerInviteDialog() {
this.$refs.serverInviteDialog.show()
},
downloadManager() {
this.hasClickedDownload = true
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')
},
async refreshApplications() {
await this.$apollo.queries.authorizedApps.refetch()
if (!this.hasManager) {
this.refreshFailied = true
} else this.refreshFailied = false
},
infiniteHandler($state) {
this.$apollo.queries.streams.fetchMore({
variables: {
@@ -390,8 +237,3 @@ export default {
text-decoration: underline;
}
</style>
<style scoped>
.quickstart-stepper {
box-shadow: none !important;
}
</style>
packages/frontend/src/views/Timeline.vue
+26 -2
View File
@@ -53,6 +53,9 @@
</v-col>
<v-col cols="12" sm="12" md="8" lg="9" xl="10">
<v-row>
<v-col cols="12">
<getting-started-wizard />
</v-col>
<v-col v-if="$apollo.loading && !timeline">
<v-card elevation="0" color="transparent">
<div v-if="$apollo.loading" class="my-5">
@@ -61,7 +64,7 @@
</v-card>
</v-col>
<v-col v-else>
<v-col v-else-if="timeline && timeline.items.length > 0">
<div>
<v-subheader class="mb-3">Recent activity</v-subheader>
<div v-if="timeline" key="activity-list">
@@ -81,6 +84,18 @@
</div>
</div>
</v-col>
<v-col v-else cols="12">
<div class="ma-5 headline justify-center text-center">
🎈
<br />
Your feed is empty!
<br />
<span class="subtitle-2 font-italic">
Try creating a stream, sending data etc and your activity willshow up here.
</span>
</div>
</v-col>
</v-row>
</v-col>
</v-row>
@@ -89,14 +104,23 @@
<script>
import ListItemActivity from '@/components/ListItemActivity'
import GettingStartedWizard from '../components/GettingStartedWizard'
import ServerInviteDialog from '@/components/dialogs/ServerInviteDialog.vue'
import StreamNewDialog from '@/components/dialogs/StreamNewDialog'
import gql from 'graphql-tag'
import InfiniteLoading from 'vue-infinite-loading'
import SpeckleLoading from '../components/SpeckleLoading.vue'
export default {
name: 'Timeline',
components: { ListItemActivity, InfiniteLoading, ServerInviteDialog, StreamNewDialog },
components: {
ListItemActivity,
InfiniteLoading,
ServerInviteDialog,
StreamNewDialog,
GettingStartedWizard,
SpeckleLoading
},
props: {
type: String
},