InvitedRegistrationPanel.vue

<template>
<b-tab :title="'Invited (' + registrations.length + ')'" :title-link-class="{ 'd-none': registrations.length === 0 }">
  <table class="table b-table table-striped table-hover" v-if="registrations">
    <thead>
      <tr>
        <th>Email</th>
        <th>Permission</th>
        <th>Submitted at</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(reg, index) in registrations" v-bind:key="index">
        <td>{{reg.email}}</td>
        <td>{{reg.permission}}</td>
        <td>{{reg.creationTime}}</td>
        <td>
          <a href="#" v-on:click.stop="openConfirmDeleteInvitedModal(reg)" class="text-danger" title="Remove permission">
            <font-awesome-icon icon="trash"></font-awesome-icon>
          </a>
        </td>
      </tr>
    </tbody>
  </table>
  <ConfirmDeleteInvitedModal ref="confirmDeleteInvitedModal" />
</b-tab>
</template>

<script>
import ConfirmDeleteInvitedModal from './modals/ConfirmDeleteInvitedModal.vue';

export default {
  name: 'InvitedRegistrationPanel',
  components: {
    ConfirmDeleteInvitedModal
  },
  computed: {
    registrations() {
      return this.$store.state.model.invitedRegistrations === null ? [] : this.$store.state.model.invitedRegistrations;
    }
  },
  methods: {
    openConfirmDeleteInvitedModal(reg) {
      let breadcrumbs = this.$store.state.model.breadcrumbs;
      let currentGroupId = breadcrumbs[breadcrumbs.length - 1].groupId;
      this.$refs.confirmDeleteInvitedModal.openConfirmDeleteInvitedModal(reg, currentGroupId);
    }
  }
}
</script>