logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git
commit: 3117623f3000eed03ec7828c3ed112bd67366620
parent 425919a0d292b79869ebefd2a4d52ed4db45d319
Author: Ekaterina Vaartis <vaartis@kotobank.ch>
Date:   Mon, 16 Aug 2021 21:30:07 +0300

Implement loading more statuses when searching

Diffstat:

Msrc/components/search/search.js20++++++++++++++++----
Msrc/components/search/search.vue40+++++++++++++++++++++++++++++++++-------
Msrc/i18n/en.json3++-
3 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/components/search/search.js b/src/components/search/search.js @@ -30,7 +30,11 @@ const Search = { userIds: [], statuses: [], hashtags: [], - currenResultTab: 'statuses' + currenResultTab: 'statuses', + + statusesOffset: 0, + lastStatusFetchCount: 0, + lastQuery: '' } }, computed: { @@ -67,18 +71,26 @@ const Search = { this.loading = true this.userIds = [] - this.statuses = [] this.hashtags = [] this.$refs.searchInput.blur() + if (this.lastQuery !== query) { + this.statuses = [] + this.statusesOffset = 0 + this.lastStatusFetchCount = 0 + } - this.$store.dispatch('search', { q: query, resolve: true }) + this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset }) .then(data => { this.loading = false this.userIds = map(data.accounts, 'id') - this.statuses = data.statuses + this.statuses = this.statuses.concat(data.statuses) this.hashtags = data.hashtags this.currenResultTab = this.getActiveTab() this.loaded = true + + this.statusesOffset += data.statuses.length + this.lastStatusFetchCount = data.statuses.length + this.lastQuery = query }) }, resultCount (tabName) { diff --git a/src/components/search/search.vue b/src/components/search/search.vue @@ -55,12 +55,6 @@ </div> <div class="panel-body"> <div v-if="currenResultTab === 'statuses'"> - <div - v-if="visibleStatuses.length === 0 && !loading && loaded" - class="search-result-heading" - > - <h4>{{ $t('search.no_results') }}</h4> - </div> <Status v-for="status in visibleStatuses" :key="status.id" @@ -71,6 +65,33 @@ :statusoid="status" :no-heading="false" /> + <button + v-if="!loading && loaded && lastStatusFetchCount > 0" + class="more-statuses-button button-unstyled -link -fullwidth" + @click.prevent="search(searchTerm)" + > + <div class="new-status-notification text-center"> + {{ $t('search.load_more') }} + </div> + </button> + <div + v-else-if="loading && statusesOffset > 0" + class="text-center loading-icon" + > + <FAIcon + icon="circle-notch" + spin + size="lg" + /> + </div> + <div + v-if="(visibleStatuses.length === 0 || lastStatusFetchCount === 0) && !loading && loaded" + class="search-result-heading" + > + <h4> + {{ $t('search.no_results') }} + </h4> + </div> </div> <div v-else-if="currenResultTab === 'people'"> <div @@ -208,6 +229,11 @@ color: $fallback--text; color: var(--text, $fallback--text); } -} + } + + .more-statuses-button { + height: 3.5em; + line-height: 3.5em; + } </style> diff --git a/src/i18n/en.json b/src/i18n/en.json @@ -827,7 +827,8 @@ "hashtags": "Hashtags", "person_talking": "{count} person talking", "people_talking": "{count} people talking", - "no_results": "No results" + "no_results": "No results", + "load_more": "Load more results" }, "password_reset": { "forgot_password": "Forgot password?",