scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-28 15:15:34 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add no search results page to Global search page [SCI-10481]

Browse source
This commit is contained in:
wandji20 2024-04-11 08:22:50 +01:00
parent 50e3311033
commit d24f3b76a8
15 changed files with 78 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
app/javascript/vue/global_search/groups/assets.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-files"></i>
@ -51,19 +51,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'AssetsComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'assets'

9
app/javascript/vue/global_search/groups/experiments.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-experiment"></i>
@ -44,18 +44,15 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'ExperimentsComponent',
components: {
Loader
},
mixins: [searchMixin],
data() {
return {

9
app/javascript/vue/global_search/groups/folders.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-folder"></i>
@ -42,19 +42,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'FoldersComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'project_folders'

9
app/javascript/vue/global_search/groups/label_templates.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="!disabled && total">
<div v-if="!disabled" ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-label-templates"></i>
@ -45,19 +45,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'LabelTemplatesComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'label_templates'

9
app/javascript/vue/global_search/groups/my_module_protocols.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-protocols-templates"></i>
@ -54,19 +54,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'MyModuleProtocolsComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'module_protocols'

9
app/javascript/vue/global_search/groups/my_modules.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-task"></i>
@ -48,18 +48,15 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'MyModulesComponent',
components: {
Loader
},
mixins: [searchMixin],
data() {
return {

9
app/javascript/vue/global_search/groups/projects.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-projects"></i>
@ -46,19 +46,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'ProjectsComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'projects'

9
app/javascript/vue/global_search/groups/protocols.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-protocols-templates"></i>
@ -45,19 +45,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'ProtocolsComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'protocols'

9
app/javascript/vue/global_search/groups/reports.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-reports"></i>
@ -53,19 +53,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'ReportsComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'reports'

9
app/javascript/vue/global_search/groups/repository_rows.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-inventory"></i>
@ -47,19 +47,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'RepositoryRowsComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'repository_rows'

9
app/javascript/vue/global_search/groups/results.vue
View file

@ -1,6 +1,6 @@
<template>
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': total || loading }">
<template v-if="total">
<div ref="content" class="bg-white rounded" :class="{ 'p-4 mb-4': results.length || loading }">
<template v-if="total && results.length">
<div class="flex items-center">
<h2 class="flex items-center gap-2 mt-0 mb-4">
<i class="sn-icon sn-icon-results"></i>
@ -50,19 +50,16 @@
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
</div>
</template>
<script>
import Loader from '../loader.vue';
import searchMixin from './search_mixin';
export default {
name: 'ResultsComponent',
mixins: [searchMixin],
components: {
Loader
},
data() {
return {
group: 'results'

16
app/javascript/vue/global_search/groups/search_mixin.js
View file

@ -1,6 +1,8 @@
import axios from '../../../packs/custom_axios.js';
import StringWithEllipsis from '../../shared/string_with_ellipsis.vue';
import SortFlyout from './sort_flyout.vue';
import Loader from '../loader.vue';
import NoSearchResult from '../no_search_result.vue';
/* global GLOBAL_CONSTANTS */
export default {
@ -12,7 +14,9 @@ export default {
},
components: {
StringWithEllipsis,
SortFlyout
SortFlyout,
Loader,
NoSearchResult
},
data() {
return {
@ -25,7 +29,8 @@ export default {
fullDataLoaded: false,
loaderHeight: 24,
loaderGap: 10,
loaderYPadding: 10
loaderYPadding: 10,
noSearchResultHeight: 0
};
},
watch: {
@ -78,6 +83,9 @@ export default {
},
reachedEnd() {
return Math.ceil(this.total / GLOBAL_CONSTANTS.SEARCH_LIMIT) === this.page;
},
showNoSearchResult() {
return this.selected && !this.loading && !this.results.length;
}
},
methods: {
@ -117,6 +125,10 @@ export default {
this.disabled = response.data.meta.disabled;
this.loading = false;
this.page = response.data.meta.next_page;
if (this.results.length === 0 && this.selected) {
const availableHeight = window.innerHeight - this.$refs.content.getBoundingClientRect().top;
this.noSearchResultHeight = availableHeight - 20;
}
})
.finally(() => {
this.loading = false;

2
app/javascript/vue/global_search/loader.vue
View file

@ -18,7 +18,7 @@
<div :class="`h-[${loaderHeight}px]`" class="w-96 max-w-96 animate-skeleton rounded"></div>
</div>
</div>
<div v-if="reachedEnd" class="flex items-center">
<div v-if="reachedEnd" class="flex items-center mb-6">
<p class="text-sm text-sn-blue flex items-center gap-3 m-auto">
<span class="sn-icon sn-icon-flag"></span>
<span>{{ i18n.t('search.index.reached_end') }}</span>

28
app/javascript/vue/global_search/no_search_result.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<div ref="noSearchResult">
<div class="flex flex-col gap-6 bg-sn-white text-center relative top-1/4">
<div><span class=" inline-block sn-icon sn-icon-search"></span></div>
<div class="">
<p class="text-sn-black text-2xl font-semibold">
{{ i18n.t('search.index.no_results_text') }}
</p>
<p class="text-sn-dark-grey text-base">
{{ i18n.t('search.index.adjust_search_text') }}
</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'NoSearchResult',
props: {
noSearchResultHeight: { type: Number, default: 0 }
},
mounted() {
this.$refs.noSearchResult.style.height = `${this.noSearchResultHeight}px`;
}
};
</script>

2
config/locales/en.yml
View file

@ -486,6 +486,8 @@ en:
atoz: "Name A to Z"
ztoa: "Name Z to A"
reached_end: "You’ve reached the end of the list"
no_results_text: "No search results found"
adjust_search_text: "Try adjusting your search or filter to find what you are looking for."
comments:
save_changes: "Save changes"
empty_state: