From e8e878da5033138e9e2b6e2a1246c5b7becb7511 Mon Sep 17 00:00:00 2001 From: Arsenije Savic Date: Mon, 25 Sep 2023 08:04:45 -0600 Subject: [PATCH] refactor: clean up layouts --- src/App.vue | 24 +- .../login/register-user-with-captcha-view.vue | 1 - src/layouts/DhoSelector.vue | 410 ----------- src/layouts/Layout.vue | 25 + src/layouts/MultiDhoLayout.vue | 689 +++++++++++++----- src/pages/dho/Configuration.vue | 1 - src/router/routes.js | 31 +- src/store/accounts/mutations.js | 18 + src/store/profiles/actions.js | 12 +- 9 files changed, 597 insertions(+), 614 deletions(-) delete mode 100644 src/layouts/DhoSelector.vue create mode 100644 src/layouts/Layout.vue diff --git a/src/App.vue b/src/App.vue index 6704d123f..f326be441 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,11 +5,30 @@ import { mapActions, mapGetters, mapMutations } from 'vuex' export default { name: 'App', + apollo: { + dho: { + query: require('~/query/main-dho.gql'), + update: data => data.queryDho, + result (res) { this.$store.commit('dao/setDho', res.data.queryDho) }, + fetchPolicy: 'no-cache' + } + }, + computed: { + ...mapGetters('accounts', ['account']), ...mapGetters('layout', ['alert']) }, watch: { + account: { + async handler (value) { + if (value) { + await this.getPublicProfile(this.account) + } + }, + immediate: true + }, + alert: function (value) { Notify.create({ type: value.level, @@ -39,8 +58,10 @@ export default { ...mapActions('accounts', ['autoLogin']), ...mapActions('dao', ['initConfigs']), ...mapActions('layout', ['loadAlert']), - ...mapMutations('layout', ['dismissAlert']) + ...mapMutations('layout', ['dismissAlert']), + ...mapActions('profiles', ['getPublicProfile']) } + } @@ -50,5 +71,4 @@ export default { diff --git a/src/components/login/register-user-with-captcha-view.vue b/src/components/login/register-user-with-captcha-view.vue index 3deb65715..df66716fd 100644 --- a/src/components/login/register-user-with-captcha-view.vue +++ b/src/components/login/register-user-with-captcha-view.vue @@ -202,7 +202,6 @@ export default { query.subscribe(({ data, loading }) => { const value = data.queryDao if (value.length > 0) { - this.$store.dispatch('accounts/checkMembership') this.$router.push({ path: `/${daoUrl}/` }) } }) diff --git a/src/layouts/DhoSelector.vue b/src/layouts/DhoSelector.vue deleted file mode 100644 index 66ef02e00..000000000 --- a/src/layouts/DhoSelector.vue +++ /dev/null @@ -1,410 +0,0 @@ - - - - diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue new file mode 100644 index 000000000..cf156482d --- /dev/null +++ b/src/layouts/Layout.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/layouts/MultiDhoLayout.vue b/src/layouts/MultiDhoLayout.vue index f61182081..90d5eeded 100644 --- a/src/layouts/MultiDhoLayout.vue +++ b/src/layouts/MultiDhoLayout.vue @@ -6,6 +6,308 @@ import { timeago } from '~/utils/TimeUtils' import { parsedNotification } from '~/utils/notifications-utils' import { ROUTE_NAMES } from '~/const' +const MAX_NUM_OF_RETIRES = 10 + +const DAO_ACTIVE_QUERY = ` + activePlan(daoUrl: $daoUrl) { + subscriptionId + subscriptionItemId + subscriptionStatus + currency + currentPeriodEnd + currentPeriodStart + coreMembersCount + communityMembersCount + price + id: planId + name: planName + } + + queryDao @cascade(fields: ["settings"]) { + docId + details_daoName_n + + details_daoType_s + # details_isWaitingEcosystem_i + createdDate + + upcomingelct { + docId + } + + admin(filter: { details_member_n: { eq: $username } }) { + docId + } + enroller(filter: { details_member_n: { eq: $username } }) { + docId + } + applicant(filter: { details_member_n: { eq: $username } }) { + docId + } + member(filter: { details_member_n: { eq: $username } }) { + docId + } + + announcements: alert { + id: docId + title: details_level_s + message: details_content_s + enabled: details_enabled_i + } + + planmanager { + bill { + id: docId + startDate: details_startDate_t + endDate: details_endDate_t + expirationDate: details_expirationDate_t + periodCount: details_periodCount_i + name: details_planName_s + price: details_planPrice_a + isInfinite: details_isInfinite_i + discountPercX10000: details_discountPercX10000_i + + pricingplan { + maxMemberCount: details_maxMemberCount_i + } + } + currentbill { + id: docId + startDate: details_startDate_t + endDate: details_endDate_t + expirationDate: details_expirationDate_t + periodCount: details_periodCount_i + name: details_planName_s + price: details_planPrice_a + isInfinite: details_isInfinite_i + discountPercX10000: details_discountPercX10000_i + + pricingplan { + maxMemberCount: details_maxMemberCount_i + } + } + lastbill { + id: docId + startDate: details_startDate_t + endDate: details_endDate_t + expirationDate: details_expirationDate_t + periodCount: details_periodCount_i + name: details_planName_s + price: details_planPrice_a + isInfinite: details_isInfinite_i + discountPercX10000: details_discountPercX10000_i + + pricingplan { + maxMemberCount: details_maxMemberCount_i + } + } + } + + multisigs: openmultisig { + approvedby { + docId + details_member_n + } + + id: docId + + # ecosystem_name_s + # ecosystem_logo_s + # ecosystem_domain_s + # ecosystem_purpose_s + + # settings_onboarderAccount_n + + # settings_claimEnabled_i + settings_daoUrl_s + # settings_daoName_n + settings_daoTitle_s + # settings_daoDescription_s + # settings_governanceTokenContract_n + # settings_pegToken_a + # settings_pegTokenContract_n + # settings_rewardToken_a + # settings_rewardTokenContract_n + # settings_rewardToPegRatio_a + # settings_treasuryContract_n + # settings_voiceToken_a + + settings_socialChat_s + settings_documentationButtonText_s + + settings_proposalsCreationEnabled_i + settings_membersApplicationEnabled_i + settings_removableBannersEnabled_i + settings_multisigEnabled_i + + settings_votingDurationSec_i + # settings_periodDurationSec_i + settings_votingAlignmentX100_i + settings_votingQuorumX100_i + # settings_voiceTokenDecayPeriod_i + + settings_communityVotingEnabled_i + settings_communityVotingMethod_s + settings_upvoteStartDateTime_s + settings_upvoteDuration_i + settings_upvoteRounds_s + settings_upvoteCheifDelegateCount_i + settings_upvoteCheifDelegateDuration_i + settings_upvoteHeadDelegateRound_i + settings_upvoteHeadDelegateDuration_i + settings_communityVotingDurationSec_i + settings_communityVotingAlignmentPercent_i + settings_communityVotingQuorumPercent_i + + # settings_usesSeeds_i + # settings_isHypha_i + + settings_logo_s + settings_extendedLogo_s + settings_primaryColor_s + settings_secondaryColor_s + settings_textColor_s + settings_pattern_s + settings_patternColor_s + settings_patternOpacity_i + settings_patternBase64_s + + settings_splashBackgroundImage_s + + settings_dashboardBackgroundImage_s + settings_dashboardTitle_s + settings_dashboardParagraph_s + + settings_proposalsBackgroundImage_s + settings_proposalsTitle_s + settings_proposalsParagraph_s + + settings_membersBackgroundImage_s + settings_membersTitle_s + settings_membersParagraph_s + + settings_organisationBackgroundImage_s + settings_organisationTitle_s + settings_organisationParagraph_s + + settings_exploreBackgroundImage_s + settings_exploreTitle_s + settings_exploreParagraph_s + + settings_documentationURL_s + } + + settings(filter: { settings_daoUrl_s: { regexp: $regexp } }) { + ecosystem_name_s + ecosystem_logo_s + ecosystem_domain_s + ecosystem_purpose_s + + settings_onboarderAccount_n + + settings_claimEnabled_i + settings_daoUrl_s + settings_daoName_n + settings_daoTitle_s + settings_daoDescription_s + settings_governanceTokenContract_n + + settings_pegTokenName_s + settings_pegToken_a + settings_pegTokenContract_n + settings_treasuryTokenMultiplier_i + settings_treasuryContract_n + + settings_rewardTokenName_s + settings_rewardToken_a + settings_rewardTokenContract_n + settings_rewardToPegRatio_a + settings_rewardTokenMaxSupply_a + settings_utilityTokenMultiplier_i + + settings_voiceToken_a + settings_voiceTokenDecayPeriod_i + settings_voiceTokenDecayPerPeriodX10M_i + settings_voiceTokenMultiplier_i + + settings_socialChat_s + settings_documentationButtonText_s + + settings_proposalsCreationEnabled_i + settings_membersApplicationEnabled_i + settings_removableBannersEnabled_i + settings_multisigEnabled_i + + settings_votingDurationSec_i + settings_periodDurationSec_i + settings_votingAlignmentX100_i + settings_votingQuorumX100_i + settings_voiceTokenDecayPeriod_i + + settings_communityVotingEnabled_i + settings_communityVotingMethod_s + settings_upvoteStartDateTime_s + settings_upvoteDuration_i + settings_upvoteRounds_s + settings_upvoteCheifDelegateCount_i + settings_upvoteCheifDelegateDuration_i + settings_upvoteHeadDelegateRound_i + settings_upvoteHeadDelegateDuration_i + settings_communityVotingDurationSec_i + settings_communityVotingAlignmentPercent_i + settings_communityVotingQuorumPercent_i + + settings_usesSeeds_i + settings_isHypha_i + + settings_logo_s + settings_extendedLogo_s + settings_primaryColor_s + settings_secondaryColor_s + settings_textColor_s + settings_pattern_s + settings_patternColor_s + settings_patternOpacity_i + settings_patternBase64_s + + settings_splashBackgroundImage_s + + settings_dashboardBackgroundImage_s + settings_dashboardTitle_s + settings_dashboardParagraph_s + + settings_proposalsBackgroundImage_s + settings_proposalsTitle_s + settings_proposalsParagraph_s + + settings_membersBackgroundImage_s + settings_membersTitle_s + settings_membersParagraph_s + + settings_organisationBackgroundImage_s + settings_organisationTitle_s + settings_organisationParagraph_s + + settings_exploreBackgroundImage_s + settings_exploreTitle_s + settings_exploreParagraph_s + + settings_documentationURL_s + } + + levels: salaryband { + id: docId + name: details_name_s + annualAmount: details_annualUsdSalary_a + minDeferred: details_minDeferredX100_i + } + + memberAggregate { + count + } + } +` + // const NOTIFICATIONS_QUERY = ` // queryNotification(order: { desc: time }) { // event { @@ -25,6 +327,11 @@ import { ROUTE_NAMES } from '~/const' // } // ` +const STATE = Object.freeze({ + LOADING: 'LOADING', + READY: 'READY' +}) + export default { name: 'multi-dho-layout', components: { @@ -45,12 +352,55 @@ export default { }, props: { - dho: Object, - daoName: String, - dhoTitle: String + dhoname: String }, apollo: { + dao: { + query: gql`query activeDao($daoUrl: String!, $regexp: String!, $username: String) { ${DAO_ACTIVE_QUERY} }`, + update: data => { + const dao = data.queryDao[0] + return { + ...dao, + name: dao?.details_daoName_n || '', + title: dao?.settings[0]?.settings_daoTitle_s || '', + icon: dao?.settings[0]?.settings_logo_s || '', + isHypha: dao?.settings[0]?.settings_isHypha_i || '' + } + }, + skip () { return !this.dhoname || !this.account }, + variables () { + return { + regexp: '/^' + this.dhoname + '$/i', + daoUrl: this.dhoname, + username: this.account + } + }, + + async result (res) { + const data = res?.data + + if (!data?.queryDao?.length) { + this.daoQueryNumberOfRetires++ + if (this.daoQueryNumberOfRetires > MAX_NUM_OF_RETIRES) { + this.$router.push({ path: '/not-found' }) + } else { + this.$apollo.queries.dao.refetch() + } + return + } + + this.$store.commit('accounts/setMember', data?.queryDao[0]) + this.$store.dispatch('ballots/getSupply') + this.$store.commit('dao/switchDao', data) + this.$store.dispatch('dao/setTheme') + this.state = STATE.READY + }, + loadingKey: 'loading', + fetchPolicy: 'no-cache' + // pollInterval: 300 // TODO: Swap with subscribe once dgraph is ready + }, + dhos: { query: require('../query/profile/profile-dhos.gql'), update: data => data?.getMember?.memberof.map(dao => ({ @@ -91,6 +441,10 @@ export default { data () { return { + daoQueryNumberOfRetires: 0, + STATE, + state: STATE.LOADING, + ROUTE_NAMES, timeago, parsedNotification, @@ -153,17 +507,13 @@ export default { watch: { - dho (v) { + dao (v) { if (v.icon) { this.updateTitle() this.updateFavicon() } }, - '$apolloData.data.member': { - handler () { - }, - immediate: true - }, + $route: { handler () { this.$refs.scrollArea.setScrollPosition('vertical', 0) @@ -201,12 +551,11 @@ export default { }, account: { async handler () { - await this.$nextTick() + // await this.$nextTick() if (this.account) { this.getProfile() - this.$store.dispatch('accounts/checkMembership') this.$store.dispatch('accounts/getHyphaOwners') - await this.$nextTick() + // await this.$nextTick() // await this.$apollo.queries.member.setVariables({ // username: this.account // }) @@ -264,14 +613,14 @@ export default { link.rel = 'icon' document.getElementsByTagName('head')[0].appendChild(link) } - const file = await BrowserIpfs.retrieve(this.dho.icon) + const file = await BrowserIpfs.retrieve(this.dao.icon) const faviconUrl = URL.createObjectURL(file.payload) link.href = faviconUrl // link.href = 'https://stackoverflow.com/favicon.ico' }, async updateTitle () { const title = this.$route.meta.title - document.title = `${title} - ${this.dho.title}` + document.title = `${title} - ${this.dao.title}` // let title = document.querySelector('title') // link.href = faviconUrl // link.href = 'https://stackoverflow.com/favicon.ico' @@ -400,6 +749,14 @@ export default { this.$router.push({ path: `/${this.selectedDao?.name}/proposals/${proposal}` }) } } + }, + + // created () { + // this.state = STATE.LOADING + // }, + updated () { + console.log(JSON.stringify(this.$apollo.queries.dao.loading)) + console.log(JSON.stringify(this.account)) } } @@ -407,158 +764,158 @@ export default {