refactor(Dasboard Item): adds container for actions events from Dashboard widgets

public/js/components/Dashboard/Item.js

@@ -27,6 +27,7 @@ export default {
 		"configClosed"
 	],
 	props: [
+		"index",
 		"id",
 		"config",
 		"width",
@@ -44,6 +45,15 @@ export default {
 		ready() {
 			return this.component && this.arguments !== null;
 		},
+		widget_action_identifier(){
+			return `${this.widget.widget_kurzbz}-${this.index}-action-section`;
+		},
+		widgetInformation(){
+			return { 
+				action_section_identifier: this.widget_action_identifier,
+				widget_kurzbz: this.widget.widget_kurzbz,
+			}
+		}
 	},
 	methods: {
 		getWidgetC4Link(widget) {
@@ -120,14 +130,18 @@ export default {
 		</div>
 	</div>
 	<div v-else-if="!hidden || editMode" class="dashboard-item card overflow-hidden h-100" :class="arguments && arguments.className ? arguments.className : ''">
-		<div v-if="widget" class="card-header d-flex ps-0 pe-2">
+		<div v-if="widget" class="card-header d-flex ps-0 pe-2 align-items-center">
 			<Transition>
 				<span v-if="editMode" drag-action="move" class="col-auto mx-2 px-2 cursor-move"><i class="fa-solid fa-grip-vertical"></i></span>
 			</Transition>
 			<span class="col mx-2 px-2">{{ widget.setup.name }}</span>
-			<a v-if="widget.setup.cis4link" :href="getWidgetC4Link(widget)" class="ms-auto mb-2">
+			<a v-if="widget.setup.cis4link" :href="getWidgetC4Link(widget)" class="col-auto ms-auto ">
           		<i class="fa fa-arrow-up-right-from-square me-1"></i>
           	</a>
+
+			<!-- container for widget specific actions -->
+			<div :id="widget_action_identifier"></div>
+
 			<a v-if="hasConfig" class="col-auto px-1" href="#" @click.prevent="openConfig"><i class="fa-solid fa-gear"></i></a>
 			<a v-if="custom && editMode" class="col-auto px-1" href="#" @click.prevent="$emit('remove')">
 				<i class="fa-solid fa-trash"></i>
@@ -139,7 +153,7 @@ export default {
 			</Transition>
 		</div>
 		<div v-if="ready" class="card-body overflow-hidden" style="padding: 0px;">
-			<component :is="component" v-model:shared-data="sharedData" :config="arguments" :width="width" :height="height" @setConfig="setConfig" @change="changeConfigManually"></component>
+			<component :is="component" v-model:shared-data="sharedData" :widgetInfo="widgetInformation" :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">
@@ -147,7 +161,7 @@ export default {
 				{{ 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>
+				<component v-if="ready && !isLoading" :is="component" v-model:shared-data="sharedData" :widgetInfo="widgetInformation" :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>

public/js/components/Dashboard/Section.js

@@ -199,6 +199,7 @@ export default {
 			<template #default="item">
 				
 				<dashboard-item v-if="!item.placeholder"
+					:index="item.index"
 					:id="item.widget"
 					:width="item.w"
 					:height="item.h"

public/js/components/DashboardWidget/Abstract.js

@@ -4,7 +4,8 @@ export default {
 		"width",
 		"height",
 		"configMode",
-		"sharedData"
+		"sharedData",
+		"widgetInfo"
 	],
 	emits: [
 		"setConfig",
@@ -24,6 +25,9 @@ export default {
 			set(value) {
 				this.$emit('update:sharedData', value);
 			}
+		},
+		widget_action_css_identifier(){
+			return `#${this.widgetInfo.action_section_identifier}`;
 		}
 	},
 	methods: {

public/js/components/DashboardWidget/Url.js

@@ -159,9 +159,14 @@ export default {
 	template: /*html*/ `
     <div class="widgets-url w-100 h-100 overflow-scroll" style="padding: 1rem 1rem;">
         <div class="d-flex flex-column justify-content-between">
-        	<button v-if="editModeIsActive" class="btn btn-outline-secondary btn-sm w-100 mt-2" @click="openCreateModal" type="button">{{$p.t('bookmark','newLink')}}</button>
 
-            <template v-if="shared">
+			<Teleport :to="widget_action_css_identifier">
+				<button v-show="!editModeIsActive" class="btn btn-outline-secondary btn-sm" @click="openCreateModal" type="button">
+					<i class="fa-solid fa-plus"></i>
+				</button>
+			</Teleport>
+
+			<template v-if="shared">
 
                 <template v-if="!emptyBookmarks">
 					<div v-for="link in shared" :key="link.id" class="d-flex mt-2">
@@ -171,11 +176,11 @@ export default {
 
 						<div class="ms-auto">
 							<!--EDIT BOOKMARK-->
-							<a href="#" @click.prevent="openEditModal(link)" v-show="configMode || editModeIsActive">
+							<a href="#" @click.prevent="openEditModal(link)" >
 								<i class="fa fa-edit me-1"></i>
 							</a>
 							<!--DELETE BOOKMARK-->
-							<a href="#" @click.prevent="removeLink(link.bookmark_id)" v-show="configMode || editModeIsActive">
+							<a href="#" @click.prevent="removeLink(link.bookmark_id)" >
 								<i class="fa fa-regular fa-trash-can" style="color: #e01b24;"></i>
 							</a>
 						</div>
@@ -196,7 +201,7 @@ export default {
         </div>
     </div>
 	<!--EDIT MODAL-->
-	<core-form draggable="true" @dragstart="stopDrag" @drag="stopDrag" @dragend="stopDrag" v-if="editModeIsActive " ref="editForm">
+	<core-form draggable="true" @dragstart="stopDrag" @drag="stopDrag" @dragend="stopDrag" ref="editForm">
 		<bs-modal @[\`hide.bs.modal\`]="bookmark_id=null; clearInputs();" ref="editModal">
 			<template #title>
 				<h2>{{$p.t('bookmark','editLink')}}</h2>
@@ -214,7 +219,7 @@ export default {
 	</core-form>
 
 	<!--CREATE MODAL-->
-	<core-form draggable="true" @dragstart="stopDrag" @drag="stopDrag" @dragend="stopDrag" v-if="editModeIsActive " ref="createForm">
+	<core-form draggable="true" @dragstart="stopDrag" @drag="stopDrag" @dragend="stopDrag" ref="createForm">
 		<bs-modal @[\`hide.bs.modal\`]="clearInputs();" ref="createModal">
 			<template #title>
 				<h2>{{$p.t('bookmark','newLink')}}</h2>

public/js/components/Drop/Grid.js

@@ -359,7 +359,7 @@ export default {
 		@mouseleave="mouseLeave">
 		<TransitionGroup tag="div">
 			<grid-item
-				v-for="item in (mode == 0 && active ? placedItems_withPlaceholders : placedItems)"
+				v-for="(item,index) in (mode == 0 && active ? placedItems_withPlaceholders : placedItems)"
 				:key="item.data.id"
 				:item="item"
 				@start-move="startMove"
@@ -378,7 +378,7 @@ export default {
 					paddingRight: 'var(--fhc-dg-item-padding-horizontal)'
 				}">
 				<template v-slot="item">
-					<slot v-bind="{...item, ...item.data}" :x="item.x" :y="item.y" ></slot>
+					<slot v-bind="{...item, ...item.data, index:index}" :x="item.x" :y="item.y" ></slot>
 				</template>
 			</grid-item>
 		</TransitionGroup>