Refs #2482: updating workbenches#show with new table builder, new styles

9 files changed, 206 insertions, 79 deletions

diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 48d053a4c..98c817647 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -10,6 +10,7 @@
 @import 'layout'
 
 @import 'components/buttons'
+@import 'components/tables'
 @import 'components/pagination'
 @import 'components/main_nav'
 @import 'components/page_header'
diff --git a/app/assets/stylesheets/components/_buttons.sass b/app/assets/stylesheets/components/_buttons.sass
index cf91d611c..dfce916c7 100644
--- a/app/assets/stylesheets/components/_buttons.sass
+++ b/app/assets/stylesheets/components/_buttons.sass
@@ -16,3 +16,49 @@
 
   + .btn
     margin-left: 12px
+
+// Table btn-groups
+table, .table
+  tbody > tr > td.actions
+    text-align: center
+    padding: 0
+
+    > .btn-group
+      height: 100%
+      width: 100%
+      min-height: 28px
+      min-width: 28px
+      color: $blue
+      background-color: #fff
+      transition: 0.2s
+      position: relative
+      cursor: pointer
+
+      &:hover, &:focus, &.open
+        background-color: rgba($blue, 0.5)
+        color: #fff
+        transition: 0.2s
+
+      &.open .dropdown-toggle
+        box-shadow: none
+
+      > .btn
+        position: absolute
+        top: 50%
+        left: 50%
+        margin: -13px 0 0 -15px
+        padding: 3px 7px
+        box-shadow: none
+
+        &:hover, &:focus, &.focus
+          color: inherit
+
+      .dropdown-menu
+        left: auto
+        right: 0
+        margin: 0
+        border-radius: 0
+        box-shadow: 0 0 3px rgba($darkgrey, 0.25)
+
+        > li > a
+          padding: 3px 15px
diff --git a/app/assets/stylesheets/components/_tables.sass b/app/assets/stylesheets/components/_tables.sass
new file mode 100644
index 000000000..60a42ef93
--- /dev/null
+++ b/app/assets/stylesheets/components/_tables.sass
@@ -0,0 +1,49 @@
+//----------//
+//  Tables  //
+//----------//
+
+.table
+  > thead
+    > tr > th
+      font-size: $h2-size
+      font-weight: 700
+      border-bottom: 2px solid $darkgrey
+
+      > a
+        position: relative
+        color: $darkgrey
+        padding-right: 18px
+
+        &:hover, &:focus
+          text-decoration: none
+
+        > .orderers
+          font-size: $base-font-size
+          position: absolute
+          display: block
+          height: 14px
+          width: 8px
+          right: 0
+          top: 50%
+          margin-top: -7px
+
+          > *
+            position: absolute
+            right: 0
+            top: 0
+            bottom: auto
+            color: $grey
+
+            &:last-child
+              bottom: 0
+              top: auto
+
+            &.active
+              color: $blue
+
+    + tbody
+      > tr > td
+        border-top: none
+        border-bottom: 1px solid $grey
+        padding: 4px 8px
+        vertical-align: middle
diff --git a/app/helpers/newapplication_helper.rb b/app/helpers/newapplication_helper.rb
index 2e5a716a6..aadfc0b34 100644
--- a/app/helpers/newapplication_helper.rb
+++ b/app/helpers/newapplication_helper.rb
@@ -8,10 +8,9 @@ module NewapplicationHelper
       content_tag :tr do
         hcont = []
         columns.map do |k, v|
-          # hcont << content_tag(:th, k.to_s.titleize)
           hcont << content_tag(:th, sortable_columns(collection, k))
         end
-        hcont << content_tag(:th, 'Actions', class: 'text-center') if actions.any?
+        hcont << content_tag(:th, '') if actions.any?
 
         hcont.join.html_safe
       end
@@ -30,7 +29,7 @@ module NewapplicationHelper
               end
             bcont << content_tag(:td, value)
           end
-          bcont << content_tag(:td, links_builder(item, actions), class: 'text-center') if actions.any?
+          bcont << content_tag(:td, links_builder(item, actions), class: 'actions') if actions.any?
 
           bcont.join.html_safe
         end
@@ -41,10 +40,8 @@ module NewapplicationHelper
   end
 
   def links_builder(item, actions)
-    trigger = content_tag :div, class: 'btn btn-primary dropdown-toggle', data: { toggle: 'dropdown' } do
-      a = content_tag :span, '', class: 'fa fa-bars'
-      b = content_tag :span, '', class: 'caret'
-      a + b
+    trigger = content_tag :div, class: 'btn dropdown-toggle', data: { toggle: 'dropdown' } do
+      content_tag :span, '', class: 'fa fa-cog'
     end
 
     menu = content_tag :ul, class: 'dropdown-menu' do
@@ -55,8 +52,8 @@ module NewapplicationHelper
           polymorph_url << action
         end
 
