From 752ae24c9f8c7fc622e1356197cc2ed6198e8198 Mon Sep 17 00:00:00 2001 From: Xavier J Date: Tue, 29 Nov 2016 09:56:11 +0100 Subject: [PATCH] New search UX --- app/assets/javascripts/search.js | 56 +++++++++++++++++++ app/assets/stylesheets/application.scss | 11 ++++ app/assets/stylesheets/backoffice.scss | 8 --- .../backoffice/dossiers_controller.rb | 19 +++++-- app/facades/dossiers_list_facades.rb | 8 +++ .../backoffice/dossiers/search.html.haml | 17 ++++-- app/views/backoffice/dossiers/search.js.erb | 4 +- app/views/layouts/application.html.haml | 3 + ...koffice_dossierscontroller_index.html.haml | 6 +- ...office_dossierscontroller_search.html.haml | 3 +- 10 files changed, 110 insertions(+), 25 deletions(-) create mode 100644 app/assets/javascripts/search.js diff --git a/app/assets/javascripts/search.js b/app/assets/javascripts/search.js new file mode 100644 index 000000000..35d7c947b --- /dev/null +++ b/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(); + }); + +} \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index bcc04ced3..b3964baed 100644 --- a/app/assets/stylesheets/application.scss +++ b/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; +} \ No newline at end of file diff --git a/app/assets/stylesheets/backoffice.scss b/app/assets/stylesheets/backoffice.scss index 94f9c7a2a..615ed43a8 100644 --- a/app/assets/stylesheets/backoffice.scss +++ b/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; diff --git a/app/controllers/backoffice/dossiers_controller.rb b/app/controllers/backoffice/dossiers_controller.rb index 8ca61ad15..085eec88c 100644 --- a/app/controllers/backoffice/dossiers_controller.rb +++ b/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 diff --git a/app/facades/dossiers_list_facades.rb b/app/facades/dossiers_list_facades.rb index 893453709..948dbf7d3 100644 --- a/app/facades/dossiers_list_facades.rb +++ b/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 diff --git a/app/views/backoffice/dossiers/search.html.haml b/app/views/backoffice/dossiers/search.html.haml index 483f5b136..7f311b318 100644 --- a/app/views/backoffice/dossiers/search.html.haml +++ b/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 \ No newline at end of file diff --git a/app/views/backoffice/dossiers/search.js.erb b/app/views/backoffice/dossiers/search.js.erb index daf0cda6b..2f95cb389 100644 --- a/app/views/backoffice/dossiers/search.js.erb +++ b/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(); \ No newline at end of file diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 0c686ed23..c20e75cd5 100644 --- a/app/views/layouts/application.html.haml +++ b/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' diff --git a/app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml b/app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml index 19eb2f79d..44134ceb4 100644 --- a/app/views/layouts/left_panels/_left_panel_backoffice_dossierscontroller_index.html.haml +++ b/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 diff --git a/app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_search.html.haml b/app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_search.html.haml index 4ac20c271..2cd0c7c73 100644 --- a/app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_search.html.haml +++ b/app/views/layouts/navbars/_navbar_backoffice_dossierscontroller_search.html.haml @@ -1 +1,2 @@ -= render partial: 'layouts/navbars/navbar_backoffice_dossierscontroller_index' \ No newline at end of file +%div.col-lg-10.col-md-10.main-info + Recherche dans tous les dossiers