Form.vue 5.18 KB
Newer Older
1
2
<template>
  <form class="ui form" @submit.prevent="submit">
3
    <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>
4
    <div v-if="errors.length > 0" role="alert" class="ui negative message">
5
      <h4 class="header"><translate translate-context="Content/*/Error message.Title">Error</translate></h4>
6
7
8
9
10
      <ul class="list">
        <li v-for="error in errors">{{ error }}</li>
      </ul>
    </div>
    <div class="required field">
11
12
      <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">
13
14
    </div>
    <div class="field">
15
16
      <label for="current-description"><translate translate-context="*/*/*/Noun">Description</translate></label>
      <textarea id="current-description" v-model="currentDescription" :placeholder="labels.descriptionPlaceholder" maxlength="2000"></textarea>
17
18
    </div>
    <div class="field">
19
      <label for="visibility-level"><translate translate-context="*/*/*">Visibility</translate></label>
20
      <p><translate translate-context="Content/Library/Paragraph">You are able to share your library with other people, regardless of its visibility.</translate></p>
21
      <select id="visibility-level" class="ui dropdown" v-model="currentVisibilityLevel">
22
        <option :value="c" v-for="c in ['me', 'instance', 'everyone']">{{ sharedLabels.fields.privacy_level.choices[c] }}</option>
23
24
25
      </select>
    </div>
    <button class="ui submit button" type="submit">
26
27
      <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>
28
    </button>
29
    <dangerous-button v-if="library" type="button" class="ui right floated basic danger button" @confirm="remove()">
jovuit's avatar
jovuit committed
30
      <translate translate-context="*/*/*/Verb">Delete</translate>
31
      <p slot="modal-header">
32
        <translate translate-context="Popup/Library/Title">Delete this library?</translate>
33
34
      </p>
      <p slot="modal-content">
35
        <translate translate-context="Popup/Library/Paragraph">
Allan Nordhøy's avatar
Allan Nordhøy committed
36
          The library and all its tracks will be deleted. This can not be undone.
37
38
        </translate>
      </p>
39
      <div slot="modal-confirm">
40
        <translate translate-context="Popup/Library/Button.Label/Verb">Delete library</translate>
41
      </div>
42
43
44
45
46
47
    </dangerous-button>
  </form>
</template>

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

export default {
51
  mixins: [MixinsTranslation],
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
  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 () {
Jo Vuit's avatar
Jo Vuit committed
72
73
      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.')
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
      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)
Jo Vuit's avatar
Jo Vuit committed
100
          msg = this.$pgettext('Content/Library/Message', 'Library updated')
101
102
        } else {
          self.$emit('created', response.data)
Jo Vuit's avatar
Jo Vuit committed
103
          msg = this.$pgettext('Content/Library/Message', 'Library created')
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
        }
        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
Jo Vuit's avatar
Jo Vuit committed
123
        let msg = this.$pgettext('Content/Library/Message', 'Library deleted')
124
125
126
127
128
129
130
131
132
133
134
135
136
        self.$emit('deleted', {})
        self.$store.commit('ui/addMessage', {
          content: msg,
          date: new Date()
        })
      }, error => {
        self.isLoading = false
        self.errors = error.backendErrors
      })
    }
  }
}
</script>