feat(resources): add a contact page to display members of European Bodies

src/fontawesome.js

@@ -63,6 +63,7 @@ import { faHistory } from '@fortawesome/free-solid-svg-icons/faHistory'
 import { faUmbrellaBeach } from '@fortawesome/free-solid-svg-icons/faUmbrellaBeach'
 import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay'
 import { faStop } from '@fortawesome/free-solid-svg-icons/faStop'
+import { faAddressBook } from '@fortawesome/free-solid-svg-icons/faAddressBook'
 import { faBookReader } from '@fortawesome/free-solid-svg-icons/faBookReader'
 
 library.add(faTimesCircle)
@@ -127,5 +128,6 @@ library.add(faUmbrellaBeach)
 library.add(faPlay)
 library.add(faStop)
 library.add(faBookReader)
+library.add(faAddressBook)
 
 export default FontAwesomeIcon

src/menu.json

@@ -228,6 +228,11 @@
         "label": "KMS",
         "icon": "book-reader"
       },
+      {
+        "name": "oms.contact",
+        "label": "Contact",
+        "icon": "address-book"
+      },
       {
         "name": "oms.helpdesk",
         "link": "https://myaegee.atlassian.net/servicedesk/customer/portals",

src/router/routes.js

@@ -859,6 +859,14 @@ module.exports = [
     },
     component: 'static/Resources'
   },
+  {
+    name: 'oms.contact',
+    path: '/contact',
+    meta: {
+      label: 'Contact'
+    },
+    component: 'static/Contact'
+  },
   /* Discounts distribution */
   {
     name: 'oms.discounts',

src/views/core/bodies/Single.vue

@@ -255,7 +255,8 @@ export default {
         address: null,
         postal_address: null,
         shadow_circle: null,
-        shadow_circle_id: null
+        shadow_circle_id: null,
+        members: null
       },
       boards: [],
       isLoading: false,

src/views/static/Contact.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="tile is-ancestor contact">
+    <div class="tile is-parent is-vertical">
+      <div class="tile is-child">
+        <div class="title">Get in contact with a European Body</div>
+
+        <b-table :data="bodies" :loading="isLoading" narrowed>
+          <template slot-scope="props">
+
+            <b-table-column field="name" label="Body name">
+              <router-link :to="{ name: 'oms.bodies.view', params: { id: props.row.id } }">{{ props.row.name }}</router-link>
+            </b-table-column>
+
+            <b-table-column field="email" label="Email">
+              {{ props.row.email }}
+            </b-table-column>
+
+            <b-table-column field="members" label="Members">
+              {{ props.row.members }}
+            </b-table-column>
+
+          </template>
+
+          <template slot="empty">
+            <empty-table-stub />
+          </template>
+        </b-table>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import constants from '../../constants.js'
+
+export default {
+  name: 'Contact',
+  data () {
+    return {
+      constants,
+      bodies: [],
+      isLoading: false
+    }
+  },
+  computed: mapGetters(['services']),
+  mounted () {
+    this.isLoading = true
+    this.fetchData()
+  },
+  methods: {
+    async fetchData () {
+      // TODO: Ask CD what types of bodies they want to have in the address book
+      try {
+        const response = await this.axios.get(this.services['core'] + '/bodies')
+        // TODO: Move filter to the backend by changing the request
+        const bodies = response.data.data.filter(a => !['antenna', 'contact antenna', 'contact', 'partner', 'other'].includes(a.type))
+
+        // Fetch members for each body
+        const bodiesWithMembers = await Promise.all(bodies.map(async (body) => {
+          const membersResponse = await this.axios.get(this.services['core'] + '/bodies/' + body.id + '/members')
+          const members = membersResponse.data.data.map((member) => member.user.first_name + ' ' + member.user.last_name)
+          body.members = members.join(', ')
+          return body
+        }))
+
+        this.bodies = bodiesWithMembers
+      } catch (err) {
+        this.$root.showError('Could not fetch bodies or members', err)
+      } finally {
+        this.isLoading = false
+      }
+    }
+  }
+}
+
+</script>

src/views/statutory/UploadMembersList.vue

@@ -247,8 +247,7 @@ export default {
         return this.$root.showError('Memberslist should contain at least 1 member.')
       }
 
-      for (let index = 0; index < this.memberslist.members.length; index++) {
-        const member = this.memberslist.members[index]
+      for (const [index, member] of this.memberslist.members.entries()) {
         if (typeof member.fee !== 'number') {
           return this.$root.showError(`Please set the fee for member number ${index + 1}.`)
         }