Added tab switch on Issue click
This commit is contained in:
@@ -368,6 +368,7 @@ export default function DeviceDetail() {
|
|||||||
const notesRef = useRef(null);
|
const notesRef = useRef(null);
|
||||||
const [usersLoading, setUsersLoading] = useState(false);
|
const [usersLoading, setUsersLoading] = useState(false);
|
||||||
const [unresolvedIssues, setUnresolvedIssues] = useState(0);
|
const [unresolvedIssues, setUnresolvedIssues] = useState(0);
|
||||||
|
const [notesPanelTab, setNotesPanelTab] = useState(null);
|
||||||
const notesPanelRef = useRef(null);
|
const notesPanelRef = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -954,7 +955,7 @@ export default function DeviceDetail() {
|
|||||||
</SectionCard>
|
</SectionCard>
|
||||||
);
|
);
|
||||||
|
|
||||||
const notesSection = <div ref={notesPanelRef}><NotesPanel deviceId={id} /></div>;
|
const notesSection = <div ref={notesPanelRef}><NotesPanel deviceId={id} initialTab={notesPanelTab} /></div>;
|
||||||
const logsSection = <DeviceLogsPanel deviceSerial={device.device_id} />;
|
const logsSection = <DeviceLogsPanel deviceSerial={device.device_id} />;
|
||||||
|
|
||||||
// ===== Layout rendering =====
|
// ===== Layout rendering =====
|
||||||
@@ -1054,7 +1055,7 @@ export default function DeviceDetail() {
|
|||||||
<>
|
<>
|
||||||
<div style={{ width: 1, height: 24, backgroundColor: "var(--border-primary)" }} />
|
<div style={{ width: 1, height: 24, backgroundColor: "var(--border-primary)" }} />
|
||||||
<button
|
<button
|
||||||
onClick={() => notesPanelRef.current?.scrollIntoView({ behavior: "smooth", block: "start" })}
|
onClick={() => { setNotesPanelTab("issues"); notesPanelRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); }}
|
||||||
className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md cursor-pointer hover:opacity-80 transition-opacity"
|
className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md cursor-pointer hover:opacity-80 transition-opacity"
|
||||||
style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)", border: "none" }}
|
style={{ backgroundColor: "var(--danger-bg)", color: "var(--danger-text)", border: "none" }}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ const helpdeskTypeStyle = (type) => {
|
|||||||
|
|
||||||
const formatLabel = (s) => s ? s.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase()) : "";
|
const formatLabel = (s) => s ? s.replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase()) : "";
|
||||||
|
|
||||||
export default function NotesPanel({ deviceId, userId }) {
|
export default function NotesPanel({ deviceId, userId, initialTab }) {
|
||||||
const [notes, setNotes] = useState([]);
|
const [notes, setNotes] = useState([]);
|
||||||
const [helpdeskMessages, setHelpdeskMessages] = useState([]);
|
const [helpdeskMessages, setHelpdeskMessages] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
@@ -49,7 +49,11 @@ export default function NotesPanel({ deviceId, userId }) {
|
|||||||
const [content, setContent] = useState("");
|
const [content, setContent] = useState("");
|
||||||
const [category, setCategory] = useState("general");
|
const [category, setCategory] = useState("general");
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
const [activeTab, setActiveTab] = useState("notes");
|
const [activeTab, setActiveTab] = useState(initialTab || "notes");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (initialTab) setActiveTab(initialTab);
|
||||||
|
}, [initialTab]);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { hasPermission } = useAuth();
|
const { hasPermission } = useAuth();
|
||||||
const canEdit = hasPermission("equipment", "edit");
|
const canEdit = hasPermission("equipment", "edit");
|
||||||
|
|||||||
Reference in New Issue
Block a user