add feature to change playlist description
This commit is contained in:
parent
80f408a7aa
commit
60506dc47a
2 changed files with 41 additions and 5 deletions
|
@ -667,8 +667,6 @@
|
||||||
.nameEdit {
|
.nameEdit {
|
||||||
font-weight : 700;
|
font-weight : 700;
|
||||||
font-size : 1.6rem;
|
font-size : 1.6rem;
|
||||||
margin-bottom: 6px;
|
|
||||||
margin-right : 6px;
|
|
||||||
flex-shrink : unset;
|
flex-shrink : unset;
|
||||||
background : transparent;
|
background : transparent;
|
||||||
border : 0px;
|
border : 0px;
|
||||||
|
@ -676,6 +674,16 @@
|
||||||
font-family : inherit;
|
font-family : inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.descriptionEdit {
|
||||||
|
font-size : 14px;
|
||||||
|
flex-shrink : unset;
|
||||||
|
background : transparent;
|
||||||
|
border : 0px;
|
||||||
|
color : inherit;
|
||||||
|
font-family : inherit;
|
||||||
|
width : 60vw;
|
||||||
|
}
|
||||||
|
|
||||||
.playlist-artist {
|
.playlist-artist {
|
||||||
font-size : 20px;
|
font-size : 20px;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
|
|
|
@ -54,9 +54,16 @@
|
||||||
class="content"
|
class="content"
|
||||||
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
|
v-html="data.attributes.description?.short ?? data.attributes.editorialNotes?.short"
|
||||||
@click="openInfoModal()"></div>
|
@click="openInfoModal()"></div>
|
||||||
<div v-else-if="(data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null"
|
<div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing == false)"
|
||||||
class="content"
|
@mouseover="minClass(false)" @click="editPlaylistDescription()">{{data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard}}</div>
|
||||||
v-html="data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard"></div>
|
<div v-else-if="((data.attributes.description?.standard ?? data.attributes.editorialNotes?.standard) != null) && (descriptionEditing)"
|
||||||
|
@mouseover="minClass(false)"><input type="text"
|
||||||
|
spellcheck="false"
|
||||||
|
class="descriptionEdit"
|
||||||
|
v-model="data.attributes.description.standard"
|
||||||
|
@blur="editPlaylist"
|
||||||
|
@change="editPlaylist"
|
||||||
|
@keydown.enter="editPlaylist"/></div>
|
||||||
<!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
|
<!-- <button v-if="(data.attributes.description?.short ?? data.attributes.editorialNotes?.short ) != null" class="more-btn"
|
||||||
@click="editorialNotesExpanded = !editorialNotesExpanded">
|
@click="editorialNotesExpanded = !editorialNotesExpanded">
|
||||||
{{app.getLz('term.showMore')}}
|
{{app.getLz('term.showMore')}}
|
||||||
|
@ -265,6 +272,7 @@
|
||||||
editorialNotesExpanded: false,
|
editorialNotesExpanded: false,
|
||||||
drag: false,
|
drag: false,
|
||||||
nameEditing: false,
|
nameEditing: false,
|
||||||
|
descriptionEditing: false,
|
||||||
inLibrary: null,
|
inLibrary: null,
|
||||||
confirm: false,
|
confirm: false,
|
||||||
app: this.$root,
|
app: this.$root,
|
||||||
|
@ -412,12 +420,24 @@
|
||||||
},
|
},
|
||||||
editPlaylist() {
|
editPlaylist() {
|
||||||
this.app.editPlaylist(this.data.id, this.data.attributes.name);
|
this.app.editPlaylist(this.data.id, this.data.attributes.name);
|
||||||
|
this.app.editPlaylistDescription(this.data.id, this.data.attributes.description.standard);
|
||||||
this.app.playlists.listing.forEach(playlist => {
|
this.app.playlists.listing.forEach(playlist => {
|
||||||
if (playlist.id === this.data.id) {
|
if (playlist.id === this.data.id) {
|
||||||
playlist.attributes.name = this.data.attributes.name
|
playlist.attributes.name = this.data.attributes.name
|
||||||
|
playlist.attributes.description = this.data.attributes.description.standard
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
this.nameEditing = false
|
this.nameEditing = false
|
||||||
|
this.descriptionEditing = false
|
||||||
|
},
|
||||||
|
editPlaylistDescription() {
|
||||||
|
this.app.editPlaylistDescription(this.data.id, this.data.attributes.description.standard);
|
||||||
|
this.app.playlists.listing.forEach(playlist => {
|
||||||
|
if (playlist.id === this.data.id) {
|
||||||
|
playlist.attributes.description = this.data.attributes.description.standard
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.descriptionEditing = false
|
||||||
},
|
},
|
||||||
addToLibrary(id) {
|
addToLibrary(id) {
|
||||||
app.mk.addToLibrary(id)
|
app.mk.addToLibrary(id)
|
||||||
|
@ -450,6 +470,14 @@
|
||||||
}, 100)
|
}, 100)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
editPlaylistDescription() {
|
||||||
|
if (this.data.attributes.canEdit && this.data.type === "library-playlists") {
|
||||||
|
this.descriptionEditing = true
|
||||||
|
setTimeout(() => {
|
||||||
|
document.querySelector(".descriptionEdit").focus()
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
},
|
||||||
buildContextMenu(index) {
|
buildContextMenu(index) {
|
||||||
let self = this
|
let self = this
|
||||||
if (!this.data.attributes.canEdit) {
|
if (!this.data.attributes.canEdit) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue