From 106129c27ca79e98df0b93d853eda86b53e47ce7 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@g-u-i.me>
Date: Mon, 20 Nov 2017 17:52:39 +0100
Subject: [PATCH] refined advanced search form display to be more explicite

---
 .../materiobasemod/materio_search_api.module  | 232 ++++++++++--------
 .../gui/materiobasetheme/css/styles.css       |  66 +++--
 .../gui/materiobasetheme/scss/styles.scss     |  69 +++++-
 3 files changed, 232 insertions(+), 135 deletions(-)

diff --git a/sites/all/modules/gui/materiobasemod/materio_search_api.module b/sites/all/modules/gui/materiobasemod/materio_search_api.module
index 1a495a7d..77558320 100755
--- a/sites/all/modules/gui/materiobasemod/materio_search_api.module
+++ b/sites/all/modules/gui/materiobasemod/materio_search_api.module
@@ -796,14 +796,10 @@ function materio_search_api_search_form_submit($form, &$form_state){
 function materio_search_api_advanced_search_form($form, &$form_state){
   // dsm($form_state, 'form_state');
   // dsm($form, 'form');
-  // global $user;
-  // $form = array();
 
   // get vid from settings
   $vid = variable_get('msa-advancedsearchvocabulary', null);
   if($vid){
-    // global $language;
-    // dsm($language, "language");
 
     $voc = taxonomy_vocabulary_load($vid);
     $voc_machinename = $voc->machine_name;
@@ -826,25 +822,6 @@ function materio_search_api_advanced_search_form($form, &$form_state){
     // get the keywords from args and reconstruct the filter lines with default values
     $args_values = array();
     if($path == 'explore/filters' && $args[0] !== "ajax"){
-      // WORKING WITH TERM NAMES instead of tids
-      // $keywords = explode("+", $args[0]);
-      // // dsm($keywords, 'keywords');
-      // foreach ($keywords as $key => $value) {
-      //   $name = str_replace('"', '', $value);
-      //   //Get the term
-      //   $terms = taxonomy_get_term_by_name($name, $voc_machinename);
-      //   $term = array_shift($terms);
-      //   // dsm($term, $term->tid.' : '.$term->name);
-      //   // get parents
-      //   if(isset($term->tid)){
-      //     $parents = taxonomy_get_parents_all($term->tid);
-      //     // dsm($parents, 'parents');
-      //     // build default values
-      //     for ($p=count($parents)-1; $p >=0 ; $p--) {
-      //       $args_values[$key][] = $parents[$p]->tid;
-      //     }
-      //   }
-      // }
       // WORKING WITH TIDS instead of term name
       $tids = explode("+", $args[0]);
       foreach ($tids as $key => $tid) {
@@ -878,13 +855,38 @@ function materio_search_api_advanced_search_form($form, &$form_state){
     }
     // dsm($form_state['filterlines'], "form_state['filterlines']");
 
+
     // filters form container
     $form['filters'] = array(
       '#type' => 'container',
-      '#prefix' => '<div id="advancedsearch-filters">',
+      '#attributes' => array('class' => array("advancedsearch-filters")),
+      '#prefix' => '<div id="advancedsearch-filters-wrapper">',
       '#suffix' => '</div>',
     );
 
+    $form['filters']['filters-table'] = array(
+      '#type' => 'container',
+      '#attributes' => array('class' => array("advanced-search-form-table"))
+    );
+
+    // form headers
+    // $form['filters']['filters-table']['headers'] = array(
+    //   '#type' => 'container',
+    //   '#attributes' => array('class' => array("advanced-search-form-headers")),
+    //   'category' => array(
+    //     '#markup' => t("Category"),
+    //     '#prefix' => '<div>','#suffix' => '</div>',
+    //   ),
+    //   'main' => array(
+    //     '#markup' => t("Main Filter"),
+    //     '#prefix' => '<div>','#suffix' => '</div>',
+    //   ),
+    //   'child' => array(
+    //     '#markup' => t("Child Filter"),
+    //     '#prefix' => '<div>','#suffix' => '</div>',
+    //   )
+    // );
+
     $trigger = FALSE;
     if (!empty($form_state['triggering_element']['#name'])) {
       $trigger = $form_state['triggering_element'];
@@ -939,11 +941,9 @@ function materio_search_api_advanced_search_form($form, &$form_state){
       }
       // dsm("l : ".$l." | ll : ".$ll);
 
-      $form['filters']['filterline-'.$ll] = array(
+      $form['filters']['filters-table']['filterline-'.$ll] = array(
         '#type' => 'container',
-        '#attributes' => array(
-          'class' => array("filter-line")
-        )
+        '#attributes' => array('class' => array("filter-line"))
       );
 
       // get the default value
@@ -959,99 +959,122 @@ function materio_search_api_advanced_search_form($form, &$form_state){
       // dsm($default0, "default 0");
 
       // form select element for first level
-      $form['filters']['filterline-'.$ll]['filter-'.$ll.'-0'] = array(
+      $form['filters']['filters-table']['filterline-'.$ll]['filter-'.$ll.'-0'] = array(
         '#type' => 'select',
         '#options' => $level_0_ops,
         '#name' => 'filter-'.$ll.'-0',
-        '#empty_option' => t("Choose a filter"),
+        '#empty_option' => t("Choose a category"),
         // '#empty_values' => 0,
         '#default_value' => $default0,
         '#ajax' => array(
           'callback' => 'materio_search_api_advanced_search_select_callback',
-          'wrapper' => 'advancedsearch-filters',
+          'wrapper' => 'advancedsearch-filters-wrapper',
         ),
       );
       // without this line, form api will mess with default values
       $form_state["input"]['filter-'.$ll.'-0'] = $default0;
 
       // add level 1 filter if level 0 chosen
-      if($default0){
+      if(is_null($default0)){
+        // $form['filters']['filterline-'.$ll]['filter-'.$ll.'-1']
+        $form['filters']['filters-table']['filterline-'.$ll]['filter-'.$ll.'-1'] = array(
+          '#markup' => t("Main Filter"),
+          '#prefix' => '<div class="filter-markup"><span>',
+          '#suffix' => '</span></div>',
+        );
+        // the definition of this markup appears twice, i may avoid that ...
+        $form['filters']['filters-table']['filterline-'.$ll]['filter-'.$ll.'-2'] = array(
+          '#markup' => t("Child Filter"),
+          '#prefix' => '<div class="filter-markup"><span>',
+          '#suffix' => '</span></div>',
+        );
+      }else{
+        // build second level taxonomy tree and select options
+        $taxotree1 = taxonomy_get_tree($vid, $default0, 1, true);
+        // dsm($taxotree1, 'taxotree1');
+        $level_1_ops = array();
+        foreach ($taxotree1 as $index => $term) {
+          // TODO: get translated tag name
+          // $term = taxonomy_term_load($tid);
+          $level_1_ops[$term->tid] = $term->name;
+        }
 
-          // build second level taxonomy tree and select options
-          $taxotree1 = taxonomy_get_tree($vid, $default0, 1, true);
-          // dsm($taxotree1, 'taxotree1');
-          $level_1_ops = array();
-          foreach ($taxotree1 as $index => $term) {
-            // TODO: get translated tag name
-            // $term = taxonomy_term_load($tid);
-            $level_1_ops[$term->tid] = $term->name;
-          }
+        // get the default value
+        // from from_state values if ajax
+        // or from url args
+        // or 0
+        $default1 = null;
+        if(isset($values['filter-'.$l.'-1']) && $values['filter-'.$l.'-1']){
+          $default1 = $values['filter-'.$l.'-1'];
+        }elseif(isset($args_values[$l][1])){
+          $default1 = $args_values[$l][1];
+        }
+        // dsm($default1, "default 1");
 
-          // get the default value
-          // from from_state values if ajax
-          // or from url args
-          // or 0
-          $default1 = null;
-          if(isset($values['filter-'.$l.'-1']) && $values['filter-'.$l.'-1']){
-            $default1 = $values['filter-'.$l.'-1'];
-          }elseif(isset($args_values[$l][1])){
-            $default1 = $args_values[$l][1];
-          }
-          // dsm($default1, "default 1");
+        // form select element for second level
+        $form['filters']['filters-table']['filterline-'.$ll]['filter-'.$ll.'-1'] = array(
+          '#type' => 'select',
+          '#options' => $level_1_ops,
+          '#name' => 'filter-'.$ll.'-1',
+          '#empty_option' => t("Choose a main filter"),
+          // '#empty_values' => 0,
+          '#default_value' => $default1,
+          '#ajax' => array(
+            'callback' => 'materio_search_api_advanced_search_select_callback',
+            'wrapper' => 'advancedsearch-filters-wrapper',
+          ),
+        );
+        // without this line, form api will mess with default values
+        $form_state["input"]['filter-'.$ll.'-1'] = $default1;
 
-          // form select element for second level
-          $form['filters']['filterline-'.$ll]['filter-'.$ll.'-1'] = array(
-            '#type' => 'select',
-            '#options' => $level_1_ops,
-            '#name' => 'filter-'.$ll.'-1',
-            '#empty_option' => t("Choose a filter"),
-            // '#empty_values' => 0,
-            '#default_value' => $default1,
-            '#ajax' => array(
-              'callback' => 'materio_search_api_advanced_search_select_callback',
-              'wrapper' => 'advancedsearch-filters',
-            ),
+        // add level 2 filter if level 1 chosen
+        if(is_null($default1)){
+          $form['filters']['filters-table']['filterline-'.$ll]['filter-'.$ll.'-2'] = array(
+            '#markup' => t("Child Filter"),
+            '#prefix' => '<div class="filter-markup"><span>',
+            '#suffix' => '</span></div>',
           );
-          // without this line, form api will mess with default values
-          $form_state["input"]['filter-'.$ll.'-1'] = $default1;
+        }else{
+          // build second level taxonomy tree and select options
+          $taxotree2 = taxonomy_get_tree($vid, $default1, 1, true);
+          if(!count($taxotree2)){
+            $form['filters']['filters-table']['filterline-'.$ll]['filter-'.$ll.'-2'] = array(
+              '#markup' => t("No Child"),
+              '#prefix' => '<div class="filter-markup"><span>',
+              '#suffix' => '</span></div>',
+            );
+          }else{
+            // $default2 = isset($args_values[$l][2]) ? $args_values[$l][2] : 0;
+            $default2 = null;
+            if(isset($values['filter-'.$l.'-2']) && $values['filter-'.$l.'-2']){
+              $default2 = $values['filter-'.$l.'-2'];
+            }elseif(isset($args_values[$l][2])){
+              $default2 =  $args_values[$l][2];
+            }
+            // dsm($default2, "default 2");
 
-          // add level 2 filter if level 1 chosen
-          if($default1){
-
-              // build second level taxonomy tree and select options
-              $taxotree2 = taxonomy_get_tree($vid, $default1, 1, true);
-              if(count($taxotree2)){
-                // $default2 = isset($args_values[$l][2]) ? $args_values[$l][2] : 0;
-                $default2 = null;
-                if(isset($values['filter-'.$l.'-2']) && $values['filter-'.$l.'-2']){
-                  $default2 = $values['filter-'.$l.'-2'];
-                }elseif(isset($args_values[$l][2])){
-                  $default2 =  $args_values[$l][2];
-                }
-                // dsm($default2, "default 2");
-
-                $level_2_ops = array();
-                foreach ($taxotree2 as $index => $term) {
-                  // TODO: get translated tag name
-                  $level_2_ops[$term->tid] = t($term->name);
-                }
-                // form select element for third level
-                $form['filters']['filterline-'.$ll]['filter-'.$ll.'-2'] = array(
-                  '#type' => 'select',
-                  '#options' => $level_2_ops,
-                  '#name' => 'filter-'.$ll.'-2',
-                  '#empty_option' => t("Choose a filter"),
-                  // '#empty_values' => 0,
-                  '#default_value' => $default2,
-                );
-                // without this line, form api will mess with default values
-                $form_state["input"]['filter-'.$ll.'-2'] = $default2;
-              }
+            $level_2_ops = array();
+            foreach ($taxotree2 as $index => $term) {
+              // TODO: get translated tag name
+              $level_2_ops[$term->tid] = t($term->name);
+            }
+            // form select element for third level
+            $form['filters']['filters-table']['filterline-'.$ll]['filter-'.$ll.'-2'] = array(
+              '#type' => 'select',
+              '#options' => $level_2_ops,
+              '#name' => 'filter-'.$ll.'-2',
+              '#empty_option' => t("Refine with a child filter"),
+              // '#empty_values' => 0,
+              '#default_value' => $default2,
+            );
+            // without this line, form api will mess with default values
+            $form_state["input"]['filter-'.$ll.'-2'] = $default2;
           }
+        }
       }
 
       // add remove the line button
-      $form['filters']['filterline-'.$ll]['rm-filter-'.$ll] = array(
+      $form['filters']['filters-table']['filterline-'.$ll]['rm-filter-'.$ll] = array(
         '#type' => 'image_button',
         '#src' => drupal_get_path('module', 'materio_search_api') . '/images/rmfilter.png',
         '#title' => t('Remove this filter line'),
@@ -1060,7 +1083,7 @@ function materio_search_api_advanced_search_form($form, &$form_state){
         '#executes_submit_callback' => false,
         '#ajax' => array(
           'callback' => 'materio_search_api_advanced_search_rmline_callback',
-          'wrapper' => 'advancedsearch-filters',
+          'wrapper' => 'advancedsearch-filters-wrapper',
           // 'trigger_as' => array("name"=>"rmfilters".$l),
         ),
         "#attributes" => array('class'=>array('rm-btn')),
@@ -1081,17 +1104,16 @@ function materio_search_api_advanced_search_form($form, &$form_state){
       '#return_value' => "add",
       '#ajax' => array(
         'callback' => 'materio_search_api_advanced_search_addfilter_callback',
-        'wrapper' => 'advancedsearch-filters',
+        'wrapper' => 'advancedsearch-filters-wrapper',
       ),
       '#executes_submit_callback' => false,
-      '#attributes' => array(
-        'class'=>array('add-filter')
-      ),
+      '#attributes' => array('class'=>array('add-filter'))
     );
 
     // buttons form container
     $form['rightcol'] = array(
       '#type' => 'container',
+      "#attributes" => array('class'=>array('right-col')),
     );
     // add a back to search/base home bouton if on explore/foo
     if ($path == 'explore' || $path == 'explore/filters' || $path == 'bookmarks' || $path == 'lists' ) {
@@ -1168,7 +1190,7 @@ function materio_search_api_advanced_search_rmline_callback($form, &$form_state)
 function materio_search_api_advanced_search_form_validate($form, &$form_state){
   if($form_state['triggering_element']['#name'] == 'search'){
     // dsm($form, '$form');
-    // dsm($form_state, 'form_state');
+    dsm($form_state, 'form_state');
 
     if (!isset($form_state['values']['filter-0-1']) || $form_state['values']['filter-0-1'] == '') {
       form_set_error('filters', 'Please choose at least 1 keyword.');
diff --git a/sites/all/themes/gui/materiobasetheme/css/styles.css b/sites/all/themes/gui/materiobasetheme/css/styles.css
index 40dcf907..a0873da3 100644
--- a/sites/all/themes/gui/materiobasetheme/css/styles.css
+++ b/sites/all/themes/gui/materiobasetheme/css/styles.css
@@ -3289,7 +3289,8 @@ body.node-type-publication #footer {
 */
 #utilities {
   background-color: #fff;
-  margin-top: 60px; }
+  margin-top: 60px;
+  max-height: 100px; }
   .not-logged-in #utilities {
     overflow: hidden; }
   #utilities > .inner {
@@ -3926,44 +3927,69 @@ body.home-v2 #main {
         display: none; } }
   #tool-bar #materio-search-api-advanced-search-form > div {
     position: relative; }
-    #tool-bar #materio-search-api-advanced-search-form > div #advancedsearch-filters, #tool-bar #materio-search-api-advanced-search-form > div > .form-wrapper {
+    #tool-bar #materio-search-api-advanced-search-form > div #advancedsearch-filters-wrapper, #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col {
       display: inline-block;
       vertical-align: top; }
-    #tool-bar #materio-search-api-advanced-search-form > div > .form-wrapper {
+    #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col {
       position: relative;
       text-align: center; }
-      #tool-bar #materio-search-api-advanced-search-form > div > .form-wrapper > * {
+      #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col > * {
         display: block; }
-      #tool-bar #materio-search-api-advanced-search-form > div > .form-wrapper a.back-search-home {
+      #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col a.back-search-home {
         color: #000;
         padding-top: 0.45em; }
-        #tool-bar #materio-search-api-advanced-search-form > div > .form-wrapper a.back-search-home i:before {
+        #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col a.back-search-home i:before {
           font-size: 1.3em; }
-      #tool-bar #materio-search-api-advanced-search-form > div > .form-wrapper #edit-search {
+      #tool-bar #materio-search-api-advanced-search-form > div .form-wrapper.right-col #edit-search {
         margin: 1em 0 0.5em; }
-  #tool-bar #materio-search-api-advanced-search-form #advancedsearch-filters {
+  #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters {
     padding-right: 0.5em;
     margin-right: 0.5em;
     border-right: 1px solid #ccc; }
-    #tool-bar #materio-search-api-advanced-search-form #advancedsearch-filters .filter-line {
+    #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .advanced-search-form-table {
+      display: table;
+      border-collapse: separate;
+      border-spacing: 0 0.2em; }
+    #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .advanced-search-form-headers {
+      display: table-header-group;
+      width: 100%; }
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .advanced-search-form-headers > div {
+        display: table-cell;
+        text-align: left;
+        text-transform: uppercase;
+        font-size: 9px; }
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .advanced-search-form-headers > div:last-child:after {
+        content: "";
+        display: table-cell; }
+    #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line {
       margin: 0.3em 0;
-      padding-top: 0.3em; }
-      #tool-bar #materio-search-api-advanced-search-form #advancedsearch-filters .filter-line:not(:first-child) {
+      padding-top: 0.3em;
+      display: table-row; }
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line:not(:first-child) {
         border-top: 1px solid #ccc; }
-      #tool-bar #materio-search-api-advanced-search-form #advancedsearch-filters .filter-line .form-item {
-        display: inline-block;
-        vertical-align: middle;
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line > * {
+        display: table-cell;
+        text-align: left; }
+        #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line > *:not(:last-child) {
+          padding: 0 1em 0 0; }
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .form-item {
         font-size: 12px;
         line-height: 1;
         text-transform: capitalize;
         margin: 0 0em 0 0; }
-      #tool-bar #materio-search-api-advanced-search-form #advancedsearch-filters .filter-line select {
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line select {
         width: auto; }
-    #tool-bar #materio-search-api-advanced-search-form #advancedsearch-filters .rm-btn {
-      float: right;
-      margin: 0.4em 0 0.4em 0.4em; }
-    #tool-bar #materio-search-api-advanced-search-form #advancedsearch-filters .add-filter {
-      margin: 0.5em 0; }
+      #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .filter-line .filter-markup span {
+        padding: 0.4em 1em;
+        display: block;
+        font-size: 11px;
+        background-color: #eee;
+        color: #777;
+        text-align: center;
+        border-radius: 7px; }
+    #tool-bar #materio-search-api-advanced-search-form .form-wrapper.advancedsearch-filters .add-filter {
+      margin: 0.5em 0;
+      display: table-row; }
   #tool-bar #materio-search-api-advanced-search-form div.search-btn-wrapper {
     display: inline-block; }
   #tool-bar #materio-search-api-advanced-search-form.loading div.search-btn-wrapper {
