From 3e4b13d20fc27be375e835dd7ceed5ac7863efa3 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Sun, 24 Apr 2022 21:34:39 +0200
Subject: [PATCH] Added standard Vue component for confirm dialogs

---
 .../src/components/elements/ConfirmDialog.vue | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue

diff --git a/platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue b/platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue
new file mode 100644
index 00000000..54368aac
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue
@@ -0,0 +1,84 @@
+<template>
+  <Modal ref="modal" :title="title">
+    <div class="dialog-content">
+      <slot />
+    </div>
+
+    <form class="buttons" @submit.prevent="onConfirm">
+      <button type="submit" class="ok-btn" @click="onConfirm" @touch="onConfirm">
+        <i class="fas fa-check" /> &nbsp; {{ confirmText }}
+      </button>
+      <button type="button" class="cancel-btn" @click="close" @touch="close">
+        <i class="fas fa-xmark" /> &nbsp; {{ cancelText }}
+      </button>
+    </form>
+  </Modal>
+</template>
+
+<script>
+import Modal from "@/components/Modal";
+
+export default {
+  emits: ['input', 'click', 'touch'],
+  components: {Modal},
+  props: {
+    title: {
+      type: String,
+    },
+
+    confirmText: {
+      type: String,
+      default: "OK",
+    },
+
+    cancelText: {
+      type: String,
+      default: "Cancel",
+    },
+  },
+
+  methods: {
+    onConfirm() {
+      this.$emit('input')
+      this.close()
+    },
+
+    show() {
+      this.$refs.modal.show()
+    },
+
+    close() {
+      this.$refs.modal.hide()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.modal) {
+  .dialog-content {
+    padding: 1em;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+    padding: 1em 0 1em 1em;
+    border: 0;
+    border-radius: 0;
+    box-shadow: 0 -1px 2px 0 $default-shadow-color;
+
+    button {
+      margin-right: 1em;
+      padding: 0.5em 1em;
+      border: 1px solid $border-color-2;
+      border-radius: 1em;
+
+      &:hover {
+        background: $hover-bg;
+      }
+    }
+  }
+}
+</style>