Fix alert styling + bug fixes and cleaning

This commit is contained in:
Julien Nahum 2024-01-02 13:30:49 +01:00
parent 178424a184
commit bd27d3a561
6 changed files with 135 additions and 126 deletions

View File

@ -1,14 +1,18 @@
<template> <template>
<div class="fixed top-0 bottom-24 right-0 flex px-4 items-start justify-end z-50 relative pointer-events-auto"> <div class="fixed top-0 bottom-24 right-0 flex px-4 items-start justify-end z-50 pointer-events-auto">
<NuxtNotifications> <NuxtNotifications>
<template #body="props"> <template #body="props">
<div class="relative">
<div <div
v-if="props.item.type==='success'" v-if="props.item.type==='success'"
class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4" class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4"
> >
<div class="flex justify-center items-center w-12 bg-green-500"> <div class="flex justify-center items-center w-12 bg-green-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20"
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /> fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"/>
</svg> </svg>
</div> </div>
@ -24,8 +28,11 @@
class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4" class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden mt-4"
> >
<div class="flex justify-center items-center w-12 bg-blue-500"> <div class="flex justify-center items-center w-12 bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20" fill="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-current text-white" viewBox="0 0 20 20"
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" /> fill="currentColor">
<path fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"/>
</svg> </svg>
</div> </div>
@ -87,8 +94,11 @@
v-if="props.item.type==='confirm'" v-if="props.item.type==='confirm'"
> >
<div class="flex justify-center items-center w-12 bg-blue-500"> <div class="flex justify-center items-center w-12 bg-blue-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-white"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
<path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z" clip-rule="evenodd" /> class="w-6 h-6 text-white">
<path fill-rule="evenodd"
d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z"
clip-rule="evenodd"/>
</svg> </svg>
</div> </div>
@ -97,8 +107,11 @@
<span class="text-blue-500 font-semibold pr-6">{{ props.item.title }}</span> <span class="text-blue-500 font-semibold pr-6">{{ props.item.title }}</span>
<p class="text-gray-600 text-sm">{{ props.item.text }}</p> <p class="text-gray-600 text-sm">{{ props.item.text }}</p>
<div class="w-full flex gap-2 mt-1"> <div class="w-full flex gap-2 mt-1">
<v-button color="blue" size="small" @click.prevent="props.item.data.success();props.close()">Yes</v-button> <v-button color="blue" size="small" @click.prevent="props.item.data.success();props.close()">Yes
<v-button color="gray" shade="light" size="small" @click.prevent="props.item.data.failure();props.close()">No</v-button> </v-button>
<v-button color="white" size="small"
@click.prevent="props.item.data.failure();props.close()">No
</v-button>
</div> </div>
</div> </div>
</div> </div>
@ -116,6 +129,7 @@
/> />
</svg> </svg>
</button> </button>
</div>
</template> </template>
</NuxtNotifications> </NuxtNotifications>
</div> </div>

View File

@ -72,7 +72,7 @@
<!-- Form Error Modal --> <!-- Form Error Modal -->
<form-error-modal <form-error-modal
:show="showFormErrorModal" :show="showFormErrorModal"
:validation-error-response="validationErrorResponse" :form="form"
@close="showFormErrorModal=false" @close="showFormErrorModal=false"
/> />
</div> </div>
@ -216,10 +216,13 @@ export default {
methods: { methods: {
displayFormModificationAlert (responseData) { displayFormModificationAlert (responseData) {
const alert = useAlert()
console.log("in okd ----.", responseData)
if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) { if (responseData.form && responseData.form.cleanings && Object.keys(responseData.form.cleanings).length > 0) {
useAlert().warning(responseData.message) alert.warning(responseData.message)
} else { } else if (responseData.message) {
useAlert().success(responseData.message) console.log(responseData.message)
alert.success(responseData.message)
} }
}, },
openCrisp () { openCrisp () {

View File

@ -197,12 +197,7 @@ export default {
} }
}, },
beforeMount() {
console.log('beforemounted formfields editor with', this.form)
},
mounted () { mounted () {
console.log('mounted formfields editor with', this.form)
this.init() this.init()
}, },

View File

@ -5,10 +5,10 @@
Error saving your form Error saving your form
</h2> </h2>
<div v-if="validationErrorResponse" class="p-4 border-b border-t"> <div v-if="form.errors" class="p-4 border-b border-t">
<p v-if="validationErrorResponse.message" v-text="validationErrorResponse.message" /> <p v-if="form.errors.message" v-text="form.errors.message" />
<ul class="list-disc list-inside"> <ul class="list-disc list-inside">
<li v-for="err, key in validationErrorResponse.errors" :key="key"> <li v-for="err, key in form.errors.errors" :key="key">
{{ Array.isArray(err)?err[0]:err }} {{ Array.isArray(err)?err[0]:err }}
</li> </li>
</ul> </ul>
@ -29,7 +29,7 @@ export default {
components: {}, components: {},
props: { props: {
show: { type: Boolean, required: true }, show: { type: Boolean, required: true },
validationErrorResponse: { type: Object, required: false } form: { type: Object, required: false }
}, },
data: () => ({}), data: () => ({}),

View File

@ -87,6 +87,7 @@ import OpenCheckbox from './components/OpenCheckbox.vue'
import ResizableTh from './components/ResizableTh.vue' import ResizableTh from './components/ResizableTh.vue'
import RecordOperations from '../components/RecordOperations.vue' import RecordOperations from '../components/RecordOperations.vue'
import clonedeep from 'clone-deep' import clonedeep from 'clone-deep'
import {hash} from "~/lib/utils.js";
export default { export default {
components: { ResizableTh, RecordOperations }, components: { ResizableTh, RecordOperations },

View File

@ -45,10 +45,6 @@ export default {
form: {type: Object, required: true}, form: {type: Object, required: true},
}, },
mounted() {
console.log('form',this.form)
},
data: () => ({ data: () => ({
shareFormConfig: { shareFormConfig: {
hide_title: false, hide_title: false,