import BsModal from "../Bootstrap/Modal.js";
import { useCachedWidgetLoader } from "../../composables/Dashboard/CachedWidgetLoader.js";
import HeightTransition from "../Tranistion/HeightTransition.js";
export default {
name: 'Item',
components: {
BsModal,
HeightTransition
},
data: () => ({
component: "",
arguments: null,
target: false,
widget: null,
tmpConfig: {},
isLoading: false,
hasConfig: false,
sharedData: null,
}),
emits: [
"change",
"remove",
"dragstart",
"resizestart",
"configOpened",
"configClosed",
"pinItem",
"unPinItem"
],
props: [
"id",
"widgetID",
"config",
"width",
"height",
"custom",
"hidden",
"editMode",
"loading",
"item_data",
"place",
"setup",
"dragstate",
"resizeOverlay",
"additionalRow"
],
computed: {
maxHeight(){
return this.setup?.height?.max;
},
maxWidth(){
if (Object.prototype.toString.call(this.setup?.width) == "[object Number]"){
return this.setup?.width;
}
return this.setup?.width?.max;
},
minHeight() {
return this.setup?.height?.min;
},
minWidth() {
return this.setup?.width?.min;
},
isResizeable(){
return this.maxWidth >1 || this.maxHeight >1;
},
isPinned(){
return this.place?.pinned ? true : false;
},
ready() {
return this.component && this.arguments !== null;
},
visible: {
get() {
return !this.hidden;
},
set(value) {
this.$emit('remove', this.hidden);
}
}
},
methods: {
unpin(){
// Unpinning is only possible in edit mode
if(!this.editMode)
return;
let result = { item: this.item_data, x: this.item_data.x, y: this.item_data.y };
this.$emit('unPinItem', [result]);
},
pinItem(){
let result = { item: this.item_data, x: this.item_data.x, y: this.item_data.y};
this.$emit('pinItem',[result]);
},
getWidgetC4Link(widget) {
return (FHC_JS_DATA_STORAGE_OBJECT.app_root +
FHC_JS_DATA_STORAGE_OBJECT.ci_router + widget.setup.cis4link)
},
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;
},
},
setup() {
const { actions } = useCachedWidgetLoader();
return {
loadWidget: actions.load
};
},
async created() {
this.widget = await this.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 : '' }}
`,
};