lemma groups, group nouns by genus

src/components/Header.vue

 <!-- eslint-disable -->
 <template>
   <div class="header">
+    <span class="dict-label">{{dict_label}}</span>
+    <div v-for="(lemma_group, i) in lemma_groups" :key="i">
     <h2><router-link tabindex="0" 
                  :id="title_id" 
                  :to="$parent.link_to_self.ref" 
                  @click.native="$parent.details_click($parent.link_to_self)"
                  v-bind:class="{'long_lemma': long_lemma}"
-                 class="article_header"><!--
-    --><span v-for="(lemma, index) in same_group_lemmas" 
+                 class="article_header">
+
+          
+                <!--
+      
+    --><span v-for="(lemma, index) in lemma_group.lemmas" 
           :key="index">{{lemma.lemma}}<!--
-          --><span v-if="hgno_arabic[0]"
-                   :aria-label="'Betydning nummer ' + hgno_arabic" 
-                   :title="'Betydning nummer '+hgno_arabic"
+          --><span v-if="lemma.hgno"
+                   :aria-label="'Betydning nummer ' + parseInt(lemma.hgno)" 
+                   :title="'Betydning nummer '+parseInt(lemma.hgno)"
                    class="hgno">{{" "+roman_hgno(lemma)}}</span><!--
                     --><span 
                    class="title_comma" 
-                   v-if="same_group_lemmas[1] && index < lemmas.length-1">{{", "}}
+                   v-if="lemma_group.lemmas[1] && index < lemma_group.lemmas.length-1">{{", "}}
                   </span>
     </span>
     </router-link></h2>
-    <span class="dict-label">{{dict_label}}</span>
+    
     <h2 class="secondary_header" 
         v-if="secondary_header_text.length">{{secondary_header_text}}</h2>
     <span class="header_group_list" 
-          v-if="group_list.length">{{group_list[0]}}</span>
+          v-if="group_list.length">{{lemma_group.description}}</span>
     <span v-if="$store.state.showInflectionNo">{{inflection_classes}}</span>
-
     <SplitInf :lemmas="lemmas"/>
-      <div v-if="group_list[1] && group_list[1] != group_list[0]">
-        <h2 title="Annen variantform"><span aria-label="Annen variantform:"/>
-    <router-link tabindex="0" 
-                 :to="$parent.link_to_self.ref" 
-                 @click.native="$parent.details_click($parent.link_to_self)"
-                 v-bind:class="{'long_lemma': long_lemma}"
-                 class="article_header">
-    <span>{{lemmas[1].lemma}}<!--
-          --><span :aria-label="'Betydning nummer ' + hgno_arabic" 
-                   :title="'Betydning nummer '+hgno_arabic"
-                   class="hgno">{{" "+roman_hgno(lemmas[1])}}</span>
-    </span>
-    </router-link></h2>
-        <span class="header_group_list" 
-          v-if="group_list.length">{{group_list[1]}}</span>
-      </div>
 
-    <span v-if="$parent.collapsed && $parent.snippet && $parent.has_content" class="definition_snippet">
-    <span class="diamond" v-if="group_list.length"> ❖ </span>{{$parent.snippet}}
-    </span>                
+    <span v-if="!lemma_groups[1] && $parent.collapsed && $parent.snippet && $parent.has_content" class="definition_snippet">
+    <span class="diamond" v-if="lemma_group.description"> ❖ </span>{{$parent.snippet}}
+    </span> 
+
+    </div>
+
+                   
     <span v-if="$parent.collapsable" >
           <v-btn class="expand_icon" v-if="$parent.collapsed"
            text
@@ -126,37 +119,44 @@ export default {
     })
     return hgnos
     },
-    group_list: function() {
-      let self = this
-      return self.lemmas.map(lemma => {
-        var grp_collection = new Set()
-        var noun_grp_collection = new Set()
-        lemma.paradigm_info.forEach(function(grp){
-          if (grp.tags){
-            if(grp.tags[0] == 'NOUN') {
-              noun_grp_collection.add(grp.tags[1])
-            }else{
-              grp_collection.add(helpers.mapping[self.dictionary][grp.tags[0]])
+        group_list: function() {
+      return helpers.group_list(this.lemmas, this.dictionary)
+        },
+    lemma_groups: function() {
+      let groups
+      if (this.lemmas[0].paradigm_info[0] && this.lemmas[0].paradigm_info[0].tags[0] != 'NOUN' && this.lemmas[0].paradigm_info[0].tags[0] != 'EXPR') {
+         groups = [{description: helpers.mapping[this.dictionary][this.lemmas[0].paradigm_info[0].tags[0]], lemmas: this.lemmas}]
+      }
+      else if (this.lemmas[0].paradigm_info[0].tags[0] == 'NOUN') {
+          let genus_map  = {}
+          let self = this
+          this.lemmas.forEach(lemma =>{
+            let genera = new Set()
+            lemma.paradigm_info.forEach(paradigm => {
+              genera.add(paradigm.tags[1])
+            })
+            let genus_description = ""
+            if (genera.size == 3) {
+              genus_description += helpers.mapping[self.dictionary]['Masc'] + ', ' + helpers.mapping[self.dictionary]['Fem'] + ' eller ' + helpers.mapping[self.dictionary]['Neuter']
+            } else {
+              genus_description += Array.from(genera).map(code => helpers.mapping[self.dictionary][code]).sort().join(' eller ')
             }
-          }
-        })
-        
-        if (noun_grp_collection.size) {
-          let noun_grp_text = 'substantiv  '
-          if (noun_grp_collection.size == 3) {
-            noun_grp_text += helpers.mapping[self.dictionary]['Masc'] + ', ' + helpers.mapping[self.dictionary]['Fem'] + ' eller ' + helpers.mapping[self.dictionary]['Neuter']
-          } else {
-            noun_grp_text += Array.from(noun_grp_collection).map(code => helpers.mapping[self.dictionary][code]).sort().join(' eller ')
-          }
-          grp_collection.add(noun_grp_text)
-        }
-        return Array.from(grp_collection).join(' - ')
-      })
-    },
-    same_group_lemmas: function() {
-      return this.lemmas.filter((lemma, index) => {
-        return this.group_list[index] == this.group_list[0]
-      })
+            console.log("genus desc", genus_description)
+            
+            if (genus_map[genus_description]) {
+              genus_map[genus_description].push(lemma)
+            }
+            else {
+              genus_map[genus_description] = [lemma]
+            }
+
+          })
+          groups = Object.keys(genus_map).map(key => {
+            return {description: 'substantiv ' + key, lemmas: genus_map[key]}
+          })
+
+      }
+      return groups || [{lemmas: this.lemmas}]
     },
     inflection_classes: function() {
       let inf_classes = new Set()