-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Gamification connectors - Meeds-io/MIPs#64
- Loading branch information
Showing
12 changed files
with
506 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <div class="VuetifyApp"> | ||
| <div id="connectorsSettingsApp"> | ||
| <script type="text/javascript"> | ||
| require(['PORTLET/gamification-portlets/ConnectorsSettings'], app => app.init()); | ||
| </script> | ||
| </div> | ||
| </div> |
56 changes: 56 additions & 0 deletions
56
portlets/src/main/webapp/vue-app/connectors-setting/components/ConnectorsSettings.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <template> | ||
| <v-app> | ||
| <v-card class="my-3 border-radius" flat> | ||
| <v-list two-line> | ||
| <v-list-item> | ||
| <v-list-item-content> | ||
| <v-list-item-title class="title text-color"> | ||
| {{ $t('gamification.connectors.label.connectors') }} | ||
| </v-list-item-title> | ||
| <v-list-item-subtitle class="my-3 text-sub-title font-italic"> | ||
| <gamification-connector-status :connectors="connectors" /> | ||
| </v-list-item-subtitle> | ||
| </v-list-item-content> | ||
| <v-list-item-action> | ||
| <v-btn | ||
| small | ||
| icon | ||
| @click="openDrawer"> | ||
| <i class="uiIconEdit uiIconLightBlue pb-2"></i> | ||
| </v-btn> | ||
| </v-list-item-action> | ||
| <gamification-connectors-drawer :connectors="enabledConnectors" /> | ||
| <gamification-connector | ||
| :settings="settings" | ||
| :connectors="connectors" | ||
| auto-connect | ||
| @connectors-loaded="connectors = $event" /> | ||
| </v-list-item> | ||
| </v-list> | ||
| </v-card> | ||
| </v-app> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| settings: { | ||
| type: Object, | ||
| default: () => null, | ||
| }, | ||
| }, | ||
| data: () => ({ | ||
| connectors: [], | ||
| }), | ||
| computed: { | ||
| enabledConnectors() { | ||
| return this.connectors && this.connectors.filter(connector => connector.enabled) || []; | ||
| }, | ||
| }, | ||
| methods: { | ||
| openDrawer() { | ||
| this.$root.$emit('gamification-connectors-drawer-open'); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
134 changes: 134 additions & 0 deletions
134
portlets/src/main/webapp/vue-app/connectors-setting/components/GamificationConnector.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| <script> | ||
| export default { | ||
| props: { | ||
| settings: { | ||
| type: Object, | ||
| default: () => null, | ||
| }, | ||
| connectors: { | ||
| type: Object, | ||
| default: () => null, | ||
| }, | ||
| }, | ||
| data: () => ({ | ||
| loading: false, | ||
| }), | ||
| computed: { | ||
| connectedConnectorUser() { | ||
| return this.connectedConnector && this.connectedConnector.user; | ||
| }, | ||
| connectedConnector() { | ||
| return this.connectors && this.connectors.find(connector => connector.connected); | ||
| }, | ||
| }, | ||
| created() { | ||
| document.addEventListener('gamification-connectors-refresh', this.refreshConnectorsList); | ||
| this.$root.$on('gamification-connectors-init', this.initConnectors); | ||
| this.$root.$on('gamification-connector-connect', this.addAccount); | ||
| this.$root.$on('gamification-connector-disconnect', this.removeAccount); | ||
| }, | ||
| mounted() { | ||
| this.refreshConnectorsList(); | ||
| }, | ||
| methods: { | ||
| refreshConnectorsList() { | ||
| // Get list of connectors from extensionRegistry | ||
| const connectors = extensionRegistry.loadExtensions('gamification', 'connectors') || []; | ||
| connectors | ||
| .forEach(connector => { | ||
| connector.enabled = true; | ||
| }); | ||
| this.$emit('connectors-loaded', connectors); | ||
| }, | ||
| initConnectors() { | ||
| this.connectors | ||
| .forEach(connector => { | ||
| if (connector.init && !connector.initialized && connector.enabled && connector.apiKey) { | ||
| connector.init(this.connectionStatusChanged, this.connectionLoading, connector.apiKey, connector.secretKey); | ||
| } | ||
| }); | ||
| }, | ||
| addAccount(connector) { | ||
| this.errorMessage = null; | ||
| const disconnectPromises = []; | ||
| this.connectors.forEach(otherConnector => { | ||
| if (connector.name !== otherConnector.name && (otherConnector.user || otherConnector.isSignedIn)) { | ||
| disconnectPromises.push(this.disconnect(otherConnector)); | ||
| } | ||
| }); | ||
| this.$set(connector, 'loading', true); | ||
| return Promise.all(disconnectPromises) | ||
| .then(() => connector.addAccount(connector)) | ||
| .then(() => { | ||
| this.$set(connector, 'loading', false); | ||
| }) | ||
| .catch(error => { | ||
| console.error('Connected - error', connector.name, error); | ||
| this.$set(connector, 'loading', false); | ||
| if (error.error !== 'popup_closed_by_user') { | ||
| console.error('Error while connecting to remote account: ', error); | ||
| this.errorMessage = this.$t('gamification.connectors.label.connectionFailure'); | ||
| } | ||
| }); | ||
| }, | ||
| removeAccount(connector) { | ||
| //disconnect from connected browser | ||
| if (connector.isSignedIn) { | ||
| return connector.removeAccount().then(() => this.resetConnector(connector)); | ||
| } else {//disconnect from other browser | ||
| return this.resetConnector(connector); | ||
| } | ||
| }, | ||
| resetConnector(connector) { | ||
| this.$set(connector, 'loading', true); | ||
| return this.$settingsService.resetUserConnector() | ||
| .then(() => { | ||
| this.$set(connector, 'isSignedIn', false); | ||
| this.$set(connector, 'connected', false); | ||
| this.$set(connector, 'user', null); | ||
| }) | ||
| .finally(() => { | ||
| this.$set(connector, 'loading', false); | ||
| }); | ||
| }, | ||
| connectionLoading(connector, loading) { | ||
| this.$set(connector, 'loading', loading); | ||
| if (loading) { | ||
| this.$set(connector, 'error', ''); | ||
| this.loading++; | ||
| } else if (this.loading) { | ||
| this.loading--; | ||
| } | ||
| }, | ||
| connectionStatusChanged(connector, connectedUser, error) { | ||
| if (connectedUser) { | ||
| this.$set(connector, 'error', ''); | ||
| this.$root.$emit('gamification-connector-connected', connector); | ||
| } else if (error) { | ||
| const errorMessage = error.details || error.error || error.message || String(error); | ||
| this.$set(connector, 'error', errorMessage); | ||
| } else { | ||
| this.cleanConnectorStatus(connector, connectedUser); | ||
| } | ||
| }, | ||
| cleanConnectorStatus(connector, connectedUser) { | ||
| this.$set(connector, 'error', ''); | ||
| if (this.connectedConnectorUser) { | ||
| //if user is connected with different account from other browser | ||
| if (connectedUser && connectedUser.user !== this.connectedConnectorUser) { | ||
| connector.disconnect(); | ||
| } | ||
| } else if (connector && connector.isSignedIn) { | ||
| //if user disconnected from other browser | ||
| connector.disconnect(); | ||
| } | ||
| this.refreshConnectorsList(); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
39 changes: 39 additions & 0 deletions
39
...ets/src/main/webapp/vue-app/connectors-setting/components/GamificationConnectorStatus.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| <template> | ||
| <div class="connector-status"> | ||
| <div v-if="connectedConnectorUser" class="connector-connected d-flex"> | ||
| <v-list-item-avatar class="rounded-0 me-0"> | ||
| <v-avatar size="32" tile> | ||
| <v-icon | ||
| size="30"> | ||
| {{ connectedConnectorIcon }} | ||
| </v-icon> | ||
| </v-avatar> | ||
| </v-list-item-avatar> | ||
| <a | ||
| class="mx-2 my-auto"> | ||
| {{ connectedConnectorUser }} | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script> | ||
| export default { | ||
| props: { | ||
| connectors: { | ||
| type: Array, | ||
| default: () => null | ||
| }, | ||
| }, | ||
| computed: { | ||
| connectedConnector() { | ||
| return this.connectors.find(connector => connector.user); | ||
| }, | ||
| connectedConnectorUser() { | ||
| return this.connectedConnector && this.connectedConnector.user || ''; | ||
| }, | ||
| connectedConnectorIcon() { | ||
| return this.connectedConnector && this.connectedConnector.icon || ''; | ||
| }, | ||
| }, | ||
| }; | ||
| </script> |
Oops, something went wrong.