News.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. <template>
  2. <div class='container'>
  3. <table class='table is-striped'>
  4. <thead>
  5. <tr>
  6. <td>Title</td>
  7. <td>Description</td>
  8. <td>Bugs</td>
  9. <td>Features</td>
  10. <td>Improvements</td>
  11. <td>Upcoming</td>
  12. <td>Options</td>
  13. </tr>
  14. </thead>
  15. <tbody>
  16. <tr v-for='(index, news) in news' track-by='$index'>
  17. <td>
  18. <strong>{{ news.title }}</strong>
  19. </td>
  20. <td>{{ news.description }}</td>
  21. <td>{{ news.bugs.join(', ') }}</td>
  22. <td>{{ news.features.join(', ') }}</td>
  23. <td>{{ news.improvements.join(', ') }}</td>
  24. <td>{{ news.upcoming.join(', ') }}</td>
  25. <td>
  26. <button class='button is-primary' @click='editNews(news)'>Edit</button>
  27. <button class='button is-danger' @click='removeNews(news)'>Remove</button>
  28. </td>
  29. </tr>
  30. </tbody>
  31. </table>
  32. <div class='card is-fullwidth'>
  33. <header class='card-header'>
  34. <p class='card-header-title'>Create News</p>
  35. </header>
  36. <div class='card-content'>
  37. <div class='content'>
  38. <label class='label'>Title & Description</label>
  39. <div class='control is-horizontal'>
  40. <div class='control is-grouped'>
  41. <p class='control is-expanded'>
  42. <input class='input' type='text' placeholder='Title' v-model='creating.title'>
  43. </p>
  44. <p class='control is-expanded'>
  45. <input class='input' type='text' placeholder='Short description' v-model='creating.description'>
  46. </p>
  47. </div>
  48. </div>
  49. <div class="columns">
  50. <div class="column">
  51. <label class='label'>Bugs</label>
  52. <p class='control has-addons'>
  53. <input class='input' id='new-bugs' type='text' placeholder='Bug' v-on:keyup.enter='addChange("bugs")'>
  54. <a class='button is-info' href='#' @click='addChange("bugs")'>Add</a>
  55. </p>
  56. <span class='tag is-info' v-for='(index, bug) in creating.bugs' track-by='$index'>
  57. {{ bug }}
  58. <button class='delete is-info' @click='removeChange("bugs", index)'></button>
  59. </span>
  60. </div>
  61. <div class="column">
  62. <label class='label'>Features</label>
  63. <p class='control has-addons'>
  64. <input class='input' id='new-features' type='text' placeholder='Feature' v-on:keyup.enter='addChange("features")'>
  65. <a class='button is-info' href='#' @click='addChange("features")'>Add</a>
  66. </p>
  67. <span class='tag is-info' v-for='(index, feature) in creating.features' track-by='$index'>
  68. {{ feature }}
  69. <button class='delete is-info' @click='removeChange("features", index)'></button>
  70. </span>
  71. </div>
  72. </div>
  73. <div class="columns">
  74. <div class="column">
  75. <label class='label'>Improvements</label>
  76. <p class='control has-addons'>
  77. <input class='input' id='new-improvements' type='text' placeholder='Improvement' v-on:keyup.enter='addChange("improvements")'>
  78. <a class='button is-info' href='#' @click='addChange("improvements")'>Add</a>
  79. </p>
  80. <span class='tag is-info' v-for='(index, improvement) in creating.improvements' track-by='$index'>
  81. {{ improvement }}
  82. <button class='delete is-info' @click='removeChange("improvements", index)'></button>
  83. </span>
  84. </div>
  85. <div class="column">
  86. <label class='label'>Upcoming</label>
  87. <p class='control has-addons'>
  88. <input class='input' id='new-upcoming' type='text' placeholder='Upcoming' v-on:keyup.enter='addChange("upcoming")'>
  89. <a class='button is-info' href='#' @click='addChange("upcoming")'>Add</a>
  90. </p>
  91. <span class='tag is-info' v-for='(index, upcoming) in creating.upcoming' track-by='$index'>
  92. {{ upcoming }}
  93. <button class='delete is-info' @click='removeChange("upcoming", index)'></button>
  94. </span>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. <footer class='card-footer'>
  100. <a class='card-footer-item' @click='createNews()' href='#'>Create</a>
  101. </footer>
  102. </div>
  103. </div>
  104. <edit-news v-if='modals.editNews'></edit-news>
  105. </template>
  106. <script>
  107. import { Toast } from 'vue-roaster';
  108. import io from '../../io';
  109. import EditNews from '../Modals/EditNews.vue';
  110. export default {
  111. components: { EditNews },
  112. data() {
  113. return {
  114. modals: { editNews: false },
  115. news: [],
  116. creating: {
  117. title: '',
  118. description: '',
  119. bugs: [],
  120. features: [],
  121. improvements: [],
  122. upcoming: []
  123. },
  124. editing: {}
  125. }
  126. },
  127. methods: {
  128. toggleModal: function () {
  129. this.modals.editNews = !this.modals.editNews;
  130. },
  131. createNews: function () {
  132. let _this = this;
  133. let { creating: { bugs, features, improvements, upcoming } } = this;
  134. if (this.creating.title === '') return Toast.methods.addToast('Field (Title) cannot be empty', 3000);
  135. if (this.creating.description === '') return Toast.methods.addToast('Field (Description) cannot be empty', 3000);
  136. if (
  137. bugs.length <= 0 && features.length <= 0 &&
  138. improvements.length <= 0 && upcoming.length <= 0
  139. ) return Toast.methods.addToast('You must have at least one News Item', 3000);
  140. _this.socket.emit('news.create', _this.creating, result => {
  141. Toast.methods.addToast(result.message, 4000);
  142. if (result.status == 'success') _this.creating = {
  143. title: '',
  144. description: '',
  145. bugs: [],
  146. features: [],
  147. improvements: [],
  148. upcoming: []
  149. }
  150. });
  151. },
  152. removeNews: function (news) {
  153. this.socket.emit('news.remove', news, res => {
  154. Toast.methods.addToast(res.message, 8000);
  155. });
  156. },
  157. editNews: function (news) {
  158. this.editing = news;
  159. this.toggleModal();
  160. },
  161. updateNews: function (close) {
  162. let _this = this;
  163. this.socket.emit('news.update', _this.editing._id, _this.editing, res => {
  164. Toast.methods.addToast(res.message, 4000);
  165. if (res.status === 'success') {
  166. if (close) _this.toggleModal();
  167. }
  168. });
  169. },
  170. addChange: function (type) {
  171. let change = $(`#new-${type}`).val().trim();
  172. if (this.creating[type].indexOf(change) !== -1) return Toast.methods.addToast(`Tag already exists`, 3000);
  173. if (change) this.creating[type].push(change);
  174. else Toast.methods.addToast(`${type} cannot be empty`, 3000);
  175. },
  176. removeChange: function (type, index) {
  177. this.creating[type].splice(index, 1);
  178. },
  179. init: function () {
  180. this.socket.emit('apis.joinAdminRoom', 'news', data => {});
  181. }
  182. },
  183. ready: function () {
  184. let _this = this;
  185. io.getSocket((socket) => {
  186. _this.socket = socket;
  187. _this.socket.emit('news.index', result => {
  188. _this.news = result.data;
  189. });
  190. _this.socket.on('event:admin.news.created', news => {
  191. _this.news.unshift(news);
  192. });
  193. _this.socket.on('event:admin.news.removed', news => {
  194. _this.news = _this.news.filter(item => item._id !== news._id);
  195. });
  196. if (_this.socket.connected) _this.init();
  197. io.onConnect(() => {
  198. _this.init();
  199. });
  200. });
  201. }
  202. }
  203. </script>
  204. <style lang='scss' scoped>
  205. .tag:not(:last-child) { margin-right: 5px; }
  206. td { vertical-align: middle; }
  207. .is-info:focus { background-color: #0398db; }
  208. .card-footer-item { color: #03A9F4; }
  209. </style>