Jonathan Druart
b9a9b1255f
Warning messages are displayed when a form is not submited because something is wrong on the form. We should notify the user on the visible screen, not at the top of the form that could be hidden. Signed-off-by: Jonathan Field <jonathan.field@ptfs-europe.com> Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
45 lines
No EOL
1.1 KiB
Vue
45 lines
No EOL
1.1 KiB
Vue
<template>
|
|
<div class="dialog message" v-if="message">{{ message }}</div>
|
|
<div class="dialog alert" v-if="error">{{ error }}</div>
|
|
<div class="dialog alert modal" v-if="warning">
|
|
{{ warning }}
|
|
<a
|
|
id="close_modal"
|
|
class="btn btn-default btn-xs"
|
|
role="button"
|
|
@click="removeMessages"
|
|
>{{ $t("Close") }}</a
|
|
>
|
|
</div>
|
|
<!-- Must be styled differently -->
|
|
</template>
|
|
|
|
<script>
|
|
import { storeToRefs } from "pinia"
|
|
import { useMainStore } from "../../stores/main"
|
|
export default {
|
|
setup() {
|
|
const mainStore = useMainStore()
|
|
const { message, error, warning } = storeToRefs(mainStore)
|
|
const { removeMessages } = mainStore
|
|
return { message, error, warning, removeMessages }
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.modal {
|
|
position: fixed;
|
|
z-index: 9998;
|
|
display: table;
|
|
transition: opacity 0.3s ease;
|
|
margin: auto;
|
|
padding: 20px 30px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
|
|
transition: all 0.3s ease;
|
|
}
|
|
#close_modal {
|
|
float: right;
|
|
cursor: pointer;
|
|
}
|
|
</style> |