From 2d6d0fd8fb7f505300fc73f6117604c74cc6fb18 Mon Sep 17 00:00:00 2001
From: An Phan <me@phanan.net>
Date: Thu, 1 Dec 2016 17:54:28 +0700
Subject: [PATCH] Replace sweetalert with alertify

---
 gulpfile.js                                   |  1 -
 package.json                                  |  2 +-
 .../main-wrapper/main-content/playlist.vue    | 12 +-----
 .../main-wrapper/main-content/profile.vue     |  8 ----
 .../main-wrapper/main-content/settings.vue    | 23 ++----------
 .../assets/js/components/shared/user-item.vue | 12 +-----
 resources/assets/js/stores/favorite.js        | 16 ++++++--
 resources/assets/js/stores/playlist.js        | 17 +++++++--
 resources/assets/js/stores/setting.js         |  6 ++-
 resources/assets/js/stores/song.js            |  3 +-
 resources/assets/js/stores/user.js            |  5 +++
 resources/assets/js/utils/alerts.js           | 37 +++++++++++++++++++
 resources/assets/js/utils/index.js            |  1 +
 resources/assets/sass/app.scss                |  2 +-
 resources/assets/sass/vendor/_alertify.scss   | 19 ++++++++++
 resources/assets/sass/vendor/_sweetalert.scss | 23 ------------
 16 files changed, 105 insertions(+), 82 deletions(-)
 create mode 100644 resources/assets/js/utils/alerts.js
 create mode 100644 resources/assets/sass/vendor/_alertify.scss
 delete mode 100644 resources/assets/sass/vendor/_sweetalert.scss

diff --git a/gulpfile.js b/gulpfile.js
index 797c6b17..23f02f64 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -35,7 +35,6 @@ elixir(function (mix) {
       'resources/assets/css/**/*.css',
       'node_modules/font-awesome/css/font-awesome.min.css',
       'node_modules/rangeslider.js/dist/rangeslider.css',
-      'node_modules/sweetalert/dist/sweetalert.css'
     ], 'public/css/vendors.css', './');
 
   mix.version(['css/vendors.css', 'css/app.css', 'js/vendors.js', 'js/main.js']);
