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

Unify global search page [SCI-10636]

Browse source
This commit is contained in:
Anton 2024-04-16 13:33:36 +02:00
parent 2ff3477956
commit 57c138f54f
18 changed files with 234 additions and 447 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -10,48 +10,24 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id">
<a target="_blank" :href="row.attributes.parent.url"
class="h-full py-2 px-4 grid grid-cols-[auto_1fr] items-center gap-1 font-bold border-0 border-b border-solid border-sn-light-grey">
<span :class="row.attributes.icon" class="shrink-0"></span>
<StringWithEllipsis class="w-full" :text="row.attributes.file_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">
<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">
<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 target="_blank" :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
<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.${row.attributes.parent.type}`) }}:</b>
<a target="_blank" :href="row.attributes.parent.url" class="shrink-0 overflow-hidden">
<StringWithEllipsis class="w-full" :text="labelName(row.attributes.parent)"></StringWithEllipsis>
</a>
</div>
<div class="s 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"
:class="{ 'invisible': !row.attributes.experiment.name }">
<b class="shrink-0">{{ i18n.t('search.index.experiment') }}:</b>
<a target="_blank" :href="row.attributes.experiment.url" class="shrink-0 overflow-hidden">
<StringWithEllipsis class="w-full" :text="labelName(row.attributes.experiment)"></StringWithEllipsis>
</a>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.parent.url" :icon="row.attributes.icon" :value="row.attributes.file_name"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label=" i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t(`search.index.${row.attributes.parent.type}`)" :url="row.attributes.parent.url" :value="labelName(row.attributes.parent)"/>
<CellTemplate :label="i18n.t(`search.index.${row.attributes.parent.type}`)" :visible="!!row.attributes.experiment.name"
:url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'AssetsComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,43 +10,22 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_80px_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="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
</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">
<b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
<span class="shrink-0">{{ row.attributes.code }}</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-[220px]">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="shrink-0">{{ row.attributes.created_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 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.project') }}:</b>
<a :href="row.attributes.project.url" target="_blank" class="shrink-0 overflow-hidden">
<StringWithEllipsis class="w-full" :text="labelName(row.attributes.project)"></StringWithEllipsis>
</a>
</div>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-5 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
<CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t('search.index.project')" :url="row.attributes.project.url" :value="labelName(row.attributes.project)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'ExperimentsComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,41 +10,22 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<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">
<a target="_blank" :href="row.attributes.url" 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="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
</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">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="shrink-0">{{ row.attributes.created_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 border-0 border-b border-solid border-sn-light-grey">
<template v-if="row.attributes.parent_folder">
<div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
<b class="shrink-0">{{ i18n.t('search.index.folder') }}:</b>
<a :href="row.attributes.parent_folder.url" target="_blank" class="shrink-0 overflow-hidden">
<StringWithEllipsis class="w-full" :text="labelName(row.attributes.parent_folder)"></StringWithEllipsis>
</a>
</div>
</template>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-4 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t('search.index.floler')" :visible="row.attributes.parent_folder"
:url="row.attributes.parent_folder?.url" :value="labelName(row.attributes.parent_folder)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'FoldersComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

33
app/javascript/vue/global_search/groups/helpers/cell_template.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] min-w-[8rem] items-center gap-1 text-xs group-hover:bg-sn-super-light-grey">
<template v-if="visible">
<b class="shrink-0">{{ label }}:</b>
<a v-if="url" :href="url" class="shrink-0 overflow-hidden hover:no-underline">
<img v-if="avatar" :src="avatar" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
<StringWithEllipsis class="w-full" :text="value"></StringWithEllipsis>
</a>
<div v-else class="grid grid-cols-[auto_1fr] items-center gap-1 overflow-hidden">
<img v-if="avatar" :src="avatar" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
<span class="shrink-0 truncate" :title="value">{{ value }}</span>
</div>
</template>
</div>
</template>
<script>
import StringWithEllipsis from '../../../shared/string_with_ellipsis.vue';
export default {
name: 'CellTemplate',
props: {
label: { type: String, default: '' },
value: { type: String, default: '' },
url: { type: String, default: '' },
avatar: { type: String, default: '' },
visible: { type: Boolean, default: true }
},
components: {
StringWithEllipsis
}
};
</script>

24
app/javascript/vue/global_search/groups/helpers/link_template.vue Normal file
View file

@ -0,0 +1,24 @@
<template>
<a target="_blank" :href="url" class="h-full py-2 px-4 overflow-hidden font-bold flex gap-1 items-center group-hover:bg-sn-super-light-grey hover:no-underline">
<span v-if="icon" :class="icon" class="sn-icon shrink-0"></span>
<StringWithEllipsis class="w-full"
:text="value">
</StringWithEllipsis>
</a>
</template>
<script>
import StringWithEllipsis from '../../../shared/string_with_ellipsis.vue';
export default {
name: 'LinkTemplate',
props: {
value: { type: String, default: '' },
url: { type: String, default: '' },
icon: { type: String, default: '' }
},
components: {
StringWithEllipsis
}
};
</script>

17
app/javascript/vue/global_search/groups/helpers/list_end.vue Normal file
View file

@ -0,0 +1,17 @@
<template>
<div class="flex flex-col gap-6 mt-6">
<div 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>
</p>
</div>
</div>
</template>
<script>
export default {
name: 'ListEnd'
};
</script>

10
app/javascript/vue/global_search/no_search_result.vue → app/javascript/vue/global_search/groups/helpers/no_search_result.vue
View file

@ -1,5 +1,5 @@
<template>
<div ref="noSearchResult">
<div ref="noSearchResult" class="h-[60vh]">
<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="">
@ -17,12 +17,6 @@
<script>
export default {
name: 'NoSearchResult',
props: {
noSearchResultHeight: { type: Number, default: 0 }
},
mounted() {
this.$refs.noSearchResult.style.height = `${this.noSearchResultHeight}px`;
}
name: 'NoSearchResult'
};
</script>

2
app/javascript/vue/global_search/groups/sort_flyout.vue → app/javascript/vue/global_search/groups/helpers/sort_flyout.vue
View file

@ -10,7 +10,7 @@
</template>
<script>
import MenuDropdown from '../../shared/menu_dropdown.vue';
import MenuDropdown from '../../../shared/menu_dropdown.vue';
export default {
name: 'SortFlyout',

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

@ -10,42 +10,23 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id">
<a :href="row.attributes.url" 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">
<b class="shrink-0">{{ i18n.t('search.index.format') }}:</b>
<span class="shrink-0">{{ row.attributes.format }}</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">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="shrink-0">{{ 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">
<b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
<span class="shrink-0">{{ row.attributes.updated_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">
<b class="shrink-0">{{ i18n.t('search.index.created_by') }}:</b>
<img v-if="row.attributes.created_by.avatar_url" :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
<span class="shrink-0">{{ row.attributes.created_by.name }}</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">
<StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
</a>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="row.attributes.name"/>
<CellTemplate :label="i18n.t('search.index.format')" :value="row.attributes.format"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
<CellTemplate :label="i18n.t('search.index.created_by')" :avatar="row.attributes.created_by.avatar_url" :value="row.attributes.created_by.name"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'LabelTemplatesComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,53 +10,24 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_80px_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="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
</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">
<b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
<span class="shrink-0">{{ row.attributes.code }}</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.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="labelName(row.attributes.my_module)"></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="labelName(row.attributes.experiment)"></StringWithEllipsis>
</a>
</div>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-7 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
<CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t('search.index.task')" :url="row.attributes.my_module.url" :value="labelName(row.attributes.my_module)"/>
<CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'MyModuleProtocolsComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,47 +10,23 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_80px_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="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
</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">
<b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
<span class="shrink-0">{{ row.attributes.code }}</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.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 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="labelName(row.attributes.experiment)"></StringWithEllipsis>
</a>
</div>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
<CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'MyModulesComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,45 +10,23 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_80px_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id">
<a :href="row.attributes.url" 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="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
</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">
<b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
<span class="shrink-0">{{ row.attributes.code }}</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">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="shrink-0">{{ row.attributes.created_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">
<StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
</a>
</div>
<div class="h-full py-2 px-4 border-0 border-b border-solid border-sn-light-grey">
<template v-if="row.attributes.folder">
<div class="grid grid-cols-[auto_1fr] items-center gap-1 text-xs w-full">
<b class="shrink-0">{{ i18n.t('search.index.folder') }}:</b>
<a :href="row.attributes.folder.url" class="shrink-0 overflow-hidden">
<StringWithEllipsis class="w-full" :text="labelName(row.attributes.folder)"></StringWithEllipsis>
</a>
</div>
</template>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-5 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
<CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t('search.index.folder')" :visible="row.attributes.folder"
:url="row.attributes.folder?.url" :value="labelName(row.attributes.folder)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'ProjectsComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,44 +10,23 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id">
<a :href="row.attributes.url" 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="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
</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">
<b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
<span class="shrink-0">{{ row.attributes.code }}</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">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="shrink-0">{{ 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">
<b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
<span class="shrink-0">{{ row.attributes.updated_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">
<b class="shrink-0">{{ i18n.t('search.index.created_by') }}:</b>
<img :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
<span class="shrink-0">{{ row.attributes.created_by.name }}</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">
<StringWithEllipsis class="w-full" :text="row.attributes.team.name"></StringWithEllipsis>
</a>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
<CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
<CellTemplate :label="i18n.t('search.index.created_by')" :avatar="row.attributes.created_by.avatar_url" :value="row.attributes.created_by.name"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'ProtocolsComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,50 +10,24 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id">
<a target="_blank" :href="row.attributes.url" 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">
<b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
<span class="shrink-0">{{ row.attributes.code }}</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">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="shrink-0">{{ 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">
<b class="shrink-0">{{ i18n.t('search.index.updated_at') }}:</b>
<span class="shrink-0">{{ 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.created_by') }}:</b>
<div class="truncate">
<img :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
<span class="truncate">{{ row.attributes.created_by.name }}</span>
</div>
</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 target="_blank" :href="row.attributes.team.url" class="shrink-0 overflow-hidden">
<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.project') }}:</b>
<a target="_blank" :href="row.attributes.project.url" class="shrink-0 overflow-hidden">
<StringWithEllipsis class="w-full" :text="labelName(row.attributes.project)"></StringWithEllipsis>
</a>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-7 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="row.attributes.name"/>
<CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
<CellTemplate :label="i18n.t('search.index.created_by')" :avatar="row.attributes.created_by.avatar_url" :value="row.attributes.created_by.name"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t('search.index.project')" :url="row.attributes.project.url" :value="labelName(row.attributes.project)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'ReportsComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,46 +10,23 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</div>
<div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
<template v-for="row in preparedResults" :key="row.id">
<a :href="row.attributes.url" 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="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
</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">
<b class="shrink-0">{{ i18n.t('search.index.id') }}:</b>
<span class="shrink-0">{{ row.attributes.code }}</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">
<b class="shrink-0">{{ i18n.t('search.index.created_at') }}:</b>
<span class="shrink-0">{{ 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">
<b class="shrink-0">{{ i18n.t('search.index.created_by') }}:</b>
<img :src="row.attributes.created_by.avatar_url" class="w-5 h-5 border border-sn-super-light-grey rounded-full mx-1" />
<span class="shrink-0">{{ row.attributes.created_by.name }}</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">
<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.repository') }}:</b>
<a :href="row.attributes.repository.url" class="shrink-0 overflow-hidden">
<StringWithEllipsis class="w-full" :text="labelName(row.attributes.repository)"></StringWithEllipsis>
</a>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
<CellTemplate :label="i18n.t('search.index.id')" :value="row.attributes.code"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.created_by')" :avatar="row.attributes.created_by.avatar_url" :value="row.attributes.created_by.name"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t('search.index.repository')" :url="row.attributes.repository.url" :value="labelName(row.attributes.repository)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'RepositoryRowsComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -10,49 +10,23 @@
<SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
</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="labelName({ name: row.attributes.name, archived: row.attributes.archived})">
</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="labelName(row.attributes.my_module)"></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="labelName(row.attributes.experiment)"></StringWithEllipsis>
</a>
</div>
</div>
</template>
<div v-for="(row, index) in preparedResults" :key="row.id" class="contents group">
<hr class="col-span-6 w-full m-0" v-if="index > 0">
<LinkTemplate :url="row.attributes.url" :value="labelName({ name: row.attributes.name, archived: row.attributes.archived})"/>
<CellTemplate :label="i18n.t('search.index.created_at')" :value="row.attributes.created_at"/>
<CellTemplate :label="i18n.t('search.index.updated_at')" :value="row.attributes.updated_at"/>
<CellTemplate :label="i18n.t('search.index.team')" :url="row.attributes.team.url" :value="row.attributes.team.name"/>
<CellTemplate :label="i18n.t('search.index.task')" :url="row.attributes.my_module.url" :value="labelName(row.attributes.my_module)"/>
<CellTemplate :label="i18n.t('search.index.experiment')" :url="row.attributes.experiment.url" :value="labelName(row.attributes.experiment)"/>
</div>
</div>
<div v-if="viewAll" class="mt-4">
<button class="btn btn-light" @click="$emit('selectGroup', 'ResultsComponent')">View all</button>
</div>
</template>
<Loader v-if="loading" :total="total" :loaderRows="loaderRows" :loaderYPadding="loaderYPadding"
:loaderHeight="loaderHeight" :loaderGap="loaderGap" :reachedEnd="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" :noSearchResultHeight="noSearchResultHeight" />
<Loader v-if="loading" :loaderRows="loaderRows" />
<ListEnd v-if="reachedEnd" />
<NoSearchResult v-else-if="showNoSearchResult" />
</div>
</template>

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

@ -1,8 +1,11 @@
import axios from '../../../packs/custom_axios.js';
import StringWithEllipsis from '../../shared/string_with_ellipsis.vue';
import SortFlyout from './sort_flyout.vue';
import SortFlyout from './helpers/sort_flyout.vue';
import Loader from '../loader.vue';
import NoSearchResult from '../no_search_result.vue';
import ListEnd from './helpers/list_end.vue';
import NoSearchResult from './helpers/no_search_result.vue';
import CellTemplate from './helpers/cell_template.vue';
import LinkTemplate from './helpers/link_template.vue';
/* global GLOBAL_CONSTANTS I18n */
export default {
@ -16,7 +19,10 @@ export default {
StringWithEllipsis,
SortFlyout,
Loader,
NoSearchResult
NoSearchResult,
ListEnd,
CellTemplate,
LinkTemplate
},
data() {
return {
@ -27,10 +33,6 @@ export default {
page: 1,
disabled: false,
fullDataLoaded: false,
loaderHeight: 24,
loaderGap: 10,
loaderYPadding: 10,
noSearchResultHeight: 0
};
},
watch: {
@ -69,20 +71,10 @@ export default {
return !this.selected && this.total > GLOBAL_CONSTANTS.GLOBAL_SEARCH_PREVIEW_LIMIT;
},
loaderRows() {
// h-[24px] gap-y-[10px] py-[10px]
if (this.loading && (!this.selected || this.total)) return GLOBAL_CONSTANTS.GLOBAL_SEARCH_PREVIEW_LIMIT;
if (this.selected && this.loading) {
const availableHeight = window.innerHeight - this.$refs.content.getBoundingClientRect().top;
// loaderHeight + loaderGap + headerLoaderHeight + headerContentGap
const offSet = this.loaderHeight + this.loaderGap + 32 + 20;
return Math.floor((availableHeight - offSet) / (this.loaderHeight + this.loaderGap + (2 * this.loaderYPadding)));
}
return 0;
return !this.selected ? 4 : 20;
},
reachedEnd() {
return Math.ceil(this.total / GLOBAL_CONSTANTS.SEARCH_LIMIT) === this.page;
return !this.page && this.selected;
},
showNoSearchResult() {
return this.selected && !this.loading && !this.results.length;
@ -90,6 +82,8 @@ export default {
},
methods: {
labelName(object) {
if (!object) return '';
if (!object.archived) return object.name;
return `${I18n.t('labels.archived')} ${object.name}`;
@ -130,10 +124,6 @@ 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;

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

@ -1,28 +1,16 @@
<template>
<div class="flex flex-col gap-6">
<div v-if="!total" class="grid grid-cols-[32px_auto] gap-2.5">
<div class="h-8 w-8 animate-skeleton rounded"></div>
<div class="h-8 w-40 animate-skeleton rounded"></div>
</div>
<div class="flex flex-col" :class="[`gap-[${loaderGap}px]`]">
<div v-for="_count in loaderRows"
class="flex items-center no-wrap border-0 border-b border-solid border-sn-light-grey gap-x-8"
:class="[`gap-y-[${loaderGap}px]`, `py-[${loaderYPadding}px]`, { 'first:border-t': total }]">
<div class="w-[500px] grow-1" :class="`h-[${loaderHeight}px]`">
<div class="h-full w-80 animate-skeleton rounded mr-auto"></div>
</div>
<div :class="`h-[${loaderHeight}px]`" class="w-24 max-w-24 animate-skeleton rounded"></div>
<div :class="`h-[${loaderHeight}px]`" class="w-44 max-w-44 animate-skeleton rounded"></div>
<div :class="`h-[${loaderHeight}px]`" class="w-44 max-w-44 animate-skeleton rounded"></div>
<div :class="`h-[${loaderHeight}px]`" class="w-56 max-w-56 animate-skeleton rounded"></div>
<div :class="`h-[${loaderHeight}px]`" class="w-96 max-w-96 animate-skeleton rounded"></div>
<div class="flex flex-col">
<div v-for="_count in loaderRows"
class="flex items-center no-wrap border-0 gap-2 py-2 border-b border-solid border-sn-light-grey gap-x-8"
>
<div class="w-[500px] grow-1 h-6">
<div class="h-full w-80 animate-skeleton rounded mr-auto"></div>
</div>
</div>
<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>
</p>
<div class="w-24 max-w-24 animate-skeleton rounded h-6"></div>
<div class="w-44 max-w-44 animate-skeleton rounded h-6"></div>
<div class="w-44 max-w-44 animate-skeleton rounded h-6"></div>
<div class="w-56 max-w-56 animate-skeleton rounded h-6"></div>
<div class="w-96 max-w-96 animate-skeleton rounded h-6"></div>
</div>
</div>
</template>
@ -32,12 +20,7 @@
export default {
name: 'Loader',
props: {
total: { type: Number, default: 0 },
loaderRows: { type: Number, default: 0 },
loaderHeight: { type: Number, required: true },
loaderGap: { type: Number, required: true },
loaderYPadding: { type: Number, required: true },
reachedEnd: { type: Boolean }
}
};
</script>