ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[core] draggable shortcutlinks

This commit is contained in:
Tim Gröger 2021-04-18 23:43:16 +02:00
parent 3c7d711f59
commit 95867428a8
3 changed files with 44 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/navigation/ShortcutLink.vue
View File

@ -1,7 +1,7 @@
<template>
<q-btn v-if="isGranted" flat dense :icon="shortcut.icon" :to="{ name: shortcut.link }" round>
<q-menu v-if='context' context-menu>
<q-btn v-close-popup label='Verknüpfung entfernen' @click='deleteShortcut'/>
<q-menu v-if="context" context-menu>
<q-btn v-close-popup label="Verknüpfung entfernen" @click="deleteShortcut" />
</q-menu>
</q-btn>
</template>
@ -21,17 +21,17 @@ export default defineComponent({
context: {
type: Boolean,
default: false,
}
},
},
emits: {
deleteShortcut: (val: FG_Plugin.MenuLink| FG_Plugin.Shortcut) => val.link
deleteShortcut: (val: FG_Plugin.MenuLink | FG_Plugin.Shortcut) => val.link,
},
setup(props, {emit}) {
setup(props, { emit }) {
const isGranted = computed(() => hasPermissions(props.shortcut.permissions || []));
function deleteShortcut() {
emit('deleteShortcut', props.shortcut)
emit('deleteShortcut', props.shortcut);
}
return { isGranted, deleteShortcut};
return { isGranted, deleteShortcut };
},
});
</script>

52
src/layouts/MainLayout.vue
View File

@ -14,8 +14,10 @@
</q-toolbar-title>
<!-- Hier kommen die Shortlinks hin -->
<q-btn icon="mdi-message-bulleted" flat dense
><q-badge color="negative" floating>{{ notifications.length }}</q-badge>
<q-btn icon="mdi-message-bulleted" flat dense round>
<q-badge color="negative" floating>
{{ notifications.length }}
</q-badge>
<q-menu style="max-height: 400px; overflow: auto">
<q-btn
v-if="useNative && noPermission"
@ -33,18 +35,11 @@
<div v-else class="q-pa-sm">Keine neuen Benachrichtigungen</div>
</q-menu>
</q-btn>
<!--<shortcut-link
v-for="(shortcut, index) in shortcuts"
:key="'shortcut' + index"
:shortcut="shortcut"
/>-->
<shortcut-link
v-for="(shortcut, index) in shortCuts"
:key="'shortcut' + index"
:shortcut="shortcut"
context
@delete-shortcut="deleteShortcut"
/>
<drag v-model="shortCuts" item-key="link" ghost-class="ghost">
<template #item="{ element }">
<shortcut-link :shortcut="element" context @delete-shortcut="deleteShortcut" />
</template>
</drag>
<q-btn flat round dense icon="mdi-exit-to-app" @click="logout()" />
</q-toolbar>
</q-header>
@ -64,13 +59,6 @@
:entry="entry"
@add-short-cut="addShortcut"
/>
<!--<q-separator />
Plugin functions
<essential-link
v-for="(entry, index) in subLinks"
:key="'childPlugin' + index"
:entry="entry"
/>-->
</q-list>
<q-separator />
<essential-link
@ -89,13 +77,23 @@
import EssentialLink from 'src/components/navigation/EssentialLink.vue';
import ShortcutLink from 'src/components/navigation/ShortcutLink.vue';
import Notification from 'src/components/Notification.vue';
import { defineComponent, ref, inject, computed, onBeforeMount, onBeforeUnmount } from 'vue';
import {
defineComponent,
ref,
inject,
computed,
onBeforeMount,
onBeforeUnmount,
ComponentPublicInstance,
} from 'vue';
import { useMainStore } from 'src/stores';
import { FG_Plugin } from 'src/plugins';
import { useRouter } from 'vue-router';
import { Screen } from 'quasar';
import config from 'src/config';
import EssentialExpansionLink from 'components/navigation/EssentialExpansionLink.vue';
import draggable from 'vuedraggable';
const drag: ComponentPublicInstance = <ComponentPublicInstance>draggable;
const essentials: FG_Plugin.MenuLink[] = [
{
title: 'Über Flaschengeist',
@ -106,7 +104,7 @@ const essentials: FG_Plugin.MenuLink[] = [
export default defineComponent({
name: 'MainLayout',
components: { EssentialExpansionLink, EssentialLink, ShortcutLink, Notification },
components: { EssentialExpansionLink, EssentialLink, ShortcutLink, Notification, drag },
setup() {
const router = useRouter();
const mainStore = useMainStore();
@ -171,8 +169,8 @@ export default defineComponent({
const shortCuts = computed({
get: () => mainStore.shortcuts,
set: (val: Array<FG_Plugin.MenuLink>) => {
console.log('hier bin ich', val);
mainStore.shortcuts = val;
void mainStore.setShortcuts();
},
});
@ -185,7 +183,6 @@ export default defineComponent({
}
function deleteShortcut(val: FG_Plugin.MenuLink) {
console.log('deleteShortcut');
const idx = shortCuts.value.findIndex((a: FG_Plugin.MenuLink) => a.link === val.link);
if (idx > -1) {
shortCuts.value.splice(idx, 1);
@ -212,3 +209,8 @@ export default defineComponent({
},
});
</script>
<style scoped lang="sass">
.ghost
opacity: 0.5
background: $accent
</style>

14
src/pages/Login.vue
View File

@ -36,9 +36,15 @@
</q-form>
</q-card-section>
<div class="row justify-end">
<q-btn v-if='$q.platform.is.cordova || $q.platform.is.electron' flat round icon="mdi-menu-down" @click="openServerSettings" />
<q-btn
v-if="$q.platform.is.cordova || $q.platform.is.electron"
flat
round
icon="mdi-menu-down"
@click="openServerSettings"
/>
</div>
<q-slide-transition v-if='$q.platform.is.cordova || $q.platform.is.electron'>
<q-slide-transition v-if="$q.platform.is.cordova || $q.platform.is.electron">
<div v-show="visible">
<q-separator />
<q-card-section>
@ -78,7 +84,7 @@ export default defineComponent({
const password = ref('');
const server = ref<string | undefined>(api.defaults.baseURL);
const visible = ref(false);
const $q = useQuasar()
const $q = useQuasar();
function openServerSettings() {
visible.value = !visible.value;
@ -152,7 +158,7 @@ export default defineComponent({
server,
userid,
visible,
$q
$q,
};
},
});