Merge pull request #36 from 2060-io/fix-show-service-provider-options

fix: fixes to what is displayed if not logged in.
2060-io · Aug 19, 2024 · e33f687 · e33f687
2 parents 033329d + 6f312b3
commit e33f687
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 36 deletions.
diff --git a/src/components/Dropdowns/DropdownUpdateState.tsx b/src/components/Dropdowns/DropdownUpdateState.tsx
@@ -49,7 +49,7 @@ export const DropdownUpdateState: React.FC<DropdownUpdateStateProps> = ({dts}) =
   }
 
   async function updateStateEntity (idService: string, entityState: string){
-    await setInitClassNameToastWarning(idService);
+    setInitClassNameToastWarning(idService);
     const configParameters: ConfigurationParameters = {
       headers: {
         'Authorization': 'Bearer ' + auth.user?.access_token ,
@@ -82,7 +82,11 @@ export const DropdownUpdateState: React.FC<DropdownUpdateStateProps> = ({dts}) =
       <button
         className={`w-full font-medium bg-transparent text-center ${setStyleState(String(dts.state))}`}
         ref={trigger}
-        onClick={() => setDropdownOpen(!dropdownOpen)}
+        onClick={
+          () => {
+            setDropdownOpen(!dropdownOpen)
+          }
+        }
       >
         {dts.state}
         <svg
@@ -105,7 +109,7 @@ export const DropdownUpdateState: React.FC<DropdownUpdateStateProps> = ({dts}) =
         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"}`}
+        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">
+      <div className="xsm:overflow-x-auto 2xsm:overflow-x-auto sm:overflow-x-auto md:overflow-x-auto lg:overflow-x-auto xl:overflow-x-visible 2xl:overflow-x-visible 3xl:overflow-x-visible rounded-sm border border-stroke 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>

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -6,6 +6,7 @@ import Link from "next/link";
 import Image from "next/image";
 import SidebarLinkGroup from "./SidebarLinkGroup";
 import { validate } from "uuid";
+import { useAuth } from "react-oidc-context";
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -30,6 +31,8 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
     storedSidebarExpanded === null ? false : storedSidebarExpanded === "true",
   );
 
+  const auth = useAuth();
+
   // close on click outside
   useEffect(() => {
     const clickHandler = ({ target }: MouseEvent) => {
@@ -170,9 +173,10 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                         </svg>
                         Service Provider
                         <svg
-                          className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current ${
-                            open && "rotate-180"
-                          }`}
+                          className={`absolute right-4 top-1/2 -translate-y-1/2 fill-current
+                            ${open && "rotate-180"}
+                            ${!auth.isAuthenticated && "invisible"}
+                          `}
                           width="20"
                           height="20"
                           viewBox="0 0 20 20"
@@ -245,35 +249,36 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
                           />
                         </svg>
                       </Link>*/}
-
-                      <div
-                        className={`overflow-hidden ${
-                          !open ? "h-0" :  "h-21"
-                        } transition-height duration-500 ease-in-out`}
-                      >
-                        <ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">
-                          <li>
-                            <Link
-                              href="/services"
-                              className={`group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ${
-                                pathname === "/services" && "text-white"
-                              }`}
-                            >
-                              Services
-                            </Link>
-                          </li>
-                          <li>
-                            <Link
-                              href="/templates"
-                              className={`group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ${
-                                pathname === "/templates" && "text-white"
-                              }`}
-                            >
-                              Templates
-                            </Link>
-                          </li>
-                        </ul>
-                      </div>
+                      {auth.isAuthenticated ? (
+                        <div
+                          className={`overflow-hidden ${
+                            !open ? "h-0" :  "h-21"
+                          } transition-height duration-500 ease-in-out`}
+                        >
+                          <ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">
+                            <li>
+                              <Link
+                                href="/services"
+                                className={`group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ${
+                                  pathname === "/services" && "text-white"
+                                }`}
+                              >
+                                Services
+                              </Link>
+                            </li>
+                            <li>
+                              <Link
+                                href="/templates"
+                                className={`group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ${
+                                  pathname === "/templates" && "text-white"
+                                }`}
+                              >
+                                Templates
+                              </Link>
+                            </li>
+                          </ul>
+                        </div>
+                      ) : (<label></label>)}
                     </React.Fragment>
                   );
                 }}