add dropdown monitoring

2026-02-20 14:55:23 +07:00
parent a3ea25c1e6
commit aeb61936ce
5 changed files with 234 additions and 47 deletions
@@ -0,0 +1,154 @@
+'use client'
+
+import { FileItem } from '@/app/components/tanstak-table/TanstakTable';
+import { useEffect, useState, useRef } from 'react';
+import { useClickOutside } from '@/app/hooks/useClickOutside';
+import { useTranslations } from 'next-intl';
+import { useQueryClient } from '@tanstack/react-query';
+import { createPortal } from 'react-dom';
+
+export function MonitoringDropDown({ file }: {
+	file: FileItem
+}) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [currentMonitoringStatus, setCurrentMonitoringStatus] = useState('without-monitoring');
+	const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+
+	const dropdownRef = useRef<HTMLDivElement>(null);
+	const buttonRef = useRef<HTMLButtonElement>(null);
+
+	const t = useTranslations('Global')
+	const queryClient = useQueryClient();
+
+	useEffect(() => {
+		if (!isOpen) return;
+
+		const handleClick = (event: MouseEvent) => {
+			console.log('click');
+			if (!dropdownRef?.current) {
+				return;
+			}
+
+			if (!buttonRef?.current) {
+				return;
+			}
+
+			if (buttonRef?.current.contains(event.target as Node)) {
+				return;
+			}
+
+			if (!dropdownRef.current.contains(event.target as Node)) {
+				setIsOpen(false);
+			}
+		};
+
+		document.addEventListener('mousedown', handleClick);
+		return () => {
+			document.removeEventListener('mousedown', handleClick);
+		};
+	}, [dropdownRef, setIsOpen, isOpen]);
+
+	useEffect(() => {
+		console.log(file);
+		if (file.status) {
+			setCurrentMonitoringStatus(file.status === 'ACTIVE' ? 'without-monitoring' : 'without-monitoring');
+		}
+	}, [file]);
+
+	useEffect(() => {
+		if (isOpen && buttonRef.current) {
+			const rect = buttonRef.current.getBoundingClientRect();
+			setDropdownPosition({
+				top: rect.bottom + window.scrollY,
+				left: rect.left + window.scrollX,
+				width: rect.width
+			});
+		}
+	}, [isOpen]);
+
+	async function clickHandler(monitoring: string) {
+		console.log('click', file.id);
+		setCurrentMonitoringStatus(monitoring);
+		await queryClient.invalidateQueries({ queryKey: ['userFilesData'] });
+		setIsOpen(false);
+	}
+
+	return (
+		<div className="dropdown-wrapper monitoring-dropdown">
+			<button
+				ref={buttonRef}
+				onClick={() => {
+					setIsOpen(!isOpen);
+				}}
+				className="dropdown-button"
+			>
+				<span className="flex items-center">
+					<span className="mr-2">
+						{t(currentMonitoringStatus)}
+					</span>
+				</span>
+				<svg
+					className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+				>
+					<path
+						fillRule="evenodd"
+						d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+						clipRule="evenodd"
+					/>
+				</svg>
+			</button>
+			{isOpen && createPortal(
+				<div
+					className="dropdown-list-portal"
+					ref={dropdownRef}
+					style={{
+						position: 'absolute',
+						top: dropdownPosition.top,
+						left: dropdownPosition.left,
+						width: dropdownPosition.width,
+						zIndex: 99999
+					}}
+				>
+					<ul className="dropdown-list" role="listbox">
+						<li
+							className={`dropdown-item ${currentMonitoringStatus === 'without-monitoring' ? 'current' : ''}`}
+							onClick={() => {
+								clickHandler('without-monitoring')
+							}}
+						>
+							{t('without-monitoring')}
+						</li>
+						<li
+							className={`dropdown-item ${currentMonitoringStatus === 'every-day' ? 'current' : ''}`}
+							onClick={() => {
+								clickHandler('every-day')
+							}}
+						>
+							{t('every-day')}
+						</li>
+						<li
+							className={`dropdown-item ${currentMonitoringStatus === 'every-week' ? 'current' : ''}`}
+							onClick={() => {
+								clickHandler('every-week')
+							}}
+						>
+							{t('every-week')}
+						</li>
+						<li
+							className={`dropdown-item ${currentMonitoringStatus === 'every-month' ? 'current' : ''}`}
+							onClick={() => {
+								clickHandler('every-month')
+							}}
+						>
+							{t('every-month')}
+						</li>
+					</ul>
+				</div>,
+				document.body
+			)}
+		</div>
+	)
+}