import BsModal from "../Bootstrap/Modal.js";
import CachedWidgetLoader from "../../composables/Dashboard/CachedWidgetLoader.js";
export default {
components: {
BsModal,
},
data: () => ({
component: "",
arguments: null,
target: false,
widget: null,
tmpConfig: {},
isLoading: false,
hasConfig: false,
sharedData: null,
}),
emits: [
"change",
"remove",
"dragstart",
"resizestart",
"configOpened",
"configClosed"
],
props: [
"id",
"config",
"width",
"height",
"custom",
"hidden",
"editMode",
"loading",
],
computed: {
isResizeable() {
if (!this.widget) return false;
return this.widget.setup.width.max || this.widget.setup.height.max;
},
ready() {
return this.component && this.arguments !== null;
},
},
methods: {
handleShowBsModal() {
this.$emit('configOpened')
},
handleHideBsModal() {
this.$emit('configClosed')
},
mouseDown(e) {
this.target = e.target;
},
startDrag(e) {
if (this.$refs.dragHandle.contains(this.target)) {
this.$emit("dragstart", e);
} else if (
this.isResizeable &&
this.$refs.resizeHandle.contains(this.target)
) {
if (this.isResizeable) this.$emit("resizestart", e);
else e.preventDefault();
} else {
e.preventDefault();
}
},
openConfig() {
this.tmpConfig = { ...this.arguments };
this.$refs.config.show();
},
setConfig(hasConfig) {
this.hasConfig = hasConfig;
},
changeConfig() {
this.isLoading = true;
let config = { ...this.tmpConfig };
this.sendChangeConfig(config);
},
changeConfigManually() {
let config = { ...this.arguments };
this.sendChangeConfig(config);
},
sendChangeConfig(config) {
for (var k in config) {
if (this.widget.arguments[k] == config[k]) {
delete config[k];
}
}
this.$emit("change", config);
},
},
watch: {
config() {
this.arguments = { ...this.widget.arguments, ...this.config };
this.tmpConfig = { ...this.arguments };
this.$refs.config && this.$refs.config.hide();
this.isLoading = false;
},
},
async created() {
this.widget = await CachedWidgetLoader.loadWidget(this.id);
let component = (await import("../" + this.widget.setup.file)).default;
this.$options.components["widget" + this.widget.widget_id] = component;
this.component = "widget" + this.widget.widget_id;
this.arguments = { ...this.widget.arguments, ...this.config };
this.tmpConfig = { ...this.arguments };
},
template: /*html*/ `
{{ widget ? 'Config for ' + widget.setup.name : '' }}
`,
};