Skip to content

Commit

Permalink
refactor(proposals): page cleanup and pagination improvements (#2087)
Browse files Browse the repository at this point in the history
* fix: remove duplicated code on proposal list page

* fix: revert appData change
  • Loading branch information
pugakn authored Mar 22, 2023
1 parent 6216721 commit a0a1091
Showing 1 changed file with 32 additions and 61 deletions.
93 changes: 32 additions & 61 deletions src/pages/proposals/ProposalList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ export default {
user: this.account
}
},
fetchPolicy: 'no-cache',
subscribeToMore: {
document: require('~/query/proposals/dao-proposals-active-vote-subs.gql'),
variables () {
Expand All @@ -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,
Expand All @@ -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'),
Expand Down Expand Up @@ -102,6 +101,7 @@ export default {
docId: this.selectedDao.docId
}
},
skip () { return !this.selectedDao?.docId },
fetchPolicy: 'no-cache'
}
},
Expand All @@ -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%',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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') {
Expand All @@ -335,29 +324,30 @@ 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: {
docId: this.selectedDao.docId,
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: [
{
Expand All @@ -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()
}
}
}
Expand Down Expand Up @@ -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",
Expand All @@ -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"
Expand All @@ -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)
</template>
<style lang="stylus" scoped>
Expand Down

0 comments on commit a0a1091

Please sign in to comment.