Save changes

application/src/main/webapp/src/Routes.tsx

@@ -1,69 +1,52 @@
 import { lazy, Suspense } from "react";
 import { Navigate, Route, Routes } from "react-router-dom";
 
-import ProjectEditGeneral from "pages/project-edit/general";
+const GettingStarted = lazy(() => import("./pages/getting-started"));
 
-const ProjectList = lazy(() => import("./pages/project-list"));
-const ProjectEdit = lazy(() => import("./pages/project-edit"));
-// const ProjectEditGeneral = lazy(() => import("./pages/project-edit/general"));
-const ProjectEditSunat = lazy(() => import("./pages/project-edit/sunat"));
-const ProjectEditCertificates = lazy(
-  () => import("./pages/project-edit/certificates")
-);
-const ProjectEditCompanies = lazy(
-  () => import("./pages/project-edit/companies")
-);
-
-const DocumentList = lazy(() => import("./pages/document-list"));
+const ProjectWrapper = lazy(() => import("./pages/project"));
+const ProjectSettings = lazy(() => import("./pages/project/settings"));
+const ProjectSunat = lazy(() => import("./pages/project/sunat"));
+const ProjectCertificates = lazy(() => import("./pages/project/certificates"));
+const ProjectCompanies = lazy(() => import("./pages/project/companies"));
+const ProjectDocuments = lazy(() => import("./pages/project/documents"));
 
 export const AppRoutes = () => {
   const routes = [
     {
-      Component: ProjectList,
-      path: "/projects",
-      hasDescendant: true,
+      Component: GettingStarted,
+      path: "/getting-started",
+      hasDescendant: false,
     },
     {
-      Component: ProjectEdit,
+      Component: ProjectWrapper,
       path: "/projects/:projectName",
       children: [
         {
-          Component: () => <Navigate to="general" replace />,
+          Component: () => <Navigate to="settings" replace />,
           path: "",
         },
         {
-          Component: ProjectEditGeneral,
-          path: "general",
+          Component: ProjectSettings,
+          path: "settings",
         },
         {
-          Component: ProjectEditSunat,
+          Component: ProjectSunat,
           path: "sunat",
         },
         {
-          Component: ProjectEditCertificates,
+          Component: ProjectCertificates,
           path: "certificates",
         },
         {
-          Component: ProjectEditCompanies,
+          Component: ProjectCompanies,
           path: "companies",
         },
+        {
+          Component: ProjectDocuments,
+          path: "documents",
+        },
       ],
     },
-    {
-      Component: ProjectList,
-      path: "/projects",
-      hasDescendant: true,
-    },
-    {
-      Component: DocumentList,
-      path: "/documents",
-      hasDescendant: false,
-    },
-    {
-      Component: DocumentList,
-      path: "/documents/projects/:projectName",
-      hasDescendant: false,
-    },
   ];
 
   return (
@@ -86,7 +69,7 @@ export const AppRoutes = () => {
             )}
           </Route>
         ))}
-        <Route path="/" element={<Navigate to="/projects" />} />
+        <Route path="/" element={<Navigate to="/getting-started" />} />
         <Route path="*" element={<Navigate to="/" />} />
       </Routes>
     </Suspense>

application/src/main/webapp/src/layout/sidebar.css

@@ -0,0 +1,32 @@
+.project {  
+  padding: var(--pf-c-nav__link--PaddingTop) var(--pf-c-nav__link--PaddingRight)
+    var(--pf-global--spacer--lg) var(--pf-c-nav__link--PaddingLeft);
+  border-bottom: 1px solid var(--pf-c-nav__link--before--BorderColor);
+}
+
+.project .pf-c-context-selector__toggle {
+  color: #FFFFFF;
+}
+
+.project .pf-c-select .pf-c-select__toggle {
+  color: var(--pf-global--BackgroundColor--100);
+  background-color: var(--pf-global--Color--100);
+}
+
+.project .pf-c-select .pf-c-select__toggle::before {
+  border-color: var(--pf-global--BackgroundColor--dark-400)
+    var(--pf-global--BackgroundColor--dark-400)
+    var(--pf-c-select__toggle--before--BorderBottomColor)
+    var(--pf-global--BackgroundColor--dark-400);
+}
+
+.project .pf-c-select .pf-c-select__toggle:focus::before,
+.project .pf-c-select .pf-c-select__toggle:hover::before {
+  border-bottom-color: var(--pf-c-select__toggle--before--BorderBottomColor);
+}
+
+.project .pf-c-select .pf-c-select__toggle:focus::before {
+  border-bottom-width: var(
+    --pf-c-select__toggle--m-expanded--before--BorderBottomWidth
+  );
+}

