redirect to child menu if parent content is empty (#488)

Adapted menu background colors
DiPA-Projekt · Jun 27, 2024 · 0857658 · 0857658
1 parent ee8fc57
commit 0857658
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 42 deletions.
diff --git a/client/public/style.css b/client/public/style.css
@@ -141,6 +141,15 @@ ul.sideMenu > li > ul > li > ul > li > div {
   color: rgba(0, 0, 0, 0.88);
 }
 
-.disable-link{
+.disable-link {
   pointer-events: none;
 }
+
+/* side background color like menu background color */
+.ant-layout-sider-children {
+  background: #fafafa;
+}
+
+.ant-layout-header {
+  background: #fff;
+}
diff --git a/client/src/components/header/SiteHeader.tsx b/client/src/components/header/SiteHeader.tsx
@@ -106,7 +106,6 @@ export const SiteHeader = (props: any) => {
         <Col span={20}>
           <Menu
             mode="horizontal"
-            theme="dark"
             defaultSelectedKeys={[props.selectedKey]}
             selectedKeys={[current]}
             // onClick={handleMenuClick}

diff --git a/client/src/components/projekthandbuch/documentation/content/Content.tsx b/client/src/components/projekthandbuch/documentation/content/Content.tsx
@@ -4,7 +4,7 @@ import parse, { domToReact } from 'html-react-parser';
 import { Anchor, Col, FloatButton, Layout, Row, Spin, Tag } from 'antd';
 import React, { useEffect, useState } from 'react';
 // import { DataEntry, PageEntry, TableEntry } from '@dipa-projekt/projektassistent-openapi';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { useDocumentation } from '../../../../context/DocumentationContext';
 import {
   decodeXml,
@@ -77,8 +77,11 @@ export function Content() {
     glossaryEntryId,
     entryId,
     selectedIndexType,
+    setSelectedItemKey,
   } = useDocumentation();
 
+  const navigate = useNavigate();
+
   useEffect(() => {
     if (selectedPageEntry?.subPageEntries) {
       console.log('selectedPageEntry?.subPageEntries set');
@@ -99,14 +102,10 @@ export function Content() {
   }, [productId]);
 
   useEffect(() => {
-    async function mount() {
-      if (productDisciplineId) {
-        const content = await getProductDisciplineContent();
-        setSelectedPageEntry(content);
-      }
+    if (productDisciplineId) {
+      redirectToFirstChildWithContent(productDisciplineId);
     }
 
-    void mount().then();
     //eslint-disable-next-line
   }, [productDisciplineId]);
 
@@ -539,6 +538,9 @@ export function Content() {
       const childText = jsonDataFromXml.children.find((child) => child.name === 'Text');
       if (childText) {
         textPart = decodeXml(childText.value);
+      } else if (jsonDataFromXml.children.length > 0) {
+        // redirect to first child with content
+        redirectToFirstChildWithContent(sectionId);
       } else {
         textPart = t('text.pleaseSelectSubChapter');
       }
@@ -554,38 +556,6 @@ export function Content() {
     };
   }
 
-  async function getProductDisciplineContent(): Promise<PageEntry> {
-    const disciplineId = productDisciplineId?.replace('productDiscipline_', '');
-
-    const projectTypeUrl =
-      weitApiUrl +
-      '/Tailoring/V-Modellmetamodell/mm_2021/V-Modellvariante/' +
-      tailoringParameter.modelVariantId +
-      '/Projekttyp/' +
-      tailoringParameter.projectTypeId +
-      '/Projekttypvariante/' +
-      tailoringParameter.projectTypeVariantId +
-      '/Disziplin/' +
-      disciplineId +
-      '?' +
-      getProjectFeaturesString();
-
-    const jsonDataFromXml = await getJsonDataFromXml(projectTypeUrl);
-
-    const tableEntries: TableEntry[] = [];
-
-    //////////////////////////////////////////////
-
-    return {
-      id: jsonDataFromXml.attributes.id,
-      // menuEntryId: jsonDataFromXml.attributes.id,
-      header: jsonDataFromXml.attributes.name,
-      descriptionText: t('text.pleaseSelectSubChapter'),
-      tableEntries: tableEntries,
-      // subPageEntries: subPageEntries,
-    };
-  }
-
   async function getDisciplineContent(): Promise<PageEntry> {
     const projectTypeUrl =
       weitApiUrl +
@@ -2847,6 +2817,21 @@ export function Content() {
     };
   }
 
+  function redirectToFirstChildWithContent(sectionId: string) {
+    const currentMenuItem = getMenuItemByAttributeValue(navigationData, 'key', sectionId);
+    const currentChildren = currentMenuItem?.children;
+
+    if (currentChildren?.length > 0) {
+      const childId = currentChildren[0].key;
+
+      if (childId) {
+        setSelectedItemKey(childId);
+
+        navigate(`/documentation/${childId}${getSearchStringFromHash()}`);
+      }
+    }
+  }
+
   return (
     <>
       <Spin spinning={loading}>

diff --git a/client/src/components/projekthandbuch/documentation/navigation/Navigation.tsx b/client/src/components/projekthandbuch/documentation/navigation/Navigation.tsx
@@ -150,7 +150,6 @@ export function Navigation() {
   } = useDocumentation();
 
   const navigate = useNavigate();
-  // const location = useLocation();
 
   const [loading, setLoading] = useState(false);
 
@@ -172,6 +171,19 @@ export function Navigation() {
     //eslint-disable-next-line
   }, [tailoringParameter.modelVariantId]);
 
+  useEffect(() => {
+    if (navigationData.length > 0) {
+      const firstMenuItemKey = navigationData[0].key;
+      if (firstMenuItemKey) {
+        setSelectedItemKey(firstMenuItemKey);
+
+        navigate(`/documentation/${firstMenuItemKey}${getSearchStringFromHash()}`);
+      }
+    }
+
+    //eslint-disable-next-line
+  }, [navigationData]);
+
   // https://vm-api.weit-verein.de/V-Modellmetamodell/mm_2021/V-Modellvariante/c62d12f444739b2/Kapitel
 
   // function getProjectFeaturesString(): string {