|
Lines 20-29
Link Here
|
| 20 |
> |
20 |
> |
| 21 |
<component |
21 |
<component |
| 22 |
v-for="(widget, index) in selectedWidgetsLeft" |
22 |
v-for="(widget, index) in selectedWidgetsLeft" |
| 23 |
:key="widget.name" |
23 |
:key="widget.name + '-' + index" |
| 24 |
:is="widget" |
24 |
:is="widget" |
| 25 |
display="dashboard" |
25 |
display="dashboard" |
| 26 |
dashboardColumn="left" |
26 |
dashboardColumn="left" |
|
|
27 |
:dashboardTopRow="index === 0" |
| 27 |
@moveWidget="moveWidget" |
28 |
@moveWidget="moveWidget" |
| 28 |
@removed="removeWidget(widget)" |
29 |
@removed="removeWidget(widget)" |
| 29 |
></component> |
30 |
></component> |
|
Lines 39-48
Link Here
|
| 39 |
> |
40 |
> |
| 40 |
<component |
41 |
<component |
| 41 |
v-for="(widget, index) in selectedWidgetsRight" |
42 |
v-for="(widget, index) in selectedWidgetsRight" |
| 42 |
:key="widget.name" |
43 |
:key="widget.name + '-' + index" |
| 43 |
:is="widget" |
44 |
:is="widget" |
| 44 |
display="dashboard" |
45 |
display="dashboard" |
| 45 |
dashboardColumn="right" |
46 |
dashboardColumn="right" |
|
|
47 |
:dashboardTopRow="index === 0" |
| 46 |
@moveWidget="moveWidget" |
48 |
@moveWidget="moveWidget" |
| 47 |
@removed="removeWidget(widget)" |
49 |
@removed="removeWidget(widget)" |
| 48 |
></component> |
50 |
></component> |
|
Lines 103-135
export default {
Link Here
|
| 103 |
} |
105 |
} |
| 104 |
} |
106 |
} |
| 105 |
|
107 |
|
| 106 |
function moveWidget(widget) { |
108 |
function moveWidget(params) { |
| 107 |
if ( |
109 |
if (params.direction === "right") { |
| 108 |
selectedWidgetsLeft.value.some( |
|
|
| 109 |
element => element.name === widget.componentName |
| 110 |
) |
| 111 |
) { |
| 112 |
selectedWidgetsRight.value.unshift( |
110 |
selectedWidgetsRight.value.unshift( |
| 113 |
selectedWidgetsLeft.value.find( |
111 |
selectedWidgetsLeft.value.find( |
| 114 |
element => element.name === widget.componentName |
112 |
element => element.name === params.widgetComponentName |
| 115 |
) |
113 |
) |
| 116 |
); |
114 |
); |
| 117 |
selectedWidgetsLeft.value = selectedWidgetsLeft.value.filter( |
115 |
selectedWidgetsLeft.value = selectedWidgetsLeft.value.filter( |
| 118 |
element => element.name !== widget.componentName |
116 |
element => element.name !== params.widgetComponentName |
| 119 |
); |
117 |
); |
| 120 |
} else if ( |
118 |
} else if (params.direction === "left") { |
| 121 |
selectedWidgetsRight.value.some( |
|
|
| 122 |
element => element.name === widget.componentName |
| 123 |
) |
| 124 |
) { |
| 125 |
selectedWidgetsLeft.value.unshift( |
119 |
selectedWidgetsLeft.value.unshift( |
| 126 |
selectedWidgetsRight.value.find( |
120 |
selectedWidgetsRight.value.find( |
| 127 |
element => element.name === widget.componentName |
121 |
element => element.name === params.widgetComponentName |
| 128 |
) |
122 |
) |
| 129 |
); |
123 |
); |
| 130 |
selectedWidgetsRight.value = selectedWidgetsRight.value.filter( |
124 |
selectedWidgetsRight.value = selectedWidgetsRight.value.filter( |
| 131 |
element => element.name !== widget.componentName |
125 |
element => element.name !== params.widgetComponentName |
| 132 |
); |
126 |
); |
|
|
127 |
} else if ( |
| 128 |
params.direction === "up" || |
| 129 |
params.direction === "down" |
| 130 |
) { |
| 131 |
const list = |
| 132 |
params.currentColumn === "left" |
| 133 |
? selectedWidgetsLeft.value |
| 134 |
: selectedWidgetsRight.value; |
| 135 |
|
| 136 |
const currentIndex = list.findIndex( |
| 137 |
element => element.name === params.widgetComponentName |
| 138 |
); |
| 139 |
|
| 140 |
if (currentIndex === -1) return; |
| 141 |
|
| 142 |
const newIndex = |
| 143 |
params.direction === "up" |
| 144 |
? currentIndex - 1 |
| 145 |
: currentIndex + 1; |
| 146 |
|
| 147 |
if (newIndex < 0 || newIndex >= list.length) return; // Out of bounds |
| 148 |
|
| 149 |
if (params.currentColumn === "left") { |
| 150 |
selectedWidgetsLeft.value = (() => { |
| 151 |
const arr = [...selectedWidgetsLeft.value]; |
| 152 |
const [item] = arr.splice(currentIndex, 1); |
| 153 |
arr.splice(newIndex, 0, item); |
| 154 |
return arr; |
| 155 |
})(); |
| 156 |
} else if (params.currentColumn === "right") { |
| 157 |
selectedWidgetsRight.value = (() => { |
| 158 |
const arr = [...selectedWidgetsRight.value]; |
| 159 |
const [item] = arr.splice(currentIndex, 1); |
| 160 |
arr.splice(newIndex, 0, item); |
| 161 |
return arr; |
| 162 |
})(); |
| 163 |
} |
| 133 |
} |
164 |
} |
| 134 |
} |
165 |
} |
| 135 |
|
166 |
|