diff --git a/package.json b/package.json
index 36dc2f3e..980f3fdf 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "url": "https://github.com/phanan/koel"
   },
   "dependencies": {
+    "alertify.js": "^1.0.12",
     "babel-plugin-lodash": "^2.2.1",
     "babel-plugin-transform-runtime": "^6.3.13",
     "babel-polyfill": "^6.9.1",
@@ -39,7 +40,6 @@
     "rangeslider.js": "^2.2.1",
     "select": "^1.0.6",
     "sinon": "^1.17.2",
-    "sweetalert": "^1.1.3",
     "vue": "^2.0.1",
     "vue-hot-reload-api": "^1.3.2",
     "vueify": "^9.1.0",
diff --git a/resources/assets/js/components/main-wrapper/main-content/playlist.vue b/resources/assets/js/components/main-wrapper/main-content/playlist.vue
index 399522af..a2866fc8 100644
--- a/resources/assets/js/components/main-wrapper/main-content/playlist.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/playlist.vue
@@ -37,9 +37,7 @@
 </template>
 
 <script>
-import swal from 'sweetalert'
-
-import { pluralize, event } from '../../../utils'
+import { pluralize, event, alerts } from '../../../utils'
 import { playlistStore, sharedStore } from '../../../stores'
 import { playback, download } from '../../../services'
 import router from '../../../router'
@@ -94,13 +92,7 @@ export default {
         return
       }
 
-      swal({
-        title: 'Are you sure?',
-        text: 'Once it’s gone, it’s gone, and there’s no turning back.',
-        type: 'warning',
-        showCancelButton: true,
-        confirmButtonText: 'Yes, go ahead'
-      }, this.del)
+      alerts.confirm('Are you sure? This is a one-way street!', this.del)
     },
 
     /**
diff --git a/resources/assets/js/components/main-wrapper/main-content/profile.vue b/resources/assets/js/components/main-wrapper/main-content/profile.vue
index 671a0abd..040ad393 100644
--- a/resources/assets/js/components/main-wrapper/main-content/profile.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/profile.vue
@@ -105,7 +105,6 @@
 
 <script>
 import $ from 'jquery'
-import swal from 'sweetalert'
 
 import { userStore, preferenceStore, sharedStore } from '../../../stores'
 import { forceReloadWindow } from '../../../utils'
@@ -139,13 +138,6 @@ export default {
       userStore.updateProfile(this.pwd).then(() => {
         this.pwd = ''
         this.confirmPwd = ''
-
-        swal({
-          title: 'Done!',
-          text: 'Profile saved.',
-          type: 'success',
-          allowOutsideClick: true
-        })
       })
     },
 
diff --git a/resources/assets/js/components/main-wrapper/main-content/settings.vue b/resources/assets/js/components/main-wrapper/main-content/settings.vue
index 2bd92327..bb82fb04 100644
--- a/resources/assets/js/components/main-wrapper/main-content/settings.vue
+++ b/resources/assets/js/components/main-wrapper/main-content/settings.vue
@@ -24,10 +24,8 @@
 </template>
 
 <script>
-import swal from 'sweetalert'
-
 import { settingStore, sharedStore } from '../../../stores'
-import { parseValidationError, forceReloadWindow, showOverlay, hideOverlay } from '../../../utils'
+import { parseValidationError, forceReloadWindow, showOverlay, hideOverlay, alerts } from '../../../utils'
 import router from '../../../router'
 
 export default {
@@ -54,15 +52,8 @@ export default {
   methods: {
     confirmThenSave () {
       if (this.shouldWarn) {
-        swal({
-          title: 'Be careful!',
-          text: 'Changing the media path will essentially remove all existing data – songs, artists, \
-          albums, favorites, everything – and empty your playlists!',
-          type: 'warning',
-          showCancelButton: true,
-          confirmButtonText: 'I know. Go ahead.',
-          confirmButtonColor: '#c34848'
-        }, this.save)
+        alerts.confirm('Warning: Changing the media path will essentially remove all existing data – songs, artists, \
+          albums, favorites, everything – and empty your playlists! Sure you want to proceed?', this.save)
       } else {
         this.save()
       }
@@ -86,13 +77,7 @@ export default {
         }
 
         hideOverlay()
-
-        swal({
-          title: 'Something went wrong',
-          text: msg,
-          type: 'error',
-          allowOutsideClick: true
-        })
+        alerts.error(msg)
       })
     }
   }
diff --git a/resources/assets/js/components/shared/user-item.vue b/resources/assets/js/components/shared/user-item.vue
index 5fbebd67..e6351a54 100644
--- a/resources/assets/js/components/shared/user-item.vue
+++ b/resources/assets/js/components/shared/user-item.vue
@@ -23,10 +23,9 @@
 </template>
 
 <script>
-import swal from 'sweetalert'
-
 import { userStore } from '../../stores'
 import router from '../../router'
+import { alerts } from '../../utils'
 
 export default {
   props: ['user'],
@@ -67,14 +66,7 @@ export default {
      * Kill off the freaking user.
      */
     del () {
-      swal({
-        title: 'Hey…',
-        text: `You’re about to unperson ${this.user.name}. Are you sure?`,
-        type: 'warning',
-        showCancelButton: true,
-        confirmButtonText: 'Certainly',
-        cancelButtonText: 'Oops'
-      }, () => {
+      alerts.confirm(`You’re about to unperson ${this.user.name}. Are you sure?`, () => {
         userStore.destroy(this.user).then(() => {
           this.$destroy(true)
         })
diff --git a/resources/assets/js/stores/favorite.js b/resources/assets/js/stores/favorite.js
index 3f1834fd..91b52838 100644
--- a/resources/assets/js/stores/favorite.js
+++ b/resources/assets/js/stores/favorite.js
@@ -2,6 +2,7 @@ import { each, map, difference, union } from 'lodash'
 import NProgress from 'nprogress'
 
 import { http } from '../services'
+import { alerts } from '../utils'
 
 export const favoriteStore = {
   state: {
@@ -43,7 +44,10 @@ export const favoriteStore = {
     NProgress.start()
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/like', { song: song.id }, data => resolve(data), r => reject(r))
+      http.post('interaction/like', { song: song.id }, data => {
+        // We don't really need to notify just for one song.
+        resolve(data)
+      }, r => reject(r))
     })
   },
 
@@ -88,7 +92,10 @@ export const favoriteStore = {
     NProgress.start()
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/batch/like', { songs: map(songs, 'id') }, data => resolve(data), r => reject(r))
+      http.post('interaction/batch/like', { songs: map(songs, 'id') }, data => {
+        alerts.success(`Added ${songs.length} song${songs.length === 1 ? '' : 's'} into Favorites.`)
+        resolve(data)
+      }, r => reject(r))
     })
   },
 
@@ -106,7 +113,10 @@ export const favoriteStore = {
     NProgress.start()
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/batch/unlike', { songs: map(songs, 'id') }, data => resolve(data), r => reject(r))
+      http.post('interaction/batch/unlike', { songs: map(songs, 'id') }, data => {
+        alerts.success(`Removed ${songs.length} song${songs.length === 1 ? '' : 's'} from Favorites.`)
+        resolve(data)
+      }, r => reject(r))
     })
   }
 }
