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

feat(frontend): wip onboarding stepper

Browse Source
This commit is contained in:
Matteo Cominetti
2021-06-23 19:11:26 +01:00
parent 0468dc32b4
commit e110305a92
2 changed files with 203 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/GettingStartedSteps.vue
+1 -63
View File
@@ -94,15 +94,6 @@
Whether you are writing new integrations, custom workflows or creating brand new
apps on top of Speckle, we're here to support you!
</p>
<p>
Get started sending data into Speckle by installing our connectos and setting up
your accounts with our
<b>Desktop Manager 👇</b>
</p>
<v-btn elevation="10" class="my-4" rounded color="primary" @click="downloadManager">
<v-icon small class="mr-4">mdi-download</v-icon>
Install connectors
</v-btn>
</v-card-text>
</v-card>
</v-window-item>
@@ -126,43 +117,6 @@
<b>exchange</b>
geometry and BIM data dirctly from the tools you use.
</p>
<p>
Install all the connectors you need and manage your accounts with our
<b>Desktop Manager 👇</b>
</p>
<v-btn elevation="10" class="my-4" rounded color="primary" @click="downloadManager">
<v-icon small class="mr-4">mdi-download</v-icon>
Install connectors
</v-btn>
<v-expansion-panels flat class="mt-2 text-center">
<v-expansion-panel>
<v-expansion-panel-header class="text-center d-inline">
<template #actions>
<v-icon class="icon">$expand</v-icon>
</template>
<div class="text-center caption">Having problems?</div>
</v-expansion-panel-header>
<v-expansion-panel-content class="body-2">
<p>
Cannot set up your account? Try adding it from the web:
<v-btn small text color="primary" @click="addAccount">Add Account</v-btn>
</p>
<p>
Having issues installing the connectors? Check out our docs:
<v-btn
small
text
color="primary"
href="https://speckle.guide/user/manager.html"
target="_blank"
>
User Guide
</v-btn>
</p>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-card-text>
</v-card>
</v-window-item>
@@ -402,11 +356,7 @@ export default {
}
]
}),
computed: {
rootUrl() {
return window.location.origin
}
},
computed: {},
mounted() {
this.$matomo && this.$matomo.trackEvent('onboarding', 'start')
},
@@ -436,18 +386,6 @@ export default {
nextDev() {
this.isDev = true
this.next()
},
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.hasClickedAddAccount++
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/views/Streams.vue
+202 -43
View File
@@ -83,48 +83,162 @@
</v-card>
</v-col>
<v-col cols="12" sm="12" md="8" lg="9" xl="10">
<div v-if="!$apollo.loading && streams.totalCount === 0" class="pa-4">
<no-data-placeholder
:message="`Hello there! It seems like you don't have any streams yet. Here's a handful of useful links to help you get started:`"
/>
</div>
<v-card v-if="user && user.streams.totalCount > 0" class="my-5" flat>
<v-card-text class="body-1">
<span>
You have
<v-icon small>mdi-compare-vertical</v-icon>
<b>{{ user.streams.totalCount }}</b>
streams and
<v-icon small>mdi-source-commit</v-icon>
<b>{{ user.commits.totalCount }}</b>
commits.
</span>
</v-card-text>
</v-card>
<v-card elevation="0" color="transparent">
<div v-if="$apollo.loading" class="my-5">
<v-skeleton-loader type="list-item-three-line"></v-skeleton-loader>
</div>
</v-card>
<v-row v-if="streams && streams.items">
<v-col
v-for="(stream, i) in streams.items"
:key="i"
cols="12"
sm="12"
md="12"
lg="6"
xl="4"
>
<list-item-stream :stream="stream"></list-item-stream>
<v-row>
<v-col v-if="$apollo.loading">
<v-card elevation="0" color="transparent">
<div v-if="$apollo.loading" class="my-5">
<v-skeleton-loader type="list-item-three-line"></v-skeleton-loader>
</div>
</v-card>
</v-col>
<v-col v-else-if="streams && streams.items && streams.items.length > 0">
<!-- <div v-if="!$apollo.loading && streams.totalCount === 0" class="pa-4">
<no-data-placeholder
:message="`Hello there! It seems like you don't have any streams yet. Here's a handful of useful links to help you get started:`"
/>
</div> -->
<v-card v-if="user" class="my-5" flat>
<v-card-text class="body-1">
<span>
You have
<v-icon small>mdi-compare-vertical</v-icon>
<b>{{ user.streams.totalCount }}</b>
streams and
<v-icon small>mdi-source-commit</v-icon>
<b>{{ user.commits.totalCount }}</b>
commits.
</span>
</v-card-text>
</v-card>
<v-row>
<v-col
v-for="(stream, i) in streams.items"
:key="i"
cols="12"
sm="12"
md="12"
lg="6"
xl="4"
>
<list-item-stream :stream="stream"></list-item-stream>
</v-col>
<infinite-loading
v-if="streams.items.length < streams.totalCount"
@infinite="infiniteHandler"
>
<div slot="no-more">These are all your streams!</div>
<div slot="no-results">There are no streams to load</div>
</infinite-loading>
</v-row>
</v-col>
<v-col v-if="quickstart > 0">
<div v-if="quickstart === 1" class="ma-5 headline">
Hello 👋
<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-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 send data to 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
<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 then 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
<b>add the connectors</b>
for the software that you use.
</p>
<p>Having issues logging in or adding your account? Try with the button below:</p>
<v-btn elevation="10" class="my-5" 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>
<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>
</v-stepper-content>
</v-stepper>
</v-col>
<infinite-loading
v-if="streams.items.length < streams.totalCount"
@infinite="infiniteHandler"
>
<div slot="no-more">These are all your streams!</div>
<div slot="no-results">There are no streams to load</div>
</infinite-loading>
</v-row>
</v-col>
</v-row>
@@ -148,7 +262,6 @@ export default {
StreamNewDialog,
InfiniteLoading,
UserAvatar,
NoDataPlaceholder,
ServerInviteDialog
},
apollo: {
@@ -190,13 +303,40 @@ export default {
return !this.loggedIn
}
}
},
authorizedApps: {
query: gql`
query {
user {
id
authorizedApps {
id
}
}
}
`,
update: (data) => data.user.authorizedApps
}
},
data: () => ({
streams: [],
newStreamDialog: false
newStreamDialog: false,
hasClickedDownload: false
}),
computed: {
quickstart() {
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 = []
@@ -216,6 +356,9 @@ export default {
},
loggedIn() {
return localStorage.getItem('uuid') !== null
},
rootUrl() {
return window.location.origin
}
},
watch: {
@@ -226,6 +369,17 @@ export default {
}
},
methods: {
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')
},
infiniteHandler($state) {
this.$apollo.queries.streams.fetchMore({
variables: {
@@ -277,3 +431,8 @@ export default {
text-decoration: underline;
}
</style>
<style scoped>
.quickstart-stepper {
box-shadow: none !important;
}
</style>