Request form component

front/src/components/library/Home.vue

@@ -4,7 +4,7 @@
       <search :autofocus="true"></search>
     </div>
     <div class="ui vertical stripe segment">
-      <div class="ui stackable two column grid">
+      <div class="ui stackable three column grid">
         <div class="column">
           <h2 class="ui header">Latest artists</h2>
           <div :class="['ui', {'active': isLoadingArtists}, 'inline', 'loader']"></div>
@@ -18,6 +18,10 @@
           <radio-card :type="'random'"></radio-card>
           <radio-card :type="'less-listened'"></radio-card>
         </div>
+        <div class="column">
+          <h2 class="ui header">Music requests</h2>
+          <request-form></request-form>
+        </div>
       </div>
     </div>
   </div>
@@ -30,6 +34,7 @@ import backend from '@/audio/backend'
 import logger from '@/logging'
 import ArtistCard from '@/components/audio/artist/Card'
 import RadioCard from '@/components/radios/Card'
+import RequestForm from '@/components/requests/Form'
 
 const ARTISTS_URL = 'artists/'
 
@@ -38,7 +43,8 @@ export default {
   components: {
     Search,
     ArtistCard,
-    RadioCard
+    RadioCard,
+    RequestForm
   },
   data () {
     return {

front/src/components/requests/Form.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <form v-if="!over" class="ui form" @submit.prevent="submit">
+      <p>Something's missing in the library? Let us know what you would like to listen!</p>
+      <div class="required field">
+        <label>Artist name</label>
+        <input v-model="currentArtistName" placeholder="The Beatles, Mickael Jackson…" required>
+      </div>
+      <div class="field">
+        <label>Albums</label>
+        <p>Leave this field empty if you're requesting the whole discography.</p>
+        <input v-model="currentAlbums" placeholder="The White Album, Thriller…">
+      </div>
+      <div class="field">
+        <label>Comment</label>
+        <textarea v-model="currentComment" rows="3" placeholder="Use this comment box to add details to your request if needed"></textarea>
+      </div>
+      <button class="ui submit button" type="submit">Submit</button>
+    </form>
+    <div v-else class="ui success message">
+      <div class="header">Request submitted!</div>
+      <p>We've received your request, you'll get some groove soon ;)</p>
+      <button @click="reset" class="ui button">Submit another request</button>
+    </div>
+    <div v-if="requests.length > 0">
+      <div class="ui divider"></div>
+      <h3 class="ui header">Pending requests</h3>
+      <div class="ui list">
+        <div v-for="request in requests" class="item">
+          <div class="content">
+            <div class="header">{{ request.artist_name }}</div>
+            <div v-if="request.albums" class="description">{{ truncate(request.albums, 50) }}</div>
+            <div v-if="request.comment" class="description">{{ truncate(request.comment, 50) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import $ from 'jquery'
+import axios from 'axios'
+
+import logger from '@/logging'
+
+export default {
+  props: {
+    defaultArtistName: {type: String, default: ''},
+    defaultAlbums: {type: String, default: ''},
+    defaultComment: {type: String, default: ''}
+  },
+  created () {
+    this.fetchRequests()
+  },
+  mounted () {
+    $('.ui.radio.checkbox').checkbox()
+  },
+  data () {
+    return {
+      currentArtistName: this.defaultArtistName,
+      currentAlbums: this.defaultAlbums,
+      currentComment: this.defaultComment,
+      isLoading: false,
+      over: false,
+      requests: []
+    }
+  },
+  methods: {
+    fetchRequests () {
+      let self = this
+      let url = 'requests/import-requests/'
+      axios.get(url, {}).then((response) => {
+        self.requests = response.data.results
+      })
+    },
+    submit () {
+      let self = this
+      this.isLoading = true
+      let url = 'requests/import-requests/'
+      let payload = {
+        artist_name: this.currentArtistName,
+        albums: this.currentAlbums,
+        comment: this.currentComment
+      }
+      axios.post(url, payload).then((response) => {
+        logger.default.info('Submitted request!')
+        self.isLoading = false
+        self.over = true
+        self.requests.unshift(response.data)
+      }, (response) => {
+        logger.default.error('error while submitting request')
+        self.isLoading = false
+      })
+    },
+    reset () {
+      this.over = false
+      this.currentArtistName = ''
+      this.currentAlbums = ''
+      this.currentComment = ''
+    },
+    truncate (string, length) {
+      if (string.length > length) {
+        return string.substring(0, length) + '…'
+      }
+      return string
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>