WIP: drag and drop in modal

Signed-off-by: Julius Härtl <jus@bitgrid.net>

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 1dd95431867aaf538fdc76aefe5465cba5caeedc..6680daea454f04d17c621050592ba3006df841ad 100644 (file)
--- 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 {