Group projects by prefix in project list

src/components/Corpus/List.vue

@@ -15,14 +15,22 @@
         <th>Created</th>
       </tr>
     </thead>
-    <tbody>
-      <Row v-for="corpus in filterCorpora(corpora)" :key="corpus.id" :corpus-id="corpus.id" />
+    <tbody v-for="[groupName, groupCorpora] in groupedCorpora" :key="groupName" :class="{ 'indent': grouped(groupName, groupCorpora) }">
+      <tr class="group-title" v-if="grouped(groupName, groupCorpora)">
+        <th colspan="4">{{ groupName }}</th>
+      </tr>
+      <Row
+        v-for="corpus in groupCorpora"
+        :key="corpus.id"
+        :corpus-id="corpus.id"
+      />
     </tbody>
   </table>
 </template>
 
 <script>
 import Row from '@/components/Corpus/Row'
+import { groupBy } from 'lodash'
 export default {
   props: {
     corpora: {
@@ -36,19 +44,58 @@ export default {
   data: () => ({
     nameFilter: ''
   }),
+  computed: {
+    groupedCorpora () {
+      if (!this.corpora) return {}
+      /* if there is no | the prefix is just the corpus name */
+      return Object.entries(groupBy(Object.values(this.corpora), corpus => corpus.name.split('|')[0].trim()))
+    }
+  },
   methods: {
     filterCorpora (projects) {
       if (!this.nameFilter) {
         return Object.values(projects)
       }
       return Object.values(projects).filter(corpus => corpus.name.toLowerCase().includes(this.nameFilter.toLowerCase()))
+    },
+    grouped (name, corpora) {
+      return !(corpora.length === 1 && name === corpora[0].name)
     }
   }
 }
 </script>
 
-<style scoped>
+<style lang="scss">
 .th-name-20 {
   width: 20%;
 }
+
+tr {
+  /* Apply border on all TRs to avoid white space on
+     indented lines when applied on TDs */
+  border-bottom: 1px solid hsl(0deg, 0%, 86%);
+}
+
+tbody.indent {
+  tr.group-title{
+
+    /* Set larger height to bring space between groups */
+    height: 3.5em;
+    th {
+      vertical-align: bottom;
+    }
+  }
+
+  /* Hack to bring space below the groups */
+  tr:last-child {
+    border-bottom: 0.5em solid transparent;
+  }
+
+  /* Add horizontal padding on the corpus title
+     without affecting the other line elements */
+  tr td:first-child {
+    padding-left: 2em;
+    padding-right: -2em;
+  }
+}
 </style>