parent
54663e7ddb
commit
e3f864bd71
@ -1,43 +1,42 @@ |
||||
import { useQuasar } from 'quasar'; |
||||
import { useQuasar } from "quasar" |
||||
|
||||
/** |
||||
* Use this when using Vue 3 composition api (setup) |
||||
*/ |
||||
export default function () { |
||||
const $q = useQuasar(); |
||||
const $q = useQuasar() |
||||
|
||||
function showNotification (message, type = 'success') { |
||||
let color = 'primary'; |
||||
let icon = 'info'; |
||||
function showNotification(message, type = "success") { |
||||
let color = "primary" |
||||
let icon = "info" |
||||
|
||||
switch (type) { |
||||
case 'info': |
||||
break; |
||||
case 'success': |
||||
color = 'green'; |
||||
break; |
||||
case 'error': |
||||
case 'danger': |
||||
color = 'red'; |
||||
break; |
||||
case 'warning': |
||||
color = 'yellow'; |
||||
break; |
||||
|
||||
case "info": |
||||
break |
||||
case "success": |
||||
color = "green" |
||||
break |
||||
case "error": |
||||
case "danger": |
||||
color = "red" |
||||
break |
||||
case "warning": |
||||
color = "yellow" |
||||
break |
||||
} |
||||
if ('danger' === type) { |
||||
type = 'error'; |
||||
if ("danger" === type) { |
||||
type = "error" |
||||
} |
||||
|
||||
$q.notify({ |
||||
position: 'top', |
||||
position: "top", |
||||
timeout: 10000, |
||||
message: message, |
||||
color: color, |
||||
html: true, |
||||
multiLine: true, |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
return {showNotification}; |
||||
return { showNotification } |
||||
} |
||||
|
@ -1,69 +1,69 @@ |
||||
import { mapFields } from 'vuex-map-fields'; |
||||
import { useQuasar } from 'quasar'; |
||||
import { mapFields } from "vuex-map-fields" |
||||
import { useQuasar } from "quasar" |
||||
|
||||
export default { |
||||
setup() { |
||||
const quasar = useQuasar(); |
||||
const quasar = useQuasar() |
||||
|
||||
const showError = (error) => { |
||||
showMessage(error, 'danger'); |
||||
}; |
||||
showMessage(error, "danger") |
||||
} |
||||
|
||||
const showMessage = (message, type = 'success') => { |
||||
let color = 'primary'; |
||||
const showMessage = (message, type = "success") => { |
||||
let color = "primary" |
||||
|
||||
switch (type) { |
||||
case 'info': |
||||
break; |
||||
case 'success': |
||||
color = 'green'; |
||||
break; |
||||
case 'error': |
||||
case 'danger': |
||||
color = 'red'; |
||||
break; |
||||
case 'warning': |
||||
color = 'yellow'; |
||||
break; |
||||
case "info": |
||||
break |
||||
case "success": |
||||
color = "green" |
||||
break |
||||
case "error": |
||||
case "danger": |
||||
color = "red" |
||||
break |
||||
case "warning": |
||||
color = "yellow" |
||||
break |
||||
} |
||||
|
||||
quasar.notify({ |
||||
position: 'top', |
||||
position: "top", |
||||
timeout: 10000, |
||||
message: message, |
||||
color: color, |
||||
html: true, |
||||
multiLine: true, |
||||
}); |
||||
}; |
||||
}) |
||||
} |
||||
|
||||
return { |
||||
showError, |
||||
showMessage |
||||
}; |
||||
showMessage, |
||||
} |
||||
}, |
||||
methods: { |
||||
showError(error) { |
||||
this.showMessage(error, 'error'); // Use 'error' for PrimeVue
|
||||
this.showMessage(error, "error") // Use 'error' for PrimeVue
|
||||
}, |
||||
showMessage(message, type = 'success') { |
||||
showMessage(message, type = "success") { |
||||
// Convert message type to PrimeVue's severity
|
||||
let severity = type; |
||||
if (type === 'danger') { |
||||
severity = 'error'; // PrimeVue uses 'error' instead of 'danger'
|
||||
let severity = type |
||||
if (type === "danger") { |
||||
severity = "error" // PrimeVue uses 'error' instead of 'danger'
|
||||
} |
||||
|
||||
// Use PrimeVue's ToastService
|
||||
this.$toast.add({ |
||||
severity: severity, |
||||
summary: message, |
||||
detail: '', |
||||
detail: "", |
||||
life: 5000, // Message duration in milliseconds
|
||||
closable: true, // Whether the message can be closed manually
|
||||
}); |
||||
} |
||||
}) |
||||
}, |
||||
}, |
||||
computed: { |
||||
...mapFields('notifications', ['color', 'show', 'subText', 'text', 'timeout']) |
||||
...mapFields("notifications", ["color", "show", "subText", "text", "timeout"]), |
||||
}, |
||||
}; |
||||
} |
||||
|
@ -1,18 +1,11 @@ |
||||
//import './styles/quasar.sass'
|
||||
import '@quasar/extras/material-icons/material-icons.css' |
||||
import "@quasar/extras/material-icons/material-icons.css" |
||||
|
||||
import {Dialog, Notify} from 'quasar' |
||||
import { Dialog, Notify } from "quasar" |
||||
|
||||
export default { |
||||
config: { |
||||
notify: { |
||||
} |
||||
notify: {}, |
||||
}, |
||||
plugins: [ |
||||
Notify, |
||||
Dialog, |
||||
], |
||||
extras: [ |
||||
'material-icons', |
||||
] |
||||
plugins: [Notify, Dialog], |
||||
extras: ["material-icons"], |
||||
} |
Loading…
Reference in new issue