diff --git a/resources/assets/js/stores/playlist.js b/resources/assets/js/stores/playlist.js
index a2178df7..733d21f4 100644
--- a/resources/assets/js/stores/playlist.js
+++ b/resources/assets/js/stores/playlist.js
@@ -3,6 +3,7 @@ import NProgress from 'nprogress'
 
 import stub from '../stubs/playlist'
 import { http } from '../services'
+import { alerts } from '../utils'
 import { songStore } from '.'
 
 export const playlistStore = {
@@ -104,6 +105,7 @@ export const playlistStore = {
         playlist.songs = songs
         this.objectifySongs(playlist)
         this.add(playlist)
+        alerts.success(`Created playlist &quot;${playlist.name}&quot;.`)
         resolve(playlist)
       }, r => reject(r))
     })
@@ -120,6 +122,7 @@ export const playlistStore = {
     return new Promise((resolve, reject) => {
       http.delete(`playlist/${playlist.id}`, {}, data => {
         this.remove(playlist)
+        alerts.success(`Deleted playlist &quot;${playlist.name}&quot;.`)
         resolve(data)
       }, r => reject(r))
     })
@@ -132,8 +135,6 @@ export const playlistStore = {
    * @param {Array.<Object>}  songs
    */
   addSongs (playlist, songs) {
-    NProgress.start()
-
     return new Promise((resolve, reject) => {
       const count = playlist.songs.length
       playlist.songs = union(playlist.songs, songs)
@@ -143,8 +144,13 @@ export const playlistStore = {
         return
       }
 
+      NProgress.start()
+
       http.put(`playlist/${playlist.id}/sync`, { songs: map(playlist.songs, 'id') },
-        data => resolve(playlist),
+        data => {
+          alerts.success(`Added ${songs.length} song${songs.length === 1 ? '' : 's'} into &quot;${playlist.name}&quot;.`)
+          resolve(playlist)
+        },
         r => reject(r)
       )
     })
@@ -163,7 +169,10 @@ export const playlistStore = {
 
     return new Promise((resolve, reject) => {
       http.put(`playlist/${playlist.id}/sync`, { songs: map(playlist.songs, 'id') },
-        data => resolve(playlist),
+        data => {
+          alerts.success(`Removed ${songs.length} song${songs.length === 1 ? '' : 's'} from &quot;${playlist.name}&quot;.`)
+          resolve(playlist)
+        },
         r => reject(r)
       )
     })
diff --git a/resources/assets/js/stores/setting.js b/resources/assets/js/stores/setting.js
index 6f20fdf4..b8c12d73 100644
--- a/resources/assets/js/stores/setting.js
+++ b/resources/assets/js/stores/setting.js
@@ -1,4 +1,5 @@
 import { http } from '../services'
+import { alerts } from '../utils'
 import stub from '../stubs/settings'
 
 export const settingStore = {
@@ -18,7 +19,10 @@ export const settingStore = {
 
   update () {
     return new Promise((resolve, reject) => {
-      http.post('settings', this.all, data => resolve(data), r => reject(r))
+      http.post('settings', this.all, data => {
+        alerts.success('Settings saved.')
+        resolve(data)
+      }, r => reject(r))
     })
   }
 }
diff --git a/resources/assets/js/stores/song.js b/resources/assets/js/stores/song.js
index 3c224d4b..bc5e3489 100644
--- a/resources/assets/js/stores/song.js
+++ b/resources/assets/js/stores/song.js
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { without, map, take, remove, orderBy, each, union } from 'lodash'
 
-import { secondsToHis } from '../utils'
+import { secondsToHis, alerts } from '../utils'
 import { http, ls } from '../services'
 import { sharedStore, favoriteStore, albumStore, artistStore } from '.'
 import stub from '../stubs/song'
@@ -204,6 +204,7 @@ export const songStore = {
         songs: map(songs, 'id')
       }, songs => {
         each(songs, song => this.syncUpdatedSong(song))
+        alerts.success(`Updated ${songs.length} song${songs.length === 1 ? '' : 's'}.`)
         resolve(songs)
       }, r => reject(r))
     })
diff --git a/resources/assets/js/stores/user.js b/resources/assets/js/stores/user.js
index f8cfc290..5fed9ff1 100644
--- a/resources/assets/js/stores/user.js
+++ b/resources/assets/js/stores/user.js
@@ -4,6 +4,7 @@ import Vue from 'vue'
 import NProgress from 'nprogress'
 
 import { http } from '../services'
+import { alerts } from '../utils'
 import stub from '../stubs/user'
 
 export const userStore = {
@@ -132,6 +133,7 @@ export const userStore = {
         email: this.current.email
       }, () => {
         this.setAvatar()
+        alerts.success('Profile updated.')
         resolve(this.current)
       },
       r => reject(r))
@@ -152,6 +154,7 @@ export const userStore = {
       http.post('user', { name, email, password }, user => {
         this.setAvatar(user)
         this.all.unshift(user)
+        alerts.success(`New user &quot;${name}&quot; created.`)
         resolve(user)
       }, r => reject(r))
     })
@@ -174,6 +177,7 @@ export const userStore = {
         user.name = name
         user.email = email
         user.password = ''
+        alerts.success('User profile updated.')
         resolve(user)
       }, r => reject(r))
     })
