feat(communications): split personal and organization settings
This commit is contained in:
parent
999c1a0c1e
commit
c4f33898ab
4 changed files with 84 additions and 23 deletions
|
|
@ -26,6 +26,9 @@ export function CommunicationsModule() {
|
|||
const [connectMode, setConnectMode] = useState<'messenger' | 'email'>('messenger');
|
||||
const [showEmailTab, setShowEmailTab] = useState(() => localStorage.getItem('krona-show-email') === 'true');
|
||||
const [showChannelsTab, setShowChannelsTab] = useState(() => localStorage.getItem('krona-show-bot-channels') === 'true');
|
||||
const [orgEmailAllowed, setOrgEmailAllowed] = useState(() => localStorage.getItem('krona-org-email-allowed') !== 'false');
|
||||
const [orgChannelsAllowed, setOrgChannelsAllowed] = useState(() => localStorage.getItem('krona-org-channels-allowed') !== 'false');
|
||||
const [canConnectAccounts, setCanConnectAccounts] = useState(() => localStorage.getItem('krona-org-connect-accounts') !== 'false');
|
||||
|
||||
const updateEmailVisibility = (enabled: boolean) => {
|
||||
setShowEmailTab(enabled);
|
||||
|
|
@ -39,6 +42,23 @@ export function CommunicationsModule() {
|
|||
if (!enabled && currentTab === 'channels') handleTabChange('settings');
|
||||
};
|
||||
|
||||
const updateOrgEmailAllowed = (enabled: boolean) => {
|
||||
setOrgEmailAllowed(enabled);
|
||||
localStorage.setItem('krona-org-email-allowed', String(enabled));
|
||||
if (!enabled) updateEmailVisibility(false);
|
||||
};
|
||||
|
||||
const updateOrgChannelsAllowed = (enabled: boolean) => {
|
||||
setOrgChannelsAllowed(enabled);
|
||||
localStorage.setItem('krona-org-channels-allowed', String(enabled));
|
||||
if (!enabled) updateChannelsVisibility(false);
|
||||
};
|
||||
|
||||
const updateCanConnectAccounts = (enabled: boolean) => {
|
||||
setCanConnectAccounts(enabled);
|
||||
localStorage.setItem('krona-org-connect-accounts', String(enabled));
|
||||
};
|
||||
|
||||
// Sync tab with URL search param
|
||||
const urlTab = searchParams.get('tab') as CommunicationTab | null;
|
||||
const requestedTab = urlTab && ['messengers', 'email', 'channels', 'contacts', 'settings'].includes(urlTab) ? urlTab : activeTab;
|
||||
|
|
@ -62,9 +82,9 @@ export function CommunicationsModule() {
|
|||
onTabChange={handleTabChange}
|
||||
unreadChats={48}
|
||||
unreadEmails={10}
|
||||
unreadChannels={4}
|
||||
showEmailTab={showEmailTab}
|
||||
showChannelsTab={showChannelsTab}
|
||||
unreadChannels={4}
|
||||
showEmailTab={showEmailTab && orgEmailAllowed}
|
||||
showChannelsTab={showChannelsTab && orgChannelsAllowed}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -72,12 +92,12 @@ export function CommunicationsModule() {
|
|||
<main className="flex-1 min-h-0 flex flex-col overflow-hidden">
|
||||
{currentTab === 'messengers' && (
|
||||
<MessengersView
|
||||
onOpenConnectModal={() => { setConnectMode('messenger'); setIsConnectChannelOpen(true); }}
|
||||
onOpenConnectModal={canConnectAccounts ? () => { setConnectMode('messenger'); setIsConnectChannelOpen(true); } : undefined}
|
||||
onOpenAddContactModal={() => setIsAddContactOpen(true)}
|
||||
/>
|
||||
)}
|
||||
{currentTab === 'email' && (
|
||||
<EmailView onComposeEmail={() => setIsComposeEmailOpen(true)} onAddMailbox={() => { setConnectMode('email'); setIsConnectChannelOpen(true); }} />
|
||||
<EmailView onComposeEmail={() => setIsComposeEmailOpen(true)} onAddMailbox={canConnectAccounts ? () => { setConnectMode('email'); setIsConnectChannelOpen(true); } : undefined} />
|
||||
)}
|
||||
{currentTab === 'channels' && (
|
||||
<ChannelsView onCreateChannelModal={() => setIsCreateChannelOpen(true)} />
|
||||
|
|
@ -85,7 +105,7 @@ export function CommunicationsModule() {
|
|||
{currentTab === 'contacts' && (
|
||||
<ContactsView onAddContactModal={() => setIsAddContactOpen(true)} />
|
||||
)}
|
||||
{currentTab === 'settings' && <SettingsView showEmailTab={showEmailTab} onShowEmailTabChange={updateEmailVisibility} showChannelsTab={showChannelsTab} onShowChannelsTabChange={updateChannelsVisibility} />}
|
||||
{currentTab === 'settings' && <SettingsView showEmailTab={showEmailTab} onShowEmailTabChange={updateEmailVisibility} showChannelsTab={showChannelsTab} onShowChannelsTabChange={updateChannelsVisibility} orgEmailAllowed={orgEmailAllowed} onOrgEmailAllowedChange={updateOrgEmailAllowed} orgChannelsAllowed={orgChannelsAllowed} onOrgChannelsAllowedChange={updateOrgChannelsAllowed} canConnectAccounts={canConnectAccounts} onCanConnectAccountsChange={updateCanConnectAccounts} />}
|
||||
</main>
|
||||
|
||||
{/* Modals */}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { useToast } from '../../../shared/ui';
|
|||
|
||||
interface EmailViewProps {
|
||||
onComposeEmail: () => void;
|
||||
onAddMailbox: () => void;
|
||||
onAddMailbox?: () => void;
|
||||
}
|
||||
|
||||
export function EmailView({ onComposeEmail, onAddMailbox }: EmailViewProps) {
|
||||
|
|
@ -61,9 +61,9 @@ export function EmailView({ onComposeEmail, onAddMailbox }: EmailViewProps) {
|
|||
<span className="text-xs font-bold text-[var(--krona-text-secondary)] uppercase tracking-wider">
|
||||
Почтовые ящики
|
||||
</span>
|
||||
<button type="button" onClick={onAddMailbox} className="text-xs font-semibold text-[var(--krona-primary)] hover:underline">
|
||||
{onAddMailbox && <button type="button" onClick={onAddMailbox} className="text-xs font-semibold text-[var(--krona-primary)] hover:underline">
|
||||
+ Добавить
|
||||
</button>
|
||||
</button>}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{mailboxes.map((mb) => (
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import { Avatar, Badge, Button, ConnectorPill } from '@krona/ui';
|
|||
import { useToast, Drawer } from '../../../shared/ui';
|
||||
|
||||
interface MessengersViewProps {
|
||||
onOpenConnectModal: () => void;
|
||||
onOpenConnectModal?: () => void;
|
||||
onOpenAddContactModal: () => void;
|
||||
}
|
||||
|
||||
|
|
@ -690,7 +690,7 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
|
|||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Button
|
||||
{onOpenConnectModal && <Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={onOpenConnectModal}
|
||||
|
|
@ -698,15 +698,15 @@ export function MessengersView({ onOpenConnectModal, onOpenAddContactModal }: Me
|
|||
className="hidden sm:inline-flex"
|
||||
>
|
||||
Добавить мессенджер
|
||||
</Button>
|
||||
<button
|
||||
</Button>}
|
||||
{onOpenConnectModal && <button
|
||||
type="button"
|
||||
onClick={onOpenConnectModal}
|
||||
className="sm:hidden h-8 w-8 rounded-lg border border-[var(--krona-border)] bg-[var(--krona-surface)] hover:bg-[var(--krona-surface-hover)] text-[var(--krona-primary)] flex items-center justify-center shrink-0"
|
||||
aria-label="Добавить мессенджер"
|
||||
>
|
||||
<Plus className="w-4 h-4 text-[var(--krona-primary)]" />
|
||||
</button>
|
||||
</button>}
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState } from 'react';
|
||||
import { RefreshCw, Trash2, Globe } from 'lucide-react';
|
||||
import { RefreshCw, Trash2, Globe, UserCog, Bell, Volume2, PanelTop } from 'lucide-react';
|
||||
import { useCommunicationsStore } from '../services/communicationsService';
|
||||
import { Button, Badge } from '@krona/ui';
|
||||
import { useToast } from '../../../shared/ui';
|
||||
|
|
@ -9,9 +9,15 @@ interface SettingsViewProps {
|
|||
onShowEmailTabChange: (enabled: boolean) => void;
|
||||
showChannelsTab: boolean;
|
||||
onShowChannelsTabChange: (enabled: boolean) => void;
|
||||
orgEmailAllowed: boolean;
|
||||
onOrgEmailAllowedChange: (enabled: boolean) => void;
|
||||
orgChannelsAllowed: boolean;
|
||||
onOrgChannelsAllowedChange: (enabled: boolean) => void;
|
||||
canConnectAccounts: boolean;
|
||||
onCanConnectAccountsChange: (enabled: boolean) => void;
|
||||
}
|
||||
|
||||
export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsTab, onShowChannelsTabChange }: SettingsViewProps) {
|
||||
export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsTab, onShowChannelsTabChange, orgEmailAllowed, onOrgEmailAllowedChange, orgChannelsAllowed, onOrgChannelsAllowedChange, canConnectAccounts, onCanConnectAccountsChange }: SettingsViewProps) {
|
||||
const { showToast } = useToast();
|
||||
const {
|
||||
integrations,
|
||||
|
|
@ -25,6 +31,13 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
|
|||
|
||||
const [newTemplateText, setNewTemplateText] = useState('');
|
||||
const [testingId, setTestingId] = useState<string | null>(null);
|
||||
const [settingsScope, setSettingsScope] = useState<'personal' | 'organization'>('personal');
|
||||
const [notificationsEnabled, setNotificationsEnabled] = useState(() => localStorage.getItem('krona-user-notifications') !== 'false');
|
||||
const [soundsEnabled, setSoundsEnabled] = useState(() => localStorage.getItem('krona-user-sounds') !== 'false');
|
||||
const [compactMode, setCompactMode] = useState(() => localStorage.getItem('krona-user-compact') !== 'false');
|
||||
|
||||
const switchClass = (enabled: boolean) => `relative w-12 h-7 rounded-full transition-colors shrink-0 ${enabled ? 'bg-[var(--krona-primary)]' : 'bg-[var(--krona-surface-muted)]'}`;
|
||||
const switchKnobClass = (enabled: boolean) => `absolute left-1 top-1 w-5 h-5 rounded-full bg-white shadow-sm transition-transform ${enabled ? 'translate-x-5' : 'translate-x-0'}`;
|
||||
|
||||
const handleTest = async (id: string) => {
|
||||
setTestingId(id);
|
||||
|
|
@ -51,6 +64,12 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
|
|||
|
||||
return (
|
||||
<div className="flex-1 min-h-0 flex flex-col p-4 sm:p-6 bg-[var(--krona-bg-workspace)] overflow-y-auto space-y-6">
|
||||
<div className="flex p-1 rounded-xl bg-[var(--krona-surface-muted)] self-start" role="tablist" aria-label="Тип настроек">
|
||||
<button type="button" role="tab" aria-selected={settingsScope === 'personal'} onClick={() => setSettingsScope('personal')} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${settingsScope === 'personal' ? 'bg-[var(--krona-surface)] text-[var(--krona-primary)] shadow-xs' : 'text-[var(--krona-text-secondary)]'}`}>Мои настройки</button>
|
||||
<button type="button" role="tab" aria-selected={settingsScope === 'organization'} onClick={() => setSettingsScope('organization')} className={`px-4 py-2 rounded-lg text-sm font-semibold transition-colors ${settingsScope === 'organization' ? 'bg-[var(--krona-surface)] text-[var(--krona-primary)] shadow-xs' : 'text-[var(--krona-text-secondary)]'}`}>Организация</button>
|
||||
</div>
|
||||
|
||||
{settingsScope === 'personal' ? <>
|
||||
<section className="p-4 sm:p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs">
|
||||
<h3 className="font-bold text-base text-[var(--krona-text-primary)]">Отображение разделов</h3>
|
||||
<p className="text-xs text-[var(--krona-text-secondary)] mt-0.5 mb-4">Показывайте только те способы связи, которыми пользуется организация</p>
|
||||
|
|
@ -60,8 +79,8 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
|
|||
<div className="font-semibold text-sm text-[var(--krona-text-primary)]">Email</div>
|
||||
<div className="text-xs text-[var(--krona-text-secondary)]">Почтовые ящики и переписка</div>
|
||||
</div>
|
||||
<button type="button" role="switch" aria-checked={showEmailTab} onClick={() => onShowEmailTabChange(!showEmailTab)} className={`relative w-12 h-7 rounded-full transition-colors shrink-0 ${showEmailTab ? 'bg-[var(--krona-primary)]' : 'bg-[var(--krona-surface-muted)]'}`} aria-label="Показывать раздел Email">
|
||||
<span className={`absolute left-1 top-1 w-5 h-5 rounded-full bg-white shadow-sm transition-transform ${showEmailTab ? 'translate-x-5' : 'translate-x-0'}`} />
|
||||
<button type="button" role="switch" aria-checked={showEmailTab} disabled={!orgEmailAllowed} onClick={() => onShowEmailTabChange(!showEmailTab)} className={`${switchClass(showEmailTab)} disabled:opacity-40`} aria-label="Показывать раздел Email">
|
||||
<span className={switchKnobClass(showEmailTab)} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 py-3">
|
||||
|
|
@ -74,14 +93,37 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
|
|||
role="switch"
|
||||
aria-checked={showChannelsTab}
|
||||
onClick={() => onShowChannelsTabChange(!showChannelsTab)}
|
||||
className={`relative w-12 h-7 rounded-full transition-colors shrink-0 ${showChannelsTab ? 'bg-[var(--krona-primary)]' : 'bg-[var(--krona-surface-muted)]'}`}
|
||||
disabled={!orgChannelsAllowed}
|
||||
className={`${switchClass(showChannelsTab)} disabled:opacity-40`}
|
||||
aria-label="Показывать раздел Каналы"
|
||||
>
|
||||
<span className={`absolute left-1 top-1 w-5 h-5 rounded-full bg-white shadow-sm transition-transform ${showChannelsTab ? 'translate-x-5' : 'translate-x-0'}`} />
|
||||
<span className={switchKnobClass(showChannelsTab)} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="p-4 sm:p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs divide-y divide-[var(--krona-border-subtle)]">
|
||||
<h3 className="font-bold text-base text-[var(--krona-text-primary)] pb-3">Поведение и уведомления</h3>
|
||||
{[
|
||||
{ label: 'Уведомления', hint: 'Новые сообщения и упоминания', icon: Bell, value: notificationsEnabled, set: setNotificationsEnabled, key: 'krona-user-notifications' },
|
||||
{ label: 'Звуки', hint: 'Звуковой сигнал новых сообщений', icon: Volume2, value: soundsEnabled, set: setSoundsEnabled, key: 'krona-user-sounds' },
|
||||
{ label: 'Компактный интерфейс', hint: 'Больше диалогов и сообщений на экране', icon: PanelTop, value: compactMode, set: setCompactMode, key: 'krona-user-compact' },
|
||||
].map((item) => <div key={item.label} className="flex items-center justify-between gap-4 py-3"><div className="flex items-center gap-3"><item.icon className="w-4 h-4 text-[var(--krona-primary)]"/><div><div className="font-semibold text-sm text-[var(--krona-text-primary)]">{item.label}</div><div className="text-xs text-[var(--krona-text-secondary)]">{item.hint}</div></div></div><button type="button" role="switch" aria-checked={item.value} onClick={() => { const next = !item.value; item.set(next); localStorage.setItem(item.key, String(next)); }} className={switchClass(item.value)} aria-label={item.label}><span className={switchKnobClass(item.value)} /></button></div>)}
|
||||
</section>
|
||||
</> : <>
|
||||
<section className="p-4 sm:p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs">
|
||||
<div className="flex items-center gap-2 mb-1"><UserCog className="w-5 h-5 text-[var(--krona-primary)]"/><h3 className="font-bold text-base text-[var(--krona-text-primary)]">Доступ организации</h3></div>
|
||||
<p className="text-xs text-[var(--krona-text-secondary)] mb-4">Разрешения действуют для всех пользователей организации</p>
|
||||
<div className="divide-y divide-[var(--krona-border-subtle)]">
|
||||
<div className="flex items-center justify-between gap-4 py-3"><div><div className="font-semibold text-sm">Разрешить Email</div><div className="text-xs text-[var(--krona-text-secondary)]">Пользователи смогут подключать и показывать свои ящики</div></div><button type="button" role="switch" aria-checked={orgEmailAllowed} onClick={() => onOrgEmailAllowedChange(!orgEmailAllowed)} className={switchClass(orgEmailAllowed)} aria-label="Разрешить Email организации"><span className={switchKnobClass(orgEmailAllowed)}/></button></div>
|
||||
<div className="flex items-center justify-between gap-4 py-3"><div><div className="font-semibold text-sm">Разрешить Каналы</div><div className="text-xs text-[var(--krona-text-secondary)]">Боты и публичные каналы организации</div></div><button type="button" role="switch" aria-checked={orgChannelsAllowed} onClick={() => onOrgChannelsAllowedChange(!orgChannelsAllowed)} className={switchClass(orgChannelsAllowed)} aria-label="Разрешить Каналы организации"><span className={switchKnobClass(orgChannelsAllowed)}/></button></div>
|
||||
<div className="flex items-center justify-between gap-4 py-3"><div><div className="font-semibold text-sm">Пользователи подключают аккаунты</div><div className="text-xs text-[var(--krona-text-secondary)]">Разрешить добавление личных мессенджеров и почты</div></div><button type="button" role="switch" aria-checked={canConnectAccounts} onClick={() => onCanConnectAccountsChange(!canConnectAccounts)} className={switchClass(canConnectAccounts)} aria-label="Разрешить подключение аккаунтов"><span className={switchKnobClass(canConnectAccounts)}/></button></div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="p-4 sm:p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs">
|
||||
<div className="flex items-center justify-between gap-3 mb-4"><div><h3 className="font-bold text-base">Пользователи и роли</h3><p className="text-xs text-[var(--krona-text-secondary)]">Кто принимает сообщения и управляет подключениями</p></div><Button size="sm" variant="primary" onClick={() => showToast({ title: 'Добавление пользователя', message: 'Форма приглашения пользователя будет открыта здесь', type: 'info' })}>Добавить пользователя</Button></div>
|
||||
<div className="space-y-2 text-sm"><div className="flex justify-between p-3 rounded-xl bg-[var(--krona-bg-workspace)]"><span><strong>Виктор</strong><small className="block text-[var(--krona-text-secondary)]">Владелец</small></span><span className="text-xs text-[var(--krona-primary)]">Все права</span></div><div className="flex justify-between p-3 rounded-xl bg-[var(--krona-bg-workspace)]"><span><strong>Мария К.</strong><small className="block text-[var(--krona-text-secondary)]">Менеджер</small></span><span className="text-xs text-[var(--krona-text-secondary)]">Чаты и почта</span></div></div>
|
||||
</section>
|
||||
{/* 1. Connected Messengers & Connectors */}
|
||||
<section className="p-5 rounded-2xl bg-[var(--krona-surface)] border border-[var(--krona-border-subtle)] shadow-xs">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
|
|
@ -159,9 +201,7 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
|
|||
Обеспечение бесперебойного доступа к международным API Telegram и WhatsApp
|
||||
</p>
|
||||
</div>
|
||||
<span className="px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-300 font-bold text-xs">
|
||||
Туннель активен (14 ms)
|
||||
</span>
|
||||
<div className="flex items-center gap-2"><span className="px-2.5 py-1 rounded-full bg-emerald-100 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-300 font-bold text-xs">Туннель активен (14 ms)</span><Button size="sm" variant="secondary" onClick={() => showToast({ title: 'Настройка VPN', message: 'Открыта настройка единого шлюза организации', type: 'info' })}>Настроить VPN</Button></div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs">
|
||||
|
|
@ -268,6 +308,7 @@ export function SettingsView({ showEmailTab, onShowEmailTabChange, showChannelsT
|
|||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue