kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#42 - wip

Browse Source
This commit is contained in:
Adrian Hopek
2022-02-15 10:30:41 +01:00
parent 166bec1e51
commit 425d7c7608
11 changed files with 99 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
resources/js/Shared/Alerts/ErrorAlert.vue
View File

@@ -1,67 +0,0 @@
<template>
<transition
enter-active-class="transform ease-out duration-300 transition"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div
v-if="show"
class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
>
<div class="p-4">
<div class="flex items-center">
<div class="w-0 flex-1 flex justify-between">
<ExclamationIcon class="h-5 w-5 text-white mr-2" />
<p class="w-0 flex-1 text-sm font-medium text-white">
{{ message }}
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button
class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"
@click="show = false"
>
<span class="sr-only">Close</span>
<XIcon
class="h-5 w-5"
aria-hidden="true"
/>
</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
import {XIcon} from '@heroicons/vue/outline'
import {ExclamationIcon} from '@heroicons/vue/solid'
import {ref} from 'vue'
export default {
name: 'ErrorAlert',
components: {
ExclamationIcon,
XIcon,
},
props: {
message: {
type: String,
default: () => null,
},
},
setup() {
const show = ref(true)
setTimeout(() => show.value = false, 6000)
return {
show,
}
},
}
</script>

67
resources/js/Shared/Alerts/SuccessAlert.vue
View File

@@ -1,67 +0,0 @@
<template>
<transition
enter-active-class="transform ease-out duration-300 transition"
enter-from-class="opacity-0"
enter-to-class="opacity-100"
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div
v-if="show"
class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-green-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
>
<div class="p-4">
<div class="flex items-center">
<div class="w-0 flex-1 flex justify-between">
<CheckCircleIcon class="h-5 w-5 text-white mr-2" />
<p class="w-0 flex-1 text-sm font-medium text-white">
{{ message }}
</p>
</div>
<div class="ml-4 flex-shrink-0 flex">
<button
class="bg-green-500 rounded-md inline-flex text-green-100 hover:text-green-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600"
@click="show = false"
>
<span class="sr-only">Close</span>
<XIcon
class="h-5 w-5"
aria-hidden="true"
/>
</button>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
import {XIcon} from '@heroicons/vue/outline'
import {CheckCircleIcon} from '@heroicons/vue/solid'
import {ref} from 'vue'
export default {
name: 'SuccessAlert',
components: {
CheckCircleIcon,
XIcon,
},
props: {
message: {
type: String,
default: () => '',
},
},
setup() {
const show = ref(true)
setTimeout(() => show.value = false, 6000)
return {
show,
}
},
}
</script>

31
resources/js/Shared/Layout/AppLayout.vue
View File

@@ -2,14 +2,6 @@
<div class="min-h-full">
<MainMenu />
<main class="lg:ml-64 flex flex-col flex-1 py-8">
<SuccessAlert
v-if="flash.success"
:message="flash.success"
/>
<ErrorAlert
v-if="flash.error"
:message="flash.error"
/>
<div>
<slot />
</div>
@@ -19,14 +11,12 @@
<script>
import MainMenu from '@/Shared/MainMenu'
import SuccessAlert from '@/Shared/Alerts/SuccessAlert'
import ErrorAlert from '@/Shared/Alerts/ErrorAlert'
import {useToast} from 'vue-toastification'
import {watch} from 'vue'
export default {
name: 'AppLayout',
components: {
SuccessAlert,
ErrorAlert,
MainMenu,
},
props: {
@@ -35,5 +25,22 @@ export default {
default: () => null,
},
},
setup(props) {
const toast = useToast()
watch(() => props.flash, flash => {
if (flash.success) {
toast.success(flash.success)
}
if (flash.error) {
toast.error(flash.error)
}
}, {immediate:true})
return {
toast,
}
},
}
</script>

12
resources/js/Shared/Layout/GuestLayout.vue
View File

@@ -1,23 +1,11 @@
<template>
<div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
<ErrorAlert
v-if="flash.error"
:message="flash.error"
/>
<slot />
</div>
</template>
<script>
import ErrorAlert from '@/Shared/Alerts/ErrorAlert'
export default {
name: 'GuestLayout',
components: {ErrorAlert},
props: {
flash: {
type: Object,
default: () => null,
},
},
}
</script>