Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 30 Packages Wiki Activity Actions

patches v1.7.4 #118

Merged
jkeffects merged 5 commits from develop into main 2025-07-22 06:24:04 +00:00
Conversation 0 Commits 5 Files changed 11 +144 -18
7 changed files with 144 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e755a4ec37 - Show all commits

45
package-lock.json generated
View file

@ -18,6 +18,7 @@
"@headlessui/vue": "^1.7.23",
"@heroicons/vue": "^2.2.0",
"@tailwindcss/vite": "^4.1.11",
"@vueuse/core": "^13.5.0",
"axios": "^1.10.0",
"event-source-polyfill": "^1.0.31",
"grapesjs": "^0.22.11",
@ -3967,6 +3968,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/@types/web-bluetooth": {
"version": "0.0.21",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
"integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
"license": "MIT"
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "8.36.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.36.0.tgz",
@ -4613,6 +4620,44 @@
}
}
},
"node_modules/@vueuse/core": {
"version": "13.5.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.5.0.tgz",
"integrity": "sha512-wV7z0eUpifKmvmN78UBZX8T7lMW53Nrk6JP5+6hbzrB9+cJ3jr//hUlhl9TZO/03bUkMK6gGkQpqOPWoabr72g==",
"license": "MIT",
"dependencies": {
"@types/web-bluetooth": "^0.0.21",
"@vueuse/metadata": "13.5.0",
"@vueuse/shared": "13.5.0"
},
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vue": "^3.5.0"
}
},
"node_modules/@vueuse/metadata": {
"version": "13.5.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.5.0.tgz",
"integrity": "sha512-euhItU3b0SqXxSy8u1XHxUCdQ8M++bsRs+TYhOLDU/OykS7KvJnyIFfep0XM5WjIFry9uAPlVSjmVHiqeshmkw==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/@vueuse/shared": {
"version": "13.5.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.5.0.tgz",
"integrity": "sha512-K7GrQIxJ/ANtucxIXbQlUHdB0TPA8c+q5i+zbrjxuhJCnJ9GtBg75sBSnvmLSxHKPg2Yo8w62PWksl9kwH0Q8g==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vue": "^3.5.0"
}
},
"node_modules/acorn": {
"version": "8.15.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",

3
package.json
View file

@ -4,7 +4,7 @@
"description": "Feuerwehr/Verein Mitgliederverwaltung UI",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
@ -33,6 +33,7 @@
"@headlessui/vue": "^1.7.23",
"@heroicons/vue": "^2.2.0",
"@tailwindcss/vite": "^4.1.11",
"@vueuse/core": "^13.5.0",
"axios": "^1.10.0",
"event-source-polyfill": "^1.0.31",
"grapesjs": "^0.22.11",

34
src/App.vue
View file

@ -2,11 +2,11 @@
<Modal />
<ContextMenu />
<Header @contextmenu.prevent />
<div class="grow overflow-x-hidden overflow-y-auto p-2 md:p-4" @contextmenu.prevent>
<AppHeader />
<div class="grow overflow-x-hidden overflow-y-auto p-2 md:p-4">
<RouterView />
</div>
<Footer @contextmenu.prevent />
<AppFooter />
<Notification />
<Teleport to="head">
@ -18,10 +18,11 @@
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { onLongPress } from "@vueuse/core";
import { RouterView } from "vue-router";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
import AppHeader from "./components/Header.vue";
import AppFooter from "./components/Footer.vue";
import { mapActions, mapState } from "pinia";
import { useAuthStore } from "./stores/auth";
import { isAuthenticatedPromise } from "./router/authGuard";
@ -31,6 +32,7 @@ import Notification from "./components/Notification.vue";
import { config } from "./config";
import { useConfigurationStore } from "@/stores/configuration";
import { resetAllPiniaStores } from "@/helpers/piniaReset";
import { useContextMenuStore } from "./stores/context-menu";
</script>
<script lang="ts">
@ -40,6 +42,11 @@ export default defineComponent({
...mapState(useConfigurationStore, ["clubName"]),
},
mounted() {
document.body.addEventListener("contextmenu", (event) => {
this.handleContextMenu(event);
});
onLongPress(document.body, this.handleContextMenu);
resetAllPiniaStores();
this.configure();
@ -52,6 +59,21 @@ export default defineComponent({
},
methods: {
...mapActions(useConfigurationStore, ["configure"]),
...mapActions(useContextMenuStore, ["openContextMenu"]),
handleContextMenu(e: MouseEvent) {
e.preventDefault();
// TODO allow contextmenu on elements with special attribute with reduced selection
const target = e.target as HTMLElement | null;
if (!target) return;
if (["INPUT", "TEXTAREA", "P", "H1", "H2", "H3", "H4"].includes((target as HTMLElement).nodeName)) {
this.openContextMenu(e, {
component_ref: markRaw(defineAsyncComponent(() => import("@/components/CopyPasteContextMenu.vue"))),
data: ["INPUT", "TEXTAREA"].includes((e.target as HTMLElement).nodeName) ? "" : "nopaste",
});
}
},
},
});
</script>

3
src/components/ContextMenu.vue
View file

@ -1,10 +1,9 @@
<template>
<div
ref="contextMenu"
class="absolute flex flex-col gap-1 border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-50 p-1"
class="absolute flex flex-col gap-1 border border-gray-400 bg-white rounded-md select-none text-left shadow-md z-[100] p-1"
v-show="show"
:style="contextMenuStyle"
@contextmenu.prevent
@click="closeContextMenu"
>
<component :is="component_ref" :data="data" />

61
src/components/CopyPasteContextMenu.vue Normal file
View file

@ -0,0 +1,61 @@
<template>
<div class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md" @click="copy">
<DocumentDuplicateIcon class="w-5 h-5" />
<p>kopieren</p>
</div>
<div
v-if="data != 'nopaste'"
class="flex flex-row gap-2 cursor-pointer hover:bg-gray-300 p-1 rounded-md"
@click="paste"
>
<ClipboardDocumentIcon class="w-5 h-5" />
<p>einfügen</p>
</div>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { ClipboardDocumentIcon, DocumentDuplicateIcon } from "@heroicons/vue/24/outline";
import { mapState } from "pinia";
import { useContextMenuStore } from "@/stores/context-menu";
</script>
<script lang="ts">
export default defineComponent({
props: ["data"],
data() {
return {
selectedText: "",
};
},
computed: {
...mapState(useContextMenuStore, ["clickedOnEl"]),
},
mounted() {
this.selectedText =
document.getSelection()?.toString() || this.clickedOnEl.value || this.clickedOnEl.innerText || "";
let selection = document.getSelection()?.toString();
console.log(selection);
if (selection == "") {
console.log("jo");
const range = document.createRange();
range.selectNode(this.clickedOnEl);
console.log(range);
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
}
},
methods: {
copy() {
navigator.clipboard.writeText(this.selectedText);
},
paste() {
const el = this.clickedOnEl;
navigator.clipboard.readText().then((e) => {
el.value = e;
});
},
},
});
</script>

11
src/components/Modal.vue
View file

@ -3,21 +3,15 @@
ref="contextMenu"
class="absolute inset-0 w-full h-full flex justify-center items-center bg-black/50 select-none z-50 p-2"
v-show="show"
@contextmenu.prevent
>
<!-- @click="closeModal" -->
<component
:is="component_ref"
:data="data"
@click.stop
class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto"
/>
<component :is="component_ref" :data="data" class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto" />
</div>
</template>
<script setup lang="ts">
import { mapState, mapActions } from "pinia";
import { useModalStore } from "@/stores/modal";
import { useContextMenuStore } from "@/stores/context-menu";
</script>
<script lang="ts">
@ -27,6 +21,7 @@ export default {
},
methods: {
...mapActions(useModalStore, ["closeModal"]),
...mapActions(useContextMenuStore, ["closeContextMenu"]),
},
};
</script>

5
src/stores/context-menu.ts
View file

@ -8,6 +8,7 @@ export const useContextMenuStore = defineStore("context-menu", {
show: false,
component_ref: null as any,
data: null as any,
clickedOnEl: null as any,
};
},
getters: {
@ -16,16 +17,18 @@ export const useContextMenuStore = defineStore("context-menu", {
},
},
actions: {
openContextMenu(e: MouseEvent, content: { component_ref: any; data: any }) {
openContextMenu(e: MouseEvent, content: { component_ref: any; data?: any }) {
this.component_ref = content.component_ref;
this.data = content.data;
this.contextX = e.pageX;
this.contextY = e.pageY;
this.clickedOnEl = e.target;
this.show = true;
},
closeContextMenu() {
this.component_ref = null;
this.data = null;
this.clickedOnEl = null;
this.show = false;
},
},