Refactor context menus and modals

.travis.yml

@@ -2,3 +2,5 @@ language: node_js
 node_js:
   - '8'
   - '6'
+
+script: yarn coverage

js/app.vue

@@ -6,7 +6,6 @@
       <main-wrapper/>
       <app-footer/>
       <overlay ref="overlay"/>
-      <edit-songs-form ref="editSongsForm"/>
     </div>
 
     <template v-else>
@@ -25,7 +24,6 @@ import AppFooter from '@/components/layout/app-footer.vue'
 import MainWrapper from '@/components/layout/main-wrapper/index.vue'
 import Overlay from '@/components/ui/overlay.vue'
 import LoginForm from '@/components/auth/login-form.vue'
-import EditSongsForm from '@/components/song/edit-form.vue'
 import Hotkeys from '@/components/utils/hotkeys.vue'
 
 import { event, showOverlay, hideOverlay, forceReloadWindow, $, app as appUtils } from '@/utils'
@@ -41,8 +39,7 @@ export default {
     AppFooter,
     MainWrapper,
     Overlay,
-    LoginForm,
-    EditSongsForm
+    LoginForm
   },
 
   data () {
@@ -144,13 +141,6 @@ export default {
 
   created () {
     event.on({
-      /**
-       * Shows the "Edit Song" form.
-       *
-       * @param {Array.<Object>} An array of songs to edit
-       */
-      [event.$names.EDIT_SONGS]: songs => this.$refs.editSongsForm.open(songs),
-
       /**
        * Log the current user out and reset the application state.
        */

js/components/layout/app-footer.vue

@@ -80,7 +80,7 @@ export default {
        *
        * @type {Boolean}
        */
-      useEqualizer: isAudioContextSupported(),
+      useEqualizer: isAudioContextSupported,
       visualizerActivated: false
     }
   },

js/components/layout/main-wrapper/index.vue

@@ -3,15 +3,17 @@
     <sidebar/>
     <main-content/>
     <extra-panel/>
+    <modal-wrapper/>
   </div>
 </template>
 
 <script>
 export default {
   components: {
     Sidebar: () => import('@/components/layout/main-wrapper/sidebar.vue'),
-    mainContent: () => import('@/components/layout/main-wrapper/main-content.vue'),
-    ExtraPanel: () => import('@/components/layout/main-wrapper/extra-panel.vue')
+    MainContent: () => import('@/components/layout/main-wrapper/main-content.vue'),
+    ExtraPanel: () => import('@/components/layout/main-wrapper/extra-panel.vue'),
+    ModalWrapper: () => import('@/components/layout/modal-wrapper.vue')
   }
 }
 </script>

js/components/layout/modal-wrapper.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="modal-wrapper" :class="{ overlay: this.showingModalName }">
+    <create-smart-playlist-form v-if="showingModalName === 'create-smart-playlist-form'" @close="close"/>
+    <add-user-form v-if="showingModalName === 'add-user-form'" @close="close"/>
+    <edit-user-form v-if="showingModalName === 'edit-user-form'" :user="boundData.user" @close="close"/>
+    <edit-song-form v-if="showingModalName === 'edit-song-form'" :songs="boundData.songs" @close="close"/>
+  </div>
+</template>
+
+<script>
+import { event } from '@/utils'
+
+export default {
+  components: {
+    CreateSmartPlaylistForm: () => import('@/components/playlist/create-smart-playlist-form.vue'),
+    AddUserForm: () => import('@/components/user/add-form.vue'),
+    EditUserForm: () => import('@/components/user/edit-form.vue'),
+    EditSongForm: () => import('@/components/song/edit-form.vue')
+  },
+
+  data: () => ({
+    showingModalName: null,
+    boundData: {}
+  }),
+
+  methods: {
+    close () {
+      this.showingModalName = null
+    }
+  },
+
+  created () {
+    event.on({
+      [event.$names.MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM]: () => {
+        this.showingModalName = 'create-smart-playlist-form'
+      },
+
+      [event.$names.MODAL_SHOW_ADD_USER_FORM]: () => {
+        this.showingModalName = 'add-user-form'
+      },
+
+      [event.$names.MODAL_SHOW_EDIT_USER_FORM]: user => {
+        this.boundData.user = user
+        this.showingModalName = 'edit-user-form'
+      },
+
+      [event.$names.MODAL_SHOW_EDIT_SONG_FORM]: songs => {
+        this.boundData.songs = songs
+        this.showingModalName = 'edit-song-form'
+      }
+    })
+  }
+}
+</script>

js/components/playlist/context-menu.vue

@@ -0,0 +1,37 @@
+<template>
+  <base-context-menu extra-class="playlist-menu" ref="base">
+    <li @click="createPlaylist">New Playlist</li>
+    <li @click="createSmartPlaylist">New Smart Playlist</li>
+  </base-context-menu>
+</template>
+
+<script>
+import { event } from '@/utils'
+
+export default {
+  components: {
+    BaseContextMenu: () => import('@/components/ui/context-menu.vue')
+  },
+
+  methods: {
+    open (top, left) {
+      this.$refs.base.open(top, left)
+    },
+
+    close () {
+      this.$refs.base.close()
+    },
+
+    createPlaylist () {
+      this.$emit('createPlaylist')
+      this.close()
+    },
+
+    createSmartPlaylist () {
+      event.emit(event.$names.MODAL_SHOW_CREATE_SMART_PLAYLIST_FORM)
+      this.close()
+    }
+  }
+}
+</script>
+

js/components/playlist/create-smart-playlist-form.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="create-smart-playlist">
+    <form>
+      <header>
+        <h1>New Smart Playlist</h1>
+      </header>
+
+      <div>
+
+      </div>
+    </form>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

js/components/playlist/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="playlists">
+  <section id="playlists" @contextmenu="openContextMenu">
     <h1>Playlists
       <i class="fa fa-plus-circle control create" :class="{ creating: creating }" @click="creating = !creating"></i>
     </h1>
@@ -14,7 +14,7 @@
       >
     </form>
 
-    <ul class="menu">
+    <ul>
       <playlist-item type="favorites" :playlist="{ name: 'Favorites', songs: favoriteState.songs }"/>
       <playlist-item type="recently-played" :playlist="{ name: 'Recently Played', songs: [] }"/>
 
@@ -24,6 +24,8 @@
         :playlist="playlist"
         :key="playlist.id"/>
     </ul>
+
+    <context-menu ref="contextMenu" @createPlaylist="creating = true"/>
   </section>
 </template>
 
@@ -33,7 +35,8 @@ import router from '@/router'
 
 export default {
   components: {
-    PlaylistItem: () => import('@/components/playlist/item.vue')
+    PlaylistItem: () => import('@/components/playlist/item.vue'),
+    ContextMenu: () => import('@/components/playlist/context-menu.vue')
   },
 
   data: () => ({
@@ -52,6 +55,10 @@ export default {
       this.newName = ''
       // Activate the new playlist right away
       this.$nextTick(() => router.go(`playlist/${playlist.id}`))
+    },
+
+    openContextMenu (event) {
+      this.$nextTick(() => this.$refs.contextMenu.open(event.pageY, event.pageX))
     }
   }
 }

js/components/screens/user-list.vue

@@ -18,22 +18,18 @@
         <user-card v-for="user in state.users" :user="user" @editUser="showEditUserForm" :key="user.id"/>
       </div>
     </div>
-
-    <edit-user-form ref="editUserForm"/>
-    <add-user-form ref="addUserForm"/>
   </section>
 </template>
 
 <script>
 import isMobile from 'ismobilejs'
 
 import { userStore } from '@/stores'
+import { event } from '@/utils'
 
 export default {
   components: {
-    UserCard: () => import('@/components/user/card.vue'),
-    EditUserForm: () => import('@/components/user/edit-form.vue'),
-    AddUserForm: () => import('@/components/user/add-form.vue')
+    UserCard: () => import('@/components/user/card.vue')
   },
 
   data () {
@@ -45,13 +41,8 @@ export default {
   },
 
   methods: {
-    showAddUserForm () {
-      this.$refs.addUserForm.open()
-    },
-
-    showEditUserForm (user) {
-      this.$refs.editUserForm.open(user)
-    }
+    showAddUserForm: () => event.emit(event.$names.MODAL_SHOW_ADD_USER_FORM),
+    showEditUserForm: user => event.emit(event.$names.MODAL_SHOW_EDIT_USER_FORM, user)
   }
 }
 </script>