Commit e4ea10be authored by Mélanie Chauvel's avatar Mélanie Chauvel

Add field to filter existing playlists in “add to playlist…” dialog

Also fix the duplicate track add confirmation margins
Fix #974
parent 2d9c2358
Pipeline #8131 passed with stages
in 6 minutes and 44 seconds
......@@ -18,6 +18,8 @@
<playlist-form :key="formKey"></playlist-form>
<div class="ui divider"></div>
</div>
<div v-if="playlists.length > 0">
<div v-if="showDuplicateTrackAddConfirmation" class="ui warning message">
<p translate-context="Popup/Playlist/Paragraph"
v-translate="{track: track.title, playlist: duplicateTrackAddInfo.playlist_name}"
......@@ -37,10 +39,16 @@
<li v-for="error in errors">{{ error }}</li>
</ul>
</div>
</div>
<div v-if="playlists.length > 0">
<h4 class="ui header"><translate translate-context="Popup/Playlist/Title">Available playlists</translate></h4>
<table class="ui unstackable very basic table">
<div class="ui form">
<div class="fields">
<div class="field">
<label for="playlist-name-filter">Filter playlists</label>
<input name="playlist-name-filter" v-model="playlistNameFilter" type="text" class="inline" placeholder="Filter playlists" />
</div>
</div>
</div>
<table v-if="sortedPlaylists.length > 0" class="ui unstackable very basic table">
<thead>
<tr>
<th></th>
......@@ -73,6 +81,13 @@
</tr>
</tbody>
</table>
<template v-else>
<div class="ui small placeholder segment">
<div class="ui header">
No results matching your filter
</div>
</div>
</template>
</div>
<template v-else>
<div class="ui placeholder segment">
......@@ -93,7 +108,10 @@
</template>
<script>
import _ from '@/lodash'
import filter from "lodash/fp/filter";
import sortBy from "lodash/fp/sortBy";
import flow from "lodash/fp/flow";
import axios from 'axios'
import {mapState} from 'vuex'
......@@ -110,6 +128,7 @@ export default {
return {
formKey: String(new Date()),
errors: [],
playlistNameFilter: '',
duplicateTrackAddInfo: {},
showDuplicateTrackAddConfirmation: false,
lastSelectedPlaylist: -1,
......@@ -155,7 +174,11 @@ export default {
}
},
sortedPlaylists () {
let p = _.sortBy(this.playlists, [(e) => { return e.modification_date }])
let regexp = new RegExp(this.playlistNameFilter, 'i');
let p = flow(
filter((e) => e.name.match(regexp) !== null),
sortBy((e) => { return e.modification_date }),
)(this.playlists)
p.reverse()
return p
}
......@@ -175,4 +198,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ui.small.placeholder.segment {
min-height: auto;
}
</style>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment