dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(frontend): extract auth and topbar workspace components

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 11:15:29 +07:00
parent e5030a321f
commit 47ed805ac7
4 changed files with 181 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/app/components/workspace/header/CrmWorkspaceTopbar.vue Normal file
View File

@@ -0,0 +1,100 @@
<script setup lang="ts">
const props = defineProps<{
selectedTab: "communications" | "documents";
peopleLeftMode: "contacts" | "calendar";
authInitials: string;
authDisplayName: string;
telegramStatusBadgeClass: string;
telegramStatusLabel: string;
telegramConnectBusy: boolean;
telegramConnectNotice: string;
}>();
const emit = defineEmits<{
(e: "open-contacts"): void;
(e: "open-calendar"): void;
(e: "open-documents"): void;
(e: "start-telegram-connect"): void;
(e: "logout"): void;
}>();
</script>
<template>
<div class="workspace-topbar border-b border-base-300 px-3 py-2 md:px-4">
<div class="flex items-center justify-between gap-3">
<div class="join">
<button
class="btn btn-sm join-item"
:class="
props.selectedTab === 'communications' && props.peopleLeftMode === 'contacts'
? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
: 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
"
@click="emit('open-contacts')"
>
Contacts
</button>
<button
class="btn btn-sm join-item"
:class="
props.selectedTab === 'communications' && props.peopleLeftMode === 'calendar'
? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
: 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
"
@click="emit('open-calendar')"
>
Calendar
</button>
<button
class="btn btn-sm join-item"
:class="
props.selectedTab === 'documents'
? 'btn-ghost border border-base-300 bg-base-200/70 text-base-content'
: 'btn-ghost border border-transparent text-base-content/65 hover:border-base-300/70 hover:text-base-content'
"
@click="emit('open-documents')"
>
Documents
</button>
</div>
<div class="dropdown dropdown-end">
<button tabindex="0" class="btn btn-sm btn-ghost gap-2">
<div class="avatar placeholder">
<div class="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-content">
<span class="text-[11px] font-semibold leading-none">{{ props.authInitials }}</span>
</div>
</div>
<span class="max-w-[160px] truncate text-xs font-medium">{{ props.authDisplayName }}</span>
</button>
<div tabindex="0" class="dropdown-content z-30 mt-2 w-80 rounded-box border border-base-300 bg-base-100 p-3 shadow-lg">
<div class="mb-2 border-b border-base-300 pb-2">
<p class="truncate text-sm font-semibold">{{ props.authDisplayName }}</p>
<p class="text-[11px] uppercase tracking-wide text-base-content/60">Settings</p>
</div>
<div class="space-y-2 rounded-lg border border-base-300 bg-base-50/40 p-2">
<div class="flex items-center justify-between gap-2">
<span class="text-xs font-medium">Telegram Business</span>
<span class="badge badge-xs" :class="props.telegramStatusBadgeClass">{{ props.telegramStatusLabel }}</span>
</div>
<button
class="btn btn-xs btn-primary w-full"
:disabled="props.telegramConnectBusy"
@click="emit('start-telegram-connect')"
>
{{ props.telegramConnectBusy ? "Connecting..." : "Connect Telegram" }}
</button>
<p v-if="props.telegramConnectNotice" class="text-[11px] leading-snug text-base-content/70">
{{ props.telegramConnectNotice }}
</p>
</div>
<div class="mt-3 border-t border-base-300 pt-2">
<button class="btn btn-sm w-full btn-ghost justify-start" @click="emit('logout')">Logout</button>
</div>
</div>
</div>
</div>
</div>
</template>