Skip to content

Commit 2f6984a

Browse files
bvipulbvipul
authored
Merge pull request #198 from bvipul/develop
Vue component for Flash messages
2 parents 009599a + 378a383 commit 2f6984a

File tree

5 files changed

+144
-44
lines changed

5 files changed

+144
-44
lines changed

‎resources/assets/js/backend/app.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -735,4 +735,16 @@ function _init() {
735735
}
736736
});
737737
};
738-
}(jQuery));
738+
}(jQuery));
739+
740+
/**
741+
* Next, we will create a fresh Vue application instance and attach it to
742+
* the page. Then, you may begin adding components to this application
743+
* or customize the JavaScript scaffolding to fit your unique needs.
744+
*/
745+
746+
Vue.component('flash', require('../components/backend/Flash.vue'));
747+
748+
const app = new Vue({
749+
el: '#app'
750+
});

‎resources/assets/js/bootstrap.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,10 @@ window.axios.defaults.headers.common = {
5050
// var glob = require( 'glob' )
5151
// , path = require( 'path' );
5252

53-
require('tinymce/tinymce');
53+
require('tinymce/tinymce');
54+
55+
window.events = new Vue();
56+
57+
window.flash = function(message, type) {
58+
window.events.$emit('flash', message, type);
59+
}

‎resources/assets/js/components/backend/Flash.vue‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<template>
2+
<div :class="typeClass" v-show="show">
3+
{{ body }}
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
props: ['message' , 'type'],
10+
11+
data() {
12+
return {
13+
body: '',
14+
typeClass: '',
15+
show: false
16+
}
17+
},
18+
19+
created() {
20+
var context = this;
21+
if(this.message && this.type) {
22+
this.flash(this.message, this.type);
23+
}
24+
25+
window.events.$on('flash', function(message, type) {
26+
context.flash(message, type);
27+
});
28+
},
29+
30+
methods: {
31+
flash(message, type) {
32+
this.body = message;
33+
this.typeClass = "alert alert-" + type;
34+
this.show = true;
35+
36+
this.hide();
37+
},
38+
39+
hide() {
40+
setTimeout(() => {
41+
this.show = false;
42+
}, 3000);
43+
}
44+
}
45+
}
46+
</script>

‎resources/views/backend/layouts/app.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
<div class="loading" style="display:none"></div>
4646
@include('includes.partials.logged-in-as')
4747

48-
<div class="wrapper">
48+
<div class="wrapper" id="app">
4949
@include('backend.includes.header')
5050
@include('backend.includes.sidebar-dynamic')
5151

‎resources/views/includes/partials/messages.blade.php‎

Lines changed: 77 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,83 @@
1+
@php
2+
$message = '';
3+
$type = '';
4+
@endphp
5+
16
@if ($errors->any())
2-
<div class="alert alert-danger">
3-
@foreach ($errors->all() as $error)
4-
{!! $error !!}<br/>
5-
@endforeach
6-
</div>
7+
@php
8+
$type = 'danger';
9+
@endphp
10+
@foreach ($errors->all() as $error)
11+
@php
12+
$message .= $error . '<br/>';
13+
@endphp
14+
@endforeach
715
@elseif (session()->get('flash_success'))
8-
<div class="alert alert-success">
9-
@if(is_array(json_decode(session()->get('flash_success'), true)))
10-
{!! implode('', session()->get('flash_success')->all(':message<br/>')) !!}
11-
@else
12-
{!! session()->get('flash_success') !!}
13-
@endif
14-
</div>
16+
@php
17+
$type = 'success';
18+
@endphp
19+
@if(is_array(json_decode(session()->get('flash_success'), true)))
20+
@php
21+
$message = implode('', session()->get('flash_success')->all(':message<br/>'));
22+
@endphp
23+
@else
24+
@php
25+
$message = session()->get('flash_success');
26+
@endphp
27+
@endif
1528
@elseif (session()->get('flash_warning'))
16-
<div class="alert alert-warning">
17-
@if(is_array(json_decode(session()->get('flash_warning'), true)))
18-
{!! implode('', session()->get('flash_warning')->all(':message<br/>')) !!}
19-
@else
20-
{!! session()->get('flash_warning') !!}
21-
@endif
22-
</div>
29+
@php
30+
$type = 'warning';
31+
@endphp
32+
@if(is_array(json_decode(session()->get('flash_warning'), true)))
33+
@php
34+
$message = implode('', session()->get('flash_warning')->all(':message<br/>'));
35+
@endphp
36+
@else
37+
@php
38+
$message = session()->get('flash_warning');
39+
@endphp
40+
@endif
2341
@elseif (session()->get('flash_info'))
24-
<div class="alert alert-info">
25-
@if(is_array(json_decode(session()->get('flash_info'), true)))
26-
{!! implode('', session()->get('flash_info')->all(':message<br/>')) !!}
27-
@else
28-
{!! session()->get('flash_info') !!}
29-
@endif
30-
</div>
42+
@php
43+
$type = 'info';
44+
@endphp
45+
@if(is_array(json_decode(session()->get('flash_info'), true)))
46+
@php
47+
$message = implode('', session()->get('flash_info')->all(':message<br/>'));
48+
@endphp
49+
@else
50+
@php
51+
$message = session()->get('flash_info');
52+
@endphp
53+
@endif
3154
@elseif (session()->get('flash_danger'))
32-
<div class="alert alert-danger">
33-
@if(is_array(json_decode(session()->get('flash_danger'), true)))
34-
{!! implode('', session()->get('flash_danger')->all(':message<br/>')) !!}
35-
@else
36-
{!! session()->get('flash_danger') !!}
37-
@endif
38-
</div>
55+
@php
56+
$type = 'danger';
57+
@endphp
58+
@if(is_array(json_decode(session()->get('flash_danger'), true)))
59+
@php
60+
$message = implode('', session()->get('flash_danger')->all(':message<br/>'));
61+
@endphp
62+
@else
63+
@php
64+
$message = session()->get('flash_danger');
65+
@endphp
66+
@endif
3967
@elseif (session()->get('flash_message'))
40-
<div class="alert alert-info">
41-
@if(is_array(json_decode(session()->get('flash_message'), true)))
42-
{!! implode('', session()->get('flash_message')->all(':message<br/>')) !!}
43-
@else
44-
{!! session()->get('flash_message') !!}
45-
@endif
46-
</div>
47-
@endif
68+
@php
69+
$type = 'info';
70+
@endphp
71+
@if(is_array(json_decode(session()->get('flash_message'), true)))
72+
@php
73+
$message = implode('', session()->get('flash_message')->all(':message<br/>'));
74+
@endphp
75+
@else
76+
@php
77+
$message = session()->get('flash_message');
78+
@endphp
79+
@endif
80+
@endif
81+
82+
<!-- Flash Message Vue component -->
83+
<flash message="{!! $message !!}" type="{{ $type }}"></flash>

0 commit comments

Comments
 (0)