Skip to content
Permalink
Browse files

Confirm Dialog Episode Complete

  • Loading branch information...
JeffreyWay committed Jun 5, 2019
1 parent 2dd087f commit 5a54de4c04758f1e9b69bd02dfa42dfb037c6fc9
@@ -33,7 +33,6 @@ class Kernel extends HttpKernel
\Illuminate\Session\Middleware\StartSession::class,
// \Illuminate\Session\Middleware\AuthenticateSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
@@ -5,6 +5,8 @@ import Modal from './plugins/modal/ModalPlugin';
import ScrollLink from './components/ScrollLink';
import Dropdown from './components/Dropdown';
import Visible from './components/Visible';
import ConfirmButton from './components/ConfirmButton';
import ConfirmDialog from './components/ConfirmDialog';

window.Vue = Vue;

@@ -13,7 +15,27 @@ Vue.use(Modal);
Vue.component('scroll-link', ScrollLink);
Vue.component('dropdown', Dropdown);
Vue.component('visible', Visible);
Vue.component('confirm-button', ConfirmButton);
Vue.component('confirm-dialog', ConfirmDialog);

new Vue({
el: '#app'
el: '#app',

methods: {
confirm(message) {
this.$modal.dialog(message)
.then(confirmed => {
if (confirmed) {
// Proceed. Submit ajax request, etc.
alert('Proceed');
} else {
// Optionally override the button visibility and labels.
this.$modal.dialog('Okay, canceled', {
cancelButton: 'Close',
confirmButton: false
});
}
});
}
}
});
@@ -0,0 +1,38 @@
<template>
<button @click="confirm">
<slot></slot>
</button>
</template>

<script>
export default {
props: {
message: {},
confirmButton: { default: 'Continue' },
cancelButton: { default: 'Cancel' }
},
data() {
return { confirmed: false };
},
methods: {
confirm(e) {
if (this.confirmed) {
return;
}
e.preventDefault();
this.$modal.dialog(this._props)
.then(confirmed => {
this.confirmed = confirmed;
if (confirmed) {
this.$el.click();
}
});
}
}
}
</script>
@@ -0,0 +1,53 @@
<template>
<modal name="dialog">
{{ params.message }}

<template v-slot:footer>
<button
class="bg-gray-500 hover:bg-gray-600 py-2 px-4 text-white rounded-lg mr-2"
@click.prevent="handleClick(false)"
v-if="params.cancelButton"
v-text="params.cancelButton"
>
</button>

<button
class="bg-blue-500 hover:bg-blue-600 py-2 px-4 text-white rounded-lg"
@click.prevent="handleClick(true)"
v-if="params.confirmButton"
v-text="params.confirmButton"
>
</button>
</template>
</modal>
</template>

<script>
import Modal from '../plugins/modal/ModalPlugin';
export default {
data() {
return {
params: {
message: 'Are you sure?',
confirmButton: 'Continue',
cancelButton: 'Cancel'
}
};
},
beforeMount() {
Modal.events.$on('show', params => {
Object.assign(this.params, params);
});
},
methods: {
handleClick(confirmed) {
Modal.events.$emit('clicked', confirmed);
this.$modal.hide();
}
}
}
</script>
@@ -4,13 +4,33 @@ let Plugin = {
install: function (Vue, options = {}) {
Vue.component('modal', Component);

Plugin.events = new Vue();

Vue.prototype.$modal = {
show(name) {
show(name, params = {}) {
location.hash = name;

Plugin.events.$emit('show', params);
},

hide(name) {
location.hash = '#';
},

dialog(message, params = {}) {
if (typeof message === 'string') {
params.message = message;
} else {
params = message;
}

return new Promise((resolve, reject) => {
this.show('dialog', params);

Plugin.events.$on(
'clicked', confirmed => resolve(confirmed)
);
});
}
}
}
@@ -7,12 +7,46 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<title>Confirmation Modal</title>
<title>Confirmation Dialogs</title>
</head>
<body class="font-sans p-10">
<div id="app" class="text-center">
<h1 class="text-2xl font-bold mb-8">Confirmation Button</h1>
<h1 class="text-2xl font-bold mb-8">Confirmation Dialogs</h1>
<div class="mb-6">
<form method="POST">
<confirm-button
message="Are you sure you want to cancel your account?"
class="bg-blue-500 hover:bg-blue-600 py-2 px-4 text-white rounded-lg"
>
Option 1
</confirm-button>
</form>
</div>
<div class="mb-6">
<form method="POST">
<confirm-button
message="Are you sure you want to cancel your account?"
cancel-button="Go Back"
confirm-button="Continue On"
class="bg-blue-500 hover:bg-blue-600 py-2 px-4 text-white rounded-lg"
>
Option 2
</confirm-button>
</form>
</div>
<div class="mb-6">
<form method="POST" @submit.prevent="confirm('Are you really sure about this?')">
<button class="bg-blue-500 hover:bg-blue-600 py-2 px-4 text-white rounded-lg">
Option 3
</button>
</form>
</div>
<confirm-dialog></confirm-dialog>
</div>
<script src="/js/app.js"></script>
@@ -25,3 +25,7 @@
return view($uri);
});
});
Route::post('confirmation-button', function () {
return 'Form submitted';
});

0 comments on commit 5a54de4

Please sign in to comment.
You can’t perform that action at this time.