feat(vuejs): replace old izitoast by sweetalert2

* style: format all view files * chore: run npm audit fix
hbollon · Jul 18, 2021 · 8323661 · 8323661
1 parent 33e6eb1
commit 8323661
Show file tree

Hide file tree

Showing 7 changed files with 574 additions and 404 deletions.
diff --git a/resources/static/vue-igopher/package-lock.json b/resources/static/vue-igopher/package-lock.json
diff --git a/resources/static/vue-igopher/package.json b/resources/static/vue-igopher/package.json
@@ -11,9 +11,9 @@
     "dependencies": {
         "core-js": "^3.6.5",
         "mitt": "^2.1.0",
+        "sweetalert2": "^11.0.18",
         "vue": "^3.0.11",
         "vue-class-component": "^8.0.0-0",
-        "vue-izitoast": "^1.2.1",
         "vue-router": "^4.0.0-0"
     },
     "devDependencies": {

diff --git a/resources/static/vue-igopher/src/App.vue b/resources/static/vue-igopher/src/App.vue
@@ -64,4 +64,36 @@ export default class App extends Vue {}
   color: #fff;
   background-color: rgb(68, 68, 68);
 }
+
+.colored-toast.swal2-icon-success {
+  background-color: #a5dc86 !important;
+}
+
+.colored-toast.swal2-icon-error {
+  background-color: #f27474 !important;
+}
+
+.colored-toast.swal2-icon-warning {
+  background-color: #f8bb86 !important;
+}
+
+.colored-toast.swal2-icon-info {
+  background-color: #3fc3ee !important;
+}
+
+.colored-toast.swal2-icon-question {
+  background-color: #87adbd !important;
+}
+
+.colored-toast .swal2-title {
+  color: white;
+}
+
+.colored-toast .swal2-close {
+  color: white;
+}
+
+.colored-toast .swal2-content {
+  color: white;
+}
 </style>
diff --git a/resources/static/vue-igopher/src/config.ts b/resources/static/vue-igopher/src/config.ts
@@ -1,18 +1,21 @@
 import { Astor } from "./plugins/astilectron";
-export const iziToast: any = require("izitoast"); // eslint-disable-line
+import Swal from 'sweetalert2'
 export const bootstrap: any = require("@/bootstrap/js/bootstrap.min.js"); // eslint-disable-line
 export const SUCCESS = "Success";
 export const ERROR = "Error";
 export var igopherConfig: any; // eslint-disable-line
 
-// iziToast configuration for notification system
-iziToast.settings({
-  position: "topRight",
-  timeout: 8000,
-  closeOnClick: true,
-  resetOnHover: false,
-  transitionIn: "flipInX",
-  transitionOut: "flipOutX",
+export const Toast = Swal.mixin({
+  toast: true,
+  position: 'top-right',
+  iconColor: 'white',
+  customClass: {
+    popup: 'colored-toast'
+  },
+  showConfirmButton: false,
+  showCloseButton: true,
+  timer: 3000,
+  timerProgressBar: true
 });
 
 // Parse JSON Array to JSON Object
@@ -45,9 +48,9 @@ export function getIgopherConfig(astor: Astor, callback: () => void) {
       console.log("getIgopherConfig: ", igopherConfig);
       callback();
     } else {
-      console.log(message.msg);
-      iziToast.error({
-        message: message.msg,
+      Toast.fire({
+        icon: 'error',
+        title: 'Error',
       });
     }
   });