From e4ea10be21a75496179aeb5984fa9bb53eba881d Mon Sep 17 00:00:00 2001
From: ariasuni <perso@hack-libre.org>
Date: Fri, 6 Dec 2019 19:03:42 +0100
Subject: [PATCH 1/5] =?UTF-8?q?Add=20field=20to=20filter=20existing=20play?=
 =?UTF-8?q?lists=20in=20=E2=80=9Cadd=20to=20playlist=E2=80=A6=E2=80=9D=20d?=
 =?UTF-8?q?ialog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Also fix the duplicate track add confirmation margins
Fix #974
---
 .../components/playlists/PlaylistModal.vue    | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 714d9feba..fd3f71e8b 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -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>
-- 
GitLab


From f10aa9fef27a92794314be1fde9611fdc75b7fd0 Mon Sep 17 00:00:00 2001
From: ariasuni <perso@hack-libre.org>
Date: Sat, 7 Dec 2019 15:00:26 +0100
Subject: [PATCH 2/5] Handle translations for newly added strings

---
 front/src/components/playlists/PlaylistModal.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index fd3f71e8b..1f8948709 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -43,8 +43,8 @@
         <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" />
+              <label for="playlist-name-filter"><translate translate-context="Popup/Playlist/Label">Filter</translate></label>
+              <input name="playlist-name-filter" v-model="playlistNameFilter" type="text" class="inline" :placeholder="labels.filterPlaylistField" />
             </div>
           </div>
         </div>
@@ -84,7 +84,7 @@
         <template v-else>
           <div class="ui small placeholder segment">
             <div class="ui header">
-               No results matching your filter
+               <translate translate-context="Popup/Playlist/EmptyState">No results matching your filter</translate>
             </div>
           </div>
         </template>
@@ -170,7 +170,8 @@ export default {
     }),
     labels () {
       return {
-        addToPlaylist: this.$pgettext('Popup/Playlist/Table.Button.Tooltip/Verb', 'Add to this playlist')
+        addToPlaylist: this.$pgettext('Popup/Playlist/Table.Button.Tooltip/Verb', 'Add to this playlist'),
+        filterPlaylistField: this.$pgettext('Popup/Playlist/Form/Placeholder', 'Enter playlist name')
       }
     },
     sortedPlaylists () {
-- 
GitLab


From d419b6d37d9c271fe926086e41c7cf42bfdefed6 Mon Sep 17 00:00:00 2001
From: ariasuni <perso@hack-libre.org>
Date: Sat, 7 Dec 2019 15:01:03 +0100
Subject: [PATCH 3/5] =?UTF-8?q?Don=E2=80=99t=20close=20the=20=E2=80=9CAdd?=
 =?UTF-8?q?=20to=20playlist=E2=80=9D=20dialog=20when=20closing=20duplicate?=
 =?UTF-8?q?=20song=20warning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/components/playlists/PlaylistModal.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index 1f8948709..d9a9be7b6 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -25,7 +25,7 @@
             v-translate="{track: track.title, playlist: duplicateTrackAddInfo.playlist_name}"
             :translate-params="{track: track.title, playlist: duplicateTrackAddInfo.playlist_name}"><strong>%{ track }</strong> is already in <strong>%{ playlist }</strong>.</p>
           <button
-            @click="update(false)"
+            @click="duplicateTrackAddConfirm(false)"
             class="ui small cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
           </button>
           <button
@@ -161,6 +161,9 @@ export default {
           self.showDuplicateTrackAddConfirmation = false
         }
       })
+    },
+    duplicateTrackAddConfirm (v) {
+      this.showDuplicateTrackAddConfirmation = v
     }
   },
   computed: {
-- 
GitLab


From 5607968f4c332963e21bf79147ebe1023c5dbef4 Mon Sep 17 00:00:00 2001
From: ariasuni <perso@hack-libre.org>
Date: Sat, 7 Dec 2019 15:55:11 +0100
Subject: [PATCH 4/5] Improve header of add to playlist dialog, making the
 dialog more compact

---
 .../components/playlists/PlaylistModal.vue    | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/front/src/components/playlists/PlaylistModal.vue b/front/src/components/playlists/PlaylistModal.vue
index d9a9be7b6..7ada395b6 100644
--- a/front/src/components/playlists/PlaylistModal.vue
+++ b/front/src/components/playlists/PlaylistModal.vue
@@ -1,24 +1,23 @@
 <template>
   <modal @update:show="update" :show="$store.state.playlists.showModal">
     <div class="header">
-      <translate translate-context="Popup/Playlist/Title/Verb">Manage playlists</translate>
-    </div>
-    <div class="scrolling content">
-      <div class="description">
-        <template v-if="track">
-          <h4 class="ui header"><translate translate-context="Popup/Playlist/Title">Current track</translate></h4>
-          <span
+      <template v-if="track">
+        <h2 class="ui header">
+          <translate translate-context="Popup/Playlist/Title/Verb">Add to playlist</translate>
+          <div
+            class="ui sub header"
             translate-context="Popup/Playlist/Paragraph"
             v-translate="{artist: track.artist.name, title: track.title}"
             :translate-params="{artist: track.artist.name, title: track.title}">
             "%{ title }", by %{ artist }
-          </span>
-          <div class="ui divider"></div>
-        </template>
-
-        <playlist-form :key="formKey"></playlist-form>
-        <div class="ui divider"></div>
-      </div>
+          </div>
+        </h2>
+      </template>
+      <translate v-else translate-context="Popup/Playlist/Title/Verb">Manage playlists</translate>
+    </div>
+    <div class="scrolling content">
+      <playlist-form :key="formKey"></playlist-form>
+      <div class="ui divider"></div>
       <div v-if="playlists.length > 0">
         <div v-if="showDuplicateTrackAddConfirmation" class="ui warning message">
           <p translate-context="Popup/Playlist/Paragraph"
-- 
GitLab


From 7744a307e956576f5d278a880b74d1cc7b1e15cf Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 7 Dec 2019 17:01:51 +0100
Subject: [PATCH 5/5] Changelog fragment

---
 changes/changelog.d/974.enhancement | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changes/changelog.d/974.enhancement

diff --git a/changes/changelog.d/974.enhancement b/changes/changelog.d/974.enhancement
new file mode 100644
index 000000000..0d59fbd0a
--- /dev/null
+++ b/changes/changelog.d/974.enhancement
@@ -0,0 +1 @@
+Support filtering playlist by name and several additional UX improvements in playlists modal (#974)
-- 
GitLab