PIXI-138: Usability improvements to the Hotel Scan Record Form UI. Su…

…bject ID selector is now scrollable and searchable. (#10)
preclinical-imaging · Jun 7, 2024 · 7a2b0db · 7a2b0db
1 parent 5e2c5d5
commit 7a2b0db
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 16 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -20,7 +20,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
                 pre-defined mappings. Would still like to add a site-wide and project level setting feature but this is
                 more user-friendly than the previous version.
 - [PIXI-135][]: Update default generated search.vm files for PIXI datatypes
-
+- [PIXI-138][]: Usability improvements to the Hotel Scan Record Form UI. Subject ID selector is now scrollable and
+                searchable.
 
 ## [1.2.0] - 2024-04-18
 
@@ -92,3 +93,4 @@ plugins directory and restart XNAT.
 [PIXI-133]: https://radiologics.atlassian.net/browse/PIXI-133
 [PIXI-134]: https://radiologics.atlassian.net/browse/PIXI-134
 [PIXI-135]: https://radiologics.atlassian.net/browse/PIXI-135
+[PIXI-138]: https://radiologics.atlassian.net/browse/PIXI-138
diff --git a/src/main/resources/META-INF/resources/scripts/xnat/plugin/pixi/pixi-editScanRecord.js b/src/main/resources/META-INF/resources/scripts/xnat/plugin/pixi/pixi-editScanRecord.js
@@ -24,6 +24,28 @@ console.log('pixi-editScanRecord.js');
 
         const createHotelUnit = function (i, position) {
             // i = the unit index
+
+            // Filterable Subject Selector
+            const subjectOptions = XNAT.plugin.pixi.pixiSubjects.map(subject => {
+                return spawn('option', { value: subject.value, label: subject.label, selected: subject.value === '' });
+            });
+
+            const subjectIdComponent = spawn('div.panel-element.stacked.col-1', [
+                spawn('div.row', [
+                    spawn(`label.element-label.pull-left|for=\'subject-selector-${i}\'`, 'Subject ID'),
+                    spawn('div.pull-right', [
+                        spawn(`label.filter-icon|for=\'subject-filter-${i}\'`, [
+                            spawn('i.fa.fa-search')
+                        ]),
+                        spawn(`input#subject-filter-${i}.filter-input|type=\'text\'|placeholder=\'Filter\'`)
+                    ]),
+                ]),
+                spawn('div.element-wrapper', [
+                    spawn(`select#subject-selector-${i}.subject-selector|name=\'pixi:hotelScanRecord/hotel_subjects/subject[` + i + ']/subject_id\'|size=\'8\'', [
+                        ...subjectOptions
+                    ]),
+                ])
+            ]);
 
             const fastingStatusEl = XNAT.ui.panel.select.single({
                 className: 'stacked',
@@ -157,12 +179,7 @@ console.log('pixi-editScanRecord.js');
                             name: 'pixi:hotelScanRecord/hotel_subjects/subject[' + i + ']/position',
                             value: position.name
                         }),
-                        XNAT.ui.panel.select.single({
-                            className: 'stacked subject-selector',
-                            name: 'pixi:hotelScanRecord/hotel_subjects/subject[' + i + ']/subject_id',
-                            label: 'Subject ID',
-                            options: XNAT.plugin.pixi.pixiSubjects
-                        }),
+                        subjectIdComponent,
                         spawn('input', {
                             type: 'hidden',
                             className: 'subject-label-selector',
@@ -252,6 +269,8 @@ console.log('pixi-editScanRecord.js');
         selectedHotel.positions.forEach(function (position, i) {
             $('#hotel-units').append(createHotelUnit(i, position));
         })
+
+        document.dispatchEvent(new Event('hotel-units-created'));
     };
     XNAT.plugin.pixi.hotelScanRecords = hotelScanRecords = [];
 
@@ -435,7 +454,12 @@ console.log('pixi-editScanRecord.js');
     });
 
     $(document).on('change','.subject-selector',function(){
-        var subjectLabel = $(this).find('option:selected').html();
+        var subjectLabel = $(this).find('option:selected')[0].label;
+
+        if (subjectLabel.includes('Empty')) {
+            subjectLabel = '';
+        }
+
         $(this).parents('.hotel-unit').find('input.subject-label-selector').val(subjectLabel);
     });
 

diff --git a/src/main/resources/META-INF/resources/style/pixi.css b/src/main/resources/META-INF/resources/style/pixi.css
@@ -71,8 +71,4 @@ body.xnat .column .panel.active {
 
 .column table th {
     text-align: left;
-}
-
-#session-selector {
-    width: 100%;
 }
diff --git a/...in/resources/META-INF/resources/templates/screens/XDATScreen_edit_pixi_hotelScanRecord.vm b/...in/resources/META-INF/resources/templates/screens/XDATScreen_edit_pixi_hotelScanRecord.vm
@@ -369,6 +369,17 @@
         .template-selector {
             margin: 0 10px 0 0;
         }
+
+        #subject-selector-0,
+        #subject-selector-1,
+        #subject-selector-2,
+        #subject-selector-3,
+        #subject-selector-4,
+        #subject-selector-5,
+        #subject-selector-6,
+        #session-selector {
+            width: 100%;
+        }
     </style>
 
     <h4>Apply Fasting / Heating / Anesthesia Templates (Optional)</h4>