-        unless item.class.to_s == 'Calendar'
-          if current_referential
+        unless item.class.to_s == 'Calendar' or item.class.to_s == 'Referential'
+          if item.respond_to? :current_referential
             polymorph_url << current_referential
             polymorph_url << item.line if item.respond_to? :line
           elsif item.respond_to? :referential
@@ -91,19 +88,19 @@ module NewapplicationHelper
       end.join.html_safe
     end
 
-    content_tag :div, trigger + menu, class: 'btn-group btn-group-xs'
+    content_tag :div, trigger + menu, class: 'btn-group'
 
   end
 
   def sortable_columns collection, key
     direction = (key == params[:sort] && params[:direction] == 'desc') ? 'asc' : 'desc'
 
-    icon = 'sort-desc' if direction == 'asc'
-    icon = 'sort-asc' if direction == 'desc'
-
     link_to({sort: key, direction: direction}) do
-      pic = content_tag :span, '', class: "fa fa-#{icon}", style: 'margin-left:5px'
-      (key.to_s.titleize + pic).html_safe
+      pic1 = content_tag :span, '', class: "fa fa-sort-asc #{(direction == 'desc') ? 'active' : ''}"
+      pic2 = content_tag :span, '', class: "fa fa-sort-desc #{(direction == 'asc') ? 'active' : ''}"
+
+      pics = content_tag :span, pic1 + pic2, class: 'orderers'
+      (key.to_s + pics).html_safe
     end
   end
 
diff --git a/app/views/workbenches/show.html.slim b/app/views/workbenches/show.html.slim
index 7400c0329..c4b606b32 100644
--- a/app/views/workbenches/show.html.slim
+++ b/app/views/workbenches/show.html.slim
@@ -2,7 +2,7 @@
 = pageheader 'map-marker',
              'Jeux de données',
              'Lorem ipsum dolor sit amet',
-             'Dernière mise à jour <br> le 22/12/2016' do
+             t('last_update', time: l(@workbench.updated_at, format: :short)) do
 
   / Below is secundary actions & optional contents (filters, ...)
   .row
@@ -19,70 +19,84 @@
   .container-fluid
     .row
       .col-lg-12
-        .referentials.paginated_content
+        - if @wbench_refs.any?
           = new_pagination @wbench_refs, 'pull-right'
 
-          table.table.table-bordered.table-hover
-            thead
-              tr
-                th = Referential.human_attribute_name(:name)
-                th = Referential.human_attribute_name(:updated_at)
-                th = "Publié le"
-                th = Referential.human_attribute_name(:validity_period)
-                th = Referential.human_attribute_name(:lines)
-                th = Referential.human_attribute_name(:organisation)
-                th = "Etat"
-                th = "Actions"
+          = table_builder @wbench_refs,
+            { 'Nom du JDD' => 'name', 'Etat' => 'status',
+              'Organisation' => Proc.new {|w| Organisation.find(w.organisation_id).name},
+              'Nb lignes' => Proc.new {|w| w.lines.count},
+              'Plage de validité' => Proc.new {|w| w.validity_period.nil? ? '-' : t('validity_range', debut: l(w.try(:validity_period).try(:begin), format: :short), end: l(w.try(:validity_period).try(:end), format: :short))},
+              @wbench_refs.human_attribute_name(:updated_at) => Proc.new {|w| l(w.updated_at, format: :short)},
+              'Publié le' => ''},
+            [:edit],
+            'table'
 
