From 95a737c9c7d62b0aa660ed73170c4396f121a430 Mon Sep 17 00:00:00 2001 From: jonasgabriel18 Date: Tue, 11 Jun 2024 11:11:14 -0300 Subject: [PATCH 1/8] header improvement --- src/pages/layout/header.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/layout/header.tsx b/src/pages/layout/header.tsx index d1a90c7a..38d02887 100644 --- a/src/pages/layout/header.tsx +++ b/src/pages/layout/header.tsx @@ -8,14 +8,14 @@ interface HeaderProps { const Header: React.FC = ({ title }) => { return ( -
+
-
- Logo da LinguifAI -

+
+ Logo da LinguifAI +

LinguifAI

-

+
); }; From c779c556f606162b61b6eba55a7c98538aeb09fe Mon Sep 17 00:00:00 2001 From: jonasgabriel18 Date: Tue, 11 Jun 2024 11:46:19 -0300 Subject: [PATCH 2/8] csv pagination --- src/components/resultTable/resultTable.tsx | 121 +++++++++++++++- .../selectFileCard/selectFileCard.tsx | 133 ++++++++++++++---- 2 files changed, 226 insertions(+), 28 deletions(-) diff --git a/src/components/resultTable/resultTable.tsx b/src/components/resultTable/resultTable.tsx index b54326a4..1d66294c 100644 --- a/src/components/resultTable/resultTable.tsx +++ b/src/components/resultTable/resultTable.tsx @@ -1,5 +1,6 @@ -import React from "react"; +import React, { useState } from "react"; import CsvTable from "../csvTable/csvTable"; +import { Button } from "@mui/material"; interface TableData { Coluna: string; @@ -11,13 +12,125 @@ interface Props { classifierName: string; } +const ITEMS_PER_PAGE = 6; + export default function ResultTable({ data, classifierName }: Props) { + const [currentPage, setCurrentPage] = useState(0); + const tableData: TableData[] = Object.entries(data).map(([key, value]) => ({ Coluna: key, Valor: value, })); - const convertedTableData: any[][] = tableData.slice(0, 4).map((item) => [item.Coluna, item.Valor]); + const convertedTableData: any[][] = tableData.map((item) => [ + item.Coluna, + item.Valor, + ]); - return ; -} + const displayedData = convertedTableData.slice( + currentPage * ITEMS_PER_PAGE, + (currentPage + 1) * ITEMS_PER_PAGE + ); + + const totalPages = Math.ceil(convertedTableData.length / ITEMS_PER_PAGE); + + const handlePageChange = (page: number) => { + setCurrentPage(page); + }; + + const handlePreviousPage = () => { + if (currentPage > 0) { + setCurrentPage(currentPage - 1); + } + }; + + const handleNextPage = () => { + if ((currentPage + 1) * ITEMS_PER_PAGE < convertedTableData.length) { + setCurrentPage(currentPage + 1); + } + }; + + const renderPageNumbers = (): JSX.Element[] => { + const pageNumbers: JSX.Element[] = []; + + if (totalPages <= 1) return pageNumbers; + + pageNumbers.push( + + ); + + if (currentPage > 3) { + pageNumbers.push(...); + } + + const startPage = Math.max(1, currentPage - 1); + const endPage = Math.min(totalPages - 2, currentPage + 1); + + for (let i = startPage; i <= endPage; i++) { + pageNumbers.push( + + ); + } + + if (currentPage < totalPages - 4) { + pageNumbers.push(...); + } + + if (totalPages > 1) { + pageNumbers.push( + + ); + } + + return pageNumbers; + }; + + return ( +
+ +
+ +
+ {renderPageNumbers()} +
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/components/selectFileCard/selectFileCard.tsx b/src/components/selectFileCard/selectFileCard.tsx index fbd6468c..627151c1 100644 --- a/src/components/selectFileCard/selectFileCard.tsx +++ b/src/components/selectFileCard/selectFileCard.tsx @@ -2,7 +2,7 @@ import { Icon } from "@iconify/react"; import { ChangeEvent, useState } from "react"; import Papa from "papaparse"; import CsvTable from "../csvTable/csvTable"; -import { Link } from "@mui/material"; +import { Button } from "@mui/material"; interface props { selectedFile: File | null; @@ -13,6 +13,8 @@ interface props { setHeader: (header: string[]) => void; } +const ITEMS_PER_PAGE = 6; + export default function SelectFileCard({ selectedFile, setSelectedFile, @@ -22,8 +24,8 @@ export default function SelectFileCard({ setHeader, }: props) { const [isDragging, setIsDragging] = useState(false); + const [currentPage, setCurrentPage] = useState(0); - // Selecionar arquivo const handleFileChange = async (event: ChangeEvent) => { const file = event.target.files?.[0]; if (file && file.name.endsWith(".csv")) { @@ -33,7 +35,7 @@ export default function SelectFileCard({ header: true, dynamicTyping: true, skipEmptyLines: true, - complete(results, file) { + complete(results) { let chaves = Object.keys(results.data[0] || []); let data: any[][] = results.data.map((row: any) => { @@ -46,6 +48,7 @@ export default function SelectFileCard({ setData(data); setHeader(chaves); + setCurrentPage(0); // Reset to first page }, }); } else { @@ -74,6 +77,70 @@ export default function SelectFileCard({ setIsDragging(false); }; + const handlePageChange = (page: number) => { + setCurrentPage(page); + }; + + const displayedData = data.slice( + currentPage * ITEMS_PER_PAGE, + (currentPage + 1) * ITEMS_PER_PAGE + ); + + const totalPages = Math.ceil(data.length / ITEMS_PER_PAGE); + + const renderPageNumbers = (): JSX.Element[] => { + const pageNumbers: JSX.Element[] = []; + + if (totalPages <= 1) return pageNumbers; + + pageNumbers.push( + + ); + + if (currentPage > 3) { + pageNumbers.push(...); + } + + const startPage = Math.max(1, currentPage - 1); + const endPage = Math.min(totalPages - 2, currentPage + 1); + + for (let i = startPage; i <= endPage; i++) { + pageNumbers.push( + + ); + } + + if (currentPage < totalPages - 4) { + pageNumbers.push(...); + } + + if (totalPages > 1) { + pageNumbers.push( + + ); + } + + return pageNumbers; + }; + return !selectedFile ? (
0 ? `w-4/5` : `w-2/5` @@ -83,25 +150,24 @@ export default function SelectFileCard({ onDragOver={handleDragOver} onDragLeave={handleDragLeave} > - - - -

Arraste e solte ou { - const fileInput = document.getElementById("fileInput"); - if (fileInput) { - fileInput.click(); - } - }} - > - selecione do Computador - +

+ Arraste e solte ou{" "} + { + const fileInput = document.getElementById("fileInput"); + if (fileInput) { + fileInput.click(); + } + }} + > + selecione do Computador +

+ /> +
) : ( -
0 ? `w-4/5` : `w-2/5` } min-h-[170px] relative mx-auto flex flex-col items-center justify-center ${isDragging ? "blur-sm" : "" @@ -121,11 +187,30 @@ export default function SelectFileCard({ onDragOver={handleDragOver} onDragLeave={handleDragLeave} > - - {data.length > 0 && ( - + <> + +
+ +
+ {renderPageNumbers()} +
+ +
+ )}
- ) -} + ); +} \ No newline at end of file From 1dedc5b66e7c58ec155b49d71c45427ab01b02a2 Mon Sep 17 00:00:00 2001 From: jonasgabriel18 Date: Tue, 11 Jun 2024 11:52:02 -0300 Subject: [PATCH 3/8] button hovers fixed --- src/pages/views/homeView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/views/homeView.tsx b/src/pages/views/homeView.tsx index ad60840d..4e1abb23 100644 --- a/src/pages/views/homeView.tsx +++ b/src/pages/views/homeView.tsx @@ -163,7 +163,7 @@ export default function HomeView() {
-
+
{Object.keys(result).length > 0 && (