application/src/main/webapp/src/layout/sidebar.tsx

@@ -1,42 +1,136 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
+import React, { useReducer } from "react";
+import { NavLink, useMatch, useNavigate } from "react-router-dom";
 
-import { Nav, NavList, PageSidebar } from "@patternfly/react-core";
+import {
+  Button,
+  ContextSelector,
+  ContextSelectorFooter,
+  ContextSelectorItem,
+  Nav,
+  NavList,
+  PageSidebar,
+} from "@patternfly/react-core";
 import { css } from "@patternfly/react-styles";
 
-import { useProjectContext } from "shared/context";
 import { LayoutTheme } from "./layout-constants";
 
+import "./sidebar.css";
+import { useProjectsQuery } from "queries/projects";
+import { AddProjectWizard } from "shared/components";
+
 export const SidebarApp: React.FC = () => {
-  const { currentContext } = useProjectContext();
+  const navigate = useNavigate();
+  const routeParams = useMatch("/projects/:projectName/*");
+
+  const projectsQuery = useProjectsQuery();
+
+  const [isCreateProjectWizardOpen, toggleCreateProjectWizard] = useReducer(
+    (val) => !val,
+    false
+  );
+  const [isCtxSelectorToggled, toggleCtxSelector] = useReducer(
+    (val) => !val,
+    false
+  );
+
+  const navigateToSelectedProject = (projectName: string) => {
+    navigate(`/projects/${projectName}`);
+  };
 
   const renderPageNav = () => {
     return (
       <Nav id="nav-sidebar" aria-label="Nav" theme={LayoutTheme}>
-        <NavList>
-          <NavLink
-            to="/projects"
-            className={({ isActive }) =>
-              css("pf-c-nav__link", isActive ? "pf-m-current" : "")
+        <div className="project">
+          <ContextSelector
+            toggleText={"selected"}
+            // onSearchInputChange={onSearchInputChange}
+            isOpen={isCtxSelectorToggled}
+            // searchInputValue={searchValue}
+            onToggle={toggleCtxSelector}
+            // onSelect={onSelect}
+            // onSearchButtonClick={onSearchButtonClick}
+            footer={
+              <ContextSelectorFooter>
+                <Button
+                  variant="primary"
+                  isBlock
+                  onClick={toggleCreateProjectWizard}
+                >
+                  Crear proyecto
+                </Button>
+              </ContextSelectorFooter>
             }
           >
-            Proyectos
-          </NavLink>
-        </NavList>
-        <NavList>
-          <NavLink
-            to={
-              !currentContext
-                ? "/documents"
-                : "/documents/projects/" + currentContext.key
-            }
-            className={({ isActive }) =>
-              css("pf-c-nav__link", isActive ? "pf-m-current" : "")
-            }
-          >
-            Documentos
-          </NavLink>
-        </NavList>
+            {projectsQuery.data?.map((project) => (
+              <ContextSelectorItem
+                key={project.name}
+                onClick={() => {
+                  toggleCtxSelector();
+                  navigateToSelectedProject(project.name);
+                }}
+              >
+                {project.name}
+              </ContextSelectorItem>
+            ))}
+          </ContextSelector>
+
+          {isCreateProjectWizardOpen && (
+            <AddProjectWizard
+              onSave={(project) => {
+                toggleCreateProjectWizard();
+                navigateToSelectedProject(project.name);
+              }}
+              onClose={toggleCreateProjectWizard}
+            />
+          )}
+        </div>
+
+        {routeParams?.params.projectName && (
+          <>
+            <NavList>
+              <NavLink
+                to={`/projects/${routeParams.params.projectName}/settings`}
+                className={({ isActive }) => {
+                  return css("pf-c-nav__link", isActive ? "pf-m-current" : "");
+                }}
+              >
+                Configuración
+              </NavLink>
+              <NavLink
+                to={`/projects/${routeParams.params.projectName}/certificates`}
+                className={({ isActive }) => {
+                  return css("pf-c-nav__link", isActive ? "pf-m-current" : "");
+                }}
+              >
+                Certificados
+              </NavLink>
+              <NavLink
+                to={`/projects/${routeParams.params.projectName}/sunat`}
+                className={({ isActive }) => {
+                  return css("pf-c-nav__link", isActive ? "pf-m-current" : "");
+                }}
+              >
+                SUNAT
+              </NavLink>
+              <NavLink
+                to={`/projects/${routeParams.params.projectName}/companies`}
+                className={({ isActive }) => {
+                  return css("pf-c-nav__link", isActive ? "pf-m-current" : "");
+                }}
+              >
+                Empresas
+              </NavLink>
+              <NavLink
+                to={`/projects/${routeParams.params.projectName}/documents`}
+                className={({ isActive }) => {
+                  return css("pf-c-nav__link", isActive ? "pf-m-current" : "");
+                }}
+              >
+                Documentos
+              </NavLink>
+            </NavList>
+          </>
+        )}
       </Nav>
     );
   };

application/src/main/webapp/src/pages/getting-started/getting-started.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import {
+  Bullseye,
+  Button,
+  EmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateSecondaryActions,
+  SelectVariant,
+  Title,
+} from "@patternfly/react-core";
+
+import FileCodeIcon from "@patternfly/react-icons/dist/esm/icons/file-code-icon";
+import { SimpleSelect, useModal } from "@project-openubl/lib-ui";
+import { ProjectDto } from "api/models";
+import { AddProjectWizard } from "shared/components";
+import { useNavigate } from "react-router-dom";
+import { useProjectsQuery } from "queries/projects";
+
+export const GettingStarted: React.FC = () => {
+  const navigate = useNavigate();
+  const projectModal = useModal<"ADD", ProjectDto>();
+
+  const projectsQuery = useProjectsQuery();
+
+  return (
+    <>
+      <Bullseye>
+        <EmptyState>
+          <EmptyStateIcon icon={FileCodeIcon} />
+          <Title headingLevel="h4" size="lg">
+            Bienvenido a Ublhub
+          </Title>
+          <EmptyStateBody>
+            Selecciona un proyecto o crea uno nuevo.
+          </EmptyStateBody>
+          <Button variant="primary" onClick={() => projectModal.open("ADD")}>
+            Crear proyecto
+          </Button>
+          <EmptyStateSecondaryActions>
+            <SimpleSelect
+              toggleId="project-list-toggle"
+              variant={SelectVariant.single}
+              aria-label="Select project"
+              id="project-list"
+              options={(projectsQuery.data || []).map((elem) => elem.name)}
+              onChange={(selection) => {
+                navigate(`/projects/${selection}`);
+              }}
+            />
+          </EmptyStateSecondaryActions>
+        </EmptyState>
+      </Bullseye>
+      {projectModal.isOpen && projectModal.isAction("ADD") && (
+        <AddProjectWizard
+          onSave={(project) => {
+            projectModal.close();
+            navigate(`/projects/${project.name}`);
+          }}
+          onClose={projectModal.close}
+        />
+      )}
+    </>
+  );
+};

application/src/main/webapp/src/pages/getting-started/index.ts

@@ -0,0 +1 @@
+export { GettingStarted as default } from "./getting-started";