From e110305a9247c2cb0048cd91e5d1eb5e6cc2e625 Mon Sep 17 00:00:00 2001 From: Matteo Cominetti Date: Wed, 23 Jun 2021 19:11:26 +0100 Subject: [PATCH] feat(frontend): wip onboarding stepper --- .../src/components/GettingStartedSteps.vue | 64 +---- packages/frontend/src/views/Streams.vue | 245 +++++++++++++++--- 2 files changed, 203 insertions(+), 106 deletions(-) diff --git a/packages/frontend/src/components/GettingStartedSteps.vue b/packages/frontend/src/components/GettingStartedSteps.vue index b77e6a11e..74fa8d561 100644 --- a/packages/frontend/src/components/GettingStartedSteps.vue +++ b/packages/frontend/src/components/GettingStartedSteps.vue @@ -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!

-

- Get started sending data into Speckle by installing our connectos and setting up - your accounts with our - Desktop Manager 👇 -

- - mdi-download - Install connectors - @@ -126,43 +117,6 @@ exchange geometry and BIM data dirctly from the tools you use.

-

- Install all the connectors you need and manage your accounts with our - Desktop Manager 👇 -

- - mdi-download - Install connectors - - - - - - -
Having problems?
- - -

- Cannot set up your account? Try adding it from the web: - Add Account -

-

- Having issues installing the connectors? Check out our docs: - - User Guide - -

- - - @@ -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') } } } diff --git a/packages/frontend/src/views/Streams.vue b/packages/frontend/src/views/Streams.vue index 5246aad14..fabef6245 100644 --- a/packages/frontend/src/views/Streams.vue +++ b/packages/frontend/src/views/Streams.vue @@ -83,48 +83,162 @@ -
- -
- - - - You have - mdi-compare-vertical - {{ user.streams.totalCount }} - streams and - mdi-source-commit - {{ user.commits.totalCount }} - commits. - - - - -
- -
- - - - + + + +
+ +
+ + + + + + + + + You have + mdi-compare-vertical + {{ user.streams.totalCount }} + streams and + mdi-source-commit + {{ user.commits.totalCount }} + commits. + + + + + + + + + +
These are all your streams!
+
There are no streams to load
+ + + + +
+ Hello 👋 +
+ It seems you're new here, let's get you set up: +
+ + + Create your first stream + + + +

+ Streams are the + primary way Speckle organizes data + . You can see them as a folder, a project or a repository. +

+

+ Streams + can be shared with others + and can be made publicly visible on the web. Only the owner of a stream can manage + its permissions and visibility. +

+

+ In order to send data to Speckle you first need to create a stream, so + go ahead and create your first one + ! +

+ + + + Install Speckle Manager + + + +

+ Speckle Manager is a + desktop application + that lets you install connectors for some of the most popular design and analysis + software. +

+

+ The connectors + exchange + geometry and BIM data with Speckle, so that you can then access it wherever you + want! +

+ + mdi-download + Download Manager + + + + + Set up Speckle Manager + + + +

+ With Speckle Manager installed, + log into your account + and + add the connectors + for the software that you use. +

+

Having issues logging in or adding your account? Try with the button below:

+ + mdi-account-plus + Add account to manager + + + + Send data to Speckle + +

Great progress 🥳!

+

+ 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 + commit. +

+

+ Commits are + snapshots or versions of your data in time. + Every time you send to Speckle, a new commit is created for you. +

+

Send data to Speckle now by using one of our connetors!

+ + + How to use connectors + + + - -
These are all your streams!
-
There are no streams to load
- @@ -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; } +