Setup a new PhraseRow component to handle phrases in the word table

app/components/book.js

@@ -10,7 +10,6 @@ export default class BookComponent extends Component {
       return '';
     }
 
-    console.log("Book: " + this.args.book.name);
     let string = this.args.book.name.toLowerCase();
     if (this.isNumber(string.charAt(0))) {
       return string.slice(0,1) + ' ' + string.charAt(2).toUpperCase() + string.slice(3);

app/components/words/phrase-row.hbs

@@ -0,0 +1,14 @@
+{{#each this.phraseWords as |pw|}}
+  {{#if pw.rootRow}}
+    <tr class="{{this.selected}}" ...attributes>
+      <td rowspan="{{this.rowCount}}">{{pw.ulb}}</td>
+      <td>{{pw.greek}}</td>
+      <td>{{pw.morph}}</td>
+    </tr>
+  {{else}}
+    <tr {{on "click" (fn this.select pw)}} class="{{this.selected}}" ...attributes>
+      <td>{{pw.greek}}</td>
+      <td>{{pw.morph}}</td>
+    </tr>
+  {{/if}}
+{{/each}}

app/components/words/phrase-row.js

@@ -0,0 +1,41 @@
+import WordsWordRowComponent from "./word-row";
+import { tracked } from "@glimmer/tracking";
+
+export default class WordsPhraseRowComponent extends WordsWordRowComponent {
+  @tracked phraseWords = [];
+
+  constructor(...args) {
+    super(...args);
+    this.phraseWords = this.getRelatedPhraseWords();
+  }
+
+  getRelatedPhraseWords()
+  {
+    let phraseWords = this.args.allWords.filter((word) => {
+      if (word.phraseId == this.args.model.phraseId) {
+        return word;
+      }
+    });
+
+    phraseWords.sort(function(a,b) {
+      return a.ogntSort - b.ogntSort;
+    });
+
+    /**
+     * The first item in the array should contain our ULB gloss.
+     * We need to take that gloss and add it to the next row in order
+     * for our table to render correctly.
+     */
+    let ulbGloss = phraseWords.shift();
+    phraseWords[0].ulb = ulbGloss.ulb;
+    phraseWords[0].rootRow = true;
+
+    return phraseWords;
+  }
+
+  get
+  rowCount()
+  {
+    return this.phraseWords.length;
+  }
+}

app/components/words/word-table.hbs

@@ -6,6 +6,12 @@
   <th>Morphology</th>
   </thead>
   {{#each @model as |word|}}
-    <Words::WordRow @model={{word}} />
+    {{#if word.isPhrase}}
+      {{#if word.isPhraseRoot}}
+        <Words::PhraseRow @model={{word}} @allWords={{@model}} />
+      {{/if}}
+    {{else}}
+      <Words::WordRow @model={{word}} />
+    {{/if}}
   {{/each}}
 </table>

app/components/words/word-table.js

@@ -0,0 +1,4 @@
+import Component from '@glimmer/component';
+
+export default class WordsWordTableComponent extends Component {
+}

app/models/word.js

@@ -1,14 +1,29 @@
 import Model, { attr, belongsTo } from '@ember-data/model';
 
 export default class WordModel extends Model {
-  @attr ulb;
-  @attr greek;
-  @attr lemma;
-  @attr morph;
-  @attr ogntSort;
-  @attr strongsNumber;
+  @attr ('string') verseCode;
+  @attr ('string') ulb;
+  @attr ('string') greek;
+  @attr ('string') lemma;
+  @attr ('string') morph;
+  @attr ('number') phraseId;
+  @attr ('number') sub;
+  @attr ('number') ogntSort;
+  @attr ('number') ulbSort;
+  @attr ('string') strongsNumber;
 
   @belongsTo('verse') verse;
 
   @belongsTo('lexical-entry') lexicalEntry;
+
+  get isPhrase()
+  {
+    return this.phraseId !== null;
+  }
+
+  get isPhraseRoot()
+  {
+    console.log("Called isPhraseRoot on " + this.verseCode)
+    return this.strongsNumber == '-1';
+  }
 }

tests/integration/components/words/phrase-row-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | words/phrase-row', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Words::PhraseRow />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Words::PhraseRow>
+        template block text
+      </Words::PhraseRow>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});