@@ -190,6 +194,7 @@ export const userStore = {
     return new Promise((resolve, reject) => {
       http.delete(`user/${user.id}`, {}, data => {
         this.all = without(this.all, user)
+        alerts.success(`User &quot;${user.name}&quot; deleted.`)
 
         // Mama, just killed a man
         // Put a gun against his head
diff --git a/resources/assets/js/utils/alerts.js b/resources/assets/js/utils/alerts.js
new file mode 100644
index 00000000..ff8b3c8e
--- /dev/null
+++ b/resources/assets/js/utils/alerts.js
@@ -0,0 +1,37 @@
+import alertify from 'alertify.js'
+
+const alerts = {
+  alert (msg) {
+    alertify.alert(msg)
+  },
+
+  confirm (msg, okFunc, cancelFunc = null) {
+    alertify.confirm(msg, okFunc, cancelFunc)
+  },
+
+  log (msg, type, cb = null) {
+    alertify.logPosition('top right')
+    alertify.closeLogOnClick(true)
+    switch (type) {
+      case 'success':
+        alertify.success(msg, cb)
+        break
+      case 'error':
+        alertify.error(msg, cb)
+        break
+      default:
+        alertify.log(msg, cb)
+        break
+    }
+  },
+
+  success (msg, cb = null) {
+    return this.log(msg, 'success', cb)
+  },
+
+  error (msg, cb = null) {
+    return this.log(msg, 'error', cb)
+  }
+}
+
+export { alerts }
diff --git a/resources/assets/js/utils/index.js b/resources/assets/js/utils/index.js
index 0c65130d..16178087 100644
--- a/resources/assets/js/utils/index.js
+++ b/resources/assets/js/utils/index.js
@@ -1,3 +1,4 @@
+export * from './alerts'
 export * from './filters'
 export * from './formatters'
 export * from './supports'
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index 9c6fbe39..9160c46e 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -6,6 +6,6 @@
 
 @import "vendor/_plyr.scss";
 @import "vendor/_nprogress.scss";
-@import "vendor/_sweetalert.scss";
+@import "vendor/_alertify.scss";
 
 @import "partials/_shared.scss";
diff --git a/resources/assets/sass/vendor/_alertify.scss b/resources/assets/sass/vendor/_alertify.scss
new file mode 100644
index 00000000..2a04d49b
--- /dev/null
+++ b/resources/assets/sass/vendor/_alertify.scss
@@ -0,0 +1,19 @@
+.alertify {
+  font-family: $fontFamily;
+  font-weight: $fontWeight_UltraThin;
+  background-color: rgba(0, 0, 0, .7);
+  z-index: 9999;
+
+  .dialog > div {
+    border-radius: 3px;
+  }
+}
+
+.alertify-logs {
+  font-family: $fontFamily;
+  font-weight: $fontWeight_UltraThin;
+
+  .show {
+    border-radius: 3px;
+  }
+}
diff --git a/resources/assets/sass/vendor/_sweetalert.scss b/resources/assets/sass/vendor/_sweetalert.scss
deleted file mode 100644
index 4377d702..00000000
--- a/resources/assets/sass/vendor/_sweetalert.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.sweet-alert {
-  font-family: $fontFamily;
-
-  fieldset input {
-    display: none !important;
-  }
-
-  h2 {
-    font-weight: $fontWeight_UltraThin;
-  }
-
-  p {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-  }
-
-  button {
-    box-shadow: none !important;
-    font-family: $fontFamily;
-    font-weight: $fontWeight_Thin;
-    font-size: 1.1rem;
-  }
-}