Merge pull request #5228 from pulibrary/select2-ephemera

Try out new select for Ephemera.
pulibrary · Jul 11, 2022 · 82ee3ae · 82ee3ae
2 parents 72787ff + 521b835
commit 82ee3ae
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 15 deletions.
diff --git a/app/assets/stylesheets/components/select_box.scss b/app/assets/stylesheets/components/select_box.scss
@@ -16,3 +16,25 @@ a span.check-mark {
 .bootstrap-select.btn-group .dropdown-menu.inner {
 	max-height: 400px !important;
 }
+
+.select2-container--default .select2-results__group {
+  border-top: 1px solid #e5e5e5;
+  color: #6c757d;
+  font-size: 0.875rem;
+  cursor: pointer !important;
+  &::before {
+    display: inline-block;
+    margin-left: 0.255em;
+    vertical-align: 0.255em;
+    content: "";
+    border-top: 0.3em solid;
+    border-right: 0.3em solid transparent;
+    border-bottom: 0;
+    border-left: 0.3em solid transparent;
+    margin-right: 0.3em;
+    transform: rotate(-90deg);
+    &.open {
+      transform: rotate(0deg);
+    }
+  }
+}
diff --git a/app/javascript/figgy/figgy_boot.js b/app/javascript/figgy/figgy_boot.js
@@ -90,6 +90,50 @@ export default class Initializer {
       allowClear: true
     })
 
