From c983094625e37c7062845edb929674cd2091b4c3 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Mon, 27 Jul 2020 11:17:31 +0200
Subject: [PATCH] WIP: drag and drop in modal
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 apps/dashboard/src/App.vue | 27 +++++++++++++++++++++++----
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 1dd95431867..6680daea454 100644
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -2,7 +2,7 @@
 	<div id="app-dashboard">
 		<h2>{{ greeting.icon }} {{ greeting.text }}</h2>
 
-		<Draggable class="panels" v-model="layout" @end="saveLayout">
+		<Draggable v-model="layout" class="panels" @end="saveLayout">
 			<div v-for="panelId in layout" :key="panels[panelId].id" class="panel">
 				<div class="panel--header">
 					<h3 :class="panels[panelId].iconClass">
@@ -18,7 +18,10 @@
 		<Modal v-if="modal" @close="closeModal">
 			<div class="modal__content">
 				<h3>{{ t('dashboard', 'Edit widgets') }}</h3>
-				<transition-group name="flip-list" tag="ol">
+				<Draggable v-model="layout"
+					class="panels"
+					tag="ol"
+					@end="saveLayout">
 					<li v-for="panel in sortedPanels" :key="panel.id">
 						<input :id="'panel-checkbox-' + panel.id"
 							type="checkbox"
@@ -29,10 +32,21 @@
 							{{ panel.title }}
 						</label>
 					</li>
-					<li key="appstore">
-						<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
+				</Draggable>
+				<transition-group name="flip-list" tag="ol">
+					<li v-for="panel in sortedPanels" :key="panel.id">
+						<input :id="'panel-checkbox-' + panel.id"
+							type="checkbox"
+							class="checkbox"
+							:checked="isActive(panel)"
+							@input="updateCheckbox(panel, $event.target.checked)">
+						<label :for="'panel-checkbox-' + panel.id" :class="panel.iconClass">
+							{{ panel.title }}
+						</label>
 					</li>
 				</transition-group>
+
+				<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more widgets from the app store') }}</a>
 			</div>
 		</Modal>
 	</div>
@@ -121,6 +135,9 @@ export default {
 		rerenderPanels() {
 			for (const app in this.callbacks) {
 				const element = this.$refs[app]
+				if (this.layout.indexOf(app) === -1) {
+					continue
+				}
 				if (this.panels[app] && this.panels[app].mounted) {
 					continue
 				}
@@ -266,6 +283,8 @@ export default {
 		width: 30vw;
 		margin: 20px;
 		ol {
+			display: flex;
+			flex-direction: column;
 			list-style-type: none;
 		}
 		li label {
-- 
2.39.5