Form.vue

<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, key) in errors"
          :key="key"
        >
          {{ error }}
        </li>
      </ul>
    </div>
    <div class="required field">
      <label for="current-name"><translate translate-context="*/*/*/Noun">Name</translate></label>
      <input
        id="current-name"
        v-model="currentName"
        name="name"
        :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"
      />
    </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"
        v-model="currentVisibilityLevel"
        class="ui dropdown"
      >
        <option
          v-for="(c, key) in ['me', 'instance', 'everyone']"
          :key="key"
          :value="c"
        >
          {{ sharedLabels.fields.privacy_level.choices[c] }}
        </option>
      </select>
    </div>
    <button
      class="ui submit button"
      type="submit"
    >
      <translate
        v-if="library"
        translate-context="Content/Library/Button.Label/Verb"
      >
        Update library
      </translate>
      <translate
        v-else
        translate-context="Content/Library/Button.Label/Verb"
      >
        Create library
      </translate>
    </button>
    <dangerous-button
      v-if="library"
      type="button"
      class="ui right floated basic danger button"
      @confirm="remove()"
    >
      <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">
          The library and all its tracks will be deleted. This can not be undone.
        </translate>
      </p>
      <div slot="modal-confirm">
        <translate translate-context="Popup/Library/Button.Label/Verb">
          Delete library
        </translate>
      </div>
    </dangerous-button>
  </form>
</template>

<script>
import axios from 'axios'
import MixinsTranslation from '@/components/mixins/Translations.vue'

export default {
  mixins: [MixinsTranslation],
  props: { library: { type: Object, default: Null } },
  data () {
    const 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 () {
      const namePlaceholder = this.$pgettext('Content/Library/Input.Placeholder', 'My awesome library')
      const descriptionPlaceholder = this.$pgettext('Content/Library/Input.Placeholder', 'This library contains my personal music, I hope you like it.')
      return {
        namePlaceholder,
        descriptionPlaceholder
      }
    }
  },
  methods: {
    submit () {
      const self = this
      this.isLoading = true
      const 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 () {
      const self = this
      axios.delete(`libraries/${this.library.uuid}/`).then((response) => {
        self.isLoading = false
        const 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>