Merge branch 'features/global-search' of github.com:scinote-eln/scinote-web into features/global-search

app/assets/javascripts/sitewide/constants.js.erb

@@ -18,4 +18,5 @@ const GLOBAL_CONSTANTS = {
   SLOW_STATUS_POLLING_INTERVAL: <%= Constants::SLOW_STATUS_POLLING_INTERVAL %>,
   ASSET_POLLING_INTERVAL: <%= Constants::ASSET_POLLING_INTERVAL %>,
   ASSET_SYNC_URL: '<%= Constants::ASSET_SYNC_URL %>',
+  GLOBAL_SEARCH_PREVIEW_LIMIT: <%= Constants::GLOBAL_SEARCH_PREVIEW_LIMIT %>
 };

app/controllers/search_controller.rb

@@ -13,20 +13,65 @@ class SearchController < ApplicationController
 
         case params[:group]
         when 'projects'
-          @project_search_count = fetch_cached_count Project
+          @project_search_count = fetch_cached_count(Project)
           search_projects
           if params[:preview] == 'true'
-            results = @project_results.limit(4)
+            results = @project_results&.limit(4) || []
           else
             results = @project_results.page(params[:page]).per(Constants::SEARCH_LIMIT)
           end
 
-          render json: results,
+          render json: results.includes(:team, :project_folder),
                  each_serializer: GlobalSearch::ProjectSerializer,
                  meta: {
                   total: @search_count,
                   next_page: (results.next_page if results.respond_to?(:next_page)),
                 }
+        when 'project_folders'
+          @project_folder_search_count = fetch_cached_count ProjectFolder
+          search_project_folders
+          results = if params[:preview] == 'true'
+                      @project_folder_results.limit(Constants::GLOBAL_SEARCH_PREVIEW_LIMIT)
+                    else
+                      @project_folder_results.page(params[:page]).per(Constants::SEARCH_LIMIT)
+                    end
+          render json: results.includes(:team, :parent_folder),
+                 each_serializer: GlobalSearch::ProjectFolderSerializer,
+                 meta: {
+                   total: @search_count,
+                   next_page: results.try(:next_page)
+                 }
+          return
+        when 'experiments'
+          @experiment_search_count = fetch_cached_count Experiment
+          search_experiments
+          results = if params[:preview] == 'true'
+                      @experiment_results.limit(Constants::GLOBAL_SEARCH_PREVIEW_LIMIT)
+                    else
+                      @experiment_results.page(params[:page]).per(Constants::SEARCH_LIMIT)
+                    end
+          render json: results.includes(project: :team),
+                 each_serializer: GlobalSearch::ExperimentSerializer,
+                 meta: {
+                   total: @search_count,
+                   next_page: results.try(:next_page)
+                 }
+          return
+        when 'protocols'
+          @protocol_search_count = fetch_cached_count(Protocol)
+          search_protocols
+          results = if params[:preview] == 'true'
+                      @protocol_results&.limit(4) || []
+                    else
+                      @protocol_results.page(params[:page]).per(Constants::SEARCH_LIMIT)
+                    end
+
+          render json: results,
+                 each_serializer: GlobalSearch::ProtocolSerializer,
+                 meta: {
+                          total: @search_count,
+                          next_page: (results.next_page if results.respond_to?(:next_page)),
+                        }
           return
         end
 
@@ -251,19 +296,19 @@ class SearchController < ApplicationController
   end
 
   def search_projects
-    @project_results = []
+    @project_results = Project.none
     @project_results = search_by_name(Project) if @project_search_count.positive?
     @search_count = @project_search_count
   end
 
   def search_project_folders
-    @project_folder_results = []
+    @project_folder_results = ProjectFolder.none
     @project_folder_results = search_by_name(ProjectFolder) if @project_folder_search_count.positive?
     @search_count = @project_folder_search_count
   end
 
   def search_experiments
-    @experiment_results = []
+    @experiment_results = Experiment.none
     @experiment_results = search_by_name(Experiment) if @experiment_search_count.positive?
     @search_count = @experiment_search_count
   end

app/javascript/vue/global_search/groups/experiments.vue

@@ -1,14 +1,57 @@
 <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">
       <i class="sn-icon sn-icon-experiment"></i>
       {{ i18n.t('search.index.experiments') }}
+      [{{ total }}]
     </h2>
+    <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="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 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="row.attributes.project.name"></StringWithEllipsis>
+              </a>
+            </div>
+          </div>
+        </template>
+      </div>
+      <div v-if="viewAll" class="mt-4">
+        <button class="btn btn-light" @click="$emit('selectGroup', 'ExperimentsComponent')">View all</button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import searchMixin from './search_mixin';
+
 export default {
-  name: 'ExperimentsComponent'
+  name: 'ExperimentsComponent',
+  mixins: [searchMixin],
+  data() {
+    return {
+      group: 'experiments'
+    };
+  }
 };
 </script>

app/javascript/vue/global_search/groups/folders.vue

@@ -1,14 +1,55 @@
 <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">
       <i class="sn-icon sn-icon-folder"></i>
       {{ i18n.t('search.index.folders') }}
+      [{{ total }}]
     </h2>