diff --git a/sites/all/themes/gui/materiobasetheme/scss/styles.scss b/sites/all/themes/gui/materiobasetheme/scss/styles.scss
index 667ccfc2..d0665458 100644
--- a/sites/all/themes/gui/materiobasetheme/scss/styles.scss
+++ b/sites/all/themes/gui/materiobasetheme/scss/styles.scss
@@ -573,6 +573,7 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
   @media #{$small-only}{
     margin-top:0;
   }
+  max-height: 100px;
 }
 /*
                     _
@@ -1196,12 +1197,12 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
   #materio-search-api-advanced-search-form{
     >div{
       position: relative;
-      #advancedsearch-filters, >.form-wrapper{
+      #advancedsearch-filters-wrapper, .form-wrapper.right-col{
         display: inline-block;
         vertical-align: top;
       }
 
-      >.form-wrapper{
+      .form-wrapper.right-col{
         position: relative;
         text-align: center;
         >*{display:block;}
@@ -1218,22 +1219,56 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       }
     }
 
-
-    #advancedsearch-filters{
+    .form-wrapper.advancedsearch-filters{
       padding-right: 0.5em;
       margin-right: 0.5em;
       border-right: 1px solid #ccc;
 
+      .advanced-search-form-table{
+        display:table;
+        border-collapse:separate;
+        border-spacing: 0 0.2em;
+
+        // min-width: 500px;
+      }
+
+      .advanced-search-form-headers{
+        display:table-header-group;
+        width:100%;
+        // grid-template-columns: 30% 30% 30%;
+        >div{
+          display:table-cell;
+          // min-width: 30%;
+          text-align: left;
+          text-transform: uppercase;
+          font-size: 9px;
+        }
+        >div:last-child:after{
+          content:"";
+          display:table-cell;
+        }
+      }
+
       .filter-line{
         margin:0.3em 0;
         padding-top:0.3em;
+        display: table-row;
 
         &:not(:first-child){
           border-top: 1px solid #ccc;
         }
+
+        >*{
+          display:table-cell;
+          text-align: left;
+          &:not(:last-child){
+            padding:0 1em 0 0;
+          }
+        }
+
         .form-item{
-          display:inline-block;
-          vertical-align: middle;
+          // display:inline-block;
+          // vertical-align: middle;
           @include fs12; line-height:1;
           // padding-right:3em;
           text-transform: capitalize;
@@ -1244,15 +1279,29 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
         select{
           width:auto;
         }
+
+        .filter-markup{
+          // border-left: 1px solid #ccc;
+          span{
+            padding:0.4em 1em;
+            display: block;
+            font-size: 11px;
+            background-color: #eee;
+            color:#777;
+            text-align: center;
+            border-radius: 7px;
+          }
+        }
       }
 
-      .rm-btn{
-        float: right;
-        margin:0.4em 0 0.4em 0.4em;
-      }
+      // .rm-btn{
+      //   float: right;
+      //   margin:0.4em 0 0.4em 0.4em;
+      // }
 
       .add-filter{
         margin:0.5em 0;
+        display: table-row;
       }
     }