mirror of
https://github.com/FH-Complete/FHC-Core.git
synced 2026-07-20 00:12:15 +00:00
more cleanup of dropgrid code & cleanup of dashboard item code
This commit is contained in:
chfhtw
@@ -11,18 +11,15 @@ export default {
|
||||
data: () => ({
|
||||
component: "",
|
||||
arguments: null,
|
||||
target: false,
|
||||
widget: null,
|
||||
tmpConfig: {},
|
||||
isLoading: false,
|
||||
hasConfig: false,
|
||||
sharedData: null,
|
||||
sharedData: null
|
||||
}),
|
||||
emits: [
|
||||
"change",
|
||||
"remove",
|
||||
"dragstart",
|
||||
"resizestart",
|
||||
"configOpened",
|
||||
"configClosed",
|
||||
"pinItem",
|
||||
@@ -42,29 +39,25 @@ export default {
|
||||
"place",
|
||||
"setup",
|
||||
"dragstate",
|
||||
"resizeOverlay",
|
||||
"additionalRow"
|
||||
"resizeOverlay"
|
||||
],
|
||||
computed: {
|
||||
maxHeight(){
|
||||
maxHeight() {
|
||||
if (Object.prototype.toString.call(this.setup?.height) == "[object Number]") {
|
||||
return this.setup?.height;
|
||||
}
|
||||
return this.setup?.height?.max;
|
||||
},
|
||||
maxWidth(){
|
||||
if (Object.prototype.toString.call(this.setup?.width) == "[object Number]"){
|
||||
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;
|
||||
isResizeable() {
|
||||
return this.maxWidth > 1 || this.maxHeight > 1;
|
||||
},
|
||||
minWidth() {
|
||||
return this.setup?.width?.min;
|
||||
},
|
||||
isResizeable(){
|
||||
return this.maxWidth >1 || this.maxHeight >1;
|
||||
},
|
||||
isPinned(){
|
||||
isPinned() {
|
||||
return this.place?.pinned ? true : false;
|
||||
},
|
||||
ready() {
|
||||
@@ -80,16 +73,16 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
unpin(){
|
||||
unpin() {
|
||||
// Unpinning is only possible in edit mode
|
||||
if(!this.editMode)
|
||||
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]);
|
||||
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 +
|
||||
@@ -101,22 +94,6 @@ export default {
|
||||
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();
|
||||
@@ -136,11 +113,11 @@ export default {
|
||||
sendChangeConfig(config) {
|
||||
for (var k in config) {
|
||||
if (this.widget.arguments[k] == config[k]) {
|
||||
delete config[k];
|
||||
delete config[k];
|
||||
}
|
||||
}
|
||||
this.$emit("change", config);
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
config() {
|
||||
@@ -170,75 +147,118 @@ export default {
|
||||
<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="!hidden || editMode" :id="widgetID" class="dashboard-item card overflow-hidden h-100 position-relative" :class="{'hiddenWidget':hidden, 'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}">
|
||||
<div v-show="!dragstate" class="h-100 card border-0">
|
||||
<div v-if="widget" class="card-header d-flex ps-0 pe-2 align-items-center">
|
||||
<Transition>
|
||||
<span type="button" v-if="editMode && !isPinned" drag-action="move" class="col-auto mx-2 px-2 cursor-move" aria-label="move widget" v-tooltip="{showDelay:1000, value:'move widget'}"><i class="fa-solid fa-grip-vertical" aria-hidden="true"></i></span>
|
||||
</Transition>
|
||||
<span class="col mx-2 px-2">{{ widget.setup.name }}</span>
|
||||
<template v-if="isPinned">
|
||||
<div type="button" role="button" v-if="editMode" pinned="true" @click="unpin" title="unpin item" aria-label="unpin item" class="pin cursor-pointer col-auto me-2">
|
||||
<i class="fa-solid fa-thumbtack " aria-hidden="true"></i>
|
||||
</div>
|
||||
<div v-else class="col-auto me-2">
|
||||
<i class="fa-solid fa-thumbtack "></i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div type="button" role="button" v-if="editMode" class="col-auto me-2 pin" @click="pinItem" aria-label="pin item" title="pin item">
|
||||
<i class="fa-solid fa-thumbtack" aria-hidden="true" style="color:lightgray;"></i>
|
||||
</div>
|
||||
</template>
|
||||
<a type="button" v-if="widget.setup.cis4link" :href="getWidgetC4Link(widget)" aria-label="widget link" v-tooltip="{showDelay:1000, value:'widget link'}" class="col-auto ms-auto ">
|
||||
<i class="fa fa-arrow-up-right-from-square me-1" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a type="button" v-if="hasConfig" class="col-auto px-1" href="#" @click.prevent="openConfig" aria-label="configure widget" v-tooltip="{showDelay:1000,value:'configure widget'}"><i class="fa-solid fa-gear" aria-hidden="true"></i></a>
|
||||
<a type="button" v-if="custom && editMode" class="col-auto px-1" aria-label="delete widget" v-tooltip="{showDelay:1000,value:'delete widget'}" href="#" @click.prevent="$emit('remove')">
|
||||
<i class="fa-solid fa-trash" aria-hidden="true"></i>
|
||||
</a>
|
||||
<Transition>
|
||||
<div v-if="!custom && editMode" class="col-auto px-1 form-switch">
|
||||
<input class="form-check-input ms-0" type="checkbox" role="switch" aria-label="toggle widget" id="flexSwitchCheckChecked" v-model="visible" :value="true">
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
<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" @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>
|
||||
{{ widget ? 'Config for ' + widget.setup.name : '' }}
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<component v-if="ready && !isLoading" :is="component" 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="!widget?.setup?.hideFooter" v-slot:footer>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" @click="changeConfig">Save changes</button>
|
||||
</template>
|
||||
</bs-modal>
|
||||
<height-transition>
|
||||
<div v-if="editMode && isResizeable && !isPinned " class="card-footer d-flex justify-content-end p-0">
|
||||
<template v-if="maxWidth < 2">
|
||||
<span type="button" drag-action="resize" class="col-auto px-1 cursor-ns-resize" aria-label="resize widget" v-tooltip="{showDelay:1000, value:'resize widget'}">
|
||||
<i class="fa-solid fa-up-down pe-2" aria-hidden="true"></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="maxHeight < 2">
|
||||
<span type="button" drag-action="resize" class="col-auto px-1 cursor-ew-resize" aria-label="resize widget" v-tooltip="{showDelay:1000, value:'resize widget'}">
|
||||
<i class="fa-solid fa-left-right pe-2" aria-hidden="true"></i>
|
||||
<div
|
||||
v-else-if="!hidden || editMode"
|
||||
:id="widgetID"
|
||||
class="dashboard-item card overflow-hidden h-100 position-relative"
|
||||
:class="{'hiddenWidget':hidden, 'draggedItem':dragstate, 'dashboard-item-overlay':resizeOverlay, [arguments?.className]:arguments && arguments.className}"
|
||||
>
|
||||
<div v-show="!dragstate" class="h-100 card border-0">
|
||||
<div v-if="widget" class="card-header d-flex ps-0 pe-2 align-items-center">
|
||||
<Transition>
|
||||
<span
|
||||
v-if="editMode && !isPinned"
|
||||
type="button"
|
||||
drag-action="move"
|
||||
class="col-auto mx-2 px-2 cursor-move"
|
||||
aria-label="move widget"
|
||||
v-tooltip="{showDelay:1000, value:'move widget'}"
|
||||
>
|
||||
<i class="fa-solid fa-grip-vertical" aria-hidden="true"></i>
|
||||
</span>
|
||||
</Transition>
|
||||
<span class="col mx-2 px-2">{{ widget.setup.name }}</span>
|
||||
<template v-if="isPinned">
|
||||
<div type="button" role="button" v-if="editMode" pinned="true" @click="unpin" title="unpin item" aria-label="unpin item" class="pin cursor-pointer col-auto me-2">
|
||||
<i class="fa-solid fa-thumbtack " aria-hidden="true"></i>
|
||||
</div>
|
||||
<div v-else class="col-auto me-2">
|
||||
<i class="fa-solid fa-thumbtack "></i>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span type="button" drag-action="resize" class="col-auto px-1 cursor-nw-resize" aria-label="resize widget" v-tooltip="{showDelay:1000, value:'resize widget'}">
|
||||
<i class="fa-solid fa-up-right-and-down-left-from-center mirror-x" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div type="button" role="button" v-if="editMode" class="col-auto me-2 pin" @click="pinItem" aria-label="pin item" title="pin item">
|
||||
<i class="fa-solid fa-thumbtack" aria-hidden="true" style="color:lightgray;"></i>
|
||||
</div>
|
||||
</template>
|
||||
<a type="button" v-if="widget.setup.cis4link" :href="getWidgetC4Link(widget)" aria-label="widget link" v-tooltip="{showDelay:1000, value:'widget link'}" class="col-auto ms-auto">
|
||||
<i class="fa fa-arrow-up-right-from-square me-1" aria-hidden="true"></i>
|
||||
</a>
|
||||
<a type="button" v-if="hasConfig" class="col-auto px-1" href="#" @click.prevent="openConfig" aria-label="configure widget" v-tooltip="{showDelay:1000,value:'configure widget'}"><i class="fa-solid fa-gear" aria-hidden="true"></i></a>
|
||||
<a type="button" v-if="custom && editMode" class="col-auto px-1" aria-label="delete widget" v-tooltip="{showDelay:1000,value:'delete widget'}" href="#" @click.prevent="$emit('remove')">
|
||||
<i class="fa-solid fa-trash" aria-hidden="true"></i>
|
||||
</a>
|
||||
<Transition>
|
||||
<div v-if="!custom && editMode" class="col-auto px-1 form-switch">
|
||||
<input class="form-check-input ms-0" type="checkbox" role="switch" aria-label="toggle widget" id="flexSwitchCheckChecked" v-model="visible" :value="true">
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</height-transition>
|
||||
<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" @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>
|
||||
{{ widget ? 'Config for ' + widget.setup.name : '' }}
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<component v-if="ready && !isLoading" :is="component" 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="!widget?.setup?.hideFooter" v-slot:footer>
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" @click="changeConfig">Save changes</button>
|
||||
</template>
|
||||
</bs-modal>
|
||||
<height-transition>
|
||||
<div v-if="editMode && isResizeable && !isPinned " class="card-footer d-flex justify-content-end p-0">
|
||||
<template v-if="maxWidth < 2">
|
||||
<span
|
||||
type="button"
|
||||
drag-action="resize"
|
||||
class="col-auto px-1 cursor-ns-resize"
|
||||
aria-label="resize widget"
|
||||
v-tooltip="{showDelay:1000, value:'resize widget'}"
|
||||
>
|
||||
<i
|
||||
class="fa-solid fa-up-down pe-2"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="maxHeight < 2">
|
||||
<span
|
||||
type="button"
|
||||
drag-action="resize"
|
||||
class="col-auto px-1 cursor-ew-resize"
|
||||
draggable="true"
|
||||
aria-label="resize widget"
|
||||
v-tooltip="{showDelay:1000, value:'resize widget'}"
|
||||
>
|
||||
<i
|
||||
class="fa-solid fa-left-right pe-2"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span
|
||||
type="button"
|
||||
drag-action="resize"
|
||||
class="col-auto px-1 cursor-nw-resize"
|
||||
draggable="true"
|
||||
aria-label="resize widget"
|
||||
v-tooltip="{showDelay:1000, value:'resize widget'}"
|
||||
>
|
||||
<i
|
||||
class="fa-solid fa-up-right-and-down-left-from-center mirror-x"
|
||||
aria-hidden="true"
|
||||
></i>
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</height-transition>
|
||||
</div>
|
||||
</div>`,
|
||||
};
|
||||
|
||||
@@ -32,7 +32,7 @@ export default {
|
||||
},
|
||||
additionalRow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
emits: [
|
||||
@@ -57,8 +57,8 @@ export default {
|
||||
draggedOffset: [0, 0],
|
||||
draggedItem: null,
|
||||
draggedNode: null,
|
||||
reorderedItems:[],
|
||||
clonedWidget:null,
|
||||
reorderedItems: [],
|
||||
clonedWidget: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -73,7 +73,7 @@ export default {
|
||||
items_hashmap() {
|
||||
let items = {};
|
||||
this.items.forEach(item => {
|
||||
if (this.reorderedItems.length > 0 && this.needsReordering(item)){
|
||||
if (this.reorderedItems.length > 0 && this.needsReordering(item)) {
|
||||
let rearrangedPosition = this.reorderedItems.filter(widget => widget.data.widgetid == item.widgetid)?.pop();
|
||||
if (rearrangedPosition) {
|
||||
item.x = rearrangedPosition.x;
|
||||
@@ -128,7 +128,7 @@ export default {
|
||||
},
|
||||
rows() {
|
||||
if (this.additionalRowComputed) {
|
||||
return this.grid ? (this.grid.h+1) : 1;
|
||||
return this.grid ? (this.grid.h+1) : 1;
|
||||
}
|
||||
return this.grid ? this.grid.h : 1;
|
||||
},
|
||||
@@ -252,7 +252,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
needsReordering(item) {
|
||||
if (!item?.data?.place[this.cols]){
|
||||
if (!item?.data?.place[this.cols]) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@@ -267,7 +267,7 @@ export default {
|
||||
}
|
||||
},
|
||||
dragging(event) {
|
||||
if(this.mode == MODE_MOVE){
|
||||
if (this.mode == MODE_MOVE) {
|
||||
this.toggleDraggedItemOverlay(true);
|
||||
|
||||
const containerRect = this.$refs.container.getBoundingClientRect();
|
||||
@@ -292,13 +292,11 @@ export default {
|
||||
this.grid = new GridLogic(this.cols);
|
||||
const result = [];
|
||||
let sortedItems = [...items].sort((a, b) => {
|
||||
if(this.needsReordering(a) && this.needsReordering(b)){
|
||||
if (this.needsReordering(a) && this.needsReordering(b)) {
|
||||
return 0;
|
||||
}
|
||||
else if(this.needsReordering(a)){
|
||||
} else if (this.needsReordering(a)) {
|
||||
return 999;
|
||||
}
|
||||
else if(this.needsReordering(b)){
|
||||
} else if (this.needsReordering(b)) {
|
||||
return -999;
|
||||
}
|
||||
|
||||
@@ -313,12 +311,11 @@ export default {
|
||||
if (!firstFreeSlot) {
|
||||
item.x = 0;
|
||||
item.y = this.grid.h;
|
||||
}else{
|
||||
} else {
|
||||
item.x = firstFreeSlot.x;
|
||||
item.y = firstFreeSlot.y;
|
||||
}
|
||||
reorderedItems.push(item);
|
||||
|
||||
}
|
||||
if (item.x + item.w > this.cols) {
|
||||
let targetW = this.cols-item.x,
|
||||
@@ -496,7 +493,7 @@ export default {
|
||||
this.removeWidgetClones();
|
||||
this.toggleDraggedItemOverlay(false);
|
||||
|
||||
if (this.mode == MODE_IDLE){
|
||||
if (this.mode == MODE_IDLE) {
|
||||
return;
|
||||
}
|
||||
// clean up unused classes
|
||||
@@ -540,7 +537,7 @@ export default {
|
||||
this.$emit('newItem', this.x, this.y);
|
||||
},
|
||||
updateCursorOnMouseMove(evt) {
|
||||
if(this.mode == MODE_IDLE) {
|
||||
if (this.mode == MODE_IDLE) {
|
||||
this.updateCursor(evt);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -56,7 +56,7 @@ export default {
|
||||
this.tryDragStart(event);
|
||||
},
|
||||
touchMove(event) {
|
||||
if (this.dragging){
|
||||
if (this.dragging) {
|
||||
event.preventDefault();
|
||||
this.$emit('dragging', event);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user