Merge branch 'feature/159-artenkatalog-fix-null-bug' into 'develop'

Resolve "Artenkatalog: Fix null bug"

Closes #159

See merge request rdm/biome/frontend!151

app/src/components/SpeciesCatalogContent.ts

@@ -3,6 +3,7 @@ import {Component, Prop, Vue, Watch} from "vue-property-decorator";
 import store from "@/store";
 import VueMarkdown from "vue-markdown";
 import MarkdownViewer from "@/components/MarkdownViewer.vue";
+import {FamilyItem} from "@/types/transect";
 
 @Component({
     components: {TextEditorViewer, VueMarkdown, MarkdownViewer},
@@ -19,6 +20,40 @@ export default class SpeciesCatalogContent extends Vue {
         },
     }) private SelectedItem!: [];
 
+    private selectedParentItem: FamilyItem | null = null;
+    private selectedChildItems: FamilyItem[] | null = null;
+
+    @Watch("SelectedItem")
+    private selectedItemWatcher(selectedItem: any) {
+        console.log(selectedItem)
+        if (selectedItem === null || selectedItem === undefined || selectedItem.length === 0) {
+            // if nothing selected, do not show children
+            // change here if needed
+            this.selectedParentItem = null;
+            this.selectedChildItems = null;
+            return;
+        }
+
+        try {
+            this.selectedParentItem = selectedItem[0];
+            const childItems: FamilyItem[] = [];
+
+            if (selectedItem[0].children !== null && selectedItem[0].children !== undefined &&
+                selectedItem[0].children.length > 0) {
+
+                for (const child of selectedItem[0].children) {
+                    childItems.push(child);
+                }
+            } else {
+                childItems.push(selectedItem[0])
+            }
+            this.selectedChildItems = childItems;
+        } catch (error) {
+            this.selectedParentItem = null;
+            this.selectedChildItems = null;
+        }
+    }
+
     // todo: check if we still need this
     private getSpeciesItems() {
         const speciesFamilyList = store.getters.getSpeciesTreeList;
@@ -52,38 +87,6 @@ export default class SpeciesCatalogContent extends Vue {
         });
     }
 
-    private getSelectedParentChildren() {
-        if (this.SelectedItem.length === 0) {
-            // if nothing selected, do not show children
-            // change here if needed
-            return null;
-        }
-        const items: Array<{}> = [];
-        this.SelectedItem.forEach((item: any) => {
-            if (item.children.length === 0) {
-                items.push(item)
-            } else {
-                item.children.forEach((first: any) => {
-                    items.push(first);
-                });
-            }
-        });
-        return items;
-    }
-
-    private getSelectedParentItem() {
-        if (this.SelectedItem.length === 0) {
-            // if nothing selected, do not show content
-            // change here if needed
-            return null;
-        }
-        let itemFirst = null;
-        this.SelectedItem.forEach((item: any) => {
-            itemFirst = item;
-        });
-        return itemFirst;
-    }
-
     private getCols() {
         let cols = 4;
         this.SelectedItem.forEach((item: any) => {
@@ -93,4 +96,10 @@ export default class SpeciesCatalogContent extends Vue {
         });
         return cols;
     }
+
+    private showSpeciesDescription(item: FamilyItem) {
+        return (this.selectedParentItem !== null &&
+            this.selectedParentItem.children !== null && this.selectedParentItem.children.length === 0 &&
+            item !== null && item.characteristics_main_ger !== null);
+    }
 }

app/src/components/SpeciesCatalogContent.vue

 <template>
-    <v-container v-if="getSelectedParentItem()">
+    <v-container v-if="selectedParentItem !== null || selectedParentItem !== undefined">
         <v-row class="text-start mb-8">
-            <v-col v-for="(item, index) in getSelectedParentChildren()" :key="index" :cols="getCols()">
+            <v-col v-for="(item, index) in selectedChildItems" :key="index" :cols="getCols()">
                 <v-card class="mx-auto mb-2"
                         elevation="2"
                         shaped
@@ -26,18 +26,18 @@
                         <div class="black--text ml-4">
                             {{ item.description_short_ger }}
                         </div>
-                        <div v-if="getSelectedParentItem().children.length === 0 && item && item.characteristics_main_ger" class="black--text ml-4">
+                        <div v-if="showSpeciesDescription(item)" class="black--text ml-4">
                             <MarkdownViewer :value="item.characteristics_main_ger"/>
-<!--                            <TextEditorViewer :EditorTextViewer="item.characteristics_main_ger" />-->
                         </div>
                     </v-card-text>
                 </v-card>
             </v-col>
         </v-row>
         <v-row>
-            <div v-if="getSelectedParentItem().children.length !== 0" class="black--text ml-4">
-                <VueMarkdown :source="getSelectedParentItem().characteristics_main_ger"/>
-<!--                <TextEditorViewer :EditorTextViewer="getSelectedParentItem().characteristics_main_ger" />-->
+            <div v-if="selectedParentItem !== null && selectedParentItem !== undefined &&
+            selectedParentItem.children !== null && selectedParentItem.children !== undefined &&
+            selectedParentItem.children.length !== 0" class="black--text ml-4">
+                <VueMarkdown :source="selectedParentItem.characteristics_main_ger"/>
             </div>
         </v-row>
     </v-container>