+    // Allows collapsible optgroups in the subject select
+    // Pulled from
+    // https://stackoverflow.com/questions/52156973/collapse-expand-optgroup-using-select2
+    $("body").on('click', '.select2-container--open .select2-results__group', function() {
+      $(this).siblings().toggle();
+      let id = $(this).closest('.select2-results__options').attr('id');
+      let index = $('.select2-results__group').index(this);
+      optgroupState[id][index] = !optgroupState[id][index];
+      if(optgroupState[id][index]) {
+        $(this).addClass("open")
+        $(this).removeClass("closed")
+      } else {
+        $(this).addClass("closed")
+        $(this).removeClass("open")
+      }
+    })
+
+    let optgroupState = {};
+
+    $('select.select2').on('select2:open', function() {
+      $('.select2-dropdown--below').css('opacity', 0);
+      setTimeout(() => {
+        let groups = $('.select2-container--open .select2-results__group');
+        let id = $('.select2-results__options').attr('id');
+        if (!optgroupState[id]) {
+          optgroupState[id] = {};
+        }
+        $.each(groups, (index, v) => {
+          optgroupState[id][index] = optgroupState[id][index] || false;
+          if(optgroupState[id][index]) {
+            $(v).siblings().show();
+            $(v).addClass("open")
+            $(v).removeClass("closed")
+          } else {
+            $(v).siblings().hide();
+            $(v).addClass("closed")
+            $(v).removeClass("open")
+          }
+          optgroupState[id][index] ? $(v).siblings().show() : $(v).siblings().hide();
+        })
+        $('.select2-dropdown--below').css('opacity', 1);
+      }, 0);
+    })
+
     $(".document div.member-resources").each((_i, element) => {
       const $element = $(element)
       const $form = $element.parent('form')

diff --git a/app/views/numismatics/accessions/edit_fields/_firm_id.html.erb b/app/views/numismatics/accessions/edit_fields/_firm_id.html.erb
@@ -1,4 +1,4 @@
-<div class="form-group string optional">
+<div class="form-group string optional lux">
   <%= f.label :firm_id, required: f.object.required?(:firm_id) %>
   <%= link_to 'New Firm', new_numismatics_firm_path, class: 'btn btn-sm btn-primary new-link', target: '_blank'%>
   <%= f.hidden_field :firm_id, ajax_select_type: "Firm" %>

diff --git a/app/views/numismatics/accessions/edit_fields/_person_id.html.erb b/app/views/numismatics/accessions/edit_fields/_person_id.html.erb
@@ -1,4 +1,4 @@
-<div class="form-group string optional">
+<div class="form-group string optional lux">
   <%= f.label :person_id, required: f.object.required?(:person_id) %>
   <%= link_to 'New Person', new_numismatics_person_path, class: 'btn btn-sm btn-primary new-link', target: '_blank'%>
   <%= f.hidden_field :person_id, ajax_select_type: "Person" %>

diff --git a/app/views/numismatics/coins/_loan_fields.html.erb b/app/views/numismatics/coins/_loan_fields.html.erb
@@ -1,4 +1,4 @@
-<div class='nested-fields'>
+<div class='nested-fields lux'>
   <div class="row">
     <div class="col-md-6">
       <%= f.label :person_id, required: f.object.required?(:person_id) %>

diff --git a/app/views/numismatics/coins/_provenance_fields.html.erb b/app/views/numismatics/coins/_provenance_fields.html.erb
@@ -1,4 +1,4 @@
-<div class='nested-fields'>
+<div class='nested-fields lux'>
   <div class="row">
     <div class="col-md-6">
       <%= f.label :person_id, required: f.object.required?(:person_id) %>

diff --git a/app/views/numismatics/coins/edit_fields/_append_id.html.erb b/app/views/numismatics/coins/edit_fields/_append_id.html.erb
@@ -1,4 +1,4 @@
-<div class="form-group string optional">
+<div class="form-group string optional lux">
   <%= f.label :append_id, label: "Issue", required: f.object.required?(:append_id) %>
   <%= f.hidden_field :append_id, ajax_select_type: "Issue", ajax_select_initial_id: @selected_issue %>
 </div>
diff --git a/app/views/numismatics/coins/edit_fields/_find_place_id.html.erb b/app/views/numismatics/coins/edit_fields/_find_place_id.html.erb
@@ -1,4 +1,4 @@
-<div class="form-group string optional">
+<div class="form-group string optional lux">
   <%= f.label :find_place_id, required: f.object.required?(:find_place_id) %>
   <%= link_to 'New Place', new_numismatics_place_path, class: 'btn btn-sm btn-primary new-link', target: '_blank'%>
   <%= f.hidden_field :find_place_id, ajax_select_type: "Place" %>

diff --git a/app/views/numismatics/coins/edit_fields/_numismatic_citation_fields.html.erb b/app/views/numismatics/coins/edit_fields/_numismatic_citation_fields.html.erb
@@ -1,4 +1,4 @@
-<div class='nested-fields'>
+<div class='nested-fields lux'>
   <div class="row">
     <div class="col-md-6">
       <%= f.label :numismatic_reference_id, required: f.object.required?(:numismatic_reference_id) %>

diff --git a/app/views/numismatics/issues/_form.html.erb b/app/views/numismatics/issues/_form.html.erb
@@ -1,6 +1,6 @@
 <h2><%= form_title(params) %></h2>
 <%= simple_form_for @change_set do |f| %>
-  <div class="row lux">
+  <div class="row">
     <div class="col-xs-12 col-sm-12 col-md-12" role="main">
       <div class="form-panel-content form-numismatics" id="metadata">
         <%= yield "metadata_tab".to_sym if content_for? "metadata_tab".to_sym %>

diff --git a/app/views/numismatics/issues/_numismatic_artist_fields.html.erb b/app/views/numismatics/issues/_numismatic_artist_fields.html.erb
@@ -1,4 +1,4 @@
-<div class='nested-fields'>
+<div class='nested-fields lux'>
   <div class="row">
     <div class="col-md-6">
       <%= f.label :person_id, required: f.object.required?(:person_id) %>

diff --git a/app/views/numismatics/issues/edit_fields/_master_id.html.erb b/app/views/numismatics/issues/edit_fields/_master_id.html.erb
@@ -1,4 +1,4 @@
-<div class="form-group string optional">
+<div class="form-group string optional lux">
   <%= f.label :master_id, required: f.object.required?(:master_id) %>
   <%= link_to 'New Master', new_numismatics_person_path, class: 'btn btn-sm btn-primary new-link', target: '_blank'%>
   <%= f.hidden_field :master_id, ajax_select_type: "Person" %>

diff --git a/app/views/numismatics/issues/edit_fields/_numismatic_place_id.html.erb b/app/views/numismatics/issues/edit_fields/_numismatic_place_id.html.erb
@@ -1,4 +1,4 @@
-<div class="form-group string optional">
+<div class="form-group string optional lux">
   <%= f.label :numismatic_place_id, required: f.object.required?(:numismatic_place_id), label: "Minting Location" %>
   <%= link_to 'New Place', new_numismatics_place_path, class: 'btn btn-sm btn-primary new-link', target: '_blank'%>
   <%= f.hidden_field :numismatic_place_id, ajax_select_type: "Place" %>

diff --git a/app/views/numismatics/issues/edit_fields/_ruler_id.html.erb b/app/views/numismatics/issues/edit_fields/_ruler_id.html.erb
@@ -1,4 +1,4 @@
-<div class="form-group string optional">
+<div class="form-group string optional lux">
   <%= f.label :ruler_id, required: f.object.required?(:ruler_id) %>
   <%= link_to 'New Ruler', new_numismatics_person_path, class: 'btn btn-sm btn-primary new-link', target: '_blank'%>
   <%= f.hidden_field :ruler_id, ajax_select_type: "Person" %>

diff --git a/app/views/records/edit_fields/_numismatic_accession_id.html.erb b/app/views/records/edit_fields/_numismatic_accession_id.html.erb
@@ -1,4 +1,4 @@
-<div class="form-group string optional">
+<div class="form-group string optional lux">
   <%= f.label :numismatic_accession_id, required: f.object.required?(:numismatic_accession_id) %>
   <%= f.hidden_field :numismatic_accession_id, ajax_select_type: "Accession"  %>
 </div>
diff --git a/app/views/records/edit_fields/_numismatic_citation_fields.html.erb b/app/views/records/edit_fields/_numismatic_citation_fields.html.erb
@@ -1,4 +1,4 @@
-<div class='nested-fields'>
+<div class='nested-fields lux'>
   <div class="row">
     <div class="col-md-6">
       <%= f.label :numismatic_reference_id, required: f.object.required?(:numismatic_reference_id) %>

diff --git a/app/views/records/edit_fields/_numismatic_monogram_ids.html.erb b/app/views/records/edit_fields/_numismatic_monogram_ids.html.erb
@@ -1,2 +1,4 @@
 <label>Monogram</label>
-<issue-monograms :members="<%= @numismatic_monogram_attributes.to_json %>"></issue-monograms>
+<span class="lux">
+  <issue-monograms :members="<%= @numismatic_monogram_attributes.to_json %>"></issue-monograms>
+</span>
diff --git a/app/views/records/edit_fields/_subject.html.erb b/app/views/records/edit_fields/_subject.html.erb
@@ -10,6 +10,7 @@
               label_method: :label,
               value_method: :id,
               input_html: { multiple: f.object.multiple?(key),
+                            class: 'select2',
                             data: {
                               live_search: true
                             }

diff --git a/spec/models/numismatics/coin_feature_spec.rb b/spec/models/numismatics/coin_feature_spec.rb
@@ -190,6 +190,7 @@
     end
 
     scenario "users can create a new issue with duplicated metadata" do
+      page.fill_in "numismatics_coin_analysis", with: ""
       page.fill_in "numismatics_coin_analysis", with: "test analysis 2"
 
       page.click_on "Save and Duplicate Metadata"