Newer
Older
<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>
<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>
<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>
<dangerous-button
v-if="library"
type="button"
class="ui right floated basic danger button"
@confirm="remove()"
>
<translate translate-context="*/*/*/Verb">
Delete
</translate>
<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.
<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: { type: Object, default: Null } },
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,
}
}
},
methods: {
submit () {
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 () {
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>