olli
b84dc6c6e9
- Introduced typography styles in _typography.scss for headings, paragraphs, blockquotes, and horizontal rules. - Added utility classes in _utils.scss for card styling and clearfix. - Updated layout.scss to include new typography and utility styles. - Defined common CSS variables in _common.scss for consistent theming. - Created dark and light theme variables in _dark.scss and _light.scss respectively. - Integrated Tailwind CSS with custom configurations in tailwind.config.js and postcss.config.js. - Implemented database migrations for contact and contact_persons tables. - Added data fixtures for generating sample contact data. - Developed Contact and ContactPerson entities with appropriate validation and serialization. - Enhanced ContactRepository with search and type filtering methods.
97 lines
5.0 KiB
Vue
97 lines
5.0 KiB
Vue
<script setup>
|
|
import { useLayout } from './composables/layout';
|
|
import { useAuthStore } from '../stores/auth';
|
|
import AppConfigurator from './AppConfigurator.vue';
|
|
|
|
const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();
|
|
const authStore = useAuthStore();
|
|
|
|
async function logout() {
|
|
await authStore.logout();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="layout-topbar">
|
|
<div class="layout-topbar-logo-container">
|
|
<button class="layout-menu-button layout-topbar-action" @click="toggleMenu">
|
|
<i class="pi pi-bars"></i>
|
|
</button>
|
|
<router-link to="/" class="layout-topbar-logo">
|
|
<span class="text-2xl font-bold">myCRM</span>
|
|
</router-link>
|
|
</div>
|
|
|
|
<div class="layout-topbar-actions">
|
|
<div class="layout-config-menu">
|
|
<button type="button" class="layout-topbar-action" @click="toggleDarkMode">
|
|
<i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
|
|
</button>
|
|
<div class="relative">
|
|
<button
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
|
|
type="button"
|
|
class="layout-topbar-action layout-topbar-action-highlight"
|
|
>
|
|
<i class="pi pi-palette"></i>
|
|
</button>
|
|
<AppConfigurator />
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="layout-topbar-menu-button layout-topbar-action lg:hidden"
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
|
|
>
|
|
<i class="pi pi-ellipsis-v"></i>
|
|
</button>
|
|
|
|
<div class="layout-topbar-menu hidden lg:flex">
|
|
<div class="relative">
|
|
<button
|
|
type="button"
|
|
class="layout-topbar-action"
|
|
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
|
|
>
|
|
<i class="pi pi-user"></i>
|
|
<span>{{ authStore.user?.email?.split('@')[0] }}</span>
|
|
</button>
|
|
<div class="hidden absolute right-0 top-full mt-2 bg-surface-0 dark:bg-surface-900 border border-surface-200 dark:border-surface-700 rounded-lg shadow-lg p-4 min-w-[280px] z-[1000]">
|
|
<div class="flex items-center gap-3 pb-3 border-b border-surface-200 dark:border-surface-700">
|
|
<div class="w-12 h-12 rounded-full bg-primary text-primary-contrast flex items-center justify-center text-xl font-bold">
|
|
{{ (authStore.user?.fullName || authStore.user?.email || 'U').charAt(0).toUpperCase() }}
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="font-semibold text-surface-900 dark:text-surface-0">
|
|
{{ authStore.user?.fullName || authStore.user?.email?.split('@')[0] }}
|
|
</div>
|
|
<div class="text-sm text-surface-600 dark:text-surface-400">
|
|
{{ authStore.user?.email }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-3 space-y-2">
|
|
<div class="flex items-center gap-2 text-sm">
|
|
<i class="pi pi-shield text-surface-500"></i>
|
|
<span class="text-surface-700 dark:text-surface-300">
|
|
{{ authStore.user?.roles?.join(', ') || 'Keine Rolle' }}
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm" v-if="authStore.user?.createdAt">
|
|
<i class="pi pi-calendar text-surface-500"></i>
|
|
<span class="text-surface-700 dark:text-surface-300">
|
|
Mitglied seit {{ new Date(authStore.user.createdAt).toLocaleDateString('de-DE') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="layout-topbar-action" @click="logout">
|
|
<i class="pi pi-sign-out"></i>
|
|
<span>Logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|