Accounts.vue 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <main>
  3. <h1>Accounts</h1>
  4. <hr/>
  5. <br/>
  6. <router-link
  7. to="/accounts/add"
  8. class="button"
  9. >
  10. Add account
  11. </router-link>
  12. <br/>
  13. <br/>
  14. <data-table ref="datatable"
  15. :fields="fields"
  16. :sort-order="sortOrder"
  17. :data="localData"
  18. >
  19. <div slot="actions-slot" slot-scope="props">
  20. <router-link
  21. :to="`/accounts/edit/${props.data.accountId}`"
  22. class="button"
  23. >
  24. Edit account
  25. </router-link>
  26. </div>
  27. </data-table>
  28. </main>
  29. </template>
  30. <script>
  31. import io from "../../io.js";
  32. import DataTable from '../components/DataTable.vue';
  33. export default {
  34. components: { DataTable },
  35. data: () => {
  36. return {
  37. accounts: [],
  38. fields: [
  39. {
  40. name: "name",
  41. displayName: "Name"
  42. },
  43. {
  44. name: "domain",
  45. displayName: "Domain(s)"
  46. },
  47. {
  48. name: "email",
  49. displayName: "Email(s)"
  50. },
  51. {
  52. name: "complete",
  53. displayName: "% complete"
  54. },
  55. {
  56. name: "actions-slot",
  57. displayName: "Actions"
  58. }
  59. ],
  60. sortOrder: [
  61. {
  62. field: "name",
  63. order: "asc"
  64. }
  65. ]
  66. }
  67. },
  68. computed: {
  69. localData: function() {
  70. return this.accounts.map(account => {
  71. const completePercentage = (Object.keys(account.fields).filter(fieldName => account.fields[fieldName].length >= 1).length / Object.keys(account.fields).length) * 100;
  72. return {
  73. name: account.fields.name[0].name,
  74. domain: account.fields.domain.map(domain => domain.domain).join(", "),
  75. email: account.fields.email.map(email => email.email).join(", "),
  76. complete: `${(completePercentage % 1 > 0) ? completePercentage.toFixed(2) : completePercentage}%`,
  77. accountId: account._id
  78. };
  79. });
  80. }
  81. },
  82. methods: {
  83. },
  84. mounted() {
  85. io.getSocket(socket => {
  86. this.socket = socket;
  87. socket.emit("account.getAll", res => {
  88. console.log(res);
  89. this.accounts = res.accounts;
  90. });
  91. });
  92. }
  93. };
  94. </script>
  95. <style lang="scss" scoped>
  96. </style>