From 024195a92321bd74c9142c0c8a34f2f0e8fdb6d9 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Mon, 13 May 2024 13:46:56 +0200
Subject: [PATCH] Improve global search on small screens [SCI-10698]

---
 .../vue/global_search/groups/assets.vue       |  7 +++++
 .../vue/global_search/groups/experiments.vue  |  6 +++++
 .../vue/global_search/groups/folders.vue      |  5 ++++
 .../groups/helpers/cell_template.vue          |  4 +--
 .../groups/helpers/link_template.vue          |  2 +-
 .../groups/helpers/table_header.vue           | 27 +++++++++++++++++++
 .../global_search/groups/label_templates.vue  |  7 +++++
 .../groups/my_module_protocols.vue            |  8 ++++++
 .../vue/global_search/groups/my_modules.vue   |  7 +++++
 .../vue/global_search/groups/projects.vue     |  6 +++++
 .../vue/global_search/groups/protocols.vue    |  7 +++++
 .../vue/global_search/groups/reports.vue      |  8 ++++++
 .../global_search/groups/repository_rows.vue  |  7 +++++
 .../vue/global_search/groups/results.vue      |  7 +++++
 .../vue/global_search/groups/search_mixin.js  |  4 ++-
 .../vue/navigation/quick_search.vue           |  2 +-
 16 files changed, 109 insertions(+), 5 deletions(-)
 create mode 100644 app/javascript/vue/global_search/groups/helpers/table_header.vue

diff --git a/app/javascript/vue/global_search/groups/assets.vue b/app/javascript/vue/global_search/groups/assets.vue
index 6d5475299..83914165a 100644
--- a/app/javascript/vue/global_search/groups/assets.vue
+++ b/app/javascript/vue/global_search/groups/assets.vue
@@ -10,6 +10,13 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.updated_at'),
+          '',
+          '',
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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"/>
diff --git a/app/javascript/vue/global_search/groups/experiments.vue b/app/javascript/vue/global_search/groups/experiments.vue
index 014e45222..d3c5d58b4 100644
--- a/app/javascript/vue/global_search/groups/experiments.vue
+++ b/app/javascript/vue/global_search/groups/experiments.vue
@@ -10,6 +10,12 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.id'),
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.project'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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})"/>
diff --git a/app/javascript/vue/global_search/groups/folders.vue b/app/javascript/vue/global_search/groups/folders.vue
index fbb5c1940..a10ed7b6c 100644
--- a/app/javascript/vue/global_search/groups/folders.vue
+++ b/app/javascript/vue/global_search/groups/folders.vue
@@ -10,6 +10,11 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.folder'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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})"/>
diff --git a/app/javascript/vue/global_search/groups/helpers/cell_template.vue b/app/javascript/vue/global_search/groups/helpers/cell_template.vue
index 724b04084..2d8fdb3fd 100644
--- a/app/javascript/vue/global_search/groups/helpers/cell_template.vue
+++ b/app/javascript/vue/global_search/groups/helpers/cell_template.vue
@@ -1,7 +1,7 @@
 <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">
+    <div class="h-full py-2 px-4 grid grid-cols-[auto_1fr] min-w-[6rem] items-center gap-1 text-xs group-hover:bg-sn-super-light-grey">
       <template v-if="visible">
