Merge pull request #8803 from jrjohnson/6458-missing-badges

Hide Unmatched Sessions in Search

Author: dartajax

packages/frontend/app/components/course-search-result.gjs

@@ -12,9 +12,13 @@ import FaIcon from 'ilios-common/components/fa-icon';
 export default class CourseSearchResultComponent extends Component {
   @tracked showMore = false;
 
-  get sessions() {
+  get filteredSessions() {
     const { sessions } = this.args.course;
-    return this.showMore ? sessions : sessions.slice(0, 3);
+    return sessions.filter((s) => s.matchedIn.length);
+  }
+
+  get sessions() {
+    return this.showMore ? this.filteredSessions : this.filteredSessions.slice(0, 3);
   }
   <template>
     <li class="course-search-result" data-test-course-search-result ...attributes>
@@ -29,48 +33,50 @@ export default class CourseSearchResultComponent extends Component {
         {{t "general.course"}}
       </span>
       <GlobalSearchTags @tags={{@course.matchedIn}} />
-      <ul>
-        <li class="sessions">
-          {{t "general.sessions"}}:
-        </li>
-        {{#each this.sessions as |session|}}
-          <li class="session-row">
-            <LinkTo
-              @route="session"
-              @models={{array @course.id session.id}}
-              class="session-title-link"
-            >
-              {{session.title}}
-            </LinkTo>
-            <GlobalSearchTags @tags={{session.matchedIn}} />
+      {{#if this.sessions}}
+        <ul>
+          <li class="sessions">
+            {{t "general.sessions"}}:
           </li>
-        {{/each}}
-        {{#if (gt @course.sessions.length 3)}}
-          {{#if this.showMore}}
-            <li>
-              <button
-                class="show-less link-button"
-                type="button"
-                {{on "click" (set this "showMore" false)}}
-              >
-                <FaIcon @icon="angle-up" />
-                {{t "general.showLess"}}
-              </button>
-            </li>
-          {{else}}
-            <li>
-              <button
-                class="show-more link-button"
-                type="button"
-                {{on "click" (set this "showMore" true)}}
+          {{#each this.sessions as |session|}}
+            <li class="session-row">
+              <LinkTo
+                @route="session"
+                @models={{array @course.id session.id}}
+                class="session-title-link"
               >
-                <FaIcon @icon="angle-down" />
-                {{t "general.showMore"}}
-              </button>
+                {{session.title}}
+              </LinkTo>
+              <GlobalSearchTags @tags={{session.matchedIn}} />
             </li>
+          {{/each}}
+          {{#if (gt this.filteredSessions.length 3)}}
+            {{#if this.showMore}}
+              <li>
+                <button
+                  class="show-less link-button"
+                  type="button"
+                  {{on "click" (set this "showMore" false)}}
+                >
+                  <FaIcon @icon="angle-up" />
+                  {{t "general.showLess"}}
+                </button>
+              </li>
+            {{else}}
+              <li>
+                <button
+                  class="show-more link-button"
+                  type="button"
+                  {{on "click" (set this "showMore" true)}}
+                >
+                  <FaIcon @icon="angle-down" />
+                  {{t "general.showMore"}}
+                </button>
+              </li>
+            {{/if}}
           {{/if}}
-        {{/if}}
-      </ul>
+        </ul>
+      {{/if}}
     </li>
   </template>
 }

packages/frontend/tests/integration/components/course-search-result-test.gjs

@@ -19,18 +19,27 @@ module('Integration | Component | course-search-result', function (hooks) {
         {
           id: 1,
           title: 'Session 1',
+          matchedIn: ['title'],
         },
         {
           id: 2,
           title: 'Session 2',
+          matchedIn: ['title'],
         },
         {
           id: 3,
           title: 'Session 3',
+          matchedIn: [],
         },
         {
           id: 4,
           title: 'Session 4',
+          matchedIn: ['title'],
+        },
+        {
+          id: 4,
+          title: 'Session 5',
+          matchedIn: ['title'],
         },
       ],
     };
@@ -40,7 +49,7 @@ module('Integration | Component | course-search-result', function (hooks) {
     assert.strictEqual(component.schoolTitle, 'Medicine');
     assert.strictEqual(component.sessions[0].text, 'Session 1');
     assert.strictEqual(component.sessions[1].text, 'Session 2');
-    assert.strictEqual(component.sessions[2].text, 'Session 3');
+    assert.strictEqual(component.sessions[2].text, 'Session 4');
     assert.strictEqual(component.sessions.length, 3);
 
     assert.notOk(component.showLessIsVisible);
@@ -49,12 +58,56 @@ module('Integration | Component | course-search-result', function (hooks) {
 
     assert.ok(component.showLessIsVisible);
     assert.notOk(component.showMoreIsVisible);
-    assert.strictEqual(component.sessions[3].text, 'Session 4');
+    assert.strictEqual(component.sessions[3].text, 'Session 5');
     assert.strictEqual(component.sessions.length, 4);
 
     await component.showLess();
     assert.notOk(component.showLessIsVisible);
     assert.ok(component.showMoreIsVisible);
     assert.strictEqual(component.sessions.length, 3);
   });
+
+  test('no show more link when sessions are filtered out', async function (assert) {
+    assert.expect(8);
+
+    const course = {
+      id: 1,
+      title: 'Course 1',
+      school: 'Medicine',
+      year: '1980',
+      sessions: [
+        {
+          id: 1,
+          title: 'Session 1',
+          matchedIn: ['title'],
+        },
+        {
+          id: 2,
+          title: 'Session 2',
+          matchedIn: ['title'],
+        },
+        {
+          id: 3,
+          title: 'Session 3',
+          matchedIn: [],
+        },
+        {
+          id: 4,
+          title: 'Session 4',
+          matchedIn: ['title'],
+        },
+      ],
+    };
+    this.set('course', course);
+    await render(<template><CourseSearchResult @course={{this.course}} /></template>);
+    assert.strictEqual(component.courseTitle, '1980 Course 1');
+    assert.strictEqual(component.schoolTitle, 'Medicine');
+    assert.strictEqual(component.sessions[0].text, 'Session 1');
+    assert.strictEqual(component.sessions[1].text, 'Session 2');
+    assert.strictEqual(component.sessions[2].text, 'Session 4');
+    assert.strictEqual(component.sessions.length, 3);
+
+    assert.notOk(component.showLessIsVisible);
+    assert.notOk(component.showMoreIsVisible);
+  });
 });