Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Add flash messages
- Loading branch information
Showing
6 changed files
with
63 additions
and
12 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<template> | ||
<div> | ||
<div v-if="$page.flash.success && show" class="mb-8 flex items-center justify-between bg-green rounded max-w-lg"> | ||
<div class="flex items-center"> | ||
<svg class="ml-4 mr-2 flex-no-shrink w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0 11 2 9 7 14 18 3 20 5 7 18" /></svg> | ||
<div class="py-4 text-white text-sm font-medium">{{ $page.flash.success }}</div> | ||
</div> | ||
<button type="button" class="group mr-2 p-2" @click="show = false"> | ||
<svg class="block w-2 h-2 fill-green-dark group-hover:fill-green-darker" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg> | ||
</button> | ||
</div> | ||
<div v-if="Object.keys($page.errors).length > 0 && show" class="mb-8 flex items-center justify-between bg-red-light rounded max-w-lg"> | ||
<div class="flex items-center"> | ||
<svg class="ml-4 mr-2 flex-no-shrink w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg> | ||
<div class="py-4 text-white text-sm font-medium"> | ||
<span v-if="Object.keys($page.errors).length === 1">There is one form error.</span> | ||
<span v-else>There are {{ Object.keys($page.errors).length }} form errors.</span> | ||
</div> | ||
</div> | ||
<button type="button" class="group mr-2 p-2" @click="show = false"> | ||
<svg class="block w-2 h-2 fill-red-dark group-hover:fill-red-darker" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg> | ||
</button> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
data() { | ||
return { | ||
show: true, | ||
} | ||
}, | ||
watch: { | ||
'$page.flash': { | ||
handler() { | ||
this.show = true | ||
}, | ||
deep: true, | ||
}, | ||
}, | ||
} | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
f61d969
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @reinink, thanks for this! I tried implementing this to my project however, I got an error message in my console saying
TypeError: Cannot read properties of undefined (reading 'success')
however, when i comment the content of the FlashMessages.vue file, the error goes away, thus the flash message doesn't get to display.. Not sure if I have done anything wrong but I followed the implementation step by stepf61d969
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @hayjay
I had exactly same problem as you.
I swapped "$page.flash.success" with "$page.props.flash.success".
I didn't investigate this deeper so I am not sure why in this project, flash property is directly on $page, and not in the props as in my own project.
I hope that helps.
f61d969
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi
Hi @neeooh thanks for the feedback, I still didn't get it working.
After changing from $page.flash.success to $page.props.flash.success in the FlashMessages.vue file, on line 3, 6 and 35, It came back with a different error:
Uncaught (in promise) TypeError: Cannot convert undefined or null to object
f61d969
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @hayjay
Sorry for late reply.
The way I solved it, I debugged it by printing the $page variable by
{{$page}}
and I was able to inspect it.
I hope you solve it.