Create.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <modal title="Create Playlist">
  3. <template v-slot:body>
  4. <p class="control is-expanded">
  5. <input
  6. v-model="playlist.displayName"
  7. class="input"
  8. type="text"
  9. placeholder="Playlist Display Name"
  10. autofocus
  11. @keyup.enter="createPlaylist()"
  12. />
  13. </p>
  14. </template>
  15. <template v-slot:footer>
  16. <a class="button is-info" v-on:click="createPlaylist()"
  17. >Create Playlist</a
  18. >
  19. </template>
  20. </modal>
  21. </template>
  22. <script>
  23. import { mapActions } from "vuex";
  24. import { Toast } from "vue-roaster";
  25. import Modal from "../Modal.vue";
  26. import io from "../../../io";
  27. import validation from "../../../validation";
  28. export default {
  29. components: { Modal },
  30. data() {
  31. return {
  32. playlist: {
  33. displayName: null,
  34. songs: [],
  35. createdBy: this.$parent.$parent.username,
  36. createdAt: Date.now()
  37. }
  38. };
  39. },
  40. mounted() {
  41. const _this = this;
  42. io.getSocket(socket => {
  43. _this.socket = socket;
  44. });
  45. },
  46. methods: {
  47. createPlaylist() {
  48. const { displayName } = this.playlist;
  49. if (!validation.isLength(displayName, 2, 32))
  50. return Toast.methods.addToast(
  51. "Display name must have between 2 and 32 characters.",
  52. 8000
  53. );
  54. if (!validation.regex.azAZ09_.test(displayName))
  55. return Toast.methods.addToast(
  56. "Invalid display name format. Allowed characters: a-z, A-Z, 0-9 and _.",
  57. 8000
  58. );
  59. return this.socket.emit("playlists.create", this.playlist, res => {
  60. Toast.methods.addToast(res.message, 3000);
  61. if (res.status === "success") {
  62. this.closeModal({
  63. sector: "station",
  64. modal: "createPlaylist"
  65. });
  66. this.editPlaylist(res.data._id);
  67. this.openModal({
  68. sector: "station",
  69. modal: "editPlaylist"
  70. });
  71. }
  72. });
  73. },
  74. ...mapActions("modals", ["closeModal", "openModal"]),
  75. ...mapActions("user/playlists", ["editPlaylist"])
  76. }
  77. };
  78. </script>
  79. <style lang="scss" scoped>
  80. .menu {
  81. padding: 0 20px;
  82. }
  83. .menu-list li {
  84. display: flex;
  85. justify-content: space-between;
  86. }
  87. .menu-list a:hover {
  88. color: #000 !important;
  89. }
  90. li a {
  91. display: flex;
  92. align-items: center;
  93. }
  94. .controls {
  95. display: flex;
  96. a {
  97. display: flex;
  98. align-items: center;
  99. }
  100. }
  101. .table {
  102. margin-bottom: 0;
  103. }
  104. h5 {
  105. padding: 20px 0;
  106. }
  107. </style>