mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-21 17:02:19 +00:00
chfhtw
408 lines
11 KiB
JavaScript
408 lines
11 KiB
JavaScript
import BsModal from "../Bootstrap/Modal.js";
|
|
import HeightTransition from "../Tranistion/HeightTransition.js";
|
|
|
|
import { enableDragDropTouch } from "../../../../vendor/drag-drop-touch-js/dragdroptouch/dist/drag-drop-touch.esm.min.js";
|
|
|
|
if (!document.dragDropTouchActive) {
|
|
enableDragDropTouch();
|
|
document.dragDropTouchActive = true;
|
|
}
|
|
|
|
export default {
|
|
name: 'Item',
|
|
components: {
|
|
BsModal,
|
|
HeightTransition
|
|
},
|
|
data: () => ({
|
|
component: "",
|
|
arguments: null,
|
|
tmpConfig: {},
|
|
isLoading: false,
|
|
hasConfig: false,
|
|
sharedData: null
|
|
}),
|
|
emits: [
|
|
"change",
|
|
"remove",
|
|
"configOpened",
|
|
"configClosed",
|
|
"pinItem",
|
|
"unPinItem"
|
|
],
|
|
props: [
|
|
"id",
|
|
"config",
|
|
"width",
|
|
"height",
|
|
"custom",
|
|
"hidden",
|
|
"editMode",
|
|
"loading", // widget got added and is waiting for backend to save in db
|
|
"item_data",
|
|
"place",
|
|
"widgetTemplate",
|
|
"source"
|
|
],
|
|
computed: {
|
|
sourceInfoTooltip() {
|
|
switch (this.source) {
|
|
case null:
|
|
return '';
|
|
case 'general':
|
|
return this.$p.t('dashboard', 'widgetFromGeneralSection');
|
|
case 'custom':
|
|
return this.$p.t('dashboard', 'widgetFromCustomSection');
|
|
default:
|
|
return this.$p.t('dashboard', 'widgetFromFunktionSection', [this.source]);
|
|
}
|
|
},
|
|
isResizeableHorizontal() {
|
|
if (this.widgetTemplate.setup.width === undefined)
|
|
return true;
|
|
|
|
if (Object.prototype.toString.call(this.widgetTemplate.setup.width) == "[object Number]")
|
|
return false;
|
|
|
|
if (this.widgetTemplate.setup.width.min === undefined) {
|
|
if (this.widgetTemplate.setup.width.max === undefined)
|
|
return true;
|
|
return this.widgetTemplate.setup.width.max > 1;
|
|
}
|
|
|
|
if (this.widgetTemplate.setup.width.max === undefined)
|
|
return true;
|
|
|
|
return this.widgetTemplate.setup.width.max > this.widgetTemplate.setup.width.min;
|
|
},
|
|
isResizeableVertical() {
|
|
if (this.widgetTemplate.setup.height === undefined)
|
|
return true;
|
|
|
|
if (Object.prototype.toString.call(this.widgetTemplate.setup.height) == "[object Number]")
|
|
return false;
|
|
|
|
if (this.widgetTemplate.setup.height.min === undefined) {
|
|
if (this.widgetTemplate.setup.height.max === undefined)
|
|
return true;
|
|
return this.widgetTemplate.setup.height.max > 1;
|
|
}
|
|
|
|
if (this.widgetTemplate.setup.height.max === undefined)
|
|
return true;
|
|
|
|
return this.widgetTemplate.setup.height.max > this.widgetTemplate.setup.height.min;
|
|
},
|
|
isResizeable() {
|
|
return this.isResizeableVertical || this.isResizeableHorizontal;
|
|
},
|
|
resizeClasses() {
|
|
const classes = {
|
|
icon: 'fa-up-right-and-down-left-from-center mirror-x',
|
|
button: 'cursor-nw-resize'
|
|
};
|
|
if (!this.isResizeableHorizontal) {
|
|
classes.icon = 'fa-up-down pe-2';
|
|
classes.button = 'cursor-ns-resize';
|
|
} else if (!this.isResizeableVertical) {
|
|
classes.icon = 'fa-left-right pe-2';
|
|
classes.button = 'cursor-ew-resize';
|
|
}
|
|
return classes;
|
|
},
|
|
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, pinned: false };
|
|
this.$emit('unPinItem', [result]);
|
|
},
|
|
pinItem() {
|
|
let result = { item: this.item_data, pinned: true };
|
|
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')
|
|
},
|
|
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.widgetTemplate.arguments[k] == config[k]) {
|
|
delete config[k];
|
|
}
|
|
}
|
|
this.$emit("change", config);
|
|
},
|
|
async initializeComponent() {
|
|
if (
|
|
this.widgetTemplate
|
|
&& this.widgetTemplate.setup
|
|
&& this.widgetTemplate.widget_id
|
|
&& this.widgetTemplate.arguments
|
|
) {
|
|
let component = (await import(this.widgetTemplate.setup.file)).default;
|
|
this.$options.components["widget" + this.widgetTemplate.widget_id] = component;
|
|
this.component = "widget" + this.widgetTemplate.widget_id;
|
|
this.arguments = { ...this.widgetTemplate.arguments, ...this.config };
|
|
this.tmpConfig = { ...this.arguments };
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
config() {
|
|
this.arguments = { ...this.widgetTemplate?.arguments, ...this.config };
|
|
this.tmpConfig = { ...this.arguments };
|
|
this.$refs.config && this.$refs.config.hide();
|
|
this.isLoading = false;
|
|
},
|
|
widgetTemplate() {
|
|
this.initializeComponent();
|
|
}
|
|
},
|
|
created() {
|
|
this.initializeComponent();
|
|
},
|
|
template: /*html*/ `
|
|
<article
|
|
v-if="!hidden || editMode"
|
|
class="dashboard-item card overflow-hidden h-100 position-relative"
|
|
:class="{
|
|
'hidden-widget': hidden,
|
|
[arguments?.className]: arguments && arguments.className
|
|
}"
|
|
>
|
|
<div v-if="loading" class="d-flex justify-content-center align-items-center h-100">
|
|
<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
|
|
</div>
|
|
<template v-else>
|
|
<header
|
|
v-if="widgetTemplate"
|
|
class="card-header d-flex ps-0 pe-2 align-items-center"
|
|
>
|
|
<!-- move handle -->
|
|
<Transition>
|
|
<span
|
|
v-if="editMode && !isPinned"
|
|
type="button"
|
|
drag-action="move"
|
|
class="col-auto mx-2 px-2 cursor-move"
|
|
draggable="true"
|
|
aria-hidden="true"
|
|
:aria-label="$p.t('dashboard/widget_move')"
|
|
v-tooltip="{ showDelay: 1000, value: $p.t('dashboard/widget_move') }"
|
|
>
|
|
<i class="fa-solid fa-grip-vertical" aria-hidden="true"></i>
|
|
</span>
|
|
</Transition>
|
|
<!-- TITLE -->
|
|
<h4 class="col mb-0 mx-2 px-2 fs-6 lh-base">
|
|
{{ widgetTemplate.setup.name }}
|
|
</h4>
|
|
<!-- source info -->
|
|
<div
|
|
v-if="source"
|
|
class="col-auto me-2"
|
|
:aria-label="sourceInfoTooltip"
|
|
v-tooltip="{ class: 'w-100', value: sourceInfoTooltip }"
|
|
>
|
|
<i class="fa-solid fa-circle-info" aria-hidden="true"></i>
|
|
</div>
|
|
<!-- pin button -->
|
|
<template v-if="isPinned">
|
|
<div
|
|
v-if="editMode"
|
|
type="button"
|
|
role="button"
|
|
class="pin cursor-pointer col-auto me-2"
|
|
:title="$p.t('dashboard/widget_unpin')"
|
|
aria-hidden="true"
|
|
:aria-label="$p.t('dashboard/widget_unpin')"
|
|
pinned="true"
|
|
@click="unpin"
|
|
>
|
|
<i class="fa-solid fa-thumbtack" aria-hidden="true"></i>
|
|
</div>
|
|
<div v-else class="col-auto me-2" aria-hidden="true">
|
|
<i class="fa-solid fa-thumbtack"></i>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div
|
|
v-if="editMode"
|
|
type="button"
|
|
role="button"
|
|
class="col-auto me-2 pin"
|
|
:title="$p.t('dashboard/widget_pin')"
|
|
aria-hidden="true"
|
|
:aria-label="$p.t('dashboard/widget_pin')"
|
|
@click="pinItem"
|
|
>
|
|
<i class="fa-solid fa-thumbtack" aria-hidden="true" style="color:lightgray;"></i>
|
|
</div>
|
|
</template>
|
|
<!-- widget link -->
|
|
<a
|
|
v-if="widgetTemplate.setup.cis4link"
|
|
:href="getWidgetC4Link(widgetTemplate)"
|
|
class="col-auto ms-auto"
|
|
:aria-label="$p.t('dashboard/widget_link')"
|
|
v-tooltip="{ showDelay: 1000, value: $p.t('dashboard/widget_link') }"
|
|
>
|
|
<i class="fa fa-arrow-up-right-from-square me-1" aria-hidden="true"></i>
|
|
</a>
|
|
<!-- config button -->
|
|
<a
|
|
v-if="hasConfig"
|
|
href="#"
|
|
class="col-auto px-1"
|
|
:aria-label="$p.t('dashboard/widget_configure')"
|
|
v-tooltip="{ showDelay: 1000, value: $p.t('dashboard/widget_configure') }"
|
|
@click.prevent="openConfig"
|
|
>
|
|
<i class="fa-solid fa-gear" aria-hidden="true"></i>
|
|
</a>
|
|
<!-- delete button -->
|
|
<a
|
|
v-if="custom && editMode"
|
|
href="#"
|
|
class="col-auto px-1"
|
|
:aria-label="$p.t('dashboard/widget_delete')"
|
|
v-tooltip="{ showDelay: 1000, value: $p.t('dashboard/widget_delete') }"
|
|
@click.prevent="$emit('remove')"
|
|
>
|
|
<i class="fa-solid fa-trash" aria-hidden="true"></i>
|
|
</a>
|
|
<!-- hide button -->
|
|
<Transition>
|
|
<div v-if="!custom && editMode" class="col-auto px-1 form-switch">
|
|
<input
|
|
type="checkbox"
|
|
role="switch"
|
|
v-model="visible"
|
|
class="form-check-input ms-0"
|
|
:value="true"
|
|
:aria-label="$p.t('dashboard/widget_toggle_visibility')"
|
|
>
|
|
</div>
|
|
</Transition>
|
|
</header>
|
|
<!-- TODO Manu rename/remove-->
|
|
<div v-if="ready" class="card-body overflow-hidden p-0">
|
|
<component
|
|
:is="component"
|
|
v-model:shared-data="sharedData"
|
|
:config="arguments"
|
|
:width="width"
|
|
:height="height"
|
|
:widget-id="item_data.id"
|
|
:item_data="item_data"
|
|
@setConfig="setConfig"
|
|
@change="changeConfigManually"
|
|
></component>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="card-body overflow-hidden text-center d-flex flex-column justify-content-center"
|
|
>
|
|
<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
|
|
</div>
|
|
<bs-modal
|
|
v-if="hasConfig"
|
|
ref="config"
|
|
@hideBsModal="handleHideBsModal"
|
|
@showBsModal="handleShowBsModal"
|
|
>
|
|
<template v-slot:title>
|
|
{{ widgetTemplate ? $p.t('dashboard/widget_config_title', widgetTemplate.setup) : '' }}
|
|
</template>
|
|
<template v-slot:default>
|
|
<component
|
|
:is="component"
|
|
v-if="ready && !isLoading"
|
|
v-model:shared-data="sharedData"
|
|
:config="tmpConfig"
|
|
@change="changeConfig"
|
|
:configMode="true"
|
|
></component>
|
|
<div v-else class="text-center">
|
|
<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
|
|
</div>
|
|
</template>
|
|
<template v-if="!widgetTemplate?.setup?.hideFooter" v-slot:footer>
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
>{{ $p.t('ui/schliessen') }}</button>
|
|
<button
|
|
type="button"
|
|
class="btn btn-primary"
|
|
@click="changeConfig"
|
|
>{{ $p.t('ui/speichern') }}</button>
|
|
</template>
|
|
</bs-modal>
|
|
<height-transition>
|
|
<footer
|
|
v-if="editMode && isResizeable && !isPinned"
|
|
class="card-footer d-flex justify-content-end p-0"
|
|
>
|
|
<span
|
|
type="button"
|
|
drag-action="resize"
|
|
class="col-auto px-1"
|
|
:class="resizeClasses.button"
|
|
draggable="true"
|
|
aria-hidden="true"
|
|
:aria-label="$p.t('dashboard/widget_resize')"
|
|
v-tooltip="{ showDelay: 1000, value: $p.t('dashboard/widget_resize') }"
|
|
>
|
|
<i
|
|
class="fa-solid"
|
|
:class="resizeClasses.icon"
|
|
aria-hidden="true"
|
|
></i>
|
|
</span>
|
|
</footer>
|
|
</height-transition>
|
|
</template>
|
|
</article>`,
|
|
};
|