-        <b class="shrink-0">{{ label }}:</b>
+        <b class="shrink-0 tw-hidden lg:block">{{ 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>
diff --git a/app/javascript/vue/global_search/groups/helpers/link_template.vue b/app/javascript/vue/global_search/groups/helpers/link_template.vue
index 831cdd1c7..2898fe33b 100644
--- a/app/javascript/vue/global_search/groups/helpers/link_template.vue
+++ b/app/javascript/vue/global_search/groups/helpers/link_template.vue
@@ -1,6 +1,6 @@
 <template>
     <a target="_blank" :href="url"
-       class="h-full py-2 px-4 flex gap-1 items-center font-bold overflow-hidden group-hover:bg-sn-super-light-grey hover:no-underline"
+       class="h-full py-2 px-4 flex gap-1 items-center font-bold overflow-hidden group-hover:bg-sn-super-light-grey min-w-40 hover:no-underline"
     >
       <span v-if="icon" :class="icon" class="sn-icon shrink-0"></span>
       <StringWithEllipsis
diff --git a/app/javascript/vue/global_search/groups/helpers/table_header.vue b/app/javascript/vue/global_search/groups/helpers/table_header.vue
new file mode 100644
index 000000000..03f4930f8
--- /dev/null
+++ b/app/javascript/vue/global_search/groups/helpers/table_header.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="contents lg:hidden">
+    <div class="px-4 py-2 bg-white h-full" :class="{'sticky top-[68px] z-10': selected}"></div>
+    <div
+      v-for="column in columnNames"
+      :key="column"
+      class="truncate px-4  py-2 bg-white text-xs font-bold h-full"
+      :class="{'sticky top-[68px] z-10': selected}"
+    >{{ column }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TableHeader',
+  props: {
+    columnNames: {
+      type: Array,
+      required: true
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  }
+};
+</script>
diff --git a/app/javascript/vue/global_search/groups/label_templates.vue b/app/javascript/vue/global_search/groups/label_templates.vue
index 39070f8eb..65620001d 100644
--- a/app/javascript/vue/global_search/groups/label_templates.vue
+++ b/app/javascript/vue/global_search/groups/label_templates.vue
@@ -10,6 +10,13 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.format'),
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.updated_at'),
+          i18n.t('search.index.created_by'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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"/>
diff --git a/app/javascript/vue/global_search/groups/my_module_protocols.vue b/app/javascript/vue/global_search/groups/my_module_protocols.vue
index 92205366c..ab654f742 100644
--- a/app/javascript/vue/global_search/groups/my_module_protocols.vue
+++ b/app/javascript/vue/global_search/groups/my_module_protocols.vue
@@ -10,6 +10,14 @@
       <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
     </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.id'),
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.updated_at'),
+          i18n.t('search.index.task'),
+          i18n.t('search.index.experiment'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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})"/>
diff --git a/app/javascript/vue/global_search/groups/my_modules.vue b/app/javascript/vue/global_search/groups/my_modules.vue
index 7f7e00433..d306ac122 100644
--- a/app/javascript/vue/global_search/groups/my_modules.vue
+++ b/app/javascript/vue/global_search/groups/my_modules.vue
@@ -10,6 +10,13 @@
       <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
     </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.id'),
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.updated_at'),
+          i18n.t('search.index.experiment'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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})"/>
diff --git a/app/javascript/vue/global_search/groups/projects.vue b/app/javascript/vue/global_search/groups/projects.vue
index 70a05d49b..eef9cabb2 100644
--- a/app/javascript/vue/global_search/groups/projects.vue
+++ b/app/javascript/vue/global_search/groups/projects.vue
@@ -10,6 +10,12 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.id'),
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.folder'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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})"/>
diff --git a/app/javascript/vue/global_search/groups/protocols.vue b/app/javascript/vue/global_search/groups/protocols.vue
index e269d8a9c..e2e4a8126 100644
--- a/app/javascript/vue/global_search/groups/protocols.vue
+++ b/app/javascript/vue/global_search/groups/protocols.vue
@@ -10,6 +10,13 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.id'),
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.updated_at'),
+          i18n.t('search.index.created_by'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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})"/>
diff --git a/app/javascript/vue/global_search/groups/reports.vue b/app/javascript/vue/global_search/groups/reports.vue
index 3ff1dcf88..c711c4e89 100644
--- a/app/javascript/vue/global_search/groups/reports.vue
+++ b/app/javascript/vue/global_search/groups/reports.vue
@@ -10,6 +10,14 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.id'),
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.updated_at'),
+          i18n.t('search.index.created_by'),
+          i18n.t('search.index.project'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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"/>
diff --git a/app/javascript/vue/global_search/groups/repository_rows.vue b/app/javascript/vue/global_search/groups/repository_rows.vue
index 4982438cc..8f4b5576d 100644
--- a/app/javascript/vue/global_search/groups/repository_rows.vue
+++ b/app/javascript/vue/global_search/groups/repository_rows.vue
@@ -10,6 +10,13 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_110px_auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.id'),
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.created_by'),
+          i18n.t('search.index.repository'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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})"/>
diff --git a/app/javascript/vue/global_search/groups/results.vue b/app/javascript/vue/global_search/groups/results.vue
index 0cf4c5eba..c497115cc 100644
--- a/app/javascript/vue/global_search/groups/results.vue
+++ b/app/javascript/vue/global_search/groups/results.vue
@@ -10,6 +10,13 @@
         <SortFlyout v-if="selected" :sort="sort" @changeSort="changeSort"></SortFlyout>
       </div>
       <div class="grid grid-cols-[auto_auto_auto_auto_auto_auto] items-center">
+        <TableHeader :selected="selected" :columnNames="[
+          i18n.t('search.index.created_at'),
+          i18n.t('search.index.updated_at'),
+          i18n.t('search.index.task'),
+          i18n.t('search.index.experiment'),
+          i18n.t('search.index.team')
+        ]"></TableHeader>
         <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})"/>
diff --git a/app/javascript/vue/global_search/groups/search_mixin.js b/app/javascript/vue/global_search/groups/search_mixin.js
index fed580c6d..e14c1e3c6 100644
--- a/app/javascript/vue/global_search/groups/search_mixin.js
+++ b/app/javascript/vue/global_search/groups/search_mixin.js
@@ -6,6 +6,7 @@ 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';
+import TableHeader from './helpers/table_header.vue';
 /* global GLOBAL_CONSTANTS I18n */
 
 export default {
@@ -22,7 +23,8 @@ export default {
     NoSearchResult,
     ListEnd,
     CellTemplate,
-    LinkTemplate
+    LinkTemplate,
+    TableHeader
   },
   data() {
     return {
diff --git a/app/javascript/vue/navigation/quick_search.vue b/app/javascript/vue/navigation/quick_search.vue
index dd4f0375f..23dbfc07b 100644
--- a/app/javascript/vue/navigation/quick_search.vue
+++ b/app/javascript/vue/navigation/quick_search.vue
@@ -4,7 +4,7 @@
       <div class="sci--navigation--top-menu-search left-icon sci-input-container-v2" :class="{'disabled' : !currentTeam}" :title="i18n.t('nav.search')">
         <input ref="searchField" type="text" class="!pr-20" v-model="searchQuery" @keydown="focusHistoryItem"
                :class="{'active': flyoutOpened}"
-               @focus="openHistory" :placeholder="i18n.t('nav.search')" @keyup.enter="saveQuery"/>
+               @focus="openHistory" :placeholder="i18n.t('nav.search')" @keydown.enter="saveQuery"/>
         <i class="sn-icon sn-icon-search"></i>
         <div v-if="this.searchQuery.length > 1" class="flex items-center gap-1 absolute right-2 top-1.5">
           <div class="btn btn-light icon-btn btn-xs" @click="this.searchQuery = ''; $refs.searchField.focus()">