UI - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: КЛИЕНТСКИЙ БРЕНДИНГ
This commit is contained in:
DCCONSTRUCTIONS
@@ -572,11 +572,11 @@ function ClientsSection({
|
||||
<td className="services-admin-table__actions">
|
||||
<IconButton
|
||||
label={`Редактировать клиента ${client.name}`}
|
||||
className="admin-circle-action services-admin-table__edit"
|
||||
className="admin-icon-action services-admin-table__edit"
|
||||
type="button"
|
||||
onClick={() => setEditingClientId(client.id)}
|
||||
>
|
||||
<Edit3 size={15} />
|
||||
<Edit3 size={12} />
|
||||
</IconButton>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -845,11 +845,11 @@ function GroupsSection({
|
||||
<td className="services-admin-table__actions">
|
||||
<IconButton
|
||||
label={`Редактировать группу ${group.name}`}
|
||||
className="admin-circle-action services-admin-table__edit"
|
||||
className="admin-icon-action services-admin-table__edit"
|
||||
type="button"
|
||||
onClick={() => setEditingGroupId(group.id)}
|
||||
>
|
||||
<Edit3 size={15} />
|
||||
<Edit3 size={12} />
|
||||
</IconButton>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -1709,11 +1709,17 @@ function ClientEditorModal({
|
||||
canDelete: boolean;
|
||||
}) {
|
||||
const [draft, setDraft] = useState<Client>(client);
|
||||
const [uploadingAvatar, setUploadingAvatar] = useState(false);
|
||||
const [storageError, setStorageError] = useState<string | null>(null);
|
||||
const taskManagerWorkspaceBindings = getClientTaskManagerWorkspaces(draft);
|
||||
const selectedTaskManagerWorkspaceSlugs = new Set(taskManagerWorkspaceBindings.map((workspace) => workspace.slug));
|
||||
const primaryTaskManagerWorkspace = getPrimaryTaskManagerWorkspace(draft);
|
||||
|
||||
useEffect(() => setDraft(client), [client]);
|
||||
useEffect(() => {
|
||||
setDraft(client);
|
||||
setUploadingAvatar(false);
|
||||
setStorageError(null);
|
||||
}, [client]);
|
||||
|
||||
function update<K extends keyof Client>(key: K, value: Client[K]) {
|
||||
setDraft((current) => ({ ...current, [key]: value }));
|
||||
@@ -1760,9 +1766,25 @@ function ClientEditorModal({
|
||||
updateTaskManagerWorkspaces(normalizeClientTaskManagerWorkspaceDraft(nextWorkspaces));
|
||||
}
|
||||
|
||||
async function handleAvatarUpload(file?: File) {
|
||||
if (!file) return;
|
||||
|
||||
setUploadingAvatar(true);
|
||||
setStorageError(null);
|
||||
|
||||
try {
|
||||
const storedFile = await uploadStorageFile(file);
|
||||
update("avatarUrl", storedFile.url);
|
||||
} catch (error) {
|
||||
setStorageError(error instanceof Error ? error.message : "Не удалось сохранить аватар компании");
|
||||
} finally {
|
||||
setUploadingAvatar(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="service-content-modal-layer" role="dialog" aria-modal="true" aria-label={`Редактор клиента ${client.name}`}>
|
||||
<article className="service-content-modal admin-entity-modal">
|
||||
<article className="service-content-modal admin-entity-modal client-editor-modal">
|
||||
<EntityModalHead
|
||||
eyebrow="Клиент"
|
||||
title={client.name}
|
||||
@@ -1807,6 +1829,36 @@ function ClientEditorModal({
|
||||
<span>Статус</span>
|
||||
<AdminStatusDropdown value={draft.status} options={clientStatusOptions} label="Статус клиента" onChange={(status) => update("status", status)} />
|
||||
</div>
|
||||
<div className="service-content-field service-content-field--wide client-avatar-field">
|
||||
<span>Аватар компании</span>
|
||||
<div className="client-avatar-control">
|
||||
<div className="client-avatar-preview" aria-hidden="true">
|
||||
{draft.avatarUrl ? <img src={draft.avatarUrl} alt="" /> : null}
|
||||
</div>
|
||||
<div className="client-avatar-control__copy">
|
||||
<strong>{draft.avatarUrl ? "Аватар подключён" : "Аватар не задан"}</strong>
|
||||
<small>Показывается в верхнем переключателе компании.</small>
|
||||
</div>
|
||||
<label className="service-media-file-button client-avatar-upload-button">
|
||||
{uploadingAvatar ? "Загрузка..." : "Выберите файл"}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
disabled={uploadingAvatar}
|
||||
onChange={(event) => {
|
||||
void handleAvatarUpload(event.target.files?.[0]);
|
||||
event.target.value = "";
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
{draft.avatarUrl ? (
|
||||
<button className="admin-icon-action client-avatar-clear-action" type="button" onClick={() => update("avatarUrl", null)} aria-label="Убрать аватар">
|
||||
<X size={11} />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
{storageError ? <small className="client-avatar-error">{storageError}</small> : null}
|
||||
</div>
|
||||
<div className="service-content-field service-content-field--wide">
|
||||
<span>Operational Core workspaces</span>
|
||||
<div className="task-workspace-picker-card">
|
||||
|
||||
@@ -36,17 +36,11 @@ export function TopBar({
|
||||
const availableClientIds = new Set(me.memberships.map((membership) => membership.clientId));
|
||||
const availableClients = clients.filter((client) => availableClientIds.has(client.id));
|
||||
const activeClient = availableClients.find((client) => client.id === activeClientId);
|
||||
const activeProfile = profileOptions.find((profile) => profile.userId === activeProfileId);
|
||||
const clientOptions = availableClients.map((client) => ({
|
||||
value: client.id,
|
||||
label: client.name,
|
||||
description: client.legalName ?? undefined,
|
||||
}));
|
||||
const profileSelectOptions = profileOptions.map((profile) => ({
|
||||
value: profile.userId,
|
||||
label: profile.label,
|
||||
description: profile.description,
|
||||
}));
|
||||
|
||||
return (
|
||||
<header className="nodedc-expanded-toolbar-shell">
|
||||
@@ -76,7 +70,7 @@ export function TopBar({
|
||||
aria-expanded={open}
|
||||
onClick={toggle}
|
||||
>
|
||||
<img src="/nodedc-mark.svg" alt="" className="nodedc-expanded-workspace-mark" />
|
||||
{activeClient?.avatarUrl ? <img src={activeClient.avatarUrl} alt="" className="nodedc-expanded-workspace-avatar" /> : null}
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
@@ -86,27 +80,6 @@ export function TopBar({
|
||||
<span>Витрина</span>
|
||||
</button>
|
||||
|
||||
<NodeDcSelect
|
||||
value={activeProfileId}
|
||||
options={profileSelectOptions}
|
||||
label="Выбрать профиль доступа"
|
||||
minMenuWidth={236}
|
||||
onChange={(userId) => onProfileChange(userId)}
|
||||
trigger={({ open, selectedOption, toggle, setTriggerRef }) => (
|
||||
<button
|
||||
ref={setTriggerRef}
|
||||
className="nodedc-expanded-nav-button nodedc-expanded-select-button"
|
||||
type="button"
|
||||
data-active="false"
|
||||
aria-label="Выбрать профиль доступа"
|
||||
aria-expanded={open}
|
||||
onClick={toggle}
|
||||
>
|
||||
<span>{selectedOption?.label ?? activeProfile?.label ?? me.user.name}</span>
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
|
||||
{me.permissions.canOpenAdmin ? (
|
||||
<button className="nodedc-expanded-nav-button" type="button" data-active={adminOpen} onClick={onToggleAdmin}>
|
||||
<span>Администрирование</span>
|
||||
|
||||
Reference in New Issue
Block a user