Merge pull request #7988 from michaelchadwick/frontend-5460-school-se…

…ssion-type-formatting

normalize School->Session Types table display

packages/frontend/app/components/school-session-types-collapsed.hbs

@@ -8,10 +8,10 @@
       class="title link-button"
       type="button"
       aria-expanded="false"
-      data-test-expand
+      data-test-title
       {{on "click" @expand}}
     >
-      {{t "general.sessionTypes"}}
+      {{t "general.sessionTypes"}} ({{this.sessionTypes.length}})
       <FaIcon @icon="caret-right" />
     </button>
   </div>
@@ -29,23 +29,23 @@
         </tr>
       </thead>
       <tbody>
-        <tr>
+        <tr data-test-session-type-methods>
           <td>
             {{t "general.assessmentMethods"}}
           </td>
-          <td class="summary-highlight" data-test-assessment-count>
+          <td class="summary-highlight">
             {{#if this.isLoaded}}
-              {{this.assessmentMethods.length}}
+              {{t "general.thereAreXTypes" count=this.assessmentMethods.length}}
             {{/if}}
           </td>
         </tr>
-        <tr>
+        <tr data-test-session-type-methods>
           <td>
             {{t "general.instructionalMethods"}}
           </td>
-          <td class="summary-highlight" data-test-instructional-count>
+          <td class="summary-highlight">
             {{#if this.isLoaded}}
-              {{this.instructionalMethods.length}}
+              {{t "general.thereAreXTypes" count=this.instructionalMethods.length}}
             {{/if}}
           </td>
         </tr>

packages/frontend/app/components/school-session-types-collapsed.js

@@ -13,6 +13,10 @@ export default class SchoolSessionTypesCollapseComponent extends Component {
     return this.sessionTypesData.isResolved;
   }
 
+  get sessionTypes() {
+    return this.sessionTypesData.isResolved ? this.sessionTypesData.value : [];
+  }
+
   get instructionalMethods() {
     return filterBy(this.sessionTypesData.value, 'assessment', false);
   }

packages/frontend/tests/integration/components/school-session-types-collapsed-test.js

@@ -11,15 +11,25 @@ module('Integration | Component | school session types collapsed', function (hoo
 
   test('it renders', async function (assert) {
     const school = this.server.create('school');
-    this.server.create('session-type', { school, assessment: true });
-    this.server.create('session-type', { school, assessment: false });
+    this.server.createList('session-type', 2, {
+      school,
+      assessment: true,
+    });
+    this.server.create('session-type', {
+      school,
+      assessment: false,
+    });
     const schoolModel = await this.owner.lookup('service:store').findRecord('school', school.id);
     this.set('school', schoolModel);
 
     await render(hbs`<SchoolSessionTypesCollapsed @school={{this.school}} @expand={{(noop)}} />`);
 
-    assert.strictEqual(parseInt(component.assessmentCount, 10), 1);
-    assert.strictEqual(parseInt(component.instructionalCount, 10), 1);
+    assert.strictEqual(component.title, 'Session Types (3)');
+    assert.strictEqual(component.sessionTypeMethods.length, 2);
+    assert.strictEqual(component.sessionTypeMethods[0].title, 'Assessment Methods');
+    assert.strictEqual(component.sessionTypeMethods[0].summary, 'There are 2 types');
+    assert.strictEqual(component.sessionTypeMethods[1].title, 'Instructional Methods');
+    assert.strictEqual(component.sessionTypeMethods[1].summary, 'There is 1 type');
   });
 
   test('expand', async function (assert) {

packages/frontend/tests/pages/components/school-session-types-collapsed.js

@@ -1,10 +1,13 @@
-import { clickable, create, text } from 'ember-cli-page-object';
+import { collection, clickable, create, text } from 'ember-cli-page-object';
 
 const definition = {
   scope: '[data-test-school-session-types-collapsed]',
-  expand: clickable('[data-test-expand]'),
-  assessmentCount: text('[data-test-assessment-count]'),
-  instructionalCount: text('[data-test-instructional-count]'),
+  title: text('[data-test-title]'),
+  expand: clickable('[data-test-title]'),
+  sessionTypeMethods: collection('[data-test-session-type-methods]', {
+    title: text('td:nth-of-type(1)'),
+    summary: text('td:nth-of-type(2)'),
+  }),
 };
 
 export default definition;

packages/frontend/translations/en-us.yaml

@@ -417,6 +417,7 @@ general:
   termsBySessionType: Terms by Session Type
   termXappliedToYSessionsWithSessionTypeZ: 'The term "{term}" from the "{vocabulary}" vocabulary is applied to {sessionsCount, plural, =1 {1 session} other {# sessions}} with session-type "{sessionType}".'
   thereAreXTerms: "{count, plural, =1 {There is 1 term} other {There are # terms}}"
+  thereAreXTypes: "{count, plural, =1 {There is 1 type} other {There are # types}}"
   thisReportIsNoLongerAvailable: This report is no longer available.
   thisTermHasSubTerms: This term has sub-terms.
   tokenInfo: "API Tokens are used to programmatically access Ilios data.  Your token is like a password - anyone who has it can make changes on your behalf.  Read more in the documentation at {apiDocsLink}."

packages/frontend/translations/es.yaml

@@ -417,6 +417,7 @@ general:
   termsBySessionType: Términos por Tipo de Sesión
   termXappliedToYSessionsWithSessionTypeZ: 'El término "{term}" del vocabulario "{vocabulary}" se aplica a {sessionsCount, plural, =1 {1 sesión} other {# sesiones}} con el tipo de sesión "{sessionType}".'
   thereAreXTerms: "{count, plural, =1 {Hay 1 término} other {Hay # términos}}"
+  thereAreXTypes: "{count, plural, =1 {Hay 1 tipo} other {Hay # tipos}}"
   thisReportIsNoLongerAvailable: Este informe ya no está disponible.
   thisTermHasSubTerms: Este término tiene subtérminos.
   tokenInfo: "Tokens de la API se utilizan para obtener acceso a datos de Ilios. Su símbolo (token) es como una contraseña. - cualquier persona que lo tiene puede hacer cambios en su nombre. Lea más en la documentación en {apiDocsLink}."

packages/frontend/translations/fr.yaml

@@ -418,6 +418,7 @@ general:
   termsBySessionType: Termes par Type de Seance
   termXappliedToYSessionsWithSessionTypeZ: 'Le terme "{term}" du vocabulaire "{vocabulary}" s''applique à {sessionsCount, plural, =1 {1 session} other {# sessions}} avec le type de session "{sessionType}".'
   thereAreXTerms: "{count, plural, =1 {Il y a 1 terme} other {Il y a # termes}}"
+  thereAreXTypes: "{count, plural, =1 {Il y a 1 type} other {Il y a # types}}"
   thisReportIsNoLongerAvailable: "Ce rapport n'est plus disponsible."
   thisTermHasSubTerms: Ce terme a des sous-termes.
   tokenInfo: "Jetons de l’API sont utilisés d’y accèder les données de Ilios.  Votre jeton comme un mot de passe: quiconque l’obtenu pouvent apporter des modifications en votre nom.  Lire plus dans les documentation à {apiDocsLink}."