feat(search): js and backoffice business ok

app/front_assets/controllers/search_form_controller.js

@@ -1,40 +1,29 @@
-import { Controller } from 'stimulus';
-import { isVisible, hideElement, showElement } from '../utils/dom';
+import { Controller } from "stimulus";
+import { toggleContainers } from "../utils/dom";
+import { on } from "hammerjs";
 
 export default class extends Controller {
+  static targets = ["grade"];
 
-  static targets = [
-    "tabPane", // multiple targets to navigate weeks selection // months
-  ];
-
-  showWeekOrMonthSelection(clickEvent) {
-    const currentTarget = clickEvent.currentTarget;
-    const href = new URL(currentTarget.href);
-    const target = href.hash.replace(/#/, '');
-
-    this.tabPaneTargets.map(( element) => {
-      const $el = $(element)
-
-      if (element.id == target) {
-        showElement($el)
-      } else if (isVisible($el)) {
-        hideElement($el)
-      } else {
-        // no op, hidden element stays hidden
-      }
-    })
-    clickEvent.preventDefault();
+  onChangeGrade(event) {
+    if (this.gradeTarget.value == "1") {
+      this.show3emeOnly(false);
+    } else if (this.gradeTarget.value == "2" || this.gradeTarget.value == "3") {
+      this.show3emeOnly(true);
+    } else {
+      toggleContainers(this.allElements(), true);
+    }
   }
-
+  
   connect() {
-    const observer = new MutationObserver(removeStyle);
-    observer.observe(document.body, { attributes: true, subtree: true, attributeFilter: ['style'] });
-
-    function removeStyle() {
-      const tabs = document.querySelector('.fr-tabs');
-      if (tabs) {
-          tabs.style.removeProperty('--tabs-height');
-      }
-    }
+    this.onChangeGrade();
   }
+  // Private
+  allElements = () => document.querySelectorAll(".month-score, .month-title");
+  juneElements = () => document.querySelectorAll(".month-score.Juin, .month-title.Juin");
+  show3emeOnly(value) {
+    toggleContainers(this.allElements(), value);
+    toggleContainers(this.juneElements(), !value);
+  }
+
 }

app/front_assets/controllers/select_weeks_search_controller.js

@@ -1,7 +1,4 @@
-import $ from "jquery";
 import { Controller } from "stimulus";
-// import { toggleContainer } from "../utils/dom";
-
 
 export default class extends Controller {
   static targets = [
@@ -36,28 +33,40 @@ export default class extends Controller {
       el.addEventListener("change", this.handleCheckboxesChanges.bind(this));
     });
     this.handleCheckboxesChanges();
-    this.setInitialScores();
+  }
+
+  connect() {
+    this.resetScores();
+    this.setScoresFromCheckBoxes();
+    this.repaintScores();
+  }
+
+  handleOneCheckboxChange(event) {
+    this.handleCheckboxesChanges(event);
+    this.updateMonthScore(event);
+    this.repaintScores();
   }
 
   disconnect() {
     this.detachEventListeners();
   }
 
-  setInitialScores() {
-    this.monthList().forEach((key) => {
-      const monthContentSelector = document.querySelectorAll(`.${key}`)[0];
-      if (monthContentSelector) {
-        this.scores[key] = parseInt(monthContentSelector.innerHTML.replace(/\D/g, ""), 10);
-      }
-    });
+  // private
+
+  // on week checked
+  handleCheckboxesChanges(event) {
+    this.hasNoCheckboxChecked()
+      ? this.onNoWeekSelected()
+      : this.checkboxesContainerTarget.classList.remove("is-invalid");
   }
 
+
   hasNoCheckboxChecked() {
     const selectedCheckbox = $(this.weekCheckboxesTargets).filter(":checked");
     return selectedCheckbox.length === 0;
   }
 
-    // ui helpers
+  // ui helpers
   onNoWeekSelected() {
     const $checkboxesContainer = $(this.checkboxesContainerTarget);
     $checkboxesContainer.addClass("is-invalid");
@@ -74,31 +83,30 @@ export default class extends Controller {
     this.repaintScores();
   }
 
-  // on week checked
-  handleCheckboxesChanges(event) {
-    this.hasNoCheckboxChecked()
-      ? this.onNoWeekSelected()
-      : this.checkboxesContainerTarget.classList.remove("is-invalid");;
-  }
-
-  handleOneCheckboxChange(event) {
-    this.handleCheckboxesChanges(event);
-    this.setMonthScore(event);
-    this.repaintScores();
-  }
-
-  setMonthScore(event) {
+  updateMonthScore(event) {
     if (event == undefined) return;
 
     const htmlBox = event.target;
     const classList = htmlBox.parentNode.classList;
     this.monthList().forEach((monthName) => {
       if (classList.contains(monthName)) {
-        this.scores[monthName] += htmlBox.checked ? 1 : -1; // action is check or uncheck;
+        this.scores[monthName] += htmlBox.checked ? 1 : -1; // action consists in checking or unchecking;
       }
     });
   }
 
+  setScoresFromCheckBoxes = () => {
+    console.log(this.monthList());
+    this.monthList().forEach((monthName) => {
+      const rightSideMonthSections = document.querySelectorAll(
+        `.fr-checkbox-group.${monthName} input[type="checkbox"]`
+      );
+      rightSideMonthSections.forEach((elt) => {
+        this.scores[monthName] += elt.checked ? 1 : 0;
+      });
+    });
+  };
+
   repaintScores() {
     this.monthList().forEach((monthName) => {
       this.monthScoreTargets.forEach((sideElement) => {
@@ -111,7 +119,7 @@ export default class extends Controller {
     });
   }
 
-  monthList() { return Object.keys(this.scores); }
+  monthList = () =>  ( Object.keys(this.scores) );
 
   switchHtmlClasses(element, score) {
     const classList = element.classList;
@@ -135,15 +143,9 @@ export default class extends Controller {
   //   });
   // }
 
-  // resetScores() {
-  //   this.monthList().forEach((key) => {
-  //     this.scores[key] = 0;
-  //   });
-  // }
-
-  // setWeeksMesssage(totalScore) {
-  //   const semaines = this.totalScore();
-  //   let weeksCount = (semaines > 1) ? totalScore + " semaines proposées" : totalScore + " semaine proposée";
-  //   return weeksCount;
-  // }
+  resetScores() {
+    this.monthList().forEach((key) => {
+      this.scores[key] = 0;
+    });
+  }
 }

app/libs/finders/context_typable_internship_offer.rb

@@ -82,7 +82,7 @@ def common_filter
     def grade_id_query(query)
       query.merge(
         InternshipOffer.joins(:grades)
-                       .where(grades: OpenStruct.new(ids: use_params(:grade_id)))
+                       .where(grades: Grade.where(id: use_params(:grade_id)))
       )
     end
 

app/models/internship_offer.rb

@@ -227,9 +227,7 @@ class InternshipOffer < ApplicationRecord
   }
 
   scope :with_grade, lambda { |user|
-    return all if user.nil?
-
-    user.grade_id == Grade.seconde.id ? seconde : troisieme_or_quatrieme
+    joins(:grades).where(grades: { id: user.try(:grade_id) || Grade.all.ids })
   }
 
   scope :by_department, ->(departments) { where(department: departments) }

app/views/internship_offers/search/_form.html.slim

@@ -28,19 +28,19 @@ div [class="test-search-container #{has_white_bg ? 'search-container fr-pt-2w' :
                                    longitude: params[:longitude],
                                    radius: params[:radius],
                                    whiteBg: has_white_bg } )
-
       / School_track filter
       .form-group.mb-md-0.col-12.col-md
         .fr-select-group
           - grade_options = Grade.options_for_select(current_user)
           = form.label :grade_id, "Filière", class: "fr-label"
           = form.select :grade_id,
-                        options_for_select(grade_options, params[:grade]),
+                        options_for_select(grade_options, params[:grade_id]),
                         grade_options.count > 1 ? { include_blank: "Toutes les filières" } : {},
                         class: "fr-select almost-fitting",
                         title: "Recherche par filière",
                         :'aria-label' => "Recherche par filière",
-                        data: { action: "change->search-form#submitOnChange" }
+                        data: { action: "change->search-form#onChangeGrade" ,
+                                :'search-form-target' => 'grade' }
       / weeks filter
       .form-group.mb-md-0.col-12.col-md data-controller='toggle-panel' data-toggle-panel-on-value="false"
         div data-action='click->toggle-panel#onToggle'

app/views/internship_offers/search/_weeks.html.slim

@@ -17,26 +17,28 @@ div data-controller='select-weeks-search'
             - Presenters::WeekList.new(weeks: current_weeks).month_split.each do |month_num, weeks|
               - month_name = Presenters::WeekList::MONTH_LIST[month_num - 9][:name]
               - year = weeks.first.year
-              .fr-text--xs.fr-mb-1w
+              div class="fr-text--xs fr-mb-1w #{month_name} month-title"
                 strong
                   = "#{month_name} #{year}"
-              - weeks.each do |week|
-                div class="fr-checkbox-group fr-checkbox-group--sm position-relative pr-3 #{month_name}"
-                  - # prevent removing weeks with application by showing a disable checkbox (not submitted to server)
-                  - # keep reference of checkbox id for easier labelling
-                  - checkbox_id = "#{form.object_name}_week_ids_#{week.id}_checkbox"
-                  - # also add an id for hidden field for two reason, avoid conflict, testing
-                  - hidden_id = "#{form.object_name}_week_ids_#{week.id}_hidden"
-                  - options =  { multiple: true,
-                                 id: checkbox_id,
-                                 data: {:"select-weeks-search-target" => 'weekCheckboxes',
-                                        action: 'change->select-weeks-search#handleOneCheckboxChange'} }
-                  - options.merge!({checked: week.id.in?(preselected_weeks.map(&:id))}) if preselected_weeks.present?
-                  = form.check_box :week_ids, options, week.id, checked: week.id.in?(school_weeks.map(&:id))
-                  = form.label :"week_id", for: checkbox_id, class: "fr-label fr-text--sm fr-mb-1v" do
-                    span class="dates-column #{week.in_the_past? ? 'text-grey-disabled' : ''}"
-                      = week.human_shortest
-              hr.fr-mb-1v.fr-ml-n2w
+                - weeks.each do |week|
+                  div class="fr-checkbox-group fr-checkbox-group--sm position-relative pr-3 #{month_name}"
+                    - # prevent removing weeks with application by showing a disable checkbox (not submitted to server)
+                    - # keep reference of checkbox id for easier labelling
+                    - checkbox_id = "#{form.object_name}_week_ids_#{week.id}_checkbox"
+                    - # also add an id for hidden field for two reason, avoid conflict, testing
+                    - hidden_id = "#{form.object_name}_week_ids_#{week.id}_hidden"
+                    - checked = week.id.in?(params[:week_ids].to_a.map(&:to_i))
+                    - options =  { multiple: true,
+                                  id: checkbox_id,
+                                  data: {:"select-weeks-search-target" => 'weekCheckboxes',
+                                          action: 'change->select-weeks-search#handleOneCheckboxChange'} }
+                    - options.merge!({checked: checked})
+
+                    = form.check_box :week_ids, options, week.id
+                    = form.label :"week_id", for: checkbox_id, class: "fr-label fr-text--sm fr-mb-1v" do
+                      span class="dates-column #{week.in_the_past? ? 'text-grey-disabled' : ''}"
+                        = week.human_shortest
+                hr.fr-mb-1v.fr-ml-n2w
     - if current_user.present? && ( (current_user.student? && current_user.troisieme_or_quatrieme?) || current_user.school_management? )
       .col-12
         .fr-notice.fr-notice--info