Feature: update admin page UI to use vertical tabs

app/assets/javascripts/bp_admin.js

@@ -406,11 +406,11 @@ function populateOntologyRows(data) {
     var ontologyDateCreated = parseReportDate(ontology["date_created"]);
 
     if (ontology["logFilePath"] != '') {
-      bpLinks += "<a href='" + "/admin/ontologies/" + acronym + "/log' target='_blank'>Log</a>&nbsp;&nbsp;|&nbsp;&nbsp;";
+      bpLinks += "<div><a href='" + "/admin/ontologies/" + acronym + "/log' target='_blank'>Log</a> </div>";
     }
-    bpLinks += "<a href='" + BP_CONFIG.rest_url + "/ontologies/" + acronym + "?apikey=" + BP_CONFIG.apikey + "&userapikey: " + BP_CONFIG.userapikey + "' target='_blank'>REST</a>&nbsp;&nbsp;|&nbsp;&nbsp;";
+    bpLinks += "<div><a href='" + BP_CONFIG.rest_url + "/ontologies/" + acronym + "?apikey=" + BP_CONFIG.apikey + "&userapikey: " + BP_CONFIG.userapikey + "' target='_blank'>REST</a></div>";
     let title = `Ontology Submissions for ${acronym}`
-    let link = `<a id='link_submissions_${acronym}' href="/ontologies/${acronym}/submissions?container_id=application_modal_content" data-controller="show-modal" data-show-modal-title-value="${title}" data-action="click->show-modal#show" data-turbo="true" data-turbo-frame="application_modal_content">Submissions</a>`
+    let link = `<div><a id='link_submissions_${acronym}' href="/ontologies/${acronym}/submissions?container_id=application_modal_content" data-controller="show-modal" data-show-modal-title-value="${title}" data-action="click->show-modal#show" data-turbo="true" data-turbo-frame="application_modal_content">Submissions</a></div>`
     bpLinks += link
 
     var errStatus = ontology["errErrorStatus"] ? ontology["errErrorStatus"].join(", ") : '';
@@ -525,53 +525,45 @@ function displayOntologies(data, ontology) {
         {
           "targets": 0,
           "searchable": true,
-          "title": "Ontology",
-          "width": "160px"
+          "title": "Ontology"
         },
         {
           "targets": 1,
           "searchable": true,
           "title": "Admin",
-          "width": "160px"
         },
         {
           "targets": 2,
           "searchable": true,
           "title": "Format",
-          "width": "55px"
         },
         {
           "targets": 3,
           "searchable": true,
           "title": "Date Created",
           "type": "date",
-          "width": "170px"
         },
         {
           "targets": 4,
           "searchable": true,
           "title": "Report Date",
           "type": "date",
-          "width": "170px"
         },
         {
           "targets": 5,
           "searchable": false,
           "orderable": false,
           "title": "URL",
-          "width": "140px"
         },
         {
           "targets": 6,
           "searchable": true,
           "title": "Error Status",
-          "width": "130px"
         },
         {
           "targets": 7,
           "searchable": true,
           "title": "Missing Status",
-          "width": "130px"
         },
         {
           "targets": 8,
@@ -584,8 +576,8 @@ function displayOntologies(data, ontology) {
           "visible": false
         }
       ],
-      "autoWidth": false,
-      "lengthChange": false,
+      "autoWidth": true,
+      "lengthChange": true,
       "searching": true,
       "language": {
         "search": "Filter: ",

app/assets/stylesheets/admin.scss

@@ -152,9 +152,7 @@ table.dataTable tbody tr.selected {
 }
 
 .site-admin-page-section {
-  display: flex;
   margin-top: 15px;
-
   .admin-action-item {
     margin-right: 8px;
   }

app/assets/stylesheets/components/index.scss

@@ -32,4 +32,5 @@
 @import "search_result";
 @import "range_slider";
 @import "ontologies_selector";
-@import "loader";
+@import "loader";
+@import "vertical_tabs";

app/assets/stylesheets/components/vertical_tabs.scss

@@ -0,0 +1,83 @@
+.center {
+  display: flex;
+  justify-content: center;
+  margin-top: 50px;
+}
+
+.edit-ontology-container {
+  padding: 0 50px;
+  width: 1248px
+}
+
+.edit-ontology-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.edit-ontology-title hr {
+  width: 93px;
+  border: 1px solid var(--primary-color);
+  margin: 0;
+  opacity: 100%;
+}
+
+
+.tabs-left-column {
+  border-radius: 5px;
+  min-width: 250px;
+  .nav-pills.disabled  a {
+    color: #888888 !important;
+    cursor: not-allowed;
+  }
+
+  .nav-pills:not(.disabled){
+    .vertical-tab-item.active {
+      color: var(--primary-color);
+      background-color: var(--light-color) !important;
+      border-left: 3px solid var(--primary-color);
+      font-weight: 700;
+    }
+
+
+
+    .vertical-tab-item:hover {
+      background-color: #F6F6F6;
+    }
+
+  }
+}
+
+.vertical-tab-item {
+  font-size: 14px;
+  width: 100%;
+  padding: 10px 15px;
+  font-weight: 500;
+  margin: 3px 0;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: background-color ease 0.3s;
+}
+
+.tabs-right-column {
+  border-radius: 5px;
+  width: 100%;
+}
+
+
+
+.tabs-left-column input {
+  border: 1px solid #BDBDBD;
+  outline: none;
+  font-size: 14px;
+  border-radius: 5px;
+  padding: 10px 15px;
+  width: 100%;
+  margin-top: 20px;
+}
+
+
+
+
+
+
+

app/components/layout/vertical_tabs_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class Layout::VerticalTabsComponent < ViewComponent::Base
+
+  renders_many :item_contents
+
+  def initialize(titles: [], header: nil , selected: nil,  url_parameter: nil)
+    @titles = titles
+    @selected = selected
+    @header = header
+    @url_parameter =  url_parameter
+  end
+
+end

app/components/layout/vertical_tabs_component/vertical_tabs_component.html.haml

@@ -0,0 +1,20 @@
+- if @header
+  %div.mb-2
+    .edit-ontology-title.mx-2{style: 'font-size: 30px'}
+      %div=@header
+      %hr
+
+.d-flex{data: {controller:'tabs-container'}}
+  .tabs-left-column
+    %div.nav.nav-pills.flex-column
+      - @titles.each_with_index  do |key|
+        %a.vertical-tab-item.d-block{href: "##{key.parameterize}-tab", "data-toggle" => "pill", class:  @selected.eql?(key.parameterize) ? 'active show' : '', data: {'tab-id': key.parameterize,  'tab-title': key.titleize, 'url-parameter': @url_parameter, action: 'click->tabs-container#selectTab'}}
+          = key.humanize
+
+  .tabs-right-column.w-100
+    %div.tab-content
+      - item_contents.each_with_index  do |tab, index|
+        .tab-pane.fade.mx-4{id: @titles[index].parameterize+'-tab', class: @selected.eql?(@titles[index].parameterize) ? 'active show' : ''}
+          = tab
+
+

app/components/table_component/table_component_controller.js

@@ -15,7 +15,7 @@ export default class extends Controller {
         table_component = this.element.childNodes[1]
         let default_sort_column
         default_sort_column = parseInt(this.sortcolumnValue, 10)
-        if (this.sortcolumnValue || this.searchingValue){
+        if (this.sortcolumnValue || this.searchingValue || this.pagingValue){
             let table = new DataTable('#'+table_component.id, {
                 paging: this.pagingValue,
                 info: false,

app/helpers/admin_helper.rb

@@ -17,7 +17,7 @@ def visits_evolution
     @users_visits[:visits].last - @users_visits[:visits][-2]
   end
 
-  def action_button(name, link, method: :post, class_style: 'btn btn-link mb-3')
+  def action_button(name, link, method: :post, class_style: 'btn btn-link')
     button_to name, link, method: method, class: class_style,
                 form: {data: { turbo: true, turbo_confirm: t('admin.turbo_confirm', name: name), turbo_frame: '_top'}}
 

app/views/admin/_analytics.html.haml

@@ -1,47 +1,47 @@
-%div.container
-  %div.analytics.my-5
-    %dive.site-admin-page-section.flex-wrap.justify-content-center
-      %div.d-flex.flex-wrap.m-2.justify-content-center.w-100
-        %div.col.card.d-flex.justify-content-center.mr-2.p-2.text-center.container-gradient
-          %div.card-header-2
-            = t('admin.analytics.total_ontologies')
-          %div.card-header-1
-            = @ontologies_count
-          %div.card-header-3{data: {controller: 'tooltip'}, title: new_ontologies_created_title}
-            = t('admin.analytics.ontologies_count', size: @new_ontologies_count.size)
-        %div.col.card.d-flex.justify-content-center.p-2.mr-2.text-center.container-gradient
-          %div.card-header-2
-            = t('admin.analytics.ontologies_with_errors')
-          %div.card-header-1
-            = @ontologies_problems_count
-          %div.card-header-3.py-2.mt-1
-        %div.col.card.d-flex.justify-content-center.mr-2.p-2.text-center.container-gradient
-          %div.card-header-2
-            = t('admin.analytics.total_visits')
-          %div.card-header-1
-            = format_number_abbreviated(@page_visits[:visits].sum)
-          %div.card-header-3.py-2.mt-1
+%div.analytics
+  %dive.site-admin-page-section
+    %div.d-flex
+      %div.col.card.d-flex.justify-content-center.mr-2.p-2.text-center.container-gradient
+        %div.card-header-2
+          = t('admin.analytics.total_ontologies')
+        %div.card-header-1
+          = @ontologies_count
+        %div.card-header-3{data: {controller: 'tooltip'}, title: new_ontologies_created_title}
+          = t('admin.analytics.ontologies_count', size: @new_ontologies_count.size)
+      %div.col.card.d-flex.justify-content-center.p-2.mr-2.text-center.container-gradient
+        %div.card-header-2
+          = t('admin.analytics.ontologies_with_errors')
+        %div.card-header-1
+          = @ontologies_problems_count
+        %div.card-header-3.py-2.mt-1
+      %div.col.card.d-flex.justify-content-center.mr-2.p-2.text-center.container-gradient
+        %div.card-header-2
+          = t('admin.analytics.total_visits')
+        %div.card-header-1
+          = format_number_abbreviated(@page_visits[:visits].sum)
+        %div.card-header-3.py-2.mt-1
 
-        %div.col.card.d-flex.justify-content-center.p-2.text-center.container-gradient
-          %div.card-header-2
-            = t('admin.analytics.active_users')
-          %div.card-header-1
-            = @users_visits[:visits].last
-          %div.card-header-3
-            = t('admin.analytics.visit_users', visits: visits_evolution)
-      %div.d-flex.flex-wrap.m-2.p-2.justify-content-center.w-100
-        %div.col.card.p-2.mr-2
-          = chart_component(title: t('admin.analytics.ontology_visits'), type: 'bar',
+      %div.col.card.d-flex.justify-content-center.p-2.text-center.container-gradient
+        %div.card-header-2
+          = t('admin.analytics.active_users')
+        %div.card-header-1
+          = @users_visits[:visits].last
+        %div.card-header-3
+          = t('admin.analytics.visit_users', visits: visits_evolution)
+    %div.d-flex.mt-2
+      %div.col.card.p-2.mr-2
+        = chart_component(title: t('admin.analytics.ontology_visits'), type: 'bar',
                             labels: @ontology_visits[:labels].last(13),
                             datasets: visits_chart_dataset(@ontology_visits[:visits].last(13)))
 
-        %div.col.card.p-2
-          = chart_component(title: t('admin.analytics.unique_users_visits'), type: 'line',
+      %div.col.card.p-2
+        = chart_component(title: t('admin.analytics.unique_users_visits'), type: 'line',
                             labels: @users_visits[:labels].last(13),
                             datasets: visits_chart_dataset(@users_visits[:visits].last(13)))
 
-        %div.col-12.card.p-2.m-2
-          = chart_component(title: t('admin.analytics.page_visits'), type: 'bar',
+    %div.mt-2
+      %div.card.p-2
+        = chart_component(title: t('admin.analytics.page_visits'), type: 'bar',
                             labels: @page_visits[:labels].last(13).reverse,
                             datasets: visits_chart_dataset(@page_visits[:visits].last(13).reverse),
-                            index_axis: 'y')
+                            index_axis: 'y')

app/views/admin/_main.html.haml

@@ -1,8 +1,8 @@
-%div.container
-  %div#site-admin-clear-caches.my-5
+%div
+  %div#site-admin-clear-caches
     %div.site-admin-page-header
       = t('admin.main.cache_management')
-    %dive.site-admin-page-section
+    %dive.site-admin-page-section.d-flex
       = action_button(t('admin.main.clear_cache'), admin_clearcache_path, class_style: 'btn btn-primary mx-1')
       = action_button(t('admin.main.reset_cache'), admin_resetcache_path, class_style: 'btn btn-primary mx-1')
       = action_button(t('admin.main.clear_goo_cache'), admin_clear_goo_cache_path, class_style: 'btn btn-primary mx-1')
@@ -11,6 +11,6 @@
   %div.mb-5
     %div.site-admin-page-header
       = t('admin.main.version_management')
-    %dive.site-admin-page-section
+    %dive.site-admin-page-section.p-2
       = render TurboFrameComponent.new(id: 'update_check_frame', src: '/admin/update_check_enabled') do |c|
         - c.loader { t('admin.main.checking_for_updates') }