-            tbody
-              - @wbench_refs.each do |referential|
-                tr
-                  td = referential.name
-                  td = l referential.updated_at, format: :long
-                  td
-                  td
-                    - if referential.validity_period.nil?
-                      = Referential.human_attribute_name('no_validity_period')
-                    - else
-                      => Referential.human_attribute_name('start_validity_period')
-                      => l referential.validity_period.begin, format: :long
-                      => Referential.human_attribute_name('end_validity_period')
-                      => l referential.validity_period.end, format: :long
-
-                  td = referential.lines.count
-                  td = referential.organisation.name
-
-                  / Status (archived?)
-                  td.text-center
-                    - if referential.archived?
-                      span.fa.fa-archive title="Archivé"
-                    - else
-                      = "-"
-
-                  / Actions
-                  td.text-center
-                    .btn-group.btn-group-xs
-                      .btn-primary.btn.dropdown-toggle data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                        span.fa.fa-bars
-                        span.caret
-
-                      ul.dropdown-menu
-                        li = link_to "Voir", referential_path(referential)
-
-                        - if policy(referential).update?
-                          li = link_to "Editer", edit_referential_path(referential)
-
-                        li = link_to "Cloner", new_referential_path(from: referential)
-
-                        - if referential.archived?
-                          - if referential.can_unarchive?
-                            li = link_to "Désarchiver", unarchive_referential_path(referential), method: :put
-                          - else
-                            li.disabled title="L'action est impossible pour ce référentiel"
-                              = link_to "Désarchiver", "#"
-                        - else
-                          li = link_to "Archiver", archive_referential_path(referential), method: :put
-
-                        li = link_to "Supprimer", referential_path(referential), method: :delete, :data => {:confirm => t('referentials.actions.destroy_confirm')}
+          / Old one
+          / table.table
+          /   thead
+          /     tr
+          /       th = Referential.human_attribute_name(:name)
+          /       th = Referential.human_attribute_name(:updated_at)
+          /       th = "Publié le"
+          /       th = Referential.human_attribute_name(:validity_period)
+          /       th = Referential.human_attribute_name(:lines)
+          /       th = Referential.human_attribute_name(:organisation)
+          /       th = "Etat"
+          /       th = "Actions"
+          / 
+          /   tbody
+          /     - @wbench_refs.each do |referential|
+          /       tr
+          /         td = referential.name
+          /         td = l referential.updated_at, format: :long
+          /         td
+          /         td
+          /           - if referential.validity_period.nil?
+          /             = Referential.human_attribute_name('no_validity_period')
+          /           - else
+          /             => Referential.human_attribute_name('start_validity_period')
+          /             => l referential.validity_period.begin, format: :long
+          /             => Referential.human_attribute_name('end_validity_period')
+          /             => l referential.validity_period.end, format: :long
+          / 
+          /         td = referential.lines.count
+          /         td = referential.organisation.name
+          / 
+          /         / Status (archived?)
+          /         td.text-center
+          /           - if referential.archived?
+          /             span.fa.fa-archive title="Archivé"
+          /           - else
+          /             = "-"
+          / 
+          /         / Actions
+          /         td.text-center
+          /           .btn-group.btn-group-xs
+          /             .btn-primary.btn.dropdown-toggle data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+          /               span.fa.fa-bars
+          /               span.caret
+          / 
+          /             ul.dropdown-menu
+          /               li = link_to "Voir", referential_path(referential)
+          / 
+          /               - if policy(referential).update?
+          /                 li = link_to "Editer", edit_referential_path(referential)
+          / 
+          /               li = link_to "Cloner", new_referential_path(from: referential)
+          / 
+          /               - if referential.archived?
+          /                 - if referential.can_unarchive?
+          /                   li = link_to "Désarchiver", unarchive_referential_path(referential), method: :put
+          /                 - else
+          /                   li.disabled title="L'action est impossible pour ce référentiel"
+          /                     = link_to "Désarchiver", "#"
+          /               - else
+          /                 li = link_to "Archiver", archive_referential_path(referential), method: :put
+          / 
+          /               li = link_to "Supprimer", referential_path(referential), method: :delete, :data => {:confirm => t('referentials.actions.destroy_confirm')}
 
           = new_pagination @wbench_refs, 'pull-right'
+
+        - else
+          = replacement_msg t('referentials.search_no_results')
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 019e6dc0b..bb3df77c8 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -2,7 +2,16 @@ en:
   "true": "Yes"
   "false": "No"
   "unknown": "Unknown"
+
   time:
     formats:
       hour: "%Hh%M"
       minute: "%M min"
+      short: "%Y/%m/%d"
+
+  date:
+    formats:
+      short: "%Y/%m/%d"
+
+  last_update: 'Last update on<br>%{time}'
+  validity_range: '%{debut} > %{end}'
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 696ae21a6..e64289611 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -2,7 +2,16 @@ fr:
   "true": "Oui"
   "false": "Non"
   "unknown": "Non précisé"
+
   time:
     formats:
       hour: "%Hh%M"
       minute: "%M min"
+      short: "%d/%m/%Y"
+
+  date:
+    formats:
+      short: "%d/%m/%Y"
+
+  last_update: 'Dernière mise à jour<br>le %{time}'
+  validity_range: '%{debut} > %{end}'
diff --git a/config/locales/referentials.en.yml b/config/locales/referentials.en.yml
index 445fd7982..8c92eb839 100644
--- a/config/locales/referentials.en.yml
+++ b/config/locales/referentials.en.yml
@@ -1,5 +1,6 @@
 en:
   referentials:
+    search_no_results: 'No data space matching your query'
     edit:
       title: "Edit the data space"
     show:
diff --git a/config/locales/referentials.fr.yml b/config/locales/referentials.fr.yml
index 2c2fb1d10..30d7d073c 100644
--- a/config/locales/referentials.fr.yml
+++ b/config/locales/referentials.fr.yml
@@ -1,5 +1,6 @@
 fr:
   referentials:
+    search_no_results: 'Aucun jeu de données ne correspond à votre recherche'
     edit:
       title: "Modifier l'espace de données"
     show:
@@ -11,7 +12,7 @@ fr:
       clean_up: "Purge des données obsolètes"
       api_keys: "Clés d'authentification pour un accès à l'API REST"
       show_all_referentials: Voir tous les espaces de données
-      from_this_workbench: Vour les espaces de données de cet gestion de l'offre
+      from_this_workbench: Voir les espaces de données de cet gestion de l'offre
     counts:
       objects: "Eléments"
       count: "Qté"