+    <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="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.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="row.attributes.parent_folder.name"></StringWithEllipsis>
+                </a>
+              </div>
+            </template>
+          </div>
+        </template>
+      </div>
+      <div v-if="viewAll" class="mt-4">
+        <button class="btn btn-light" @click="$emit('selectGroup', 'FoldersComponent')">View all</button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import searchMixin from './search_mixin';
+
 export default {
-  name: 'FoldersComponent'
+  name: 'FoldersComponent',
+  mixins: [searchMixin],
+  data() {
+    return {
+      group: 'project_folders'
+    };
+  }
 };
 </script>

app/javascript/vue/global_search/groups/projects.vue

@@ -1,5 +1,5 @@
 <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">
       <i class="sn-icon sn-icon-projects"></i>
       {{ i18n.t('search.index.projects') }}

app/javascript/vue/global_search/groups/protocols.vue

@@ -3,12 +3,56 @@
     <h2 class="flex items-center gap-2 mt-0 mb-4">
       <i class="sn-icon sn-icon-protocols-templates"></i>
       {{ i18n.t('search.index.protocol_templates') }}
+      [{{ total }}]
     </h2>
+    <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.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>
+      <div v-if="!selected && total > 4" class="mt-4">
+        <button class="btn btn-light" @click="$emit('selectGroup', 'ProtocolsComponent')">View all</button>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import searchMixin from './search_mixin';
+
 export default {
-  name: 'ProtocolsComponent'
+  name: 'ProtocolsComponent',
+  mixins: [searchMixin],
+  data() {
+    return {
+      group: 'protocols'
+    };
+  }
 };
 </script>

app/javascript/vue/global_search/groups/search_mixin.js

@@ -1,5 +1,6 @@
 import axios from '../../../packs/custom_axios.js';
 import StringWithEllipsis from '../../shared/string_with_ellipsis.vue';
+/* global GLOBAL_CONSTANTS */
 
 export default {
   props: {
@@ -48,6 +49,9 @@ export default {
         return this.results;
       }
       return this.results.slice(0, 4);
+    },
+    viewAll() {
+      return !this.selected && this.total > GLOBAL_CONSTANTS.GLOBAL_SEARCH_PREVIEW_LIMIT;
     }
   },
   methods: {

app/serializers/global_search/experiment_serializer.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module GlobalSearch
+  class ExperimentSerializer < ActiveModel::Serializer
+    include Rails.application.routes.url_helpers
+
+    attributes :id, :name, :code, :created_at, :team, :project, :archived, :url
+
+    def team
+      {
+        name: object.project.team.name,
+        url: projects_path(team_id: object.project.team.id)
+      }
+    end
+
+    def project
+      {
+        name: object.project.name,
+        url: project_experiments_path(project_id: object.project.id)
+      }
+    end
+
+    def created_at
+      I18n.l(object.created_at, format: :full_date)
+    end
+
+    def url
+      my_modules_experiment_path(object.id)
+    end
+  end
+end

app/serializers/global_search/project_folder_serializer.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module GlobalSearch
+  class ProjectFolderSerializer < ActiveModel::Serializer
+    include Rails.application.routes.url_helpers
+
+    attributes :id, :name, :code, :created_at, :team, :parent_folder, :archived, :url
+
+    def team
+      {
+        name: object.team.name,
+        url: projects_path(project_folder_id: object.id)
+      }
+    end
+
+    def created_at
+      I18n.l(object.created_at, format: :full_date)
+    end
+
+    def url
+      project_folder_path(object)
+    end
+
+    def parent_folder
+      if object.parent_folder_id?
+        {
+          name: object.parent_folder.name,
+          url: project_folder_path(object.parent_folder.id)
+        }
+      end
+    end
+  end
+end

app/serializers/global_search/protocol_serializer.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module GlobalSearch
+  class ProtocolSerializer < ActiveModel::Serializer
+    include Rails.application.routes.url_helpers
+
+    attributes :id, :name, :code, :created_at, :updated_at, :created_by, :team, :archived, :url
+
+    def team
+      {
+        name: object.team.name,
+        url: protocols_path(team: object.team)
+      }
+    end
+
+    def created_by
+      {
+        name: object.created_by.name,
+        avatar_url: avatar_path(object.created_by, :icon_small)
+      }
+    end
+
+    def created_at
+      I18n.l(object.created_at, format: :full_date)
+    end
+
+    def updated_at
+      I18n.l(object.updated_at, format: :full_date)
+    end
+
+    def url
+      protocol_path(object)
+    end
+  end
+end

config/initializers/constants.rb

@@ -52,6 +52,8 @@ class Constants
 
   # General limited/unlimited query/display elements for pages
   SEARCH_LIMIT = 20
+  # General global search limit for object groups
+  GLOBAL_SEARCH_PREVIEW_LIMIT = 4
   SEARCH_NO_LIMIT = -1
   # General limited query/display elements for popup modals
   MODAL_SEARCH_LIMIT = 5

config/locales/en.yml

@@ -457,8 +457,11 @@ en:
       clear_filters: "Clear filters"
       id: "ID"
       created_at: "Created on"
+      created_by: "Created by"
+      updated_at: "Updated on"
       team: "Team"
       folder: "Folder"
+      project: "Project"
   comments:
     save_changes: "Save changes"
     empty_state: