Skip to content
Snippets Groups Projects
Form.vue 5.79 KiB
Newer Older
  • Learn to ignore specific revisions
  • Georg Krause's avatar
    Georg Krause committed
      <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>
    
    Georg Krause's avatar
    Georg Krause committed
            <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>
    
    Georg Krause's avatar
    Georg Krause committed
          <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>
    
    Georg Krause's avatar
    Georg Krause committed
          <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>
    
    Georg Krause's avatar
    Georg Krause committed
          <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>
    
    Georg Krause's avatar
    Georg Krause committed
        <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>
    
    Georg Krause's avatar
    Georg Krause committed
        <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">
    
    Georg Krause's avatar
    Georg Krause committed
            <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">
    
    Georg Krause's avatar
    Georg Krause committed
            <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],
    
    Georg Krause's avatar
    Georg Krause committed
      props: { library: { type: Object, default: Null } },
    
    Georg Krause's avatar
    Georg Krause committed
        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 () {
    
    Georg Krause's avatar
    Georg Krause committed
          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,
    
    Georg Krause's avatar
    Georg Krause committed
            descriptionPlaceholder
    
    Georg Krause's avatar
    Georg Krause committed
          const self = this
    
          this.isLoading = true
    
    Georg Krause's avatar
    Georg Krause committed
          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 () {
    
    Georg Krause's avatar
    Georg Krause committed
          const self = this
    
          axios.delete(`libraries/${this.library.uuid}/`).then((response) => {
            self.isLoading = false
    
    Georg Krause's avatar
    Georg Krause committed
            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>