fix: fixes to what is displayed if not logged in upgrade

2060-io · Aug 16, 2024 · 4400341 · 4400341
1 parent 7e258cb
commit 4400341
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 23 deletions.
diff --git a/src/components/Dropdowns/DropdownUpdateState.tsx b/src/components/Dropdowns/DropdownUpdateState.tsx
@@ -27,7 +27,6 @@ export const DropdownUpdateState: React.FC<DropdownUpdateStateProps> = ({dts}) =
         trigger.current.contains(target)
       )
         return;
-      addOverFlowToServicesList();
       setDropdownOpen(false);
     };
     document.addEventListener("click", clickHandler);
@@ -38,21 +37,32 @@ export const DropdownUpdateState: React.FC<DropdownUpdateStateProps> = ({dts}) =
   useEffect(() => {
     const keyHandler = (event: KeyboardEvent) => {
       if (!dropdownOpen || event.code !== 'Escape') return;
-      addOverFlowToServicesList();
       setDropdownOpen(false);
     }
     document.addEventListener("keydown", keyHandler);
     return () => document.removeEventListener("keydown", keyHandler);
   });
 
+  // resize of the window
+  useEffect(() => {
+    window.addEventListener('resize', () => {
+      if(Number(window.innerWidth) < 1300){
+        listServices?.classList.add('overflow-x-auto');
+      }
+      else{
+        listServices?.classList.remove('overflow-x-auto');
+      }
+    })
+  })
+
   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);
+    setInitClassNameToastWarning(idService);
     const configParameters: ConfigurationParameters = {
       headers: {
         'Authorization': 'Bearer ' + auth.user?.access_token ,
@@ -71,34 +81,22 @@ export const DropdownUpdateState: React.FC<DropdownUpdateStateProps> = ({dts}) =
     genericEntityResourceApi.genericStateEntityTypeIdNewStatePut(requesParameters).
     then(() => {
       router.refresh()
-      addOverFlowToServicesList();
       setDropdownOpen(false);
     }).
     catch( () => {
       showToastWarningUpdateState('toast-'+idService);
       router.refresh()
-      addOverFlowToServicesList();
       setDropdownOpen(false);
     })
   }
 
-  function removeOverFlowToServicesList(): void {
-    listServices?.classList.remove('overflow-x-auto');
-  }
-
-  function addOverFlowToServicesList(): void {
-    listServices?.classList.add('overflow-x-auto');
-  }
-
   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={
           () => {
-            removeOverFlowToServicesList();
-            console.log(dropdownOpen)
             setDropdownOpen(!dropdownOpen)
           }
         }
@@ -122,14 +120,9 @@ export const DropdownUpdateState: React.FC<DropdownUpdateStateProps> = ({dts}) =
       </button>
       <div
         ref={dropdown}
-        onFocus={
-          () => {
-            removeOverFlowToServicesList();
-            setDropdownOpen(true)
-          }
-        }
+        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"}`}
+        className={`absolute overflow-visible 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) => {

diff --git a/src/components/Services/DtsList.tsx b/src/components/Services/DtsList.tsx
@@ -187,7 +187,7 @@ function DtsList() {
 
   if (auth.isAuthenticated) {
     return (
-      <div className="overflow-x-auto rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1" id="list-services">
+      <div className="rounded-sm border border-stroke bg-white px-5 pb-2.5 pt-6 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1" id="list-services">
         <div className="flex justify-between items-center mb-6">
           <div className="flex items-left">
             <table>