New search UX

app/assets/javascripts/search.js

@@ -0,0 +1,56 @@
+$(document).on('page:load', init_search_anim);
+$(document).ready(init_search_anim);
+
+function init_search_anim(){
+    $("#search_area").on('click', search_fadeIn);
+}
+
+function search_fadeIn(){
+    var search_area = $("#search_area");
+    var body_dom = $('body');
+    var positions = search_area.position();
+    var width = search_area.width();
+
+    search_area.css('position', 'fixed');
+    search_area.css('top', positions.top);
+    search_area.css('left', positions.left);
+    search_area.css('z-index', 300);
+    search_area.css('width', width);
+
+    body_dom.append(search_area);
+    $('#mask_search').fadeIn(200);
+
+    var body_width = body_dom.width();
+
+    var search_area_width = body_width/2.5;
+
+    search_area.animate({
+        width: search_area_width,
+        left: (body_width/2 - search_area_width/2 + 40)
+    }, 400, function() {
+        search_area.off();
+        $("#search_area input").focus();
+
+        $('#mask_search').on('click', search_fadeOut)
+    });
+}
+
+function search_fadeOut(){
+    var search_area = $("#search_area");
+
+    $('#mask_search').fadeOut(200);
+
+    search_area.fadeOut(200, function(){
+        search_area.css('position', 'static');
+        search_area.css('top', '');
+        search_area.css('left', '');
+        search_area.css('z-index', '');
+        search_area.css('width', 'auto');
+
+        $('#action-block').append(search_area);
+        search_area.fadeIn(200);
+
+        init_search_anim();
+    });
+
+}

app/assets/stylesheets/application.scss

@@ -227,3 +227,14 @@ div.pagination {
 .no-margin {
   margin: 0;
 }
+
+#mask_search{
+  background-color: rgba(0,0,0, 0.4);
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 200;
+}

app/assets/stylesheets/backoffice.scss

@@ -1,11 +1,3 @@
-#backoffice_search {
-  .table {
-    tr th {
-      border-top: none
-    }
-  }
-}
-
 #backoffice_index, #backoffice_search {
   margin-left: 2rem;
   margin-right: 2rem;

app/controllers/backoffice/dossiers_controller.rb

@@ -36,20 +36,29 @@ class Backoffice::DossiersController < Backoffice::DossiersListController
     @search_terms = params[:q]
 
     # exact id match?
-    @dossier = Dossier.where(id: @search_terms)
+    @dossiers = Dossier.where(id: @search_terms)
 
     # full text search
-    unless @dossier.any?
-      @dossier ||= Search.new(
+    unless @dossiers.any?
+      @dossiers = Search.new(
         gestionnaire: current_gestionnaire,
         query: @search_terms,
         page: params[:page]
       ).results
     end
 
-    smartlisting_dossier @dossier, 'search'
+    smart_listing_create :search,
+                         @dossiers,
+                         partial: "backoffice/dossiers/list",
+                         array: true,
+                         default_sort: dossiers_list_facade.service.default_sort
+
   rescue RuntimeError
-    smartlisting_dossier [], 'search'
+    smart_listing_create :search,
+                         [],
+                         partial: "backoffice/dossiers/list",
+                         array: true,
+                         default_sort: dossiers_list_facade.service.default_sort
   end
 
   def valid

app/facades/dossiers_list_facades.rb

@@ -22,6 +22,14 @@ class DossiersListFacades
     @liste
   end
 
+  def total_dossier
+    current_devise_profil.dossiers.where(archived: false).count
+  end
+
+  def total_new_dossier
+    current_devise_profil.dossiers.where(state: :initiated, archived: false).count
+  end
+
   def gestionnaire_procedures_name_and_id_list
     @current_devise_profil.procedures.order('libelle ASC').inject([]) { |acc, procedure| acc.push({id: procedure.id, libelle: procedure.libelle}) }
   end

app/views/backoffice/dossiers/search.html.haml

@@ -2,9 +2,16 @@
   #pref_list_menu
     = render partial: 'backoffice/dossiers/pref_list'
 
-  %h1
-    =t('dynamics.backoffice.title')
+  .default_data_block.default_visible
+    %div.row.show-block#new_dossiers
+      %div.header
+        %div.col-lg-10.col-md-10.title
+          %div.carret-right
+          %div.carret-down
+          Résultat de la recherche
+        %div.col-lg-2.col-md-2.count
+          =@dossiers.count
+          dossiers
+      %div.body
+        = smart_listing_render :search
 
-  = render partial: 'backoffice/dossiers/onglets'
-
-  = smart_listing_render :dossiers

app/views/backoffice/dossiers/search.js.erb

@@ -1,5 +1,3 @@
-<%= smart_listing_update :new_dossiers %>
-<%= smart_listing_update :follow_dossiers %>
-<%= smart_listing_update :all_state_dossiers %>
+<%= smart_listing_update :search %>
 
 filters_init();

app/views/layouts/application.html.haml

@@ -36,5 +36,8 @@
           %div.row
             = yield
           %div.row
+    #mask_search
+      %h1
+        %i.fa.fa-times{style:'position: fixed; top: 10; right: 30; color: white;'}
     = render partial: 'layouts/footer'
     = render partial: 'layouts/google_analytics'

app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml

@@ -1,16 +1,16 @@
 %div#first-block
   %div
-    =@facade_data_view.current_devise_profil.dossiers.where(archived: false).count
+    =@facade_data_view.total_dossier
     DOSSIERS EN COURS
   %div
-    =@facade_data_view.current_devise_profil.dossiers.where(state: :initiated, archived: false).count
+    =@facade_data_view.total_new_dossier
     NOUVEAUX DOSSIERS
 
 %div#action-block
   #search_area
     = form_tag(backoffice_dossiers_search_url, method: :get) do
       .input-group
-        = text_field_tag('q', "#{@search_terms unless @search_terms.nil? }", id: 'q', placeholder: t('dynamics.backoffice.research.placeholder'), class:'form-control')
+        = text_field_tag('q', "#{@search_terms unless @search_terms.nil? }", id: 'q', placeholder: "Recherchez parmi vos #{@facade_data_view.total_dossier} dossiers", class:'form-control')
         %span.input-group-btn
           %button.btn.btn-default{ id:'search_button' }
             %i.fa.fa-search

app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_search.html.haml

@@ -1 +1,2 @@
-= render partial: 'layouts/navbars/navbar_backoffice_dossierscontroller_index'
+%div.col-lg-10.col-md-10.main-info
+  Recherche dans tous les dossiers