feat: confirm modal + chore(deps): bump

2020-12-14 10:35:14 +05:30
parent 858ab252a6
commit 81a6d821c0
9 changed files with 211 additions and 106 deletions
--- a/components/collections/collection.vue
+++ b/components/collections/collection.vue
@@ -46,7 +46,7 @@
              </button>
            </div>
            <div>
-              <button class="icon" @click="removeCollection" v-close-popover>
+              <button class="icon" @click="confirmRemove = true" v-close-popover>
                <i class="material-icons">delete</i>
                <span>{{ $t("delete") }}</span>
              </button>
@@ -103,6 +103,12 @@
        </li>
      </ul>
    </div>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_collection')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeCollection"
+    />
  </div>
 </template>

@@ -121,6 +127,7 @@ export default {
      showChildren: false,
      dragging: false,
      selectedFolder: {},
+      confirmRemove: false,
    }
  },
  methods: {
@@ -135,7 +142,6 @@ export default {
      this.showChildren = !this.showChildren
    },
    removeCollection() {
-      if (!confirm(this.$t("are_you_sure_remove_collection"))) return
      this.$store.commit("postwoman/removeCollection", {
        collectionIndex: this.collectionIndex,
      })
--- a/components/collections/folder.vue
+++ b/components/collections/folder.vue
@@ -43,7 +43,7 @@
            </button>
          </div>
          <div>
-            <button class="icon" @click="removeFolder" v-close-popover>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
              <i class="material-icons">delete</i>
              <span>{{ $t("delete") }}</span>
            </button>
@@ -93,6 +93,12 @@
        </li>
      </ul>
    </div>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_folder')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeFolder"
+    />
  </div>
 </template>

@@ -113,6 +119,7 @@ export default {
    return {
      showChildren: false,
      dragging: false,
+      confirmRemove: false,
    }
  },
  methods: {
@@ -127,7 +134,6 @@ export default {
      this.showChildren = !this.showChildren
    },
    removeFolder() {
-      if (!confirm(this.$t("are_you_sure_remove_folder"))) return
      this.$store.commit("postwoman/removeFolder", {
        collectionIndex: this.$props.collectionIndex,
        folderName: this.$props.folder.name,
--- a/components/collections/request.vue
+++ b/components/collections/request.vue
@@ -1,53 +1,61 @@
 <template>
-  <div
-    :class="['row-wrapper', dragging ? 'drag-el' : '']"
-    draggable="true"
-    @dragstart="dragStart"
-    @dragover.stop
-    @dragleave="dragging = false"
-    @dragend="dragging = false"
-  >
-    <div>
-      <button
-        class="icon"
-        @click="!doc ? selectRequest() : {}"
-        v-tooltip="!doc ? $t('use_request') : ''"
-      >
-        <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
-        <span>{{ request.name }}</span>
-      </button>
+  <div>
+    <div
+      :class="['row-wrapper', dragging ? 'drag-el' : '']"
+      draggable="true"
+      @dragstart="dragStart"
+      @dragover.stop
+      @dragleave="dragging = false"
+      @dragend="dragging = false"
+    >
+      <div>
+        <button
+          class="icon"
+          @click="!doc ? selectRequest() : {}"
+          v-tooltip="!doc ? $t('use_request') : ''"
+        >
+          <span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
+          <span>{{ request.name }}</span>
+        </button>
+      </div>
+      <v-popover>
+        <button class="tooltip-target icon" v-tooltip="$t('more')">
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button
+              class="icon"
+              @click="
+                $emit('edit-request', {
+                  collectionIndex,
+                  folderIndex,
+                  folderName,
+                  request,
+                  requestIndex,
+                })
+              "
+              v-close-popover
+            >
+              <i class="material-icons">edit</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
    </div>
-    <v-popover>
-      <button class="tooltip-target icon" v-tooltip="$t('more')">
-        <i class="material-icons">more_vert</i>
-      </button>
-      <template slot="popover">
-        <div>
-          <button
-            class="icon"
-            @click="
-              $emit('edit-request', {
-                collectionIndex,
-                folderIndex,
-                folderName,
-                request,
-                requestIndex,
-              })
-            "
-            v-close-popover
-          >
-            <i class="material-icons">edit</i>
-            <span>{{ $t("edit") }}</span>
-          </button>
-        </div>
-        <div>
-          <button class="icon" @click="removeRequest" v-close-popover>
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
-          </button>
-        </div>
-      </template>
-    </v-popover>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_request')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeRequest"
+    />
  </div>
 </template>

@@ -73,6 +81,7 @@ export default {
        delete: "text-red-400",
        default: "text-gray-400",
      },
+      confirmRemove: false,
    }
  },
  methods: {
@@ -94,7 +103,6 @@ export default {
      dataTransfer.setData("requestIndex", this.$props.requestIndex)
    },
    removeRequest() {
-      if (!confirm(this.$t("are_you_sure_remove_request"))) return
      this.$store.commit("postwoman/removeRequest", {
        collectionIndex: this.$props.collectionIndex,
        folderName: this.$props.folderName,
--- a/components/environments/environment.vue
+++ b/components/environments/environment.vue
@@ -1,30 +1,38 @@
 <template>
-  <div class="row-wrapper">
-    <div>
-      <button class="icon" @click="$emit('edit-environment')">
-        <i class="material-icons">layers</i>
-        <span>{{ environment.name }}</span>
-      </button>
+  <div>
+    <div class="row-wrapper">
+      <div>
+        <button class="icon" @click="$emit('edit-environment')">
+          <i class="material-icons">layers</i>
+          <span>{{ environment.name }}</span>
+        </button>
+      </div>
+      <v-popover>
+        <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+          <i class="material-icons">more_vert</i>
+        </button>
+        <template slot="popover">
+          <div>
+            <button class="icon" @click="$emit('edit-environment')" v-close-popover>
+              <i class="material-icons">create</i>
+              <span>{{ $t("edit") }}</span>
+            </button>
+          </div>
+          <div>
+            <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <i class="material-icons">delete</i>
+              <span>{{ $t("delete") }}</span>
+            </button>
+          </div>
+        </template>
+      </v-popover>
    </div>
-    <v-popover>
-      <button class="tooltip-target icon" v-tooltip.left="$t('more')">
-        <i class="material-icons">more_vert</i>
-      </button>
-      <template slot="popover">
-        <div>
-          <button class="icon" @click="$emit('edit-environment')" v-close-popover>
-            <i class="material-icons">create</i>
-            <span>{{ $t("edit") }}</span>
-          </button>
-        </div>
-        <div>
-          <button class="icon" @click="removeEnvironment" v-close-popover>
-            <i class="material-icons">delete</i>
-            <span>{{ $t("delete") }}</span>
-          </button>
-        </div>
-      </template>
-    </v-popover>
+    <confirm-modal
+      :show="confirmRemove"
+      :title="$t('are_you_sure_remove_environment')"
+      @hide-modal="confirmRemove = false"
+      @resolve="removeEnvironment"
+    />
  </div>
 </template>

@@ -36,6 +44,11 @@ export default {
    environment: Object,
    environmentIndex: Number,
  },
+  data() {
+    return {
+      confirmRemove: false,
+    }
+  },
  methods: {
    syncEnvironments() {
      if (fb.currentUser !== null) {
@@ -45,7 +58,6 @@ export default {
      }
    },
    removeEnvironment() {
-      if (!confirm(this.$t("are_you_sure_remove_environment"))) return
      this.$store.commit("postwoman/removeEnvironment", this.environmentIndex)
      this.$toast.error(this.$t("deleted"), {
        icon: "delete",
--- a/components/ui/confirm-modal.vue
+++ b/components/ui/confirm-modal.vue
@@ -0,0 +1,71 @@
+<template>
+  <modal v-if="show" @close="hideModal">
+    <div slot="header">
+      <div class="row-wrapper">
+        <h3 class="title">{{ $t("confirm") }}</h3>
+        <div>
+          <button class="icon" @click="hideModal">
+            <i class="material-icons">close</i>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div slot="body" class="flex flex-col">
+      <label>{{ title }}</label>
+    </div>
+    <div slot="footer">
+      <div class="row-wrapper">
+        <span></span>
+        <span>
+          <button class="icon" @click="hideModal">
+            {{ no }}
+          </button>
+          <button class="icon primary" @click="resolve">
+            {{ yes }}
+          </button>
+        </span>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+export default {
+  props: {
+    show: Boolean,
+    title: "",
+    yes: {
+      type: String,
+      default: function () {
+        return this.$t("yes")
+      },
+    },
+    no: {
+      type: String,
+      default: function () {
+        return this.$t("no")
+      },
+    },
+  },
+  async mounted() {
+    this._keyListener = function (e) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        this.hideModal()
+      }
+    }
+    document.addEventListener("keydown", this._keyListener.bind(this))
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    resolve() {
+      this.$emit("resolve")
+    },
+  },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
+}
+</script>
--- a/components/ui/modal.vue
+++ b/components/ui/modal.vue
@@ -19,6 +19,7 @@
    </div>
  </transition>
 </template>
+
 <style scoped lang="scss">
 .modal-backdrop {
  @apply fixed;
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -300,5 +300,6 @@
  "gist_created": "Gist created",
  "import_from_gist": "Import from Gist",
  "enter_gist_url": "Enter Gist URL",
-  "account_exists": "Account exists with different credential - Login to link both accounts"
+  "account_exists": "Account exists with different credential - Login to link both accounts",
+  "confirm": "Confirm"
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -1474,9 +1474,9 @@
      "integrity": "sha512-L/ZnJRAq7F++utfuoTKX4CLBG5YR7tFO3PLzG1/oXXKEezJ0kRL3CMRoueBEmTCzVb/6SIs2Qlaw++uDgi5Xyg=="
    },
    "@firebase/auth": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.15.3.tgz",
-      "integrity": "sha512-nGJ0sVRgfd6ly4MyKhc1wyVoINLpQsxJ7uasw30qTssPdDQFus8uDu6Kmy0nN2XzRpYAfchQzZRHE9Q5Y2FHqA==",
+      "version": "0.16.0",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-0.16.0.tgz",
+      "integrity": "sha512-1d8WvbGCCaTMZXqevjrkrFzP6FFvFORHBUByQc5xVpDty+kQxIayeWxUqyEuwGm57BrQ1fUwveH2G9a4DGarCQ==",
      "requires": {
        "@firebase/auth-types": "0.10.1"
      }
@@ -1523,12 +1523,12 @@
      }
    },
    "@firebase/firestore": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-2.0.5.tgz",
-      "integrity": "sha512-RBA2A/tnA6ZFQY3pD0TJXRzjB9+D+zaLXzvTVxTO/Sxt8l2cRNFiQhYvHihD6aV/jm3n7RUQ2U7TDtzfXq7jjQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-2.1.0.tgz",
+      "integrity": "sha512-CKzZdht5ECpOGsfxOfeea7rXFTeR/wR7Lbh12TQI7Ru4CfhfdMBQPw9gs4wBX+WyKifp18Fz/bjP8Lly5RgNMg==",
      "requires": {
        "@firebase/component": "0.1.21",
-        "@firebase/firestore-types": "2.0.0",
+        "@firebase/firestore-types": "2.1.0",
        "@firebase/logger": "0.2.6",
        "@firebase/util": "0.3.4",
        "@firebase/webchannel-wrapper": "0.4.1",
@@ -1539,9 +1539,9 @@
      }
    },
    "@firebase/firestore-types": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.0.0.tgz",
-      "integrity": "sha512-ZGb7p1SSQJP0Z+kc9GAUi+Fx5rJatFddBrS1ikkayW+QHfSIz0omU23OgSHcBGTxe8dJCeKiKA2Yf+tkDKO/LA=="
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-2.1.0.tgz",
+      "integrity": "sha512-jietErBWihMvJkqqEquQy5GgoEwzHnMXXC/TsVoe9FPysXm1/AeJS12taS7ZYvenAtyvL/AEJyKrRKRh4adcJQ=="
    },
    "@firebase/functions": {
      "version": "0.6.1",
@@ -1601,9 +1601,9 @@
      "integrity": "sha512-QaaBswrU6umJYb/ZYvjR5JDSslCGOH6D9P136PhabFAHLTR4TWjsaACvbBXuvwrfCXu10DtcjMxqfhdNIB1Xfg=="
    },
    "@firebase/performance": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.4.4.tgz",
-      "integrity": "sha512-CY/fzz7qGQ9hUkvOow22MeJhayHSjXmI4+0AqcxaUC4CWk4oQubyIC4pk62aH+yCwZNNeC7JJUEDbtqI/0rGkQ==",
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.4.5.tgz",
+      "integrity": "sha512-oenEOaV/UzvV8XPi8afYQ71RzyrHoBesqOyXqb1TOg7dpU+i+UJ5PS8K64DytKUHTxQl+UJFcuxNpsoy9BpWzw==",
      "requires": {
        "@firebase/component": "0.1.21",
        "@firebase/installations": "0.4.19",
@@ -7385,20 +7385,20 @@
      }
    },
    "firebase": {
-      "version": "8.1.2",
-      "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.1.2.tgz",
-      "integrity": "sha512-I1nYPQpE22sKWKc4A4GQNl0k0G1IbPZ5KvyzwEP4fAkLSX9j1rNwh7S902CJIjUxOXV/QOU7e/gYtNRc5SX98Q==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-8.2.0.tgz",
+      "integrity": "sha512-+xmFd6/E9dZC3OC16lPll5ql5tCi/CHu/iu66OAqZZwriwnxZTp48uQp5Rk/YiOkl19iyf9jzPx5NX3NXpXXbA==",
      "requires": {
        "@firebase/analytics": "0.6.2",
        "@firebase/app": "0.6.13",
        "@firebase/app-types": "0.6.1",
-        "@firebase/auth": "0.15.3",
+        "@firebase/auth": "0.16.0",
        "@firebase/database": "0.8.1",
-        "@firebase/firestore": "2.0.5",
+        "@firebase/firestore": "2.1.0",
        "@firebase/functions": "0.6.1",
        "@firebase/installations": "0.4.19",
        "@firebase/messaging": "0.7.3",
-        "@firebase/performance": "0.4.4",
+        "@firebase/performance": "0.4.5",
        "@firebase/polyfill": "0.3.36",
        "@firebase/remote-config": "0.1.30",
        "@firebase/storage": "0.4.2",
@@ -7709,9 +7709,9 @@
      "dev": true
    },
    "gaxios": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.0.1.tgz",
-      "integrity": "sha512-jOin8xRZ/UytQeBpSXFqIzqU7Fi5TqgPNLlUsSB8kjJ76+FiGBfImF8KJu++c6J4jOldfJUtt0YmkRj2ZpSHTQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-4.1.0.tgz",
+      "integrity": "sha512-vb0to8xzGnA2qcgywAjtshOKKVDf2eQhJoiL6fHhgW5tVN7wNk7egnYIO9zotfn3lQ3De1VPdf7V5/BWfCtCmg==",
      "requires": {
        "abort-controller": "^3.0.0",
        "extend": "^3.0.2",
@@ -13060,9 +13060,9 @@
      },
      "dependencies": {
        "@types/node": {
-          "version": "13.13.34",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.34.tgz",
-          "integrity": "sha512-g8D1HF2dMDKYSDl5+79izRwRgNPsSynmWMbj50mj7GZ0b7Lv4p8EmZjbo3h0h+6iLr6YmVz9VnF6XVZ3O6V1Ug=="
+          "version": "13.13.35",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.35.tgz",
+          "integrity": "sha512-q9aeOGwv+RRou/ca4aJVUM/jD5u7LBexu+rq9PkA/NhHNn8JifcMo94soKm0b6JGSfw/PSNdqtc428OscMvEYA=="
        }
      }
    },
--- a/package.json
+++ b/package.json
@@ -30,7 +30,7 @@
    "@nuxtjs/toast": "^3.3.1",
    "ace-builds": "^1.4.12",
    "esprima": "^4.0.1",
-    "firebase": "^8.1.2",
+    "firebase": "^8.2.0",
    "graphql": "^15.4.0",
    "graphql-language-service-interface": "^2.5.0",
    "mustache": "^4.1.0",