Change in the view of activities (no more individual pages / removal …

…of links) if there are no activities (#479)

Overview of all product templates reduced to the external ones below the work aid index
Fixed display of project execution strategies
Fixed display of procedure building blocks
Restructuring of glossary entries (individual pages)

client/public/locales/de/translation.json

@@ -34,6 +34,7 @@
   },
   "text": {
     "insertTopicDescription": "Themenbeschreibungen einfügen",
-    "generateNavigation": "Erstelle Navigation"
+    "generateNavigation": "Erstelle Navigation",
+    "pleaseSelectSubChapter": "Bitte wählen Sie ein Unterkapitel."
   }
 }

client/src/components/projekthandbuch/documentation/content/Content.tsx

@@ -10,6 +10,7 @@ import {
   decodeXml,
   fixLinksInText,
   flatten,
+  getFigureDesignationFromText,
   getJsonDataFromXml,
   getMenuItemByAttributeValue,
   getSearchStringFromHash,
@@ -26,6 +27,7 @@ import { PageEntryContent } from './PageEntryContent';
 import { weitApiUrl } from '../../../app/App';
 import { HashLink } from 'react-router-hash-link';
 import { DataEntry, PageEntry, TableEntry } from '../Documentation';
+import { ProjectType } from '../../projekt/project';
 
 export function Content() {
   const [loading, setLoading] = useState(false);
@@ -59,6 +61,7 @@ export function Content() {
     activityId,
     templateDisciplineId,
     productDisciplineId,
+    glossaryEntryId,
     entryId,
     selectedIndexType,
   } = useDocumentation();
@@ -292,6 +295,18 @@ export function Content() {
     //eslint-disable-next-line
   }, [templateDisciplineId]);
 
+  useEffect(() => {
+    async function mount() {
+      if (glossaryEntryId) {
+        const content = await getGlossaryEntryContent();
+        setSelectedPageEntry(content);
+      }
+    }
+
+    void mount().then();
+    //eslint-disable-next-line
+  }, [glossaryEntryId]);
+
   useEffect(() => {
     async function mount() {
       if (entryId) {
@@ -496,6 +511,8 @@ export function Content() {
       const childText = jsonDataFromXml.children.find((child) => child.name === 'Text');
       if (childText) {
         textPart = decodeXml(childText.value);
+      } else {
+        textPart = t('text.pleaseSelectSubChapter');
       }
     }
 
@@ -535,7 +552,7 @@ export function Content() {
       id: jsonDataFromXml.attributes.id,
       // menuEntryId: jsonDataFromXml.attributes.id,
       header: jsonDataFromXml.attributes.name,
-      descriptionText: '',
+      descriptionText: t('text.pleaseSelectSubChapter'),
       tableEntries: tableEntries,
       // subPageEntries: subPageEntries,
     };
@@ -740,7 +757,10 @@ export function Content() {
     }
     /////////////////////////////
 
-    const tools = [...activities, ...products, ...activitiesToTools];
+    // To hide the links to the activities in the tools section of a product the id has to removed here
+    const activitiesWithoutId = activities.map(({ id, ...keepAttrs }) => keepAttrs);
+
+    const tools = [...activitiesWithoutId, ...products, ...activitiesToTools];
 
     if (tools.length > 0) {
       tableEntries.push({
@@ -1831,6 +1851,30 @@ export function Content() {
     return jsonDataFromXml.getElementsByTagName('Aktivität');
   }
 
+  async function getGlossaryEntryContent(): Promise<XMLElement[]> {
+    const expressionUrl =
+      weitApiUrl +
+      '/V-Modellmetamodell/mm_2021/V-Modellvariante/' +
+      tailoringParameter.modelVariantId +
+      '/Begriff/' +
+      glossaryEntryId;
+
+    const jsonDataFromXml = await getJsonDataFromXml(expressionUrl);
+
+    const description = decodeXml(jsonDataFromXml.getElementsByTagName('Erläuterung')[0]?.value);
+
+    const tableEntries: TableEntry[] = [];
+
+    //////////////////////////////////////////////
+
+    return {
+      id: jsonDataFromXml.attributes.id,
+      header: jsonDataFromXml.attributes.name,
+      descriptionText: description,
+      tableEntries: tableEntries,
+    };
+  }
+
   async function getTemplatesContent(): Promise<PageEntry> {
     const disciplineId = templateDisciplineId?.replace('td_', '');
     // get all products with externalTemplate info for templateDisciplineId
@@ -1875,7 +1919,6 @@ export function Content() {
 
         const jsonDataFromXml = await getJsonDataFromXml(externalTemplateUrl);
 
-        const templateId = jsonDataFromXml.attributes.id;
         const templateName = jsonDataFromXml.attributes.name;
         const templateUri = jsonDataFromXml.getElementsByTagName('URI')[0]?.value;
 
@@ -1986,10 +2029,31 @@ export function Content() {
       const methodReferences = activity.getElementsByTagName('MethodenreferenzRef');
       for (const methodReference of methodReferences) {
         if (methodReference.attributes.id === methodReferenceId) {
-          activitiesToTools.push({
-            id: activity.attributes.id,
-            title: activity.attributes.name,
-          });
+          /* The method and tool references (reference work aids) contain links to the corresponding activities.
+             As the activities are no longer part of the documentation (since version 2.4), the links cannot be resolved.
+             Instead of the activity, a link should therefore be created to the product linked to the activity.
+
+             -> So, if the activity id is not in navigation menu change linked site to products page of the activity.
+           */
+
+          const foundActivity = getMenuItemByAttributeValue(navigationData, 'key', activity.attributes.id);
+
+          if (foundActivity) {
+            activitiesToTools.push({
+              id: activity.attributes.id,
+              title: activity.attributes.name,
+            });
+          } else {
+            const products = activity.getElementsByTagName('ProduktRef');
+
+            for (const product of products) {
+              activitiesToTools.push({
+                id: product.attributes.id,
+                title: activity.attributes.name,
+                suffix: '(' + product.attributes.name + ')',
+              });
+            }
+          }
         }
       }
     }
@@ -2454,7 +2518,30 @@ export function Content() {
 
     let idCounter = 2000;
 
+    const title = decodeXml(jsonDataFromXml.attributes.name);
+    const projectType: ProjectType = jsonDataFromXml.getElementsByTagName('ProjekttypRef')[0]
+      ?.attributes as ProjectType;
+
     const sequence = decodeXml(jsonDataFromXml.getElementsByTagName('Ablauf')[0]?.value);
+    const figureDesignation = getFigureDesignationFromText(sequence);
+
+    const getFigureUrl =
+      weitApiUrl +
+      '/Tailoring/V-Modellmetamodell/mm_2021/V-Modellvariante/' +
+      tailoringParameter.modelVariantId +
+      '/Projekttyp/' +
+      projectType.id +
+      '/Projekttypvariante/' +
+      projectTypeVariantId +
+      '/Grafik/Abb:' +
+      figureDesignation +
+      '?' +
+      getProjectFeaturesString();
+
+    const imageTag = '<p><img alt="" id="1489155545306" src=' + getFigureUrl + '/></p>';
+    const imageDescriptionTag =
+      '<p style="margin-top: 0px;">' + '<i>Abbildung [' + figureDesignation + ']: ' + title + '</i></p>';
+
     const ablaufbausteinRefs: XMLElement[] = jsonDataFromXml.getElementsByTagName('AblaufbausteinRef');
 
     const ablaufbausteine = ablaufbausteinRefs.map((ablaufbausteinRef) => {
@@ -2482,7 +2569,8 @@ export function Content() {
       id: jsonDataFromXml.attributes.id,
       // menuEntryId: jsonDataFromXml.attributes.id,
       header: jsonDataFromXml.attributes.name,
-      descriptionText: replaceUrlInText(sequence, tailoringParameter, getProjectFeaturesString()),
+      descriptionText:
+        replaceUrlInText(sequence, tailoringParameter, getProjectFeaturesString()) + imageTag + imageDescriptionTag,
       tableEntries: tableEntries,
       // subPageEntries: subPageEntries,
     };

client/src/components/projekthandbuch/documentation/content/TableEntriesList.tsx

@@ -8,7 +8,7 @@ import { DataEntry } from '../Documentation';
 export function TableEntriesList(props: { inputData: DataEntry[] }) {
   const entries: JSX.Element[] = [];
 
-  props.inputData.map((entryItem: DataEntry) => {
+  props.inputData.map((entryItem: DataEntry, entryItemIndex: number) => {
     if (Array.isArray(entryItem)) {
       for (const entrySubItem of entryItem) {
         entries.push(
@@ -23,7 +23,7 @@ export function TableEntriesList(props: { inputData: DataEntry[] }) {
           </span>
         );
 
-        entrySubItem.dataEntries.map((innerEntryItem: DataEntry) => {
+        entrySubItem.dataEntries.map((innerEntryItem: DataEntry, innerEntryItemIndex: number) => {
           if (innerEntryItem?.id) {
             entries.push(
               <span style={{ marginRight: '20px', display: 'inline-flex' }} key={`table-item-${innerEntryItem.id}`}>
@@ -34,20 +34,30 @@ export function TableEntriesList(props: { inputData: DataEntry[] }) {
               </span>
             );
           } else {
-            entries.push(<span style={{ marginRight: '20px' }}>{parse(fixLinksInText(innerEntryItem.title))}</span>);
+            entries.push(
+              <span style={{ marginRight: '20px' }} key={`table-item-entrySubItem-${innerEntryItemIndex}`}>
+                {parse(fixLinksInText(innerEntryItem.title))}
+                {innerEntryItem.suffix && <span style={{ marginLeft: '5px' }}>{innerEntryItem.suffix}</span>}
+              </span>
+            );
           }
         });
       }
     } else {
       if (entryItem?.id) {
         entries.push(
-          <span style={{ marginRight: '20px', display: 'inline-flex' }} key={`table-item-${entryItem.id}`}>
+          <span style={{ marginRight: '20px', display: 'inline-flex' }} key={`table-item-entryItem-${entryItem.id}`}>
             <Link to={`/documentation/${entryItem.id}${getSearchStringFromHash()}`}>{entryItem.title}</Link>
             {entryItem.suffix && <span style={{ marginLeft: '5px' }}>{entryItem.suffix}</span>}
           </span>
         );
       } else {
-        entries.push(<span style={{ marginRight: '20px' }}>{parse(fixLinksInText(entryItem.title))}</span>);
+        entries.push(
+          <span style={{ marginRight: '20px' }} key={`table-item-entryItem-${entryItemIndex}`}>
+            {parse(fixLinksInText(entryItem.title))}
+            {entryItem.suffix && <span style={{ marginLeft: '5px' }}>{entryItem.suffix}</span>}
+          </span>
+        );
       }
     }
   });

client/src/components/projekthandbuch/documentation/navigation/Navigation.tsx

@@ -50,6 +50,7 @@ export enum NavTypeEnum {
   TEMPLATE_DISCIPLINE = 'templateDiscipline',
   PRODUCT_DISCIPLINE = 'productDiscipline',
   SAMPLE_TEXT = 'sampleText',
+  GLOSSARY_ENTRY = 'glossaryEntry',
 }
 
 export enum IndexTypeEnum {
@@ -108,7 +109,7 @@ export interface SectionDetail {
   replacedContent?: NavMenuItem[];
   mergedChildren?: NavMenuItem[];
   addedChildren?: NavMenuItem[];
-  indexItem?: { key: string; label: string; onClick: () => any };
+  indexItem?: { key: string; label: string; children: NavMenuItem[]; onClick?: () => any; onTitleClick?: () => any };
 }
 
 export type NavMenuItem = {
@@ -221,11 +222,20 @@ export function Navigation() {
           i++;
           // }
         }
+
+        // cleanup menu clicks because inner nodes of the ant tree throw onTitleClick event
+        // and leaf nodes throw onClick event
         if (item.children && item.children.length > 0) {
-          item.onTitleClick = (item: any) => handleSelectedItem(item.key);
+          // Überschreibt ansonsten das onTitleClick aus dem Index:Arbeitshilfen
+          if (!item.hasOwnProperty('onTitleClick')) {
+            item.onTitleClick = (item: any) => handleSelectedItem(item.key);
+          }
           await addParentRecursive(item.children);
         } else {
-          item.onClick = (item: any) => handleSelectedItem(item.key);
+          // Überschreibt ansonsten das onClick aus dem Index:Arbeitshilfen
+          if (!item.hasOwnProperty('onClick')) {
+            item.onClick = (item: any) => handleSelectedItem(item.key);
+          }
           item.children = undefined;
         }
       }
@@ -276,6 +286,11 @@ export function Navigation() {
         addedChildren = getDisciplineGroup(childItem.parent, jsonDataFromXml).filter((navMenuItem) =>
           disciplineIds.includes(navMenuItem.key)
         );
+      } else if (
+        generatedContent === 'Elemente:Produktvorlagen_und_Beispielprodukte_nach_Disziplinen' &&
+        childItem.parent
+      ) {
+        addedChildren = await getTemplates(childItem);
       } else {
         switch (generatedContent) {
           case 'Index:Produkte': {
@@ -314,14 +329,21 @@ export function Navigation() {
             indexItem = {
               key: childItem.key,
               label: childItem.label,
-              onClick: () => setSelectedIndexType(IndexTypeEnum.WORK_AIDS),
+              children: childItem.children,
+              onClick:
+                childItem.children?.length > 0 ? () => false : () => setSelectedIndexType(IndexTypeEnum.WORK_AIDS),
+              onTitleClick: () => setSelectedIndexType(IndexTypeEnum.WORK_AIDS),
             };
             break;
           }
         }
       }
     }
 
+    if (childItem.label === 'Glossar') {
+      addedChildren = await getGlossaryEntries(childItem);
+    }
+
     if (
       childItem.parent?.label === 'Produktabhängigkeiten' &&
       childItem.label === 'Inhaltliche Produktabhängigkeiten'
@@ -797,6 +819,23 @@ export function Navigation() {
     });
   }
 
+  async function getGlossaryEntries(target: NavMenuItem): Promise<NavMenuItem[]> {
+    const expressionsUrl =
+      weitApiUrl + '/V-Modellmetamodell/mm_2021/V-Modellvariante/' + tailoringParameter.modelVariantId + '/Begriff/';
+
+    const jsonDataFromXml = await getJsonDataFromXml(expressionsUrl);
+
+    return jsonDataFromXml.getElementsByTagName('Begriff').map((expression) => {
+      return {
+        key: expression.attributes.id,
+        parent: target,
+        label: expression.attributes.name,
+        dataType: NavTypeEnum.GLOSSARY_ENTRY,
+        onClick: (item: any) => handleSelectedItem(item.key),
+      };
+    });
+  }
+
   async function getTemplates(target: NavMenuItem): Promise<NavMenuItem[]> {
     const templatesUrl =
       weitApiUrl +
@@ -923,6 +962,7 @@ export function Navigation() {
         label: projectTypeVariantValue.attributes.name,
         dataType: NavTypeEnum.PROJECT_TYPE_VARIANT_SEQUENCE, // TODO: oder auch ProjectExecutionStrategy
         onClick: (item: any) => handleSelectedItem(item.key), // TODO: different Types
+        onTitleClick: (item: any) => handleSelectedItem(item.key), // TODO: different Types
       });
     });
 

client/src/context/DocumentationContext.tsx

@@ -34,6 +34,7 @@ type DocumentationSession = {
   activityId: string | null;
   templateDisciplineId: string | null;
   productDisciplineId: string | null;
+  glossaryEntryId: string | null;
   entryId: string | null;
   getNavigationPath: Function;
   onRouteChanged: Function;
@@ -80,6 +81,7 @@ const DocumentationSessionContextProvider = ({ children }: DocumentationSessionP
   const [activityId, setActivityId] = useState<string | null>(null);
   const [templateDisciplineId, setTemplateDisciplineId] = useState<string | null>(null);
   const [productDisciplineId, setProductDisciplineId] = useState<string | null>(null);
+  const [glossaryEntryId, setGlossaryEntryId] = useState<string | null>(null);
   const [entryId, setEntryId] = useState<string | null>(null);
 
   const value: DocumentationSession = {
@@ -108,6 +110,7 @@ const DocumentationSessionContextProvider = ({ children }: DocumentationSessionP
     activityId,
     templateDisciplineId,
     productDisciplineId,
+    glossaryEntryId,
     entryId,
     getNavigationPath,
     onRouteChanged,
@@ -156,6 +159,7 @@ const DocumentationSessionContextProvider = ({ children }: DocumentationSessionP
     setActivityId(null);
     setTemplateDisciplineId(null);
     setProductDisciplineId(null);
+    setGlossaryEntryId(null);
     setEntryId(null);
   }
 
@@ -206,6 +210,8 @@ const DocumentationSessionContextProvider = ({ children }: DocumentationSessionP
         setActivityId(foundMenuItem.key);
       } else if (foundMenuItem.dataType === NavTypeEnum.TEMPLATE_DISCIPLINE) {
         setTemplateDisciplineId(foundMenuItem.key);
+      } else if (foundMenuItem.dataType === NavTypeEnum.GLOSSARY_ENTRY) {
+        setGlossaryEntryId(foundMenuItem.key);
       } else {
         setEntryId(foundMenuItem.key);
       }