fix user UI

This commit is contained in:
TronoSfera 2026-03-02 21:32:11 +03:00
parent fbc917cdd8
commit ee99041b14
5 changed files with 99 additions and 40 deletions

View file

@ -2354,8 +2354,14 @@
gap: 0.5rem;
}
.request-chat-block {
--request-chat-pane-height: clamp(280px, 54vh, 470px);
}
.request-chat-block .request-modal-list {
max-height: 480px;
max-height: var(--request-chat-pane-height);
min-height: var(--request-chat-pane-height);
height: var(--request-chat-pane-height);
}
.request-chat-head {
@ -2424,7 +2430,6 @@
}
.request-chat-list {
max-height: 470px;
overflow: auto;
display: flex;
flex-direction: column;
@ -2732,7 +2737,6 @@
}
.request-files-tab .request-modal-list {
max-height: 520px;
overflow: auto;
}

View file

@ -1,6 +1,6 @@
import { KNOWN_CONFIG_TABLE_KEYS, OPERATOR_LABELS, PAGE_SIZE, TABLE_SERVER_CONFIG } from "../../shared/constants.js";
import { AddIcon, DownloadIcon, FilterIcon, NextIcon, PrevIcon, RefreshIcon } from "../../shared/icons.jsx";
import { boolLabel, fmtDate, listPreview, normalizeReferenceMeta, roleLabel, statusKindLabel, statusLabel } from "../../shared/utils.js";
import { boolLabel, fmtDate, listPreview, normalizeReferenceMeta, roleLabel, statusKindLabel } from "../../shared/utils.js";
function fmtBalance(value) {
const number = Number(value);
@ -68,6 +68,8 @@ export function ConfigSection(props) {
const StatusLine = StatusLineComponent;
const IconButton = IconButtonComponent;
const UserAvatar = UserAvatarComponent;
const statusRouteLabel = (code) =>
resolveReferenceLabel({ table: "statuses", value_field: "code", label_field: "name" }, code);
const canRefresh = Boolean(configActiveKey);
const canCreateRecord = Boolean(canCreateInConfig && configActiveKey);
const canLoadAllRows = Boolean(
@ -422,7 +424,7 @@ export function ConfigSection(props) {
type="button"
onClick={() => openEditRecordModal("statusTransitions", link)}
>
<span>{statusLabel(link.to_status) + " (" + String(link.to_status || "-") + ")"}</span>
<span>{statusRouteLabel(link.to_status)}</span>
<small>
{"SLA: " +
(link.sla_hours == null ? "-" : String(link.sla_hours) + " ч") +
@ -466,8 +468,8 @@ export function ConfigSection(props) {
renderRow={(row) => (
<tr key={row.id}>
<td>{row.topic_code || "-"}</td>
<td>{statusLabel(row.from_status)}</td>
<td>{statusLabel(row.to_status)}</td>
<td>{statusRouteLabel(row.from_status)}</td>
<td>{statusRouteLabel(row.to_status)}</td>
<td>{row.sla_hours == null ? "-" : String(row.sla_hours)}</td>
<td>{listPreview(row.required_data_keys, "-")}</td>
<td>{listPreview(row.required_mime_types, "-")}</td>

View file

@ -174,6 +174,7 @@ export function RequestWorkspace({
const canFillRequestData = viewerRoleCode === "CLIENT";
const canSeeRate = viewerRoleCode !== "CLIENT";
const canSeeCreatedUpdatedInCard = viewerRoleCode !== "CLIENT";
const showTopicStatusInCard = viewerRoleCode !== "CLIENT";
const safeMessages = Array.isArray(messages) ? messages : [];
const safeAttachments = Array.isArray(attachments) ? attachments : [];
const safeStatusHistory = Array.isArray(statusHistory) ? statusHistory : [];
@ -1254,14 +1255,18 @@ export function RequestWorkspace({
) : row ? (
<>
<div className="request-card-grid request-card-grid-compact">
<div className="request-field">
<span className="request-field-label">Тема</span>
<span className="request-field-value">{String(row.topic_name || row.topic_code || "-")}</span>
</div>
<div className="request-field">
<span className="request-field-label">Статус</span>
<span className="request-field-value">{statusLabel(row.status_code)}</span>
</div>
{showTopicStatusInCard ? (
<>
<div className="request-field">
<span className="request-field-label">Тема</span>
<span className="request-field-value">{String(row.topic_name || row.topic_code || "-")}</span>
</div>
<div className="request-field">
<span className="request-field-label">Статус</span>
<span className="request-field-value">{statusLabel(row.status_code)}</span>
</div>
</>
) : null}
<div className="request-field request-field-span-2 request-field-description">
<div className="request-field-head">
<span className="request-field-label">Описание проблемы</span>

View file

@ -46,10 +46,57 @@
margin-bottom: 0.85rem;
}
.client-summary-grid {
display: grid;
gap: 0.65rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
.client-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem 1.1rem;
flex-wrap: wrap;
padding: 0.2rem 0;
}
.client-summary-chips {
display: inline-flex;
align-items: center;
gap: 0.42rem;
flex-wrap: wrap;
}
.client-summary-chip {
display: inline-flex;
align-items: center;
gap: 0.24rem;
border-radius: 999px;
border: 1px solid rgba(121, 152, 197, 0.3);
background: rgba(74, 106, 157, 0.14);
color: #deebff;
padding: 0.2rem 0.58rem;
font-size: 0.78rem;
font-weight: 700;
line-height: 1.25;
}
.client-summary-chip span {
color: #f0f6ff;
}
.client-summary-chip-topic {
border-color: rgba(143, 168, 208, 0.32);
background: rgba(96, 126, 171, 0.15);
}
.client-summary-dates {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem 0.85rem;
color: #9fb3cc;
font-size: 0.79rem;
}
.client-summary-dates b {
color: #dce8f8;
font-weight: 700;
}
.client-help-modal {
@ -81,8 +128,8 @@
}
@media (max-width: 1120px) {
.client-summary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
.client-summary-row {
align-items: flex-start;
}
}
@ -96,7 +143,8 @@
align-items: stretch;
}
.client-summary-grid {
grid-template-columns: 1fr;
.client-summary-dates {
display: grid;
gap: 0.3rem;
}
}

View file

@ -1,6 +1,6 @@
import { RequestWorkspace } from "./admin/features/requests/RequestWorkspace.jsx";
import { createRequestModalState } from "./admin/shared/state.js";
import { detectAttachmentPreviewKind, fmtShortDateTime } from "./admin/shared/utils.js";
import { detectAttachmentPreviewKind, fmtShortDateTime, statusLabel } from "./admin/shared/utils.js";
(function () {
const { useCallback, useEffect, useMemo, useRef, useState } = React;
@ -849,23 +849,23 @@ import { detectAttachmentPreviewKind, fmtShortDateTime } from "./admin/shared/ut
</button>
</div>
<div className="client-summary block" id="cabinet-summary" hidden={!summary}>
<div className="client-summary-grid">
<div className="request-field">
<span className="request-field-label">Статус</span>
<span className="request-field-value" id="cabinet-request-status">{summary ? String(summary.status_code || "-") : "-"}</span>
<div className="client-summary" id="cabinet-summary" hidden={!summary}>
<div className="client-summary-row">
<div className="client-summary-chips">
<span className="client-summary-chip client-summary-chip-status">
Статус: <span id="cabinet-request-status">{summary ? statusLabel(summary.status_code) : "-"}</span>
</span>
<span className="client-summary-chip client-summary-chip-topic">
Тема: <span id="cabinet-request-topic">{summary ? String(summary.topic_name || summary.topic_code || "-") : "-"}</span>
</span>
</div>
<div className="request-field">
<span className="request-field-label">Тема</span>
<span className="request-field-value" id="cabinet-request-topic">{summary ? String(summary.topic_name || summary.topic_code || "-") : "-"}</span>
</div>
<div className="request-field">
<span className="request-field-label">Создана</span>
<span className="request-field-value" id="cabinet-request-created">{summary ? fmtShortDateTime(summary.created_at) : "-"}</span>
</div>
<div className="request-field">
<span className="request-field-label">Обновлена</span>
<span className="request-field-value" id="cabinet-request-updated">{summary ? fmtShortDateTime(summary.updated_at) : "-"}</span>
<div className="client-summary-dates">
<span>
Создана: <b id="cabinet-request-created">{summary ? fmtShortDateTime(summary.created_at) : "-"}</b>
</span>
<span>
Обновлена: <b id="cabinet-request-updated">{summary ? fmtShortDateTime(summary.updated_at) : "-"}</b>
</span>
</div>
</div>
</div>