openflexure-microscope-server/webapp/src/mixins/modalMixins.js
2026-04-21 23:14:52 -06:00

121 lines
3.4 KiB
JavaScript

/**
* @fileoverview
* Global mixin providing modal functionality.
*
* This mixin is registered globally in `main.js` using. Do not
* manually import it in components.
*/
import UIkit from "uikit";
import { eventBus } from "@/eventBus";
import { useSettingsStore } from "@/stores/settings.js";
export default {
methods: {
modalConfirm: function (modalText) {
// force OK to be capitalised
UIkit.modal.i18n = { ok: "OK", cancel: "Cancel" };
var showModal = function (resolve, reject) {
UIkit.modal
.confirm(modalText, { stack: true })
.then(
function () {
resolve();
},
function () {
reject();
},
)
.finally(function () {
eventBus.emit("modalClosed");
});
};
return new Promise(showModal);
},
modalNotify: function (message, status = "success") {
UIkit.notification({
message: message,
status: status,
});
},
modalDialog: function (title, message) {
UIkit.modal.dialog(
`
<button class="uk-modal-close-default" type="button" uk-close></button>
<div class="uk-modal-header">
<h2 class="uk-modal-title">${title}</h2>
</div>
<div class="uk-modal-body">
<p>${message}</p>
</div>
`,
{ stack: true },
);
},
modalError(set_error) {
const store = useSettingsStore();
var errormsg = this.getErrorMessage(set_error);
store.error = errormsg;
UIkit.notification({
message: `${errormsg}`,
status: "danger",
});
},
getErrorMessage: function (error) {
// Format the error.
let data = this.getErrorData(error);
// Get error data may get an object. Handle edge cases and if not try to use
// JSON to get the best string. This stops "objectObject" showing as an error.
if (data === null) return "null";
if (data === undefined) return "undefined";
if (typeof data === "string") return data;
try {
return JSON.stringify(data, null, 2);
} catch {
return String(data);
}
},
getErrorData: function (data_error) {
// If a response was obtained, extract the most specific message
if (data_error.response) {
// If the response is a nicely formatted JSON response from the server
if (data_error.response.data.message) {
return data_error.response.data.message;
}
if (data_error.response.data.detail) {
try {
return data_error.response.data.detail[0].msg;
} catch {
return data_error.response.data.detail;
}
}
// If the response is just some generic error response
if (data_error.response.data) {
return data_error.response.data;
}
return data_error.response;
}
// If we have an error object with a message, use that
if (data_error.message) return data_error.message;
// At this point just formatting the whole error object is the best we can do.
return data_error;
},
showModalElement: function (element) {
UIkit.modal(element).show();
},
hideModalElement: function (element) {
UIkit.modal(element).hide();
},
toggleModalElement: function (element) {
UIkit.modal(element).toggle();
},
},
};