add dropdown monitoring
This commit is contained in:
smanylov
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -24,10 +24,11 @@ import { FileInfoModalWindow } from '@/app/ui/modal-windows/file-info-modal-wind
|
||||
import { FileMonitoringModalWindow } from '@/app/ui/modal-windows/file-monitoring-modal-window';
|
||||
import { FileTypeIcon } from '@/app/components/FileTypeIcon';
|
||||
import { fetchReferralUserStats } from '@/app/actions/referralsActions';
|
||||
import { MonitoringDropDown } from '@/app/components/tanstak-table/MonitoringDropDown';
|
||||
|
||||
type FileType = 'image' | 'video' | 'audio';
|
||||
|
||||
type FileItem = {
|
||||
export type FileItem = {
|
||||
id: string;
|
||||
fileName: string;
|
||||
fileType: string;
|
||||
@@ -379,7 +380,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
|
||||
header: ({ column }) => (
|
||||
<div className="column">
|
||||
<span>
|
||||
{t('status')}
|
||||
{t('monitoring-status')}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
@@ -404,47 +405,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
|
||||
cell: ({ row }) => {
|
||||
return (
|
||||
<div className="text-center font-semibold table-item">
|
||||
<span className="table-item-status">
|
||||
{row.original.status}
|
||||
</span>
|
||||
{/* <DropDownList
|
||||
value={typeFilter}
|
||||
translatedValue={
|
||||
(() => {
|
||||
switch (typeFilter) {
|
||||
case 'image':
|
||||
return t('images')
|
||||
case 'video':
|
||||
return t('videos')
|
||||
case 'audio':
|
||||
return t('audios')
|
||||
case 'document':
|
||||
return t('documents')
|
||||
default:
|
||||
return t('all-types')
|
||||
}
|
||||
})()
|
||||
}
|
||||
callBack={setTypeFilter}
|
||||
>
|
||||
<li value="all">
|
||||
{t('all-types')}
|
||||
</li>
|
||||
<li value="image">
|
||||
{t('images-few')}
|
||||
</li>
|
||||
<li value="video">
|
||||
{t('videos')}
|
||||
</li>
|
||||
<li value="audio">
|
||||
{t('audios')}
|
||||
</li>
|
||||
{!referralLink && (
|
||||
<li value="document">
|
||||
{t('documents')}
|
||||
</li>
|
||||
)}
|
||||
</DropDownList> */}
|
||||
<MonitoringDropDown file={row.original} />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
@@ -461,13 +422,13 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
|
||||
cell: ({ row }) => (
|
||||
<div className="actions">
|
||||
<div className="actions-group">
|
||||
<button
|
||||
{/* <button
|
||||
onClick={() => handleMonitoring(row.original)}
|
||||
className="bg-violet-500 hover:bg-violet-600"
|
||||
title={t('monitoring')}
|
||||
>
|
||||
<IconEye />
|
||||
</button>
|
||||
</button> */}
|
||||
{/* <button
|
||||
onClick={() => handleOpenWindowForRemove(row.original)}
|
||||
className="table-action-delete"
|
||||
|
||||
@@ -552,10 +552,72 @@
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-list-portal {
|
||||
.dropdown-list {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #dbeafe;
|
||||
}
|
||||
|
||||
&.current {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&.monitoring-dropdown {
|
||||
max-width: 184px;
|
||||
margin: 0 auto;
|
||||
|
||||
.dropdown-button {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dropdown-list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: auto;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
|
||||
transform-origin: top left;
|
||||
|
||||
background-color: #ffffff;
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -167,6 +167,7 @@
|
||||
"failed-to-download-file": "Failed to download file",
|
||||
"file-is-downloading": "The file is downloading",
|
||||
"status": "status",
|
||||
"monitoring-status": "Monitoring status",
|
||||
"refferal-program": "Referral program",
|
||||
"your-image": "Your images",
|
||||
"your-videos": "Your videos",
|
||||
@@ -229,7 +230,11 @@
|
||||
"convert-to": "Convert to",
|
||||
"do-not-convert": "Do not convert",
|
||||
"payment-error": "Payment error",
|
||||
"buy": "Buy"
|
||||
"buy": "Buy",
|
||||
"without-monitoring" : "Without monitoring",
|
||||
"every-day": "Every day",
|
||||
"every-week": "Every week",
|
||||
"every-month": "Every day"
|
||||
},
|
||||
"Login-register-form": {
|
||||
"and": "and",
|
||||
|
||||
@@ -167,6 +167,7 @@
|
||||
"failed-to-download-file": "Не удалось скачать файл",
|
||||
"file-is-downloading": "Скачивается файл",
|
||||
"status": "статус",
|
||||
"monitoring-status": "Статус мониторинга",
|
||||
"refferal-program": "Реферальная программа",
|
||||
"your-image": "Ваши изображения",
|
||||
"your-videos": "Ваш видео",
|
||||
@@ -229,7 +230,11 @@
|
||||
"convert-to": "Конвертировать в",
|
||||
"do-not-convert": "Не конвертировать",
|
||||
"payment-error": "Ошибка оплаты",
|
||||
"buy": "Купить"
|
||||
"buy": "Купить",
|
||||
"without-monitoring": "Без мониторинга",
|
||||
"every-day": "Каждый день",
|
||||
"every-week": "Каждую неделю",
|
||||
"every-month": "Каждый месяц"
|
||||
},
|
||||
"Login-register-form": {
|
||||
"and": "и",
|
||||
|
||||
Reference in New Issue
Block a user