feat: add v-can-piece directive and gate calendar view by permission

Author: Wacken2012

src/directives/canPiece.ts

@@ -0,0 +1,18 @@
+import { canAccessPiece } from '../services/PermissionService'
+import { useUserStore } from '../store/user'
+
+export default {
+  mounted(el: HTMLElement, binding: any) {
+    try {
+      const userStore = useUserStore()
+      const role = userStore.primaryRole
+      const user = { role }
+      const piece = binding.value
+      if (!canAccessPiece(piece as any, user as any)) {
+        el.style.display = 'none'
+      }
+    } catch (e) {
+      el.style.display = 'none'
+    }
+  }
+}

src/views/EventsView.vue

@@ -1,12 +1,27 @@
 <template>
   <div>
     <h2>Termine</h2>
-    <p>Kalenderintegration via CalDAV / Nextcloud (Platzhalter)</p>
+    <div v-if="mayAccessCalendar">
+      <p>Kalenderintegration via CalDAV / Nextcloud (Platzhalter)</p>
+      <!-- Hier kommt die Calendar-Komponente / Sync-Logik -->
+    </div>
+    <div v-else>
+      <p>Sie haben keine Berechtigung, den Kalender einzusehen.</p>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-// TODO: implement event list with CalDAV sync
+import { computed } from 'vue'
+import { useUserStore } from '@/store/user'
+import { canAccessCalendar } from '@/services/PermissionService'
+
+const userStore = useUserStore()
+const mayAccessCalendar = computed(() => {
+  const role = userStore.primaryRole
+  const user = { role }
+  return canAccessCalendar(user as any)
+})
 </script>
 
 <style scoped>