EditNews.vue 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. <template>
  2. <modal title="Edit News">
  3. <div slot="body">
  4. <label class="label">Title</label>
  5. <p class="control">
  6. <input
  7. v-model="$parent.editing.title"
  8. class="input"
  9. type="text"
  10. placeholder="News Title"
  11. autofocus
  12. />
  13. </p>
  14. <label class="label">Description</label>
  15. <p class="control">
  16. <input
  17. v-model="$parent.editing.description"
  18. class="input"
  19. type="text"
  20. placeholder="News Description"
  21. />
  22. </p>
  23. <div class="columns">
  24. <div class="column">
  25. <label class="label">Bugs</label>
  26. <p class="control has-addons">
  27. <input
  28. id="edit-bugs"
  29. class="input"
  30. type="text"
  31. placeholder="Bug"
  32. @keyup.enter="addChange('bugs')"
  33. />
  34. <a
  35. class="button is-info"
  36. href="#"
  37. @click="addChange('bugs')"
  38. >Add</a
  39. >
  40. </p>
  41. <span
  42. v-for="(bug, index) in $parent.editing.bugs"
  43. class="tag is-info"
  44. :key="index"
  45. >
  46. {{ bug }}
  47. <button
  48. class="delete is-info"
  49. @click="removeChange('bugs', index)"
  50. />
  51. </span>
  52. </div>
  53. <div class="column">
  54. <label class="label">Features</label>
  55. <p class="control has-addons">
  56. <input
  57. id="edit-features"
  58. class="input"
  59. type="text"
  60. placeholder="Feature"
  61. @keyup.enter="addChange('features')"
  62. />
  63. <a
  64. class="button is-info"
  65. href="#"
  66. @click="addChange('features')"
  67. >Add</a
  68. >
  69. </p>
  70. <span
  71. v-for="(feature, index) in $parent.editing.features"
  72. class="tag is-info"
  73. :key="index"
  74. >
  75. {{ feature }}
  76. <button
  77. class="delete is-info"
  78. @click="removeChange('features', index)"
  79. />
  80. </span>
  81. </div>
  82. </div>
  83. <div class="columns">
  84. <div class="column">
  85. <label class="label">Improvements</label>
  86. <p class="control has-addons">
  87. <input
  88. id="edit-improvements"
  89. class="input"
  90. type="text"
  91. placeholder="Improvement"
  92. @keyup.enter="addChange('improvements')"
  93. />
  94. <a
  95. class="button is-info"
  96. href="#"
  97. @click="addChange('improvements')"
  98. >Add</a
  99. >
  100. </p>
  101. <span
  102. v-for="(improvement, index) in $parent.editing
  103. .improvements"
  104. class="tag is-info"
  105. :key="index"
  106. >
  107. {{ improvement }}
  108. <button
  109. class="delete is-info"
  110. @click="removeChange('improvements', index)"
  111. />
  112. </span>
  113. </div>
  114. <div class="column">
  115. <label class="label">Upcoming</label>
  116. <p class="control has-addons">
  117. <input
  118. id="edit-upcoming"
  119. class="input"
  120. type="text"
  121. placeholder="Upcoming"
  122. @keyup.enter="addChange('upcoming')"
  123. />
  124. <a
  125. class="button is-info"
  126. href="#"
  127. @click="addChange('upcoming')"
  128. >Add</a
  129. >
  130. </p>
  131. <span
  132. v-for="(upcoming, index) in $parent.editing.upcoming"
  133. class="tag is-info"
  134. :key="index"
  135. >
  136. {{ upcoming }}
  137. <button
  138. class="delete is-info"
  139. @click="removeChange('upcoming', index)"
  140. />
  141. </span>
  142. </div>
  143. </div>
  144. </div>
  145. <div slot="footer">
  146. <button
  147. class="button is-success"
  148. @click="$parent.updateNews(false)"
  149. >
  150. <i class="material-icons save-changes">done</i>
  151. <span>&nbsp;Save</span>
  152. </button>
  153. <button class="button is-success" @click="$parent.updateNews(true)">
  154. <i class="material-icons save-changes">done</i>
  155. <span>&nbsp;Save and close</span>
  156. </button>
  157. <button
  158. class="button is-danger"
  159. @click="
  160. closeModal({
  161. sector: 'admin',
  162. modal: 'editNews'
  163. })
  164. "
  165. >
  166. <span>&nbsp;Close</span>
  167. </button>
  168. </div>
  169. </modal>
  170. </template>
  171. <script>
  172. import { mapActions } from "vuex";
  173. import { Toast } from "vue-roaster";
  174. import Modal from "./Modal.vue";
  175. export default {
  176. components: { Modal },
  177. methods: {
  178. addChange: function(type) {
  179. let change = document.getElementById(`edit-${type}`).value.trim();
  180. if (this.$parent.editing[type].indexOf(change) !== -1)
  181. return Toast.methods.addToast(`Tag already exists`, 3000);
  182. if (change) this.$parent.editing[type].push(change);
  183. else Toast.methods.addToast(`${type} cannot be empty`, 3000);
  184. document.getElementById(`edit-${type}`).value = "";
  185. },
  186. removeChange: function(type, index) {
  187. this.$parent.editing[type].splice(index, 1);
  188. },
  189. ...mapActions("modals", ["closeModal"])
  190. }
  191. };
  192. </script>
  193. <style lang="scss" scoped>
  194. input[type="range"] {
  195. -webkit-appearance: none;
  196. width: 100%;
  197. margin: 7.3px 0;
  198. }
  199. input[type="range"]:focus {
  200. outline: none;
  201. }
  202. input[type="range"]::-webkit-slider-runnable-track {
  203. width: 100%;
  204. height: 5.2px;
  205. cursor: pointer;
  206. box-shadow: 0;
  207. background: #c2c0c2;
  208. border-radius: 0;
  209. border: 0;
  210. }
  211. input[type="range"]::-webkit-slider-thumb {
  212. box-shadow: 0;
  213. border: 0;
  214. height: 19px;
  215. width: 19px;
  216. border-radius: 15px;
  217. background: #03a9f4;
  218. cursor: pointer;
  219. -webkit-appearance: none;
  220. margin-top: -6.5px;
  221. }
  222. input[type="range"]::-moz-range-track {
  223. width: 100%;
  224. height: 5.2px;
  225. cursor: pointer;
  226. box-shadow: 0;
  227. background: #c2c0c2;
  228. border-radius: 0;
  229. border: 0;
  230. }
  231. input[type="range"]::-moz-range-thumb {
  232. box-shadow: 0;
  233. border: 0;
  234. height: 19px;
  235. width: 19px;
  236. border-radius: 15px;
  237. background: #03a9f4;
  238. cursor: pointer;
  239. -webkit-appearance: none;
  240. margin-top: -6.5px;
  241. }
  242. input[type="range"]::-ms-track {
  243. width: 100%;
  244. height: 5.2px;
  245. cursor: pointer;
  246. box-shadow: 0;
  247. background: #c2c0c2;
  248. border-radius: 1.3px;
  249. }
  250. input[type="range"]::-ms-fill-lower {
  251. background: #c2c0c2;
  252. border: 0;
  253. border-radius: 0;
  254. box-shadow: 0;
  255. }
  256. input[type="range"]::-ms-fill-upper {
  257. background: #c2c0c2;
  258. border: 0;
  259. border-radius: 0;
  260. box-shadow: 0;
  261. }
  262. input[type="range"]::-ms-thumb {
  263. box-shadow: 0;
  264. border: 0;
  265. height: 15px;
  266. width: 15px;
  267. border-radius: 15px;
  268. background: #03a9f4;
  269. cursor: pointer;
  270. -webkit-appearance: none;
  271. margin-top: 1.5px;
  272. }
  273. .controls {
  274. display: flex;
  275. flex-direction: column;
  276. align-items: center;
  277. }
  278. .artist-genres {
  279. display: flex;
  280. justify-content: space-between;
  281. }
  282. #volumeSlider {
  283. margin-bottom: 15px;
  284. }
  285. .has-text-centered {
  286. padding: 10px;
  287. }
  288. .thumbnail-preview {
  289. display: flex;
  290. margin: 0 auto 25px auto;
  291. max-width: 200px;
  292. width: 100%;
  293. }
  294. .modal-card-body,
  295. .modal-card-foot {
  296. border-top: 0;
  297. }
  298. .label,
  299. .checkbox,
  300. h5 {
  301. font-weight: normal;
  302. }
  303. .video-container {
  304. display: flex;
  305. flex-direction: column;
  306. align-items: center;
  307. padding: 10px;
  308. iframe {
  309. pointer-events: none;
  310. }
  311. }
  312. .save-changes {
  313. color: #fff;
  314. }
  315. .tag:not(:last-child) {
  316. margin-right: 5px;
  317. }
  318. </style>