ConvertAccounts.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. <template>
  2. <main>
  3. <h1>Convert accounts</h1>
  4. <hr/>
  5. <br/>
  6. <p>Select/deselect all:</p>
  7. <button class="button" v-for="version in versions" @click="toggleVersion(version)">{{version}}</button>
  8. <br/>
  9. <br/>
  10. <data-table ref="accounts-datatable"
  11. :fields="accountsFields"
  12. :sort-order="accountsSortOrder"
  13. :data="accountsLocalData"
  14. >
  15. <div slot="select-slot" slot-scope="props">
  16. <div tabindex="0" name="name" class="checkbox" @click="toggleCheckbox(props.data.accountId)" v-on:keyup.enter="toggleCheckbox(props.data.accountId)" v-on:keyup.space="toggleCheckbox(props.data.accountId)" :class="{ checked: selectedAccounts.indexOf(props.data.accountId) !== -1 }"></div>
  17. </div>
  18. <div slot="actions-slot" slot-scope="props">
  19. <router-link
  20. :to="`/convert/${props.data.accountId}`"
  21. class="button"
  22. >
  23. Convert account
  24. </router-link>
  25. </div>
  26. </data-table>
  27. <br/>
  28. <button @click="convertAccounts()" v-if="!convertingAccounts" class="button">Migrate accounts</button>
  29. <br/>
  30. <br/>
  31. <h1>Convert schemas</h1>
  32. <hr/>
  33. <br/>
  34. <select v-model="importConvertSchemaName">
  35. <option v-for="schema in schemasInDirectory" :value="schema">{{ schema }}</option>
  36. </select>
  37. <button @click="importConvertSchema()" class="button">Import convert schema</button>
  38. <br/>
  39. <br/>
  40. <data-table ref="convert-schema-datatable"
  41. :fields="convertSchemasFields"
  42. :sort-order="convertSchemasSortOrder"
  43. :data="convertSchemasLocalData"
  44. >
  45. <div slot="actions-slot" slot-scope="props">
  46. <router-link
  47. :to="`/convert/view/${props.data.schemaId}`"
  48. class="button"
  49. >
  50. View convert schema
  51. </router-link>
  52. </div>
  53. </data-table>
  54. </main>
  55. </template>
  56. <script>
  57. import io from "../../io.js";
  58. import DataTable from '../components/DataTable.vue';
  59. export default {
  60. components: { DataTable },
  61. data: () => {
  62. return {
  63. accounts: [],
  64. convertSchemas: [],
  65. versions: [],
  66. selectedAccounts: [],
  67. schemasInDirectory: [],
  68. convertingAccounts: false,
  69. accountsFields: [
  70. {
  71. name: "select-slot",
  72. displayName: ""
  73. },
  74. {
  75. name: "name",
  76. displayName: "Name"
  77. },
  78. {
  79. name: "version",
  80. displayName: "Version"
  81. },
  82. {
  83. name: "actions-slot",
  84. displayName: "Actions"
  85. }
  86. ],
  87. accountsSortOrder: [
  88. {
  89. field: "name",
  90. order: "desc"
  91. },
  92. {
  93. field: "version",
  94. order: "asc"
  95. }
  96. ],
  97. convertSchemasFields: [
  98. {
  99. name: "versionFrom",
  100. displayName: "Version from"
  101. },
  102. {
  103. name: "versionTo",
  104. displayName: "Version to"
  105. },
  106. {
  107. name: "actions-slot",
  108. displayName: "Actions"
  109. }
  110. ],
  111. convertSchemasSortOrder: [
  112. {
  113. field: "versionFrom",
  114. order: "asc"
  115. },
  116. {
  117. field: "versionTo",
  118. order: "asc"
  119. }
  120. ],
  121. importConvertSchemaName: ""
  122. }
  123. },
  124. computed: {
  125. accountsLocalData: function() {
  126. return this.accounts.map(account => {
  127. return {
  128. name: account.fields.name[0].name,
  129. version: account.version,
  130. accountId: account._id
  131. };
  132. });
  133. },
  134. convertSchemasLocalData: function() {
  135. return this.convertSchemas.map(schema => {
  136. return {
  137. versionFrom: schema.versionFrom,
  138. versionTo: schema.versionTo,
  139. schemaId: schema._id
  140. };
  141. });
  142. }
  143. },
  144. methods: {
  145. importConvertSchema() {
  146. this.socket.emit("convertSchema.import", this.importConvertSchemaName, (res) => {
  147. console.log(res);
  148. alert(res.status);
  149. });
  150. },
  151. convertAccounts() {
  152. this.convertingAccounts = true;
  153. this.socket.emit("account.migrateAccounts", this.selectedAccounts, (res) => {
  154. console.log(res);
  155. alert(`Migrated accounts. Successful: ${res.successful}; failed: ${res.failed}`);
  156. location.reload();
  157. });
  158. },
  159. toggleCheckbox(accountId) {
  160. const selectedAccountIndex = this.selectedAccounts.indexOf(accountId);
  161. if (selectedAccountIndex === -1) this.selectedAccounts.push(accountId);
  162. else this.selectedAccounts.splice(selectedAccountIndex, 1);
  163. },
  164. toggleVersion(version) {
  165. let allAccountsChecked = true;
  166. this.accounts.forEach(account => {
  167. if (account.version === version && this.selectedAccounts.indexOf(account._id) === -1) allAccountsChecked = false;
  168. });
  169. let toggleTo;
  170. if (allAccountsChecked) toggleTo = false;
  171. else toggleTo = true;
  172. this.accounts.forEach(account => {
  173. if (account.version === version) {
  174. let selectedAccountIndex = this.selectedAccounts.indexOf(account._id);
  175. if (toggleTo && selectedAccountIndex === -1) this.selectedAccounts.push(account._id);
  176. if (!toggleTo && selectedAccountIndex !== -1) this.selectedAccounts.splice(selectedAccountIndex, 1);
  177. }
  178. });
  179. }
  180. },
  181. mounted() {
  182. io.getSocket(socket => {
  183. this.socket = socket;
  184. socket.emit("account.getAll", res => {
  185. console.log(res);
  186. this.accounts = res.accounts;
  187. });
  188. socket.emit("accountSchema.getAllVersions", res => {
  189. this.versions = res.versions;
  190. });
  191. socket.emit("convertSchema.getAll", res => {
  192. this.convertSchemas = res.schemas;
  193. });
  194. socket.emit("convertSchema.listSchemasInDirectory", res => {
  195. this.schemasInDirectory = res.schemasInDirectory;
  196. });
  197. });
  198. }
  199. };
  200. </script>
  201. <style lang="scss" scoped>
  202. .checkbox {
  203. height: 32px;
  204. width: 32px;
  205. background-color: white;
  206. border: .5px #464646 solid;
  207. border-radius: 3px;
  208. cursor: pointer;
  209. position: relative;
  210. box-sizing: border-box;
  211. &.disabled {
  212. cursor:auto;
  213. }
  214. }
  215. .checkbox.checked::after {
  216. content: "";
  217. width: 26px;
  218. height: 26px;
  219. left: 2px;
  220. top: 2px;
  221. display: inline-block;
  222. position: absolute;
  223. border-radius: 3px;
  224. background-color: #69B862;
  225. }
  226. </style>