From a0a1091351299cdcdb9fb14e9a6a7862e67150bc Mon Sep 17 00:00:00 2001 From: Irving Puga Date: Wed, 22 Mar 2023 10:33:04 -0600 Subject: [PATCH] refactor(proposals): page cleanup and pagination improvements (#2087) * fix: remove duplicated code on proposal list page * fix: revert appData change --- src/pages/proposals/ProposalList.vue | 93 ++++++++++------------------ 1 file changed, 32 insertions(+), 61 deletions(-) diff --git a/src/pages/proposals/ProposalList.vue b/src/pages/proposals/ProposalList.vue index dd01df65e..112206ece 100644 --- a/src/pages/proposals/ProposalList.vue +++ b/src/pages/proposals/ProposalList.vue @@ -35,7 +35,6 @@ export default { user: this.account } }, - fetchPolicy: 'no-cache', subscribeToMore: { document: require('~/query/proposals/dao-proposals-active-vote-subs.gql'), variables () { @@ -61,7 +60,6 @@ export default { stagedProposals: { query: () => require('../../query/proposals/dao-proposals-stage.gql'), update: data => data?.queryDao[0]?.stagingprop, - // skip: true, variables () { return { docId: this.selectedDao.docId, @@ -70,6 +68,7 @@ export default { user: this.account } }, + skip () { return !this.selectedDao?.docId }, fetchPolicy: 'no-cache', subscribeToMore: { document: require('~/query/proposals/dao-proposals-stage-subs.gql'), @@ -102,6 +101,7 @@ export default { docId: this.selectedDao.docId } }, + skip () { return !this.selectedDao?.docId }, fetchPolicy: 'no-cache' } }, @@ -119,9 +119,7 @@ export default { pagination: { first: 50, offset: 0, - more: true, - restart: false, - fetch: 0 + more: true }, mobileFilterStyles: { width: this.$q.screen.md ? '400px' : '100%', @@ -276,17 +274,13 @@ export default { this.$apollo.queries.dao.stop() if (this.dao) { this.resetPaginationValues() - this.resetPagination() } this.$apollo.queries.dao.start() }, sort () { - this.$apollo.queries.dao.stop() if (this.dao) { this.resetPaginationValues() - this.resetPagination() } - this.$apollo.queries.dao.start() }, filters: { deep: true, @@ -321,12 +315,7 @@ export default { }, activated () { this.$apollo.queries.stagedProposals.refetch() - this.$apollo.queries.dao.stop() - if (this.dao) { - this.resetPaginationValues() - this.resetPagination() - } - this.$apollo.queries.dao.start() + // this.$apollo.queries.dao.refetch() }, mounted () { if (localStorage.getItem('showProposalBanner') === 'false') { @@ -335,14 +324,19 @@ export default { }, methods: { ...mapActions('ballots', ['getSupply']), + hideProposalBanner () { localStorage.setItem('showProposalBanner', false) this.isShowingProposalBanner = false }, + async onLoad (index, done) { - if (this.pagination.more && this.pagination.fetch < this.countForFetching) { - this.pagination.offset = this.pagination.restart ? this.pagination.offset : this.pagination.offset + this.pagination.first - this.pagination.fetch++ + if (this.$apollo.queries.dao.loading) { + return + } + + if (this.pagination.more) { + this.pagination.offset = this.pagination.offset + this.pagination.first try { await this.$apollo.queries.dao.fetchMore({ variables: { @@ -350,14 +344,10 @@ export default { offset: this.pagination.offset, first: this.pagination.first }, + fetchPolicy: 'network-only', updateQuery: (prev, { fetchMoreResult }) => { - if ((this.proposalsCount === fetchMoreResult.queryDao[0].proposal.length) || - (this.proposalsCount < prev.queryDao[0].proposal.length) - ) this.pagination.more = false - if (this.pagination.restart || (prev.queryDao[0].proposal.length > this.proposalsCount)) { - this.pagination.restart = false - return fetchMoreResult - } + if (fetchMoreResult.queryDao[0].proposal.length < this.pagination.first) this.pagination.more = false + return { queryDao: [ { @@ -371,30 +361,19 @@ export default { } } }) + + done(!this.pagination.more) } catch (e) {} - done() - } - if (this.pagination.fetch === this.countForFetching) { + } else { done(true) } }, + resetPaginationValues () { - this.pagination.restart = true + this.$refs.scroll.resume() this.pagination.offset = 0 this.pagination.more = true - this.pagination.fetch = 0 - }, - async resetPagination () { - if (this.$refs.scroll) { - await this.$nextTick() - this.$refs.scroll.stop() - await this.$nextTick() - this.$refs.scroll.resume() - await this.$nextTick() - this.$refs.scroll.reset() - await this.$nextTick() - this.$refs.scroll.trigger() - } + this.$apollo.queries.archivedProposals.refetch() } } } @@ -451,19 +430,19 @@ q-page.page-proposals primary ) - .row.q-py-md(v-if="$q.screen.gt.md") - .col-9 - base-placeholder.q-mr-sm(v-if="!filteredStagedProposals.length && !filteredProposals.length && !hasProposals" title= "No Proposals" subtitle="Your organization has not created any proposals yet. You can create a new proposal by clicking the button below." + .row.q-py-md + .col-12.col-lg-9 + base-placeholder.q-mr-sm(:compact="!$q.screen.gt.md" v-if="!filteredStagedProposals.length && !filteredProposals.length && !hasProposals" title= "No Proposals" subtitle="Your organization has not created any proposals yet. You can create a new proposal by clicking the button below." icon= "fas fa-file-medical" :actionButtons="[{label: 'Create a new Proposal', color: 'primary', onClick: () => $router.push(`/${this.daoSettings.url}/proposals/create`), disable: !isMember, disableTooltip: 'You must be a member'}]" ) - base-placeholder.q-mr-sm(v-if="!filteredProposals.length && !filteredStagedProposals.length && hasProposals" title= "Oops, nothing could be found here" subtitle="Try a different filter or another keyword" + base-placeholder.q-mr-sm(:compact="!$q.screen.gt.md" v-if="!filteredProposals.length && !filteredStagedProposals.length && hasProposals" title= "Oops, nothing could be found here" subtitle="Try a different filter or another keyword" icon= "far fa-check-square" :actionButtons="[{label: 'Reset filter(s)', color: 'primary', onClick: () => this.$refs.filter.resetFilters() }]" ) - div(v-if="$apollo.loading" class="row justify-center q-my-md") - loading-spinner(color="primary" size="72px") .q-mb-xl(v-show="showStagedProposals && filteredStagedProposals.length > 0") - proposal-list(:username="account" :proposals="filteredStagedProposals" :supply="supply" :view="view" :loading="state !== 'RUNNING'" count="1") - q-infinite-scroll(@load="onLoad" :offset="500" ref="scroll" :initial-index="1" v-if="filteredProposals.length").scroll - proposal-list(:username="account" :proposals="filteredProposals" :supply="supply" :view="view") - .col-3 + proposal-list(:compact="!$q.screen.gt.md" :username="account" :proposals="filteredStagedProposals" :supply="supply" :view="view" :loading="state !== 'RUNNING'" count="1") + q-infinite-scroll(@load="onLoad" :offset="250" :debounce="200" ref="scroll" v-if="filteredProposals.length" :disable="!pagination.more" scroll-target=".hide-scrollbar").scroll + proposal-list(:compact="!$q.screen.gt.md" :username="account" :proposals="filteredProposals" :supply="supply" :view="view") + div(v-if="$apollo.loading" class="row justify-center q-my-md") + loading-spinner(color="primary" size="72px").q-mb-xxxl + .col-3(v-if="$q.screen.gt.md") filter-widget.sticky(ref="filter" :view.sync="view", :defaultOption="1", @@ -481,7 +460,7 @@ q-page.page-proposals :toggleDefault="true" :showToggle="true" ) - .row.full-width(v-else).q-my-md + .row.full-width.q-my-md(v-if="!$q.screen.gt.md") filter-open-button(@open="mobileFilterOpen = true") filter-widget-mobile(:view.sync="view", v-show="mobileFilterOpen" @@ -502,14 +481,6 @@ q-page.page-proposals :showToggle="true", :style="mobileFilterStyles" ) - base-placeholder.q-mr-sm(v-if="!filteredProposals.length && !filteredStagedProposals.length && !$apollo.loading" title= "No Proposals" subtitle="Your organization has not created any proposals yet. You can create a new proposal by clicking the button below." - icon= "fas fa-file-medical" :actionButtons="[{label: 'Create a new Proposal', color: 'primary', onClick: () => $router.push(`/${this.daoSettings.url}/proposals/create`), disable: !isMember, disableTooltip: 'You must be a member'}]" ) - div(v-if="!filteredProposals.length && !filteredStagedProposals.length" class="row justify-center q-my-md") - loading-spinner(color="primary" size="72px") - .q-mb-xl(v-show="showStagedProposals && filteredStagedProposals.length > 0") - proposal-list(:username="account" :proposals="filteredStagedProposals" :supply="supply" view="card" compact) - q-infinite-scroll(@load="onLoad" :offset="0" ref="scroll" :initial-index="1" v-if="filteredProposals.length").scroll - proposal-list(:username="account" :proposals="filteredProposals" :supply="supply" view="card" compact)