1 files changed, 77 insertions, 0 deletions
diff --git a/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue b/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue
new file mode 100644
index 00000000000..a08d32028c3
--- /dev/null
+++ b/app/assets/javascripts/pages/admin/users/components/user_modal_manager.vue
@@ -0,0 +1,77 @@
+<script>
+export default {
+  props: {
+    modalConfiguration: {
+      required: true,
+      type: Object,
+    },
+    actionModals: {
+      required: true,
+      type: Object,
+    },
+    csrfToken: {
+      required: true,
+      type: String,
+    },
+  },
+  data() {
+    return {
+      currentModalData: null,
+    };
+  },
+  computed: {
+    activeModal() {
+      if (!this.currentModalData) return null;
+      const { glModalAction: action } = this.currentModalData;
+
+      return this.actionModals[action];
+    },
+
+    modalProps() {
+      const { glModalAction: requestedAction } = this.currentModalData;
+      return {
+        ...this.modalConfiguration[requestedAction],
+        ...this.currentModalData,
+        csrfToken: this.csrfToken,
+      };
+    },
+  },
+
+  mounted() {
+    document.addEventListener('click', this.handleClick);
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('click', this.handleClick);
+  },
+
+  methods: {
+    handleClick(e) {
+      const { glModalAction: action } = e.target.dataset;
+      if (!action) return;
+
+      this.show(e.target.dataset);
+      e.preventDefault();
+    },
+
+    show(modalData) {
+      const { glModalAction: requestedAction } = modalData;
+      if (!this.actionModals[requestedAction]) {
+        throw new Error(`Requested non-existing modal action ${requestedAction}`);
+      }
+      if (!this.modalConfiguration[requestedAction]) {
+        throw new Error(`Modal action ${requestedAction} has no configuration in HTML`);
+      }
+
+      this.currentModalData = modalData;
+
+      return this.$nextTick().then(() => {
+        this.$refs.modal.show();
+      });
+    },
+  },
+};
+</script>
+<template>
+  <div :is="activeModal" v-if="activeModal" ref="modal" v-bind="modalProps" />
+</template>