From edf425f36c408ec890062a35991413bcd2bf92b5 Mon Sep 17 00:00:00 2001 From: Jonathan Aguasaco Rojas Date: Thu, 20 Jun 2024 10:57:24 -0500 Subject: [PATCH 01/10] style: Define Style to top bar filter and search - Align text headers and values table - Added function to use to filter element by element selected -Added function to set input to filter text --- src/components/Services/DtsList.tsx | 155 +++++++++++++++++++++------- 1 file changed, 118 insertions(+), 37 deletions(-) diff --git a/src/components/Services/DtsList.tsx b/src/components/Services/DtsList.tsx index 408caf56..6208c8a8 100644 --- a/src/components/Services/DtsList.tsx +++ b/src/components/Services/DtsList.tsx @@ -1,11 +1,6 @@ "use client"; -import React, { - JSXElementConstructor, - ReactNode, - useEffect, - useState, -} from "react"; +import React, { useEffect, useState } from "react"; import { DtsListPostRequest, DtsResourceApi, @@ -23,14 +18,11 @@ import Link from "next/link"; import DropdownDefault from "../Dropdowns/DropdownDefault"; function DtsList() { - const [dtsVOs, setDtsVOs] = useState([ - { - id: "1", - createdTs: new Date(), - name: "Juanchito Estrella", - state: "EDITING", - }, - ]); + const [dtsVOs, setDtsVOs] = useState([]); + + const [searchText, setSerchText] = useState(""); + + let [filterState, setFilterState] = useState>(); const auth = useAuth(); @@ -65,6 +57,17 @@ function DtsList() { api.dtsListPost(requestParameters).then((resp) => setDtsVOs(resp)); } + function setState(id: DtsVO["id"], state: DtsVO["state"]) { + let [filteredDts] = dtsVOs.filter(({ id: idDts }) => { + return idDts == id; + }); + filteredDts = { + ...filteredDts, + state, + }; + setDtsVOs((state) => [...state, filteredDts]); + } + useEffect(() => { console.log("going here " + auth.isAuthenticated); if (auth.isAuthenticated) { @@ -72,81 +75,159 @@ function DtsList() { } }, [auth]); + function InputSearch(): JSX.Element { + return ( +
+ {}} + className="w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" + /> + {/* onChange​= {(e) => setDtsVO({...dtsVO, name: e.target.value})} */} +
+ ); + } + + function SelectStateFilter({ + className, + }: { + className: string; + }): JSX.Element { + return ( + + ); + } + + function filterByState( + this: DtsVO["state"], + value: DtsVO, + idx: number, + arr: DtsVO[], + ) { + let stateToFilter: DtsVO["state"] = this; + if (stateToFilter) { + return value.state == stateToFilter; + } else { + return value; + } + } + if (auth.isAuthenticated) { return (
+
+
+ +
+
+ + +
+
- - - - - - - - {dtsVOs.map((dts, index) => ( + {dtsVOs.filter(filterByState, filterState).map((dts, index) => ( - - - - - - - - - - {/*
+ Name + Template Repo + Template + Connections + Modified + State + Action
+
{dts.name}
+
Template Repo
+
Template
+
Connections
+
{String(dts.createdTs)}
-
+ {/*
+
{dts.state} -
- {Object.values(EntityState).map((value, idx) => { - return ; + return ( + + ); })} - - + 		+ */} +

+
Date: Thu, 20 Jun 2024 10:58:09 -0500 Subject: [PATCH 02/10] draft: Create page templates --- src/app/templates/page.tsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/app/templates/page.tsx diff --git a/src/app/templates/page.tsx b/src/app/templates/page.tsx new file mode 100644 index 00000000..52d898b9 --- /dev/null +++ b/src/app/templates/page.tsx @@ -0,0 +1,17 @@ +import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb"; +import DefaultLayout from "@/components/Layouts/DefaultLayout"; +import SelectDtsTemplate from "@/components/Templates/SelectDtsTemplate"; + +const Templates = () => { + return ( + + + +
+ +
+ + ); +}; + +export default Templates; From ae18e9c7d7c2e64fc7196fe1361637329f219145 Mon Sep 17 00:00:00 2001 From: Jonathan Aguasaco Rojas Date: Thu, 20 Jun 2024 10:58:38 -0500 Subject: [PATCH 03/10] draft: Added link template to use page --- src/components/Sidebar/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 51e044ba..0fd06e5f 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -247,11 +247,19 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => { Services + + Templates +
From ce88d01a39ac9986bc62444d2eaa1ec11ba17d4f Mon Sep 17 00:00:00 2001 From: Andres Vallecilla Date: Thu, 20 Jun 2024 11:26:46 -0500 Subject: [PATCH 04/10] fix: update --- next.config.mjs | 3 +++ 1 file changed, 3 insertions(+) diff --git a/next.config.mjs b/next.config.mjs index 477315e7..78bd9f87 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -9,6 +9,9 @@ const nextConfig = { KEYCLOAK_REDIRECT_URI: process.env.KEYCLOAK_REDIRECT_URI, KEYCLOAK_POST_LOGOUT_REDIRECT_URI: process.env.KEYCLOAK_POST_LOGOUT_REDIRECT_URI, KEYCLOAK_PRES_REQ_CONF_ID: process.env.KEYCLOAK_PRES_REQ_CONF_ID, + TEMPLATE_DIR: process.env.TEMPLATE_DIR, + TEMPLATE_BRANCH: process.env.TEMPLATE_BRANCH, + TEMPLATE_SCHEMA_DIR: process.env.TEMPLATE_SCHEMA_DIR, } }; From 522ca1c25beab580f9b69be0f8d02f80432b87fa Mon Sep 17 00:00:00 2001 From: Andres Vallecilla Date: Thu, 20 Jun 2024 11:31:54 -0500 Subject: [PATCH 05/10] fix: update --- src/components/Services/DtsList.tsx | 298 +++++++++++++++++++--------- 1 file changed, 205 insertions(+), 93 deletions(-) diff --git a/src/components/Services/DtsList.tsx b/src/components/Services/DtsList.tsx index cf352fb6..6208c8a8 100644 --- a/src/components/Services/DtsList.tsx +++ b/src/components/Services/DtsList.tsx @@ -1,11 +1,6 @@ "use client"; -import React, { - JSXElementConstructor, - ReactNode, - useEffect, - useState, -} from "react"; +import React, { useEffect, useState } from "react"; import { DtsListPostRequest, DtsResourceApi, @@ -23,14 +18,11 @@ import Link from "next/link"; import DropdownDefault from "../Dropdowns/DropdownDefault"; function DtsList() { - const [dtsVOs, setDtsVOs] = useState([ - { - id: "1", - createdTs: new Date(), - name: "Juanchito Estrella", - state: "EDITING", - }, - ]); + const [dtsVOs, setDtsVOs] = useState([]); + + const [searchText, setSerchText] = useState(""); + + let [filterState, setFilterState] = useState>(); const auth = useAuth(); @@ -65,6 +57,17 @@ function DtsList() { api.dtsListPost(requestParameters).then((resp) => setDtsVOs(resp)); } + function setState(id: DtsVO["id"], state: DtsVO["state"]) { + let [filteredDts] = dtsVOs.filter(({ id: idDts }) => { + return idDts == id; + }); + filteredDts = { + ...filteredDts, + state, + }; + setDtsVOs((state) => [...state, filteredDts]); + } + useEffect(() => { console.log("going here " + auth.isAuthenticated); if (auth.isAuthenticated) { @@ -72,92 +75,201 @@ function DtsList() { } }, [auth]); + function InputSearch(): JSX.Element { + return ( +
+ {}} + className="w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" + /> + {/* onChange​= {(e) => setDtsVO({...dtsVO, name: e.target.value})} */} +
+ ); + } + + function SelectStateFilter({ + className, + }: { + className: string; + }): JSX.Element { + return ( + + ); + } + + function filterByState( + this: DtsVO["state"], + value: DtsVO, + idx: number, + arr: DtsVO[], + ) { + let stateToFilter: DtsVO["state"] = this; + if (stateToFilter) { + return value.state == stateToFilter; + } else { + return value; + } + } + if (auth.isAuthenticated) { return (
-
- - - - - - - - - - - {dtsVOs.map((dts, index) => ( - - - - - - - - ))} - -
- Name - - State - - Actions -
-
- {dts.name} -
- - 		-

- {dts.state} -

- 		-
- - - - - - - - - -
-
-
- -
+
+
+ +
+
+ + +
+
+
+ + + + + + + + + + + + + + {dtsVOs.filter(filterByState, filterState).map((dts, index) => ( + + - - + + + + + {/* + */} + + + + ))} + +
+ Name + + Template Repo + + Template + + Connections + + Modified + + State + + Action +
+
+ {dts.name} +
+ 		+
+ Template Repo +
+ 		+
+ Template +
+ 		+
+ Connections +
+ 		+
+ {String(dts.createdTs)} +
+ 		+
+ {dts.state} +
+ + 		+

+ {dts.state} +

+ 		+
+ + + + + + +
+
+
+ + ); } else { return
You are not authenticated.
; From cbc84eecfb30be78d1a8c7774d2c7937f1c737a6 Mon Sep 17 00:00:00 2001 From: Andres Vallecilla Date: Thu, 20 Jun 2024 13:03:57 -0500 Subject: [PATCH 06/10] fix: adjust date format --- src/components/Services/DtsList.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Services/DtsList.tsx b/src/components/Services/DtsList.tsx index 6208c8a8..9d5c0fcf 100644 --- a/src/components/Services/DtsList.tsx +++ b/src/components/Services/DtsList.tsx @@ -194,11 +194,12 @@ function DtsList() { Connections 		+ {dts.createdTs && (
- {String(dts.createdTs)} + {`${dts.createdTs.getFullYear()}-${(dts.createdTs.getMonth() + 1).toString().padStart(2, '0')}-${dts.createdTs.getDate().toString().padStart(2, '0')}`}
+ )}
@@ -232,7 +233,7 @@ function DtsList() { className={`inline-flex rounded-full bg-opacity-10 px-3 py-1 text-sm font-medium ${ dts.state === "ENABLED" ? "bg-success text-success" - : dts.status === "DISABLED" + : dts.state === "DISABLED" ? "bg-danger text-danger" : "bg-warning text-warning" }`} @@ -268,7 +269,6 @@ function DtsList() {
-
); } else { From d5f18bde639b83e509271ee7b51b183c9d96b5de Mon Sep 17 00:00:00 2001 From: Andres Vallecilla Date: Thu, 20 Jun 2024 17:51:38 -0500 Subject: [PATCH 07/10] feat: add filter function --- src/components/Services/DtsList.tsx | 83 ++++++++++++++--------------- src/components/Sidebar/index.tsx | 2 + 2 files changed, 41 insertions(+), 44 deletions(-) diff --git a/src/components/Services/DtsList.tsx b/src/components/Services/DtsList.tsx index 9d5c0fcf..7081f0c4 100644 --- a/src/components/Services/DtsList.tsx +++ b/src/components/Services/DtsList.tsx @@ -1,12 +1,11 @@ "use client"; -import React, { useEffect, useState } from "react"; +import React, { useEffect, useRef, useState } from "react"; import { DtsListPostRequest, DtsResourceApi, } from "../../openapi-client/apis/DtsResourceApi"; import { - DtsFilterFromJSON, DtsVO, EntityState, } from "../../openapi-client/models"; @@ -15,14 +14,15 @@ import { Configuration, ConfigurationParameters } from "../../openapi-client"; import { useAuth } from "react-oidc-context"; import { Log } from "oidc-client-ts"; import Link from "next/link"; -import DropdownDefault from "../Dropdowns/DropdownDefault"; function DtsList() { const [dtsVOs, setDtsVOs] = useState([]); + const [searchDts, setSearchDts] = useState(""); + const [filterState, setFilterState] = useState(""); + const [focusedElement, setFocusedElement] = useState(''); - const [searchText, setSerchText] = useState(""); - - let [filterState, setFilterState] = useState>(); + const filterByDts = (item: DtsVO) => item.name?.toLowerCase().includes(searchDts.toLowerCase()); + const filterByState = (item: DtsVO) => item.state?.toLowerCase().includes(filterState.toLowerCase()); const auth = useAuth(); @@ -43,10 +43,8 @@ function DtsList() { class DtsFilterClass implements DtsFilter { state?: EntityState; } - //const filter = DtsFilterFromJSON(''); const filterw = new DtsFilterClass(); - //filterw.state = EntityState.Enabled; class DtsListPostRequestClass implements DtsListPostRequest { dtsFilter?: DtsFilter; @@ -57,17 +55,6 @@ function DtsList() { api.dtsListPost(requestParameters).then((resp) => setDtsVOs(resp)); } - function setState(id: DtsVO["id"], state: DtsVO["state"]) { - let [filteredDts] = dtsVOs.filter(({ id: idDts }) => { - return idDts == id; - }); - filteredDts = { - ...filteredDts, - state, - }; - setDtsVOs((state) => [...state, filteredDts]); - } - useEffect(() => { console.log("going here " + auth.isAuthenticated); if (auth.isAuthenticated) { @@ -76,16 +63,26 @@ function DtsList() { }, [auth]); function InputSearch(): JSX.Element { + const inputRef = useRef(null); + useEffect(() => { + if (focusedElement === 'input' && inputRef.current) { + inputRef.current.focus(); + } + }, [focusedElement]); + return (
{}} + value={searchDts} + onChange={(e) => { + setSearchDts(e.target.value); + setFocusedElement('input'); + }} className="w-full rounded border-[1.5px] border-stroke bg-transparent px-5 py-3 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark dark:bg-form-input dark:text-white dark:focus:border-primary" /> - {/* onChange​= {(e) => setDtsVO({...dtsVO, name: e.target.value})} */}
); } @@ -95,41 +92,39 @@ function DtsList() { }: { className: string; }): JSX.Element { + const selectRef = useRef(null); + useEffect(() => { + if (focusedElement === 'select' && selectRef.current) { + selectRef.current.focus(); + } + }, [focusedElement]); + return ( - { + setFilterState(e.target.value as EntityState); + setFocusedElement('select'); + }} + > + {Object.values(EntityState) .map((state, idx) => { return ( ); - }) - .concat()} + })} ); } - function filterByState( - this: DtsVO["state"], - value: DtsVO, - idx: number, - arr: DtsVO[], - ) { - let stateToFilter: DtsVO["state"] = this; - if (stateToFilter) { - return value.state == stateToFilter; - } else { - return value; - } - } - if (auth.isAuthenticated) { return (
@@ -139,7 +134,7 @@ function DtsList() {
- +
@@ -171,7 +166,7 @@ function DtsList() { - {dtsVOs.filter(filterByState, filterState).map((dts, index) => ( + {dtsVOs.filter(filterByDts).filter(filterByState).map((dts, index) => (
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx index 0fd06e5f..a7340a0c 100644 --- a/src/components/Sidebar/index.tsx +++ b/src/components/Sidebar/index.tsx @@ -252,6 +252,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => { > Services + +
  • Date: Fri, 21 Jun 2024 13:13:01 -0500 Subject: [PATCH 08/10] feat: add pagination --- src/components/Pagination/Pagination.tsx | 86 ++++++++++++++++++++++++ src/components/Services/DtsList.tsx | 60 +++++++++-------- 2 files changed, 117 insertions(+), 29 deletions(-) create mode 100644 src/components/Pagination/Pagination.tsx diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx new file mode 100644 index 00000000..39752a6e --- /dev/null +++ b/src/components/Pagination/Pagination.tsx @@ -0,0 +1,86 @@ +import React, { ChangeEvent } from 'react'; + +function Pagination({ + itemsPerPage, + setItemsPerPage, + currentPage, + totalPages, + onPageChange +}:{ + itemsPerPage: number, + setItemsPerPage: React.Dispatch>, + currentPage: number, + totalPages: number, + onPageChange: (page: number) => void; +}): JSX.Element { + const handleItemsPerPageChange = (e: ChangeEvent) => { + setItemsPerPage(Number(e.target.value)); + }; + + const handlePreviousPage = () => { + if (currentPage > 1) { + onPageChange(currentPage - 1); + } + }; + + const handleNextPage = () => { + if (currentPage < totalPages) { + onPageChange(currentPage + 1); + } + }; + + return ( +
    +
    + Show + + per page +
    + +
    + + + + Previous + + + + Page {currentPage} of {totalPages} + + + + Next + + + +
    +
    + ); +} + +export default Pagination; \ No newline at end of file diff --git a/src/components/Services/DtsList.tsx b/src/components/Services/DtsList.tsx index 7081f0c4..9bed4177 100644 --- a/src/components/Services/DtsList.tsx +++ b/src/components/Services/DtsList.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useMemo, useRef, useState } from "react"; import { DtsListPostRequest, DtsResourceApi, @@ -14,16 +14,32 @@ import { Configuration, ConfigurationParameters } from "../../openapi-client"; import { useAuth } from "react-oidc-context"; import { Log } from "oidc-client-ts"; import Link from "next/link"; +import Pagination from "../Pagination/Pagination"; function DtsList() { const [dtsVOs, setDtsVOs] = useState([]); const [searchDts, setSearchDts] = useState(""); const [filterState, setFilterState] = useState(""); const [focusedElement, setFocusedElement] = useState(''); + const [itemsPerPage, setItemsPerPage] = useState(10); + const [currentPage, setCurrentPage] = useState(1); const filterByDts = (item: DtsVO) => item.name?.toLowerCase().includes(searchDts.toLowerCase()); const filterByState = (item: DtsVO) => item.state?.toLowerCase().includes(filterState.toLowerCase()); + const filteredItems = useMemo(() => { + return dtsVOs.filter(filterByDts).filter(filterByState); + }, [dtsVOs, filterByDts, filterByState]); + + const totalPages = Math.max(1, Math.ceil(filteredItems.length / itemsPerPage)); + const indexOfLastItem = currentPage * itemsPerPage; + const indexOfFirstItem = indexOfLastItem - itemsPerPage; + const currentItems = filteredItems.slice(indexOfFirstItem, indexOfLastItem); + + const handlePageChange = (newPage: number) => { + setCurrentPage(newPage); + }; + const auth = useAuth(); Log.setLogger(console); @@ -166,7 +182,7 @@ function DtsList() { - {dtsVOs.filter(filterByDts).filter(filterByState).map((dts, index) => ( + {currentItems.map((dts, index) => (
    @@ -196,33 +212,6 @@ function DtsList() {
    )} - {/* -
    - {dts.state} -
    - - - */}

    • +
    +
    +
    +
    + +
    +
    ); } else { From 2b0a66de36e81ddd9b93fd178b9b6992fa890b77 Mon Sep 17 00:00:00 2001 From: Andres Vallecilla Date: Fri, 21 Jun 2024 15:28:58 -0500 Subject: [PATCH 09/10] fix: add numbers to pagination --- src/components/Pagination/Pagination.tsx | 48 +++++++++++++++++++++++- src/components/Services/DtsList.tsx | 4 +- 2 files changed, 49 insertions(+), 3 deletions(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 39752a6e..ea5a7cb2 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -1,18 +1,61 @@ -import React, { ChangeEvent } from 'react'; +import React, { ChangeEvent, useMemo } from 'react'; function Pagination({ itemsPerPage, setItemsPerPage, currentPage, totalPages, + visiblePages = 5, onPageChange }:{ itemsPerPage: number, setItemsPerPage: React.Dispatch>, currentPage: number, totalPages: number, + visiblePages: number, onPageChange: (page: number) => void; }): JSX.Element { + const pageNumbers = useMemo(() => { + const pages = []; + const addPage = (page: number) => pages.push( + + ); + + if (totalPages <= visiblePages) { + for (let i = 1; i <= totalPages; i++) { + addPage(i); + } + } else { + let start = Math.max(1, currentPage - Math.floor(visiblePages / 2)); + let end = Math.min(totalPages, start + visiblePages - 1); + if (end === totalPages) { + start = Math.max(1, end - visiblePages + 1); + } + if (start > 1) { + addPage(1); + if (start > 2) pages.push(...); + } + for (let i = start; i <= end; i++) { + addPage(i); + } + if (end < totalPages) { + if (end < totalPages - 1) pages.push(...); + addPage(totalPages); + } + } + + return pages; + }, [currentPage, totalPages, onPageChange, visiblePages]); + + const handleItemsPerPageChange = (e: ChangeEvent) => { setItemsPerPage(Number(e.target.value)); }; @@ -38,6 +81,7 @@ function Pagination({ onChange={handleItemsPerPageChange} className="border rounded px-2 py-1" > + @@ -62,7 +106,7 @@ function Pagination({ - Page {currentPage} of {totalPages} + {pageNumbers} diff --git a/src/components/Services/DtsList.tsx b/src/components/Services/DtsList.tsx index 9bed4177..6f27364f 100644 --- a/src/components/Services/DtsList.tsx +++ b/src/components/Services/DtsList.tsx @@ -21,8 +21,9 @@ function DtsList() { const [searchDts, setSearchDts] = useState(""); const [filterState, setFilterState] = useState(""); const [focusedElement, setFocusedElement] = useState(''); - const [itemsPerPage, setItemsPerPage] = useState(10); + const [itemsPerPage, setItemsPerPage] = useState(5); const [currentPage, setCurrentPage] = useState(1); + const visiblePages = 4; const filterByDts = (item: DtsVO) => item.name?.toLowerCase().includes(searchDts.toLowerCase()); const filterByState = (item: DtsVO) => item.state?.toLowerCase().includes(filterState.toLowerCase()); @@ -263,6 +264,7 @@ function DtsList() { currentPage={currentPage} totalPages={totalPages} onPageChange={handlePageChange} + visiblePages={visiblePages} /> From f2e14f50db3d457ca4c97ace1bdddd6c152c4df3 Mon Sep 17 00:00:00 2001 From: Andres Vallecilla Date: Mon, 24 Jun 2024 09:55:58 -0500 Subject: [PATCH 10/10] feat: add front modifications --- src/components/Pagination/Pagination.tsx | 4 +-- src/components/Services/DtsList.tsx | 40 ++++++++++++++++++------ 2 files changed, 33 insertions(+), 11 deletions(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index ea5a7cb2..5f929443 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/src/components/Pagination/Pagination.tsx @@ -21,8 +21,8 @@ function Pagination({ + ); + } + + if (auth.isAuthenticated) { return (
    -
    +
    - +
    -
    +
    - + +
    @@ -254,10 +276,10 @@ function DtsList() {
    -
    +
    -
    +