Merge pull request #456 from mradionov/confirm-playlist-removal

Feature: confirm playlist removal
Soundnode · Dec 7, 2015 · 4cb1cc4 · 4cb1cc4
2 parents 00c3b79 + 70e6f0d
commit 4cb1cc4
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 32 deletions.
diff --git a/app/index.html b/app/index.html
@@ -209,11 +209,11 @@ <h4 id="playerUser" class="player_user" ng-click="goToUser($event)"></h4>
 
 <!-- services/factories -->
 <script src="public/js/common/queueService.js"></script>
-<script src="public/js/common/rateLimitService.js"></script>
 <script src="public/js/common/SCapiService.js"></script>
 <script src="public/js/common/SC2apiService.js"></script>
 <script src="public/js/common/playerService.js"></script>
 <script src="public/js/common/notificationFactory.js"></script>
+<script src="public/js/common/modalFactory.js"></script>
 
 <!-- controllers -->
 <script src="public/js/common/appCtrl.js"></script>

diff --git a/app/public/js/common/SC2apiService.js b/app/public/js/common/SC2apiService.js
@@ -9,7 +9,7 @@ app.service('SC2apiService', function (
     $window,
     $http,
     $q,
-    rateLimit
+    modalFactory
 ) {
 
     /**
@@ -118,7 +118,7 @@ app.service('SC2apiService', function (
      */
     function onResponseError(response) {
         if (response.status === 429) {
-            rateLimit.showNotification();
+            modalFactory.rateLimitReached();
         }
         return $q.reject(response.data);
     }

diff --git a/app/public/js/common/SCapiService.js b/app/public/js/common/SCapiService.js
@@ -8,7 +8,7 @@ app.service('SCapiService', function (
     $state,
     $stateParams,
     $rootScope,
-    rateLimit
+    modalFactory
 ) {
 
     /**
@@ -36,7 +36,7 @@ app.service('SCapiService', function (
         return $http.get(url)
             .then(function (response, status) {
                 if (response.status === 429) {
-                    rateLimit.showNotification();
+                    modalFactory.rateLimitReached();
                     return [];
                 }
 

diff --git a/app/public/js/common/rateLimitService.js → app/public/js/common/modalFactory.js b/app/public/js/common/rateLimitService.js → app/public/js/common/modalFactory.js
@@ -1,15 +1,41 @@
 'use strict';
 
-// Displays popup with a warning that rate limit is reached, with a link
-// to SoundCloud docs attached. Call it when response returns 429 status
-app.service('rateLimit', function (
+app.factory('modalFactory', function (
     $http,
     ngDialog
 ) {
-    this.showNotification = function () {
+
+    var modalFactory = {
+        // Unified modal to ask for confirmation of some action
+        confirm: confirm,
+        // Displays modal with a warning that rate limit is reached, with a link
+        // to SoundCloud docs attached. Call it when response returns 429 status
+        rateLimitReached: rateLimitReached
+    };
+
+    return modalFactory;
+
+    //
+
+    function confirm(message) {
+        return ngDialog.openConfirm({
+            showClose: false,
+            template: 'views/common/modals/confirm.html',
+            controller: ['$scope', function ($scope) {
+
+                $scope.content = message;
+
+                $scope.closeModal = function () {
+                    ngDialog.closeAll();
+                };
+            }]
+        });
+    }
+
+    function rateLimitReached() {
         return ngDialog.open({
             showClose: false,
-            template: 'views/common/modal.html',
+            template: 'views/common/modals/default.html',
             controller: ['$scope', function ($scope) {
                 var urlGH = 'https://api.github.com/repos/Soundnode/soundnode-about/contents/rate-limit-reached.html';
                 var config = {
@@ -33,5 +59,6 @@ app.service('rateLimit', function (
                     });
             }]
         });
-    };
+    }
+
 });
diff --git a/app/public/js/playlists/playlistsCtrl.js b/app/public/js/playlists/playlistsCtrl.js
@@ -1,6 +1,6 @@
 'use strict';
 
-app.controller('PlaylistsCtrl', function ($scope, SCapiService, $rootScope, $log, $window, $http, $state, $stateParams, notificationFactory) {
+app.controller('PlaylistsCtrl', function ($scope, SCapiService, $rootScope, $log, $window, $http, $state, $stateParams, notificationFactory, modalFactory) {
     var endpoint = 'me/playlists'
         , params = '';
 
@@ -80,23 +80,25 @@ app.controller('PlaylistsCtrl', function ($scope, SCapiService, $rootScope, $log
      * @method removePlaylist
      */
     $scope.removePlaylist = function(playlistId) {
-
-        SCapiService.removePlaylist(playlistId)
-            .then(function(response) {
-                if ( typeof response === 'object' ) {
-                    notificationFactory.success("Playlist removed!");
-                }
-            }, function(error) {
-                notificationFactory.error("Something went wrong!");
-            })
-            .finally(function() {
-                $state.transitionTo($state.current, $stateParams, {
-                    reload: true,
-                    inherit: false,
-                    notify: true
-                });
+        modalFactory
+            .confirm('Do you really want to delete the playlist?')
+            .then(function () {
+                SCapiService.removePlaylist(playlistId)
+                    .then(function(response) {
+                        if ( typeof response === 'object' ) {
+                            notificationFactory.success("Playlist removed!");
+                        }
+                    }, function(error) {
+                        notificationFactory.error("Something went wrong!");
+                    })
+                    .finally(function() {
+                        $state.transitionTo($state.current, $stateParams, {
+                            reload: true,
+                            inherit: false,
+                            notify: true
+                        });
+                    });
             });
-
     };
 
     /**

diff --git a/app/views/about/about.html b/app/views/about/about.html
@@ -1,5 +1,5 @@
 <div class="modalView">
-    <div ng-include="'views/common/closeModal.html'"></div>
+    <div ng-include="'views/common/modals/closeButton.html'"></div>
 
     <div class="modalView_content" ng-bind-html="content"></div>
 

diff --git a/app/views/common/closeModal.html → app/views/common/modals/closeButton.html b/app/views/common/closeModal.html → app/views/common/modals/closeButton.html
diff --git a/app/views/common/modals/confirm.html b/app/views/common/modals/confirm.html
@@ -0,0 +1,10 @@
+<div class="modalView">
+    <div ng-include="'views/common/modals/closeButton.html'"></div>
+
+    <div class="modalView_content" ng-bind-html="content"></div>
+
+    <div class="modalView_footer">
+        <button class="button" ng-click="confirm()">Confirm</button>
+        <button class="button" ng-click="closeModal()">Cancel</button>
+    </div>
+</div>
diff --git a/app/views/common/modal.html → app/views/common/modals/default.html b/app/views/common/modal.html → app/views/common/modals/default.html
@@ -1,5 +1,5 @@
 <div class="modalView">
-    <div ng-include="'views/common/closeModal.html'"></div>
+    <div ng-include="'views/common/modals/closeButton.html'"></div>
 
     <div class="modalView_content" ng-bind-html="content"></div>
 </div>
diff --git a/app/views/playlists/playlistDashboard.html b/app/views/playlists/playlistDashboard.html
@@ -1,6 +1,6 @@
 <div class="playlistDashboard">
-    <div ng-include="'views/common/closeModal.html'"></div>
-    
+    <div ng-include="'views/common/modals/closeButton.html'"></div>
+
     <!-- create new playlist -->
     <header class="playlistDashboard_title">
         <p>Where do you want to add: <span class="playlistDashboard_selectedSong">{{ playlistSongName }}</span></p>