From c046c799c6909f34ace3875c6fac8407701e86b5 Mon Sep 17 00:00:00 2001 From: Evgeni B Date: Thu, 12 Oct 2023 16:28:49 +0300 Subject: [PATCH] feat(ux): integration api --- src/pages/dho/Election.vue | 74 +++-- src/pages/upvote-election/GroupCard.vue | 12 +- src/pages/upvote-election/RoundCard.vue | 8 +- src/pages/upvote-election/UpvoteElection.vue | 289 +++++++------------ 4 files changed, 166 insertions(+), 217 deletions(-) diff --git a/src/pages/dho/Election.vue b/src/pages/dho/Election.vue index b9ed93b4e..6757a4946 100644 --- a/src/pages/dho/Election.vue +++ b/src/pages/dho/Election.vue @@ -3,6 +3,27 @@ import formatNumber from '~/utils/formatNumber' import I18n from '~/utils/i18n' import { dateToStringShort } from '~/utils/TimeUtils.js' import { mapGetters } from 'vuex' +import gql from 'graphql-tag' + +const ELECTIONS_DATA = ` +getDao(docId: $daoId) { + docId + ueElection { + docId + details_endDate_t + ueRound { + docId + } + ueStartrnd { + ueGroupLnk { + ueRdMemberAggregate { + count + } + } + } + } +} +` export default { name: 'election', @@ -12,6 +33,26 @@ export default { Widget: () => import('~/components/common/widget.vue') }, + apollo: { + elections: { + query: gql`query electionsQuery ($daoId: String!) { ${ELECTIONS_DATA} }`, + update: data => data.getDao.ueElection.map(election => { + return { + endDate: election.details_endDate_t, + rounds: election.ueRound.length, + participants: election.ueStartrnd[0].ueGroupLnk.reduce((sum, group) => sum + group.ueRdMemberAggregate.count, 0), + id: election.docId + } + }), + variables () { + return { + daoId: this.selectedDao.docId + } + }, + skip () { return !this.selectedDao || !this.selectedDao.docId } + } + }, + data () { return { I18n, @@ -19,33 +60,10 @@ export default { dateToStringShort, timeRemaining: {}, counterdown: undefined, - participants: 126, // TODO: waiting API treasury: 1200000, isUpVoteElectionBannerVisible: true, // TODO: waiting API endDate: '2023-08-23', nextElectionStartDate: '2023-08-29', - elections: [ - { - endDate: '2023-08-20', - rounds: 3, - participants: 126 - }, - { - endDate: '2023-08-20', - rounds: 3, - participants: 126 - }, - { - endDate: '2023-08-20', - rounds: 3, - participants: 126 - }, - { - endDate: '2023-08-20', - rounds: 3, - participants: 126 - } - ], slide: '1', titles: [ this.$t('pages.dho.election.howCommunityElectionsWork'), @@ -85,6 +103,10 @@ export default { }, 1000) }, + async activated () { + await this.$apollo.queries.elections.refetch() + }, + beforeDestroy () { clearInterval(this.counterdown) }, @@ -173,7 +195,7 @@ q-page.page-election .text-secondary {{ $t('pages.dho.home.timeLeftForSigningUp') }} .row.q-pt-md .col.flex.justify-center(:style="{ 'border-right': '1px solid #242f5d' }") - .h-h6 {{ participants }} + //- .h-h6 {{ participants }} .full-width.flex.justify-center.text-secondary {{ $t('pages.dho.home.participants') }} .col.flex.justify-center .h-h6 $ {{ formatNumber(treasury) }} @@ -189,7 +211,7 @@ q-page.page-election q-btn.q-px-lg.h-btn1(disable :class="{ 'q-mt-sm': $q.screen.lt.xs || $q.screen.xs }" no-caps rounded unelevated :label="$t('pages.dho.home.nextElection', { date: dateToStringShort(nextElectionStartDate) })" color="white" text-color="primary") .row .col-9.q-mr-md - template(v-for="election, index in elections") + template(v-for="election in elections") q-card.full-width.q-pa-xl.rounded.q-mb-md(flat) .row.flex.items-center .col.flex.justify-start @@ -199,7 +221,7 @@ q-page.page-election .col.flex.justify-center.text-black(:style="{ 'font-size': '17px' }") div {{ election.participants }} {{ $t('pages.dho.election.participants') }} .col.flex.justify-end - q-btn.q-px-lg.h-btn1(@click="$router.push({ path: `/${selectedDao.name}/election/${index}` })" :class="{ 'q-mt-sm': $q.screen.lt.xs || $q.screen.xs }" no-caps rounded unelevated :label="$t('pages.dho.election.seeResults')" color="primary" text-color="white") + q-btn.q-px-lg.h-btn1(@click="$router.push({ path: `/${selectedDao.name}/election/${election.id}` })" :class="{ 'q-mt-sm': $q.screen.lt.xs || $q.screen.xs }" no-caps rounded unelevated :label="$t('pages.dho.election.seeResults')" color="primary" text-color="white") .col widget(:title="widgetTitle") q-carousel.b2.q-mt-md(v-model="slide" swipeable="swipeable" animated="animated" navigation="navigation" :padding="false" height="240px" control-color="primary" ref="carousel") diff --git a/src/pages/upvote-election/GroupCard.vue b/src/pages/upvote-election/GroupCard.vue index 01fd16bdd..3b2fd76f6 100644 --- a/src/pages/upvote-election/GroupCard.vue +++ b/src/pages/upvote-election/GroupCard.vue @@ -33,20 +33,22 @@ export default { div(v-if="!myGroup") {{ $t('pages.upvote-election.groupcard.noRecordingsYet') }} .text-secondary.cursor-pointer.text-underline(v-else) {{ $t('pages.upvote-election.groupcard.uploadRecording') }} template(v-for="user in users") - profile-picture.q-mr-xxs(:username="user.account" size="24px" :key="applicant") + profile-picture.q-mr-xxs(:username="user.details_member_n" size="24px" :key="applicant") q-btn(@click="showUsers = !showUsers" flat rounded :icon="showUsers ? 'fas fa-chevron-up' : 'fas fa-chevron-down'") q-slide-transition div.q-mt-xl.q-pt-xl(v-show="showUsers" :style="{ 'border-top': '1px solid #CBCDD1'}") template(v-for="user in users") .row.flex.items-center.q-mb-md .col-1.q-mr-xs.flex.items-center - profile-picture(:username="user.account" size="24px" :key="applicant") + profile-picture(:username="user.details_member_n" size="24px" :key="applicant") .col - .row.text-bold.text-black {{ user.fullName }} + .row.text-bold.text-black {{ user.details_member_n }} .row(:style="{ 'font-size': '10px' }") {{ user.telegram }} .row.flex.items-center template(v-for="vote in votes") - div.q-ml-xxs(:class="{ 'vote': vote.vote, 'consensus': vote.consensus, 'slot': vote.slot }" :style="{ 'width': '15px', 'height': '4px', 'border-radius': '20px'}") + div.q-ml-xxs.consensus(:class="{ 'vote': vote.details_votedId_i == user.docId }" :style="{ 'width': '15px', 'height': '4px', 'border-radius': '20px'}") + template(v-for="vote in 6 - votes.length") + div.q-ml-xxs.slot(:style="{ 'width': '15px', 'height': '4px', 'border-radius': '20px'}") q-btn.q-ml-sm(@click="" color="primary" flat :label="$t('pages.upvote-election.groupcard.vote')" no-caps bordered rounded v-if="myGroup" :style="{'border': '1px solid #252f5d'}") .row.q-pt-lg(:style="{ 'border-top': '1px solid #CBCDD1'}") .col @@ -69,7 +71,7 @@ export default { .rounded-card border-radius: 15px .vote - background: #16B59B + background: #16B59B !important .consensus background: #CAC8D0 .slot diff --git a/src/pages/upvote-election/RoundCard.vue b/src/pages/upvote-election/RoundCard.vue index 81be57dce..dcf4fc5d4 100644 --- a/src/pages/upvote-election/RoundCard.vue +++ b/src/pages/upvote-election/RoundCard.vue @@ -8,7 +8,7 @@ export default { }, props: { - participants: Number, + participantsCount: Number, groups: Array, l1DelegateBadges: String, users: Array, @@ -64,7 +64,7 @@ export default { q-icon(name="fas fa-users" size="24px") .col.q-ml-sm .row - .h-h4 {{ participants }} + .h-h4 {{ participantsCount }} .row {{ $t('pages.upvote-election.participants') }} .col q-card.rounded-card.q-pa-lg.applications-metric @@ -75,7 +75,7 @@ export default { .row .h-h4 {{ groups.length }} .row {{ $t('pages.upvote-election.groups') }} - .col + //- .col q-card.rounded-card.q-pa-lg.applications-metric .row.flex.items-center .col-2 @@ -91,7 +91,7 @@ export default { div.q-my-xl.q-pt-xl(v-show="showGroups" :style="{ 'border-top': '1px solid #CBCDD1'}") .row.q-gutter-col-md template(v-for="group, index in groups") - group-card.col-6.q-pa-xxs(:users="group.users" :groupNumber="index + 1" :myGroup="group.myGroup", :votes="group.votes") + group-card.col-6.q-pa-xxs(:users="group.members" :groupNumber="index + 1" :myGroup="group.myGroup", :votes="group.votes")