@@ -406,11 +417,22 @@
                         <h4>Position: <span class="hotel-unit-position">$positionName</span></h4>
                         <input type="hidden" name="pixi:hotelScanRecord/hotel_subjects/subject[$i]/position" value="$positionName" />
                         <div class="panel-element stacked">
-                            <label class="element-label" for="pixi:hotelScanRecord/hotel_subjects/subject[$i]/subject_id">
-                                Subject ID
-                            </label>
+                            <div class="row">
+                                <label for="subject-selector-$i" class="element-label pull-left" >Subject ID</label>
+                                <div class="pull-right">
+                                    <label for="subject-filter-$i" class="filter-icon"><i class="fa fa-search"></i></label>
+                                    <input id="subject-filter" name="subject-filter-$i" class="filter-input" type="text"  placeholder="Filter" onkeyup=""/>
+                                </div>
+                            </div>
                             <div class="element-wrapper">
-                                #pixiSelectBox("pixi:hotelScanRecord/hotel_subjects/subject[$i]/subject_id" "subject-selector" $item $subjectOptions $vr)
+                                <select id="subject-selector-$i" name="pixi:hotelScanRecord/hotel_subjects/subject[$i]/subject_id" class="subject-selector" size="8">
+                                    <option value="" #if($!item.getProperty("pixi:hotelScanRecord/hotel_subjects/subject[$i]/subject_id") == "") selected #end>Empty</option>
+                                    #foreach($subject in $subjects)
+                                        #if (!$subject.label.equalsIgnoreCase("Hotel"))
+                                            <option value="$subject.id" #if($subject.id.equals($item.getProperty("pixi:hotelScanRecord/hotel_subjects/subject[$i]/subject_id"))) selected #end>$subject.label</option>
+                                        #end
+                                    #end
+                                </select>
                             </div>
                             #pixiHiddenBox("pixi:hotelScanRecord/hotel_subjects/subject[$i]/subject_label" "subject-label-selector" $item "" $vr)
                         </div>
@@ -690,6 +712,37 @@
 
     sessionFilter.addEventListener('keyup', filterSessions);
 </script>
+<script>
+    const initSubjectFilters = () => {
+        const subjectFilters = document.querySelectorAll('input[id^=subject-filter]');
+
+        const filterSubjects = (event) => {
+            console.debug('Filtering subjects');
+            console.debug(event);
+
+            const filter = event.target.value.toLowerCase();
+            let subjects = Array.from(event.target.closest('.panel-element').querySelectorAll('option'));
+
+            console.debug(filter);
+            console.debug(subjects);
+
+            subjects.forEach((subject) => {
+                subject.hidden = !subject.label.toLowerCase().includes(filter);
+            });
+        }
+
+        subjectFilters.forEach((filter) => {
+            filter.addEventListener('keyup', filterSubjects);
+        });
+    }
+
+    initSubjectFilters();
+
+    document.addEventListener('hotel-units-created', () => {
+        initSubjectFilters();
+    });
+
+</script>
 
 <script src="$content.getURI("scripts/xnat/plugin/pixi/pixi-imageAcqCtx.js")"></script>
 <script>