IssuesModal.vue 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <modal title='Report'>
  3. <div slot='body'>
  4. <article class="message">
  5. <div class="message-body">
  6. <strong>Song ID: </strong>{{ $parent.editing.songId }}<br/>
  7. <strong>Created By: </strong>{{ $parent.editing.createdBy }}<br/>
  8. <strong>Created At: </strong>{{ $parent.editing.createdAt }}<br/>
  9. <span v-if='$parent.editing.description'><strong>Description: </strong>{{ $parent.editing.description }}</span>
  10. </div>
  11. </article>
  12. <table class='table is-narrow' v-if='$parent.editing.issues.length > 0'>
  13. <thead>
  14. <tr>
  15. <td>Issue</td>
  16. <td>Reasons</td>
  17. </tr>
  18. </thead>
  19. <tbody>
  20. <tr v-for='(index, issue) in $parent.editing.issues' track-by='$index'>
  21. <td>
  22. <span>{{ issue.name }}</span>
  23. </td>
  24. <td>
  25. <span>{{ issue.reasons }}</span>
  26. </td>
  27. </tr>
  28. </tbody>
  29. </table>
  30. </div>
  31. <div slot='footer'>
  32. <a class='button is-primary' @click='$parent.resolve($parent.editing._id)' href='#'>
  33. <span>Resolve</span>
  34. </a>
  35. <a class='button is-danger' @click='$parent.toggleModal()' href='#'>
  36. <span>Cancel</span>
  37. </a>
  38. </div>
  39. </modal>
  40. </template>
  41. <script>
  42. import Modal from './Modal.vue';
  43. export default {
  44. components: { Modal },
  45. events: {
  46. closeModal: function () {
  47. this.$parent.modals.report = false;
  48. }
  49. }
  50. }
  51. </script>