laravel horizon

vendor/laravel/horizon/resources/js/components/Alert.vue

@@ -0,0 +1,120 @@
+<script type="text/ecmascript-6">
+    import $ from 'jquery';
+
+    export default {
+        props: ['type', 'message', 'autoClose', 'confirmationProceed', 'confirmationCancel'],
+
+        data(){
+            return {
+                timeout: null,
+                anotherModalOpened: $('body').hasClass('modal-open')
+            }
+        },
+
+
+        mounted() {
+            $('#alertModal').modal({
+                backdrop: 'static',
+            });
+
+            $('#alertModal').on('hidden.bs.modal', e => {
+                this.$root.alert.type = null;
+                this.$root.alert.autoClose = false;
+                this.$root.alert.message = '';
+                this.$root.alert.confirmationProceed = null;
+                this.$root.alert.confirmationCancel = null;
+
+                if (this.anotherModalOpened) {
+                    $('body').addClass('modal-open');
+                }
+            });
+
+            if (this.autoClose) {
+                this.timeout = setTimeout(() => {
+                    this.close();
+                }, this.autoClose);
+            }
+        },
+
+
+        methods: {
+            /**
+             * Close the modal.
+             */
+            close(){
+                clearTimeout(this.timeout);
+
+                $('#alertModal').modal('hide');
+            },
+
+
+            /**
+             * Confirm and close the modal.
+             */
+            confirm(){
+                this.confirmationProceed();
+
+                this.close();
+            },
+
+
+            /**
+             * Cancel and close the modal.
+             */
+            cancel(){
+                if (this.confirmationCancel) {
+                    this.confirmationCancel();
+                }
+
+                this.close();
+            }
+        }
+    }
+</script>
+
+<template>
+    <div class="modal" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-body text-center">
+                    <p class="mt-3 mb-0">{{message}}</p>
+                </div>
+
+
+                <div class="modal-footer justify-content-center">
+
+                    <button v-if="type == 'error'" class="btn btn-secondary btn-sm" @click="close">
+                        CLOSE
+                    </button>
+
+                    <button v-if="type == 'success'" class="btn btn-secondary btn-sm" @click="close">
+                        OK
+                    </button>
+
+
+                    <button v-if="type == 'confirmation'" class="btn btn-danger btn-sm" @click="confirm">
+                        YES
+                    </button>
+                    <button v-if="type == 'confirmation'" class="btn btn-secondary btn-sm" @click="cancel">
+                        NO, CANCEL
+                    </button>
+
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style>
+    #alertModal {
+        z-index: 99999;
+        background: rgba(0, 0, 0, 0.5);
+    }
+
+    #alertModal svg {
+        display: block;
+        margin: 0 auto;
+        width: 4rem;
+        height: 4rem;
+    }
+</style>