From ed158a0b60332b1221dacddb2c8ab44f3ae7e8a5 Mon Sep 17 00:00:00 2001 From: Antonio Anaya Date: Tue, 21 Apr 2026 18:04:54 -0600 Subject: [PATCH] ui_migration refactor(store) update mixins --- webapp/src/mixins/labThingsMixins.js | 56 ++++++++++++---------------- webapp/src/mixins/modalMixins.js | 32 ++++++++-------- 2 files changed, 41 insertions(+), 47 deletions(-) diff --git a/webapp/src/mixins/labThingsMixins.js b/webapp/src/mixins/labThingsMixins.js index 0cd56ffb..510c0a78 100644 --- a/webapp/src/mixins/labThingsMixins.js +++ b/webapp/src/mixins/labThingsMixins.js @@ -5,8 +5,10 @@ * This mixin is registered globally in `main.js` using. Do not * manually import it in components. */ - import axios from "axios"; +import { useWotStore } from "@/stores/wot.js"; +import { useSettingsStore } from "@/stores/settings.js"; +import { mapState, mapStores } from "pinia"; export default { data() { @@ -15,32 +17,35 @@ export default { }; }, + computed: { + ...mapState(useSettingsStore, ["baseUri"]), + ...mapStores(useWotStore), + }, + methods: { thingDescription(thing) { - return this.$store.getters["wot/thingDescription"](thing); + return this.wotStore.thingDescriptions[thing]; }, thingList() { - return this.$store.getters["wot/thingList"]; + return this.wotStore.thingList(); }, thingAvailable(thing) { - return this.$store.getters["wot/thingAvailable"](thing); + return this.wotStore.thingAvailable(thing); }, thingPropertyUrl(thing, property, allowUndefined = false) { - return this.$store.getters["wot/thingPropertyUrl"]( - thing, - property, - "readproperty", - allowUndefined, - ); + return this.wotStore.thingPropertyUrl(thing, property, "readproperty", allowUndefined); + }, + thingActionUrl(thing, action, allowUndefined = false) { + return this.wotStore.thingActionUrl(thing, action, "invokeaction", allowUndefined); }, thingActionAvailable(thing, action) { - return this.$store.getters["wot/thingAffordanceAvailable"](thing, "actions", action); + return this.wotStore.affordanceAvailable(thing, "actions", action); }, thingPropertyAvailable(thing, property) { - return this.$store.getters["wot/thingAffordanceAvailable"](thing, "properties", property); + return this.wotStore.affordanceAvailable(thing, "properties", property); }, async readThingProperty(thing, property, silenceErrors = false) { - let url = this.$store.getters["wot/thingPropertyUrl"](thing, property, "readproperty", false); + let url = this.wotStore.thingPropertyUrl(thing, property, "readproperty", false); try { let response = await axios.get(url); return response.data; @@ -50,12 +55,7 @@ export default { } }, async writeThingProperty(thing, property, value) { - let url = this.$store.getters["wot/thingPropertyUrl"]( - thing, - property, - "writeproperty", - false, - ); + let url = this.wotStore.thingPropertyUrl(thing, property, "writeproperty", false); // `false` and 0 fail because axios turns it to "" // Other values should not be stringified or pydantic // can't parse them. @@ -88,7 +88,7 @@ export default { let response; let finalMethodCalled = false; try { - response = await axios.get(taskUrl, { baseURL: this.$store.getters.baseUri }); + response = await axios.get(taskUrl, { baseURL: this.baseUri }); const result = response.data.status; if (result === "running" || result === "pending") { @@ -115,7 +115,7 @@ export default { } }, terminateAction(taskUrl) { - axios.delete(taskUrl, { baseURL: this.$store.getters.baseUri }); + axios.delete(taskUrl, { baseURL: this.baseUri }); }, async findOngoingActions(thing, action) { let url = this.thingActionUrl(thing, action); @@ -131,7 +131,7 @@ export default { * * Returns null if there is no ongoing action */ - async getOngingAction(thing, action) { + async getOngoingAction(thing, action) { let response = await this.findOngoingActions(thing, action); // Exit if response is null, due to an error. if (response == null) return null; @@ -140,17 +140,9 @@ export default { // ?? Is the "Nullish Coalescing-Operator" to turn undefined into null. return response.data.find((t) => ["pending", "running"].includes(t.status)) ?? null; }, - thingActionUrl(thing, action, allowUndefined = false) { - let url = this.$store.getters["wot/thingActionUrl"]( - thing, - action, - "invokeaction", - allowUndefined, - ); - return url; - }, + async getThingEndpoint(thing, endpoint) { - let url = `${this.$store.getters.baseUri}/${thing}/${endpoint}`; + let url = `${this.baseUri}/${thing}/${endpoint}`; try { const response = await axios.get(url); return response.data; diff --git a/webapp/src/mixins/modalMixins.js b/webapp/src/mixins/modalMixins.js index 49af08f6..2e0e5e2a 100644 --- a/webapp/src/mixins/modalMixins.js +++ b/webapp/src/mixins/modalMixins.js @@ -8,6 +8,7 @@ import UIkit from "uikit"; import { eventBus } from "@/eventBus"; +import { useSettingsStore } from "@/stores/settings.js"; export default { methods: { @@ -55,9 +56,10 @@ export default { ); }, - modalError: function (error) { - var errormsg = this.getErrorMessage(error); - this.$store.commit("setErrorMessage", errormsg); + modalError(set_error) { + const store = useSettingsStore(); + var errormsg = this.getErrorMessage(set_error); + store.error = errormsg; UIkit.notification({ message: `${errormsg}`, status: "danger", @@ -78,30 +80,30 @@ export default { return String(data); } }, - getErrorData: function (error) { + getErrorData: function (data_error) { // If a response was obtained, extract the most specific message - if (error.response) { + if (data_error.response) { // If the response is a nicely formatted JSON response from the server - if (error.response.data.message) { - return error.response.data.message; + if (data_error.response.data.message) { + return data_error.response.data.message; } - if (error.response.data.detail) { + if (data_error.response.data.detail) { try { - return error.response.data.detail[0].msg; + return data_error.response.data.detail[0].msg; } catch { - return error.response.data.detail; + return data_error.response.data.detail; } } // If the response is just some generic error response - if (error.response.data) { - return error.response.data; + if (data_error.response.data) { + return data_error.response.data; } - return error.response; + return data_error.response; } // If we have an error object with a message, use that - if (error.message) return error.message; + if (data_error.message) return data_error.message; // At this point just formatting the whole error object is the best we can do. - return error; + return data_error; }, showModalElement: function (element) {