frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update files date between modules

Browse Source
This commit is contained in:
smanylov
2025-12-29 16:08:38 +07:00
parent 198a01d026
commit bd0169bd61
10 changed files with 153 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/pages/dashboard/page.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default function Page() {
<ProtectionOverview /> <ProtectionOverview />
<StatsGrid /> <StatsGrid />
</div> </div>
<FilesTable /> <FilesTable fileType={'all'}/>
</Suspense> </Suspense>
</div> </div>
); );
src/app/[locale]/pages/marking-audio/page.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export default async function Page() {
</div> </div>
</div> </div>
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} /> <UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable /> <FilesTable fileType={FILE_TYPE} />
</div> </div>
) )
} }
src/app/[locale]/pages/marking-photo/page.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export default async function Page() {
</div> </div>
</div> </div>
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} /> <UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable /> <FilesTable fileType={FILE_TYPE} />
</div> </div>
) )
} }
src/app/[locale]/pages/marking-video/page.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export default async function Page() {
</div> </div>
</div> </div>
<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} /> <UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
<FilesTable /> <FilesTable fileType={FILE_TYPE} />
</div> </div>
) )
} }
src/app/components/tanstakTable.tsx
+43 -36
View File
@@ -82,7 +82,7 @@ const formatDateTime = (timestamp: number) => {
return `${hours}:${minutes}`; return `${hours}:${minutes}`;
}; };
export default function TanstakFilesTable() { export default function TanstakFilesTable({ fileType }: { fileType: string }) {
const { const {
data: tableData, data: tableData,
isLoading, isLoading,
@@ -120,7 +120,7 @@ export default function TanstakFilesTable() {
const [sorting, setSorting] = useState<SortingState>([]); const [sorting, setSorting] = useState<SortingState>([]);
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]); const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
const [dateFilter, setDateFilter] = useState<string>('all'); const [dateFilter, setDateFilter] = useState<string>('all');
const [typeFilter, setTypeFilter] = useState<string>('all'); const [typeFilter, setTypeFilter] = useState<string>(fileType);
const [pagination, setPagination] = useState({ const [pagination, setPagination] = useState({
pageIndex: 0, pageIndex: 0,
pageSize: 10, pageSize: 10,
@@ -436,6 +436,11 @@ export default function TanstakFilesTable() {
onSuccess: (response, fileId) => { onSuccess: (response, fileId) => {
if (response === fileId) { if (response === fileId) {
queryClient.invalidateQueries({
queryKey: ['userFilesData'],
refetchType: 'active'
});
setOpenWindow(false); setOpenWindow(false);
setOpenWindowChildren(null); setOpenWindowChildren(null);
toast.success(t('file-has-been-deleted')); toast.success(t('file-has-been-deleted'));
@@ -580,40 +585,42 @@ export default function TanstakFilesTable() {
</DropDownList> </DropDownList>
</div> </div>
<div className="flex flex-col w-50"> {fileType === "all" && (
<div className="text-sm font-medium mb-1">{t('type-filter')}:</div> <div className="flex flex-col w-50">
<DropDownList <div className="text-sm font-medium mb-1">{t('type-filter')}:</div>
value={typeFilter} <DropDownList
translatedValue={ value={typeFilter}
(() => { translatedValue={
switch (typeFilter) { (() => {
case 'image': switch (typeFilter) {
return t('images') case 'image':
case 'video': return t('images')
return t('videos') case 'video':
case 'audio': return t('videos')
return t('audios') case 'audio':
default: return t('audios')
return t('all-types') default:
} return t('all-types')
})() }
} })()
callBack={setTypeFilter} }
> callBack={setTypeFilter}
<li value="all"> >
{t('all-types')} <li value="all">
</li> {t('all-types')}
<li value="image"> </li>
{t('images')} <li value="image">
</li> {t('images')}
<li value="video"> </li>
{t('videos')} <li value="video">
</li> {t('videos')}
<li value="audio"> </li>
{t('audios')} <li value="audio">
</li> {t('audios')}
</DropDownList> </li>
</div> </DropDownList>
</div>
)}
</div> </div>
<div className="flex flex-col w-full md:w-auto"> <div className="flex flex-col w-full md:w-auto">
src/app/lib/prefetch-queries.ts
+4 -1
View File
@@ -10,7 +10,10 @@ export async function prefetchLayoutQueries(queryClient: QueryClient) {
}), }),
queryClient.prefetchQuery({ queryClient.prefetchQuery({
queryKey: ['userFilesData'], queryKey: ['userFilesData'],
queryFn: () => getUserFilesData(), queryFn: () => {
console.log('make prefetch userFilesData');
return getUserFilesData();
},
staleTime: 30 * 1000 staleTime: 30 * 1000
}), }),
]); ]);
src/app/styles/pages-styles.scss
+16
View File
@@ -95,6 +95,15 @@
} }
} }
&.total-files.add-content {
display: flex;
justify-content: center;
.protection-stat-value {
margin-bottom: 0;
}
}
&-row { &-row {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -110,6 +119,13 @@
&.btn { &.btn {
user-select: none; user-select: none;
transition: all 0.3s ease-in;
padding: 5px;
margin-top: 10px;
&:hover {
background: v.$shadow-1;
}
} }
} }
src/app/ui/dashboard/files-table.tsx
+7 -2
View File
@@ -1,8 +1,13 @@
import TanstakFilesTable from '@/app/components/tanstakTable'; import TanstakFilesTable from '@/app/components/tanstakTable';
export default function FilesTable() {
type FilesTable = {
fileType: string
}
export default function FilesTable({ fileType }: FilesTable) {
return ( return (
<div className="block-wrapper"> <div className="block-wrapper">
<TanstakFilesTable/> <TanstakFilesTable fileType={fileType} />
</div> </div>
) )
} }
src/app/ui/dashboard/protection-overview.tsx
+41 -18
View File
@@ -5,6 +5,8 @@ import { PieChartComponent } from '@/app/components/PieChartComponent';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import Link from 'next/link'; import Link from 'next/link';
import { useClickOutside } from '@/app/hooks/useClickOutside'; import { useClickOutside } from '@/app/hooks/useClickOutside';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesData } from '@/app/actions/fileEntity';
const data = [ const data = [
@@ -13,8 +15,12 @@ const data = [
{ name: 'audios', value: 25, color: '#1971c2' }, { name: 'audios', value: 25, color: '#1971c2' },
]; ];
/* нужно что бы включать выключать кнопки добавления маркировок */
const totalFiles = 1; type FilesInfo = {
totalSize: string;
totalCount: number;
};
export default function ProtectionOverview() { export default function ProtectionOverview() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@@ -25,6 +31,32 @@ export default function ProtectionOverview() {
setOpenDropDownList(false) setOpenDropDownList(false)
}); });
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery<{
formattedTotalSize: string,
totalCount: number
}, Error, FilesInfo>({
queryKey: ['userFilesData'],
queryFn: getUserFilesData,
select: (data): FilesInfo => {
if (!data) {
return {
totalSize: '0',
totalCount: 0
}
}
return {
totalSize: data.formattedTotalSize,
totalCount: (data.totalCount)
}
},
});
return ( return (
<div className="protection-overview grow"> <div className="protection-overview grow">
<h3>{t('protecting-your-content')}</h3> <h3>{t('protecting-your-content')}</h3>
@@ -32,23 +64,14 @@ export default function ProtectionOverview() {
<div className={`protection-stats ${isOpen ? "opened" : ""}`}> <div className={`protection-stats ${isOpen ? "opened" : ""}`}>
{totalFiles ? ( {filesInfo?.totalCount ? (
<> <>
<div className="protection-stat total-files"> <div className="protection-stat total-files">
<div className="protection-stat-value">0</div> <div className="protection-stat-value">
{filesInfo?.totalCount ? filesInfo?.totalCount : 0}
</div>
<div className="protection-stat-label">{t('total-files')}</div> <div className="protection-stat-label">{t('total-files')}</div>
</div> </div>
{/* <div className="protection-stat total-checks">
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div>
</div>
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('violations')}</div>
</div>
</div> */}
<div className="protection-stat total-checks"> <div className="protection-stat total-checks">
<div className="protection-stat-value">0</div> <div className="protection-stat-value">0</div>
<div className="protection-stat-label">{t('check')}</div> <div className="protection-stat-label">{t('check')}</div>
@@ -58,7 +81,7 @@ export default function ProtectionOverview() {
</div> </div>
</> </>
) : ( ) : (
<div className="protection-stat total-files relative"> <div className="protection-stat total-files add-content relative">
<div className="protection-stat-label"> <div className="protection-stat-label">
{t('there-are-no-files-yet')} {t('there-are-no-files-yet')}
</div> </div>
@@ -96,14 +119,14 @@ export default function ProtectionOverview() {
</div> </div>
) : ( ) : (
<div className="protection-stat total-usage"> <div className="protection-stat total-usage">
<div className="protection-stat-value">0 / 0</div> <div className="protection-stat-value">{filesInfo?.totalSize ? filesInfo?.totalSize : 0} / 0</div>
<div className="protection-stat-label"> <div className="protection-stat-label">
{t('disk-space-used')} {t('disk-space-used')}
</div> </div>
</div> </div>
)} )}
</div> </div>
{!!totalFiles && ( {!!filesInfo?.totalCount && (
<button <button
className="protection-overview-switch cursor-pointer" className="protection-overview-switch cursor-pointer"
onClick={() => { onClick={() => {
src/app/ui/marking-page/protection-summary.tsx
+37 -2
View File
@@ -1,17 +1,52 @@
'use client' 'use client'
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesData } from '@/app/actions/fileEntity';
type FilesInfo = {
totalSize: string;
totalCount: number;
};
export default function ProtectionSummary() { export default function ProtectionSummary() {
const t = useTranslations('Global'); const t = useTranslations('Global');
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery<{
formattedTotalSize: string,
totalCount: number
}, Error, FilesInfo>({
queryKey: ['userFilesData'],
queryFn: getUserFilesData,
select: (data): FilesInfo => {
if (!data) {
return {
totalSize: '0',
totalCount: 0
}
}
return {
totalSize: data.formattedTotalSize,
totalCount: (data.totalCount)
}
},
});
return ( return (
<div className="protection-overview grow"> <div className="protection-overview grow">
<h3>{t('protecting-your-content')}</h3> <h3>{t('protecting-your-content')}</h3>
<p>{t('current-status-of')}</p> <p>{t('current-status-of')}</p>
<div className="protection-stats"> <div className="protection-stats">
<div className="protection-stat total-files"> <div className="protection-stat total-files">
<div className="protection-stat-value">0</div> <div className="protection-stat-value">{filesInfo?.totalCount ? filesInfo?.totalCount : 0}</div>
<div className="protection-stat-label">{t('total-files')}</div> <div className="protection-stat-label">{t('total-files')}</div>
</div> </div>
<div className="protection-stat total-checks"> <div className="protection-stat total-checks">
@@ -21,7 +56,7 @@ export default function ProtectionSummary() {
<div className="protection-stat-label">{t('violations')}</div> <div className="protection-stat-label">{t('violations')}</div>
</div> </div>
<div className="protection-stat total-usage"> <div className="protection-stat total-usage">
<div className="protection-stat-value">0 / 0</div> <div className="protection-stat-value">{filesInfo?.totalSize ? filesInfo?.totalSize : 0} / 0</div>
<div className="protection-stat-label"> <div className="protection-stat-label">
{t('disk-space-used')} {t('disk-space-used')}
</div> </div>