From 2e7f0a42c18e62379dfbacd7940779207462220b Mon Sep 17 00:00:00 2001
From: Dylan Hillerbrand <dhillerbrand@gmail.com>
Date: Mon, 19 Aug 2024 11:28:05 -0400
Subject: [PATCH] feat(interval omr search): add frontend components for
 interval search

- Adds interval search to the OMRSearchProvider
- Creates front-end helpers for entering interval search
---
 .../search/omr-search/IntervalChoiceView.js   | 16 +++++
 .../search/omr-search/OMRSearchProvider.js    | 18 +++--
 .../contour-choice-list.template.html         |  6 +-
 .../interval-choice-list.template.html        | 67 +++++++++++++++++++
 4 files changed, 99 insertions(+), 8 deletions(-)
 create mode 100644 nginx/public/node/frontend/public/js/app/search/omr-search/IntervalChoiceView.js
 create mode 100644 nginx/public/node/frontend/public/js/app/search/omr-search/interval-choice-list.template.html

diff --git a/nginx/public/node/frontend/public/js/app/search/omr-search/IntervalChoiceView.js b/nginx/public/node/frontend/public/js/app/search/omr-search/IntervalChoiceView.js
new file mode 100644
index 00000000..3e02150e
--- /dev/null
+++ b/nginx/public/node/frontend/public/js/app/search/omr-search/IntervalChoiceView.js
@@ -0,0 +1,16 @@
+import Marionette from 'marionette';
+
+import template from './interval-choice-list.template.html';
+
+export default Marionette.CompositeView.extend({
+    template,
+
+    events: {
+        'click [data-search-value]': 'onChoiceClicked'
+    },
+
+    onChoiceClicked: function (event)
+    {
+        this.trigger('use:interval', $(event.target).attr('data-search-value'));
+    }
+});
\ No newline at end of file
diff --git a/nginx/public/node/frontend/public/js/app/search/omr-search/OMRSearchProvider.js b/nginx/public/node/frontend/public/js/app/search/omr-search/OMRSearchProvider.js
index bb5cbd1c..bd240d5b 100644
--- a/nginx/public/node/frontend/public/js/app/search/omr-search/OMRSearchProvider.js
+++ b/nginx/public/node/frontend/public/js/app/search/omr-search/OMRSearchProvider.js
@@ -8,6 +8,7 @@ import IncrementalClientSideLoader from "utils/IncrementalClientSideLoader";
 import SearchResultHeadingView from "../SearchResultHeadingView";
 import NeumeGalleryView from "./NeumeGalleryView";
 import ContourChoiceView from "./ContourChoiceView";
+import IntervalChoiceView from "./IntervalChoiceView";
 import InputView from "./InputView";
 import ResultView from "./ResultView";
 
@@ -54,11 +55,10 @@ export default Marionette.Object.extend({
                     name: 'Contour',
                     type: 'contour'
                 },
-                // TODO: Implement interval search (see #875)
-                // {
-                //     name: 'Interval',
-                //     type: 'intervals'
-                // }
+                {
+                    name: 'Interval',
+                    type: 'intervals'
+                }
             ]
         }
     ],
@@ -188,6 +188,14 @@ export default Marionette.Object.extend({
             });
             regions.searchHelper.show(contourChoices);
         }
+        else if (field.type === 'intervals'){
+            var intervalChoices = new IntervalChoiceView();
+            inputView.listenTo(intervalChoices, 'use:interval', function(newQuery)
+            {
+                inputView.insertSearchString(newQuery, true);
+            });
+            regions.searchHelper.show(intervalChoices);
+        }
         else
         {
             regions.searchHelper.empty();
diff --git a/nginx/public/node/frontend/public/js/app/search/omr-search/contour-choice-list.template.html b/nginx/public/node/frontend/public/js/app/search/omr-search/contour-choice-list.template.html
index bdbf4761..0cc28cc8 100644
--- a/nginx/public/node/frontend/public/js/app/search/omr-search/contour-choice-list.template.html
+++ b/nginx/public/node/frontend/public/js/app/search/omr-search/contour-choice-list.template.html
@@ -1,7 +1,7 @@
 <div class="text-center">
     <div class="btn-group" role="group">
-         <button class="btn btn-default" data-search-value="u">Up</button>
-         <button class="btn btn-default" data-search-value="d">Down</button>
-         <button class="btn btn-default" data-search-value="r">Repeat</button>
+        <button class="btn btn-default" data-search-value="u">Up</button>
+        <button class="btn btn-default" data-search-value="d">Down</button>
+        <button class="btn btn-default" data-search-value="r">Repeat</button>
     </div>
 </div>
diff --git a/nginx/public/node/frontend/public/js/app/search/omr-search/interval-choice-list.template.html b/nginx/public/node/frontend/public/js/app/search/omr-search/interval-choice-list.template.html
new file mode 100644
index 00000000..75318c59
--- /dev/null
+++ b/nginx/public/node/frontend/public/js/app/search/omr-search/interval-choice-list.template.html
@@ -0,0 +1,67 @@
+<div class="btn-group" role="group">
+    <div class="btn-group" role="group">
+        <button type="button"
+                class="btn btn-default btn-sm dropdown-toggle"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            5<sup>th</sup><span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li>
+                <a href="#" data-search-value="d5">5<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="d6">6<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="d7">7<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="d8">8<sup>ve</sup></a>
+            </li>
+        </ul>
+    </div>
+    <button class="btn btn-default btn-sm" data-search-value="d4">
+        4<sup>th</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="d3">
+        3<sup>rd</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="d2">
+        2<sup>nd</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="r">U</button>
+    <button class="btn btn-default btn-sm" data-search-value="u2">
+        2<sup>nd</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="d3">
+        3<sup>rd</sup>
+    </button>
+    <button class="btn btn-default btn-sm" data-search-value="u4">
+        4<sup>th</sup>
+    </button>
+    <div class="btn-group" role="group">
+        <button type="button"
+                class="btn btn-default btn-sm dropdown-toggle"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false">
+            5<sup>th</sup><span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu">
+            <li>
+                <a href="#" data-search-value="u5">5<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="u6">6<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="u7">7<sup>th</sup></a>
+            </li>
+            <li>
+                <a href="#" data-search-value="u8">8<sup>ve</sup></a>
+            </li>
+        </ul>
+    </div>
+</div>