forked from TailAdmin/free-nextjs-admin-dashboard
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26 from 2060-io/Services-list-Performance
feat: State update added
- Loading branch information
Showing
10 changed files
with
207 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
src/components/Pagination/Pagination.tsx → src/app/ui/Pagination/Pagination.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| export interface WarningTimedToastProps { | ||
| idToast: string | ||
| message: string | ||
| } | ||
|
|
||
| export const WarningTimedToast: React.FC<WarningTimedToastProps> = ({ idToast, message }) => { | ||
| return ( | ||
| ( | ||
| <div className={`absolute invisible border-1 flex items-center w-md max-w-xs p-1 mt-2 text-gray-500 bg-white rounded-lg shadow-3 shadow-warning dark:text-black dark:bg-gray-800`} id={idToast}> | ||
| <div className="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 rounded-lg"> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| strokeWidth="2" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| className="w-6 h-6 text-yellow-500" | ||
| > | ||
| <path d="M1 21h22L12 2 1 21z"></path> | ||
| <path d="M12 16v2"></path> | ||
| <path d="M12 10h.01"></path> | ||
| </svg> | ||
| </div> | ||
| <div className="ms-3 text-sm font-normal" >{message}</div> | ||
| </div> | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| export function showToastWarningUpdateState(id: string) { | ||
| let element = document.getElementById(id) | ||
| element?.classList.remove('invisible') | ||
| setTimeout(() => { | ||
| element?.classList.add('opacity-0', 'transition-opacity', 'ease-in-out', 'delay-300', 'duration-1000') | ||
| }, 4000) | ||
| } | ||
|
|
||
| export function setInitClassNameToastWarning(idService: string) { | ||
| let element = document.getElementById('toast-'+idService) | ||
| element?.classList.remove('opacity-0', 'transition-opacity', 'ease-in-out', 'delay-300', 'duration-1000') | ||
| element?.classList.add('invisible') | ||
| } | ||
|
|
||
|
|
||
| export default WarningTimedToast; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import { Configuration, ConfigurationParameters, DtsVO, EntityState, GenericEntityResourceApi, GenericStateEntityTypeIdNewStatePutRequest } from '@/openapi-client'; | ||
| import { useEffect, useRef, useState } from "react"; | ||
| import { useAuth } from "react-oidc-context"; | ||
| import { useRouter } from "next/navigation"; | ||
| import { showToastWarningUpdateState, setInitClassNameToastWarning } from "@/app/ui/TimedToasts/WarningTimedToast"; | ||
|
|
||
| export interface DropdownUpdateStateProps { | ||
| dts: DtsVO | ||
| } | ||
|
|
||
| export const DropdownUpdateState: React.FC<DropdownUpdateStateProps> = ({dts}) => { | ||
| const [dropdownOpen, setDropdownOpen] = useState(false); | ||
|
|
||
| const trigger = useRef<any>(null); | ||
| const dropdown = useRef<any>(null); | ||
| const auth = useAuth(); | ||
| const router = useRouter(); | ||
|
|
||
| // close on click outside | ||
| useEffect(() => { | ||
| const clickHandler = ({ target }: MouseEvent) => { | ||
| if (!dropdown.current) return; | ||
| if ( | ||
| !dropdownOpen || | ||
| dropdown.current.contains(target) || | ||
| trigger.current.contains(target) | ||
| ) | ||
| return; | ||
| setDropdownOpen(false); | ||
| }; | ||
| document.addEventListener("click", clickHandler); | ||
| return () => document.removeEventListener("click", clickHandler); | ||
| }); | ||
|
|
||
| // close if the esc key is pressed | ||
| useEffect(() => { | ||
| const keyHandler = (event: KeyboardEvent) => { | ||
| if (!dropdownOpen || event.code !== 'Escape') return; | ||
| setDropdownOpen(false); | ||
| } | ||
| document.addEventListener("keydown", keyHandler); | ||
| return () => document.removeEventListener("keydown", keyHandler); | ||
| }); | ||
|
|
||
| function setStyleState(state: string): string { | ||
| let color = 'text-black'; | ||
| color = 'ENABLED' === state ? 'text-success dark:text-success' : 'DISABLED' === state ? 'text-danger dark:text-danger' : 'EDITING' === state ? 'text-warning dark:text-warning' : 'text-black dark:text-white' | ||
| return color; | ||
| } | ||
|
|
||
| async function updateStateEntity (idService: string, entityState: string){ | ||
| await setInitClassNameToastWarning(idService); | ||
| const configParameters: ConfigurationParameters = { | ||
| headers: { | ||
| 'Authorization': 'Bearer ' + auth.user?.access_token , | ||
| }, | ||
| basePath: process.env.NEXT_PUBLIC_BACKEND_BASE_PATH, | ||
| }; | ||
|
|
||
| const config = new Configuration(configParameters); | ||
|
|
||
| const requesParameters: GenericStateEntityTypeIdNewStatePutRequest = { | ||
| entityType: "DTS", | ||
| id: idService, | ||
| newState: entityState as EntityState | ||
| } | ||
| const genericEntityResourceApi = new GenericEntityResourceApi(config); | ||
| genericEntityResourceApi.genericStateEntityTypeIdNewStatePut(requesParameters). | ||
| then(() => { | ||
| router.refresh() | ||
| setDropdownOpen(false); | ||
| }). | ||
| catch( () => { | ||
| showToastWarningUpdateState('toast-'+idService); | ||
| router.refresh() | ||
| setDropdownOpen(false); | ||
| }) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="relative text-center w-full"> | ||
| <button | ||
| className={`w-full font-medium bg-transparent text-center ${setStyleState(String(dts.state))}`} | ||
| ref={trigger} | ||
| onClick={() => setDropdownOpen(!dropdownOpen)} | ||
| > | ||
| {dts.state} | ||
| <svg | ||
| className="fill-current sm:inline ms-3" | ||
| width="12" | ||
| height="8" | ||
| viewBox="0 0 12 8" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| fillRule="evenodd" | ||
| clipRule="evenodd" | ||
| d="M0.410765 0.910734C0.736202 0.585297 1.26384 0.585297 1.58928 0.910734L6.00002 5.32148L10.4108 0.910734C10.7362 0.585297 11.2638 0.585297 11.5893 0.910734C11.9147 1.23617 11.9147 1.76381 11.5893 2.08924L6.58928 7.08924C6.26384 7.41468 5.7362 7.41468 5.41077 7.08924L0.410765 2.08924C0.0853277 1.76381 0.0853277 1.23617 0.410765 0.910734Z" | ||
| fill="" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| <div | ||
| ref={dropdown} | ||
| onFocus={() => setDropdownOpen(true)} | ||
| onBlur={() => setDropdownOpen(false)} | ||
| className={`absolute right-0 top-full z-40 w-40 space-y-1 rounded-sm border border-stroke bg-white p-1.5 shadow-default dark:border-strokedark dark:bg-boxdark ${dropdownOpen === true ? "block" : "hidden"}`} | ||
| > | ||
| { | ||
| Object.values(EntityState).map((state, index) => { | ||
| return( | ||
| <button | ||
| id={dts.id} | ||
| key={index} | ||
| className="flex w-full items-center gap-2 rounded-sm px-4 py-1.5 text-left text-sm hover:bg-gray dark:hover:bg-meta-4" | ||
| value={state} | ||
| onClick={(e: any) => { | ||
| updateStateEntity(String(dts.id), e.target.value) | ||
| }} | ||
| > | ||
| {state} | ||
| </button> | ||
| ) | ||
| }) | ||
| } | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default DropdownUpdateState; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export * from '@/app/ui/TimedToasts/WarningTimedToast' | ||
| export * from '@/app/ui/Pagination/Pagination' | ||
| export * from '@/components/Dropdowns/DropdownUpdateState' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters