scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-12-17 14:19:05 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add sorting to global search [SCI-10528]

Browse source
This commit is contained in:
Anton 2024-04-08 12:54:46 +02:00
parent 1e7bb69763
commit c2da52a6bb
14 changed files with 186 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,10 +1,13 @@
<template> <template>
<div v-if="total" class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-files"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.files') }} <i class="sn-icon sn-icon-files"></i>
[{{ total }}] {{ i18n.t('search.index.files') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,10 +1,13 @@
<template> <template>
<div v-if="total" class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-experiment"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.experiments') }} <i class="sn-icon sn-icon-experiment"></i>
[{{ total }}] {{ i18n.t('search.index.experiments') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_80px_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_80px_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,10 +1,13 @@
<template> <template>
<div v-if="total" class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-folder"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.folders') }} <i class="sn-icon sn-icon-folder"></i>
[{{ total }}] {{ i18n.t('search.index.folders') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id" class="hover:bg-sn-super-light-grey"> <template v-for="row in preparedResults" :key="row.id" class="hover:bg-sn-super-light-grey">

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

@ -1,10 +1,13 @@
<template> <template>
<div class="bg-white rounded p-4 mb-4" v-if="!disabled"> <div class="bg-white rounded p-4 mb-4" v-if="total">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-label-templates"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.label_templates') }} <i class="sn-icon sn-icon-label-templates"></i>
[{{ total }}] {{ i18n.t('search.index.label_templates') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,10 +1,13 @@
<template> <template>
<div v-if="total" class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-protocols-templates"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.task_protocols') }} <i class="sn-icon sn-icon-protocols-templates"></i>
[{{ total }}] {{ i18n.t('search.index.task_protocols') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_80px_auto_auto_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_80px_auto_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,10 +1,13 @@
<template> <template>
<div v-if="total" class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-task"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.tasks') }} <i class="sn-icon sn-icon-task"></i>
[{{ total }}] {{ i18n.t('search.index.tasks') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_80px_auto_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_80px_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,10 +1,13 @@
<template> <template>
<div v-if="total" class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-projects"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.projects') }} <i class="sn-icon sn-icon-projects"></i>
[{{ total }}] {{ i18n.t('search.index.projects') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_80px_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_80px_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,10 +1,13 @@
<template> <template>
<div class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-protocols-templates"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.protocol_templates') }} <i class="sn-icon sn-icon-protocols-templates"></i>
[{{ total }}] {{ i18n.t('search.index.protocol_templates') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,10 +1,13 @@
<template> <template>
<div v-if="total" class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-reports"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.reports') }} <i class="sn-icon sn-icon-reports"></i>
[{{ total }}] {{ i18n.t('search.index.reports') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,10 +1,13 @@
<template> <template>
<div class="bg-white rounded p-4 mb-4"> <div class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-inventory"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.inventory_items') }} <i class="sn-icon sn-icon-inventory"></i>
[{{ total }}] {{ i18n.t('search.index.inventory_items') }}
</h2> [{{ total }}]
</h2>
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div> <div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center"> <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id"> <template v-for="row in preparedResults" :key="row.id">

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

@ -1,51 +1,52 @@
<template> <template>
<div v-if="total" class="bg-white rounded p-4 mb-4"> <div v-if="total" class="bg-white rounded p-4 mb-4">
<h2 class="flex items-center gap-2 mt-0 mb-4"> <div class="flex items-center">
<i class="sn-icon sn-icon-results"></i> <h2 class="flex items-center gap-2 mt-0 mb-4">
{{ i18n.t('search.index.task_results') }} <i class="sn-icon sn-icon-results"></i>
[{{ total }}] {{ i18n.t('search.index.task_results') }}
</h2> [{{ total }}]
</div> </h2>
<div> <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
<div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id">
<a :href="row.attributes.url" target="_blank" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
<StringWithEllipsis class="w-full" :text="row.attributes.name"></StringWithEllipsis>
</a>
<div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="truncate">{{ row.attributes.created_at }}</span>
</div>
<div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
<b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
<span class="truncate">{{ row.attributes.updated_at }}</span>
</div>
<div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
<b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
<a :href="row.attributes.team.url" class="shrink-0 overflow-hidden" target="_blank">
<StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
</a>
</div>
<div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
<b class="shrink-0">{{ i18n.t('search.index.task') }}:</b>
<a :href="row.attributes.my_module.url" class="shrink-0 overflow-hidden" target="_blank">
<StringWithEllipsis class="w-full" :text="row.attributes.my_module.name"></StringWithEllipsis>
</a>
</div>
<div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
<div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
<b class="shrink-0">{{ i18n.t('search.index.experiment') }}:</b>
<a :href="row.attributes.experiment.url" class="shrink-0 overflow-hidden" target="_blank">
<StringWithEllipsis class="w-full" :text="row.attributes.experiment.name"></StringWithEllipsis>
</a>
</div>
</div>
</template>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'ResultsComponent')">View all</button>
</div>
</div> </div>
<div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id">
<a :href="row.attributes.url" target="_blank" class="h-full py-2 px-4 overflow-hidden font-bold border-0 border-b border-solid border-sn-light-grey">
<StringWithEllipsis class="w-full" :text="row.attributes.name"></StringWithEllipsis>
</a>
<div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="truncate">{{ row.attributes.created_at }}</span>
</div>
<div class="h-full py-2 px-4 flex items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey max-w-[200px]">
<b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
<span class="truncate">{{ row.attributes.updated_at }}</span>
</div>
<div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
<b class="shrink-0">{{ i18n.t('search.index.team') }}:</b>
<a :href="row.attributes.team.url" class="shrink-0 overflow-hidden" target="_blank">
<StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
</a>
</div>
<div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 text-xs border-0 border-b border-solid border-sn-light-grey">
<b class="shrink-0">{{ i18n.t('search.index.task') }}:</b>
<a :href="row.attributes.my_module.url" class="shrink-0 overflow-hidden" target="_blank">
<StringWithEllipsis class="w-full" :text="row.attributes.my_module.name"></StringWithEllipsis>
</a>
</div>
<div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
<div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
<b class="shrink-0">{{ i18n.t('search.index.experiment') }}:</b>
<a :href="row.attributes.experiment.url" class="shrink-0 overflow-hidden" target="_blank">
<StringWithEllipsis class="w-full" :text="row.attributes.experiment.name"></StringWithEllipsis>
</a>
</div>
</div>
</template>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'ResultsComponent')">View all</button>
</div>
</div>
</template> </template>
<script> <script>

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

@ -1,5 +1,6 @@
import axios from '../../../packs/custom_axios.js'; import axios from '../../../packs/custom_axios.js';
import StringWithEllipsis from '../../shared/string_with_ellipsis.vue'; import StringWithEllipsis from '../../shared/string_with_ellipsis.vue';
import SortFlyout from './sort_flyout.vue';
/* global GLOBAL_CONSTANTS */ /* global GLOBAL_CONSTANTS */
export default { export default {
@ -10,10 +11,12 @@ export default {
filters: Object filters: Object
}, },
components: { components: {
StringWithEllipsis StringWithEllipsis,
SortFlyout
}, },
data() { data() {
return { return {
sort: 'created_desc',
results: [], results: [],
total: 0, total: 0,
loading: false, loading: false,
@ -66,6 +69,12 @@ export default {
} }
} }
}, },
changeSort(sort) {
this.sort = sort;
this.results = [];
this.page = 1;
this.loadData();
},
loadData() { loadData() {
if (this.loading && this.page) return; if (this.loading && this.page) return;
@ -73,6 +82,7 @@ export default {
axios.get(this.searchUrl, { axios.get(this.searchUrl, {
params: { params: {
q: this.query, q: this.query,
sort: this.sort,
filters: this.filters, filters: this.filters,
group: this.group, group: this.group,
preview: !this.selected, preview: !this.selected,

43
app/javascript/vue/global_search/groups/sort_flyout.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<MenuDropdown
class="ml-auto"
:listItems="sortOptions"
btnClasses="btn btn-light icon-btn btn-black"
position="right"
@dtEvent="changeSort"
btnIcon="sn-icon sn-icon-sort-down"
></MenuDropdown>
</template>
<script>
import MenuDropdown from '../../shared/menu_dropdown.vue';
export default {
name: 'SortFlyout',
props: {
sort: {
type: String,
default: 'created_desc'
}
},
components: {
MenuDropdown
},
computed: {
sortOptions() {
return ['created_desc', 'created_asc', 'atoz', 'ztoa'].map((sort) => (
{
emit: sort,
text: this.i18n.t(`search.index.${sort}`),
active: this.sort === sort
}
));
}
},
methods: {
changeSort(value) {
this.$emit('changeSort', value);
}
}
};
</script>

4
config/locales/en.yml
View file

@ -481,6 +481,10 @@ en:
untitled_protocol: 'Untitled protocol' untitled_protocol: 'Untitled protocol'
protocol_template: "Protocol template" protocol_template: "Protocol template"
inventory_item: "Inventory item" inventory_item: "Inventory item"
created_desc: "Created last"
created_asc: "Created first"
atoz: "Name A to Z"
ztoa: "Name Z to A"
comments: comments:
save_changes: "Save changes" save_changes: "Save changes"
empty_state: empty_state: