|
|
|
@ -2,23 +2,18 @@
|
|
|
|
|
<div id="app-dashboard">
|
|
|
|
|
<h2>{{ greeting.icon }} {{ greeting.text }}</h2>
|
|
|
|
|
|
|
|
|
|
<Container class="panels"
|
|
|
|
|
orientation="horizontal"
|
|
|
|
|
drag-handle-selector=".panel--header"
|
|
|
|
|
@drop="onDrop">
|
|
|
|
|
<Draggable v-for="panelId in layout" :key="panels[panelId].id" class="panel">
|
|
|
|
|
<Draggable class="panels" v-model="layout" @end="saveLayout">
|
|
|
|
|
<div v-for="panelId in layout" :key="panels[panelId].id" class="panel">
|
|
|
|
|
<div class="panel--header">
|
|
|
|
|
<a :href="panels[panelId].url">
|
|
|
|
|
<h3 :class="panels[panelId].iconClass">
|
|
|
|
|
{{ panels[panelId].title }}
|
|
|
|
|
</h3>
|
|
|
|
|
</a>
|
|
|
|
|
<h3 :class="panels[panelId].iconClass">
|
|
|
|
|
{{ panels[panelId].title }}
|
|
|
|
|
</h3>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="panel--content">
|
|
|
|
|
<div :ref="panels[panelId].id" :data-id="panels[panelId].id" />
|
|
|
|
|
</div>
|
|
|
|
|
</Draggable>
|
|
|
|
|
</Container>
|
|
|
|
|
</div>
|
|
|
|
|
</Draggable>
|
|
|
|
|
<a class="edit-panels icon-add" @click="showModal">{{ t('dashboard', 'Edit panels') }}</a>
|
|
|
|
|
<Modal v-if="modal" @close="closeModal">
|
|
|
|
|
<div class="modal__content">
|
|
|
|
@ -30,12 +25,12 @@
|
|
|
|
|
class="checkbox"
|
|
|
|
|
:checked="isActive(panel)"
|
|
|
|
|
@input="updateCheckbox(panel, $event.target.checked)">
|
|
|
|
|
<label :for="'panel-checkbox-' + panel.id">
|
|
|
|
|
<label :for="'panel-checkbox-' + panel.id" :class="panel.iconClass">
|
|
|
|
|
{{ panel.title }}
|
|
|
|
|
</label>
|
|
|
|
|
</li>
|
|
|
|
|
<li key="appstore">
|
|
|
|
|
<a href="generateUrl('/apps/settings')" class="button">{{ t('dashboard', 'Get more panels from the app store') }}</a>
|
|
|
|
|
<a :href="appStoreUrl" class="button">{{ t('dashboard', 'Get more panels from the app store') }}</a>
|
|
|
|
|
</li>
|
|
|
|
|
</transition-group>
|
|
|
|
|
</div>
|
|
|
|
@ -48,35 +43,16 @@ import Vue from 'vue'
|
|
|
|
|
import { loadState } from '@nextcloud/initial-state'
|
|
|
|
|
import { getCurrentUser } from '@nextcloud/auth'
|
|
|
|
|
import { Modal } from '@nextcloud/vue'
|
|
|
|
|
import { Container, Draggable } from 'vue-smooth-dnd'
|
|
|
|
|
import Draggable from 'vuedraggable'
|
|
|
|
|
import axios from '@nextcloud/axios'
|
|
|
|
|
import { generateUrl } from '@nextcloud/router'
|
|
|
|
|
|
|
|
|
|
const panels = loadState('dashboard', 'panels')
|
|
|
|
|
|
|
|
|
|
const applyDrag = (arr, dragResult) => {
|
|
|
|
|
const { removedIndex, addedIndex, payload } = dragResult
|
|
|
|
|
if (removedIndex === null && addedIndex === null) return arr
|
|
|
|
|
|
|
|
|
|
const result = [...arr]
|
|
|
|
|
let itemToAdd = payload
|
|
|
|
|
|
|
|
|
|
if (removedIndex !== null) {
|
|
|
|
|
itemToAdd = result.splice(removedIndex, 1)[0]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (addedIndex !== null) {
|
|
|
|
|
result.splice(addedIndex, 0, itemToAdd)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return result
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'App',
|
|
|
|
|
components: {
|
|
|
|
|
Modal,
|
|
|
|
|
Container,
|
|
|
|
|
Draggable,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
@ -87,6 +63,7 @@ export default {
|
|
|
|
|
name: getCurrentUser()?.displayName,
|
|
|
|
|
layout: loadState('dashboard', 'layout').filter((panelId) => panels[panelId]),
|
|
|
|
|
modal: false,
|
|
|
|
|
appStoreUrl: generateUrl('/settings/apps'),
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
@ -161,10 +138,6 @@ export default {
|
|
|
|
|
layout: this.layout.join(','),
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
onDrop(dropResult) {
|
|
|
|
|
this.layout = applyDrag(this.layout, dropResult)
|
|
|
|
|
this.saveLayout()
|
|
|
|
|
},
|
|
|
|
|
showModal() {
|
|
|
|
|
this.modal = true
|
|
|
|
|
},
|
|
|
|
@ -200,7 +173,9 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.panels {
|
|
|
|
|
width: 100%;
|
|
|
|
|
width: auto;
|
|
|
|
|
margin: auto;
|
|
|
|
|
max-width: 1500px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
flex-direction: row;
|
|
|
|
@ -216,6 +191,10 @@ export default {
|
|
|
|
|
border-radius: var(--border-radius-large);
|
|
|
|
|
border: 2px solid var(--color-border);
|
|
|
|
|
|
|
|
|
|
&.sortable-ghost {
|
|
|
|
|
opacity: 0.1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
& > .panel--header {
|
|
|
|
|
position: sticky;
|
|
|
|
|
display: flex;
|
|
|
|
@ -229,6 +208,15 @@ export default {
|
|
|
|
|
backdrop-filter: blur(4px);
|
|
|
|
|
cursor: grab;
|
|
|
|
|
|
|
|
|
|
&, ::v-deep * {
|
|
|
|
|
-webkit-touch-callout: none;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-khtml-user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&:active {
|
|
|
|
|
cursor: grabbing;
|
|
|
|
|
}
|
|
|
|
@ -252,6 +240,8 @@ export default {
|
|
|
|
|
|
|
|
|
|
& > .panel--content {
|
|
|
|
|
margin: 0 16px 16px 16px;
|
|
|
|
|
height: 420px;
|
|
|
|
|
overflow: auto;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -282,6 +272,9 @@ export default {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
display: block;
|
|
|
|
|
list-style-type: none;
|
|
|
|
|
background-size: 16px;
|
|
|
|
|
background-position: left center;
|
|
|
|
|
padding-left: 26px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|