Agrupar últimos eventos iguais

src/components/card/expanded/ComposicaoLink.vue

@@ -55,7 +55,6 @@ export default {
     ...mapState({
       orgao: state => state.comissoes.orgao
     })
-
   },
   async mounted () {
     await this.getComissao({

src/components/card/expanded/EventosInfo.vue

@@ -1,29 +1,33 @@
 <template>
-    <el-collapse v-if="formattedEventos.length" v-model="activeNames">
-      <el-collapse-item name="1">
-        <template slot="title">
-          <span class="title">Últimos Eventos</span>
-        </template>
-        <table class="eventos-tram">
-          <tr v-for="(evento, index) in formattedEventos" :key="index">
-            <td class="date-field">
-              <el-tooltip :content="evento.data" placement="bottom">
-                <div>{{evento.dataDiff}}</div>
-              </el-tooltip>
-              <div class="sigla-local">{{evento.sigla}}</div>
-            </td>
-            <td>
-              <div class="evento-title">{{evento.title}}</div>
-              <div :class="{clickable: evento.collapsible}"
-                   @click="toggleCollapseDescription(index)">
-                {{evento.texto}}
-                <span v-if="!isExpanded(index) && evento.collapsible" class="el-icon-circle-plus-outline"></span>
-              </div>
-            </td>
-          </tr>
-        </table>
-      </el-collapse-item>
-    </el-collapse>
+  <el-collapse v-if="formattedEventos.length" v-model="activeNames">
+    <el-collapse-item name="1">
+      <template slot="title">
+        <span class="title">Últimos Eventos</span>
+      </template>
+      <table class="eventos-tram">
+        <div v-for="(eventos, key) in groupEventos" :key="key">
+          <td class="date-field">
+            <el-tooltip :content="eventos['evento'][0].data" placement="bottom">
+              <div>{{eventos['evento'][0].dataDiff}}</div>
+            </el-tooltip>
+            <tr class="sigla-local">{{eventos['evento'][0].sigla}}</tr>
+          </td>
+          <td>
+            <tr
+              v-if="eventos['evento'].length > 1"
+              class="evento-title"
+            >{{eventos['evento'].length}} eventos de {{eventos['evento'][0].title}}</tr>
+            <tr v-else class="evento-title">{{eventos['evento'][0].title}}</tr>
+            <tr
+              :class="{clickable: eventos['evento'][0].collapsible}"
+              @click="toggleCollapseDescription(key)"
+            >{{eventos['evento'][0].texto}}</tr>
+            <span v-if="!isExpanded(key) && eventos.collapsible" class="el-icon-circle-plus-outline"></span>
+          </td>
+        </div>
+      </table>
+    </el-collapse-item>
+  </el-collapse>
 </template>
 
 <script>
@@ -58,16 +62,42 @@ export default {
   },
   computed: {
     formattedEventos () {
-      return (this.eventosTramitacao[this.id] || []).map((eventoTram, index) => {
-        return {
-          data: this.formatDate(eventoTram.data),
-          dataDiff: this.formatDateDifference(eventoTram.data),
-          sigla: eventoTram.sigla_local === 'nan' ? '' : eventoTram.sigla_local,
-          title: eventoTram.titulo_evento,
-          texto: this.formatTextoTramitacao(eventoTram.texto_tramitacao, index, this.MAX_TEXT_LENGTH, this.TEXT_TO_BE_SHOWED_LENGTH),
-          collapsible: eventoTram.texto_tramitacao.length > this.MAX_TEXT_LENGTH
+      return (this.eventosTramitacao[this.id] || []).map(
+        (eventoTram, index) => {
+          return {
+            data: this.formatDate(eventoTram.data),
+            dataDiff: this.formatDateDifference(eventoTram.data),
+            sigla:
+              eventoTram.sigla_local === 'nan' ? '' : eventoTram.sigla_local,
+            title: eventoTram.titulo_evento,
+            texto: this.formatTextoTramitacao(
+              eventoTram.texto_tramitacao,
+              index, this.MAX_TEXT_LENGTH, this.TEXT_TO_BE_SHOWED_LENGTH
+            ),
+            collapsible:
+              eventoTram.texto_tramitacao.length > this.MAX_TEXT_LENGTH
+          }
         }
+      )
+    },
+    groupEventos () {
+      let groups = {}
+      let groupName
+      this.formattedEventos.forEach(event => {
+        groupName = event.data.concat(
+          event.title,
+          event.texto
+        )
+        if (!groups[groupName]) {
+          groups[groupName] = []
+        }
+        groups[groupName].push(event)
       })
+      let myArray = []
+      for (groupName in groups) {
+        myArray.push({ group: groupName, evento: groups[groupName] })
+      }
+      return myArray
     },
     ...mapState({
       eventosTramitacao: state => state.eventosTramitacao.eventosDict
@@ -92,10 +122,16 @@ export default {
 
       if (differenceInDays > 365) {
         const differenceInYears = Math.floor(differenceInDays / 365)
-        dateInTextFormat = differenceInYears === 1 ? 'Há ± 1 ano' : `Há ± ${differenceInYears} anos`
+        dateInTextFormat =
+          differenceInYears === 1
+            ? 'Há ± 1 ano'
+            : `Há ± ${differenceInYears} anos`
       } else if (differenceInDays > 30) {
         const differenceInMonths = Math.floor(differenceInDays / 30)
-        dateInTextFormat = differenceInMonths === 1 ? 'Há ± 1 mês' : `Há ± ${differenceInMonths} meses`
+        dateInTextFormat =
+          differenceInMonths === 1
+            ? 'Há ± 1 mês'
+            : `Há ± ${differenceInMonths} meses`
       } else if (differenceInDays === 0) {
         dateInTextFormat = 'Hoje'
       } else if (differenceInDays === 1) {
@@ -119,29 +155,31 @@ export default {
 <style scoped lang='scss'>
 @import "@/base.scss";
 .el-collapse {
-  margin-top: 1rem
+  margin-top: 1rem;
 }
 .title {
-  font-size: .97rem;
+  font-size: 0.97rem;
 }
 .eventos-tram {
   font-size: 10pt;
-  text-align: center;
 }
 table {
   border-collapse: collapse;
   width: 100%;
 }
-th, td {
-  padding: .5rem;
+th,
+td {
+  padding: 0.5rem;
   text-align: left;
   vertical-align: top;
 }
 .date-field {
+  width: 100px;
   white-space: nowrap;
   padding-right: 2rem;
 }
 .evento-title {
+  width: 100%;
   font-weight: bold;
   text-transform: capitalize;
 }