Skip to content
Snippets Groups Projects
Form.vue 5.18 KiB
Newer Older
  • Learn to ignore specific revisions
  • <template>
      <form class="ui form" @submit.prevent="submit">
    
        <p v-if="!library"><translate translate-context="Content/Library/Paragraph">Libraries help you organize and share your music collections. You can upload your own music collection to Funkwhale and share it with your friends and family.</translate></p>
    
        <div v-if="errors.length > 0" role="alert" class="ui negative message">
    
          <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error</translate></h4>
    
          <ul class="list">
            <li v-for="error in errors">{{ error }}</li>
          </ul>
        </div>
        <div class="required field">
    
          <label for="current-name"><translate translate-context="*/*/*/Noun">Name</translate></label>
          <input id="current-name" name="name" v-model="currentName" :placeholder="labels.namePlaceholder" required maxlength="100">
    
        </div>
        <div class="field">
    
          <label for="current-description"><translate translate-context="*/*/*/Noun">Description</translate></label>
          <textarea id="current-description" v-model="currentDescription" :placeholder="labels.descriptionPlaceholder" maxlength="2000"></textarea>
    
        </div>
        <div class="field">
    
          <label for="visibility-level"><translate translate-context="*/*/*">Visibility</translate></label>
    
          <p><translate translate-context="Content/Library/Paragraph">You are able to share your library with other people, regardless of its visibility.</translate></p>
    
          <select id="visibility-level" class="ui dropdown" v-model="currentVisibilityLevel">
    
            <option :value="c" v-for="c in ['me', 'instance', 'everyone']">{{ sharedLabels.fields.privacy_level.choices[c] }}</option>
    
          </select>
        </div>
        <button class="ui submit button" type="submit">
    
          <translate translate-context="Content/Library/Button.Label/Verb" v-if="library">Update library</translate>
          <translate translate-context="Content/Library/Button.Label/Verb" v-else>Create library</translate>
    
        <dangerous-button v-if="library" type="button" class="ui right floated basic danger button" @confirm="remove()">
    
    jovuit's avatar
    jovuit committed
          <translate translate-context="*/*/*/Verb">Delete</translate>
    
          <p slot="modal-header">
    
            <translate translate-context="Popup/Library/Title">Delete this library?</translate>
    
          </p>
          <p slot="modal-content">
    
            <translate translate-context="Popup/Library/Paragraph">
    
    Allan Nordhøy's avatar
    Allan Nordhøy committed
              The library and all its tracks will be deleted. This can not be undone.
    
          <div slot="modal-confirm">
    
            <translate translate-context="Popup/Library/Button.Label/Verb">Delete library</translate>
    
        </dangerous-button>
      </form>
    </template>
    
    <script>
    import axios from 'axios'
    
    import MixinsTranslation from '@/components/mixins/Translations.vue'
    
      mixins: [MixinsTranslation],
    
      props: ['library'],
      data () {
        let d = {
          isLoading: false,
          over: false,
          errors: []
        }
        if (this.library) {
          d.currentVisibilityLevel = this.library.privacy_level
          d.currentName = this.library.name
          d.currentDescription = this.library.description
        } else {
          d.currentVisibilityLevel = 'me'
          d.currentName = ''
          d.currentDescription = ''
        }
        return d
      },
      computed: {
        labels () {
    
          let namePlaceholder = this.$pgettext('Content/Library/Input.Placeholder', 'My awesome library')
          let descriptionPlaceholder = this.$pgettext('Content/Library/Input.Placeholder', 'This library contains my personal music, I hope you like it.')
    
          return {
            namePlaceholder,
            descriptionPlaceholder,
          }
        }
      },
      methods: {
        submit () {
          let self = this
          this.isLoading = true
          let payload = {
            name: this.currentName,
            description: this.currentDescription,
            privacy_level: this.currentVisibilityLevel
          }
          let promise
          if (this.library) {
            promise = axios.patch(`libraries/${this.library.uuid}/`, payload)
          } else {
            promise = axios.post('libraries/', payload)
          }
          promise.then((response) => {
            self.isLoading = false
            let msg
            if (self.library) {
              self.$emit('updated', response.data)
    
              msg = this.$pgettext('Content/Library/Message', 'Library updated')
    
            } else {
              self.$emit('created', response.data)
    
              msg = this.$pgettext('Content/Library/Message', 'Library created')
    
            }
            self.$store.commit('ui/addMessage', {
              content: msg,
              date: new Date()
            })
          }, error => {
            self.isLoading = false
            self.errors = error.backendErrors
          })
        },
        reset () {
          this.currentVisibilityLevel = 'me'
          this.currentName = ''
          this.currentDescription = ''
        },
        remove () {
          let self = this
          axios.delete(`libraries/${this.library.uuid}/`).then((response) => {
            self.isLoading = false
    
            let msg = this.$pgettext('Content/Library/Message', 'Library deleted')
    
            self.$emit('deleted', {})
            self.$store.commit('ui/addMessage', {
              content: msg,
              date: new Date()
            })
          }, error => {
            self.isLoading = false
            self.errors = error.backendErrors
          })
        }
      }
    }
    </script>