Merge branch 'feature/167-display-genus-and-species-and-author-for-artensteckbrief' into 'develop'

Resolve "MS1 Nachbrenner: Gattung + Species + Autor als Titel für den Artensteckbrief"

Closes #167

See merge request rdm/biome/frontend!157

app/src/components/SpeciesCatalogContent.ts

 import TextEditorViewer from "../components/shared/editor/TextEditorViewer.vue";
 import {Component, Prop, Vue, Watch} from "vue-property-decorator";
 import {FamilyItem} from "@/types/transect";
+import store from "@/store";
 
 @Component({
     components: {
@@ -12,7 +13,7 @@ export default class SpeciesCatalogContent extends Vue {
         default: () => {
             return {};
         },
-    }) private SelectedItem!: [];
+    }) private SelectedItem!: FamilyItem[];
 
     private selectedParentItem: FamilyItem | null = null;
     private selectedChildItems: FamilyItem[] | null = null;
@@ -49,17 +50,32 @@ export default class SpeciesCatalogContent extends Vue {
 
     private getCols() {
         let cols = 4;
-        this.SelectedItem.forEach((item: any) => {
-            if (item.children.length === 0) {
+        let item;
+        for (item of this.SelectedItem) {
+            if (!item.children || item.children.length === 0) {
                 cols = 12;
             }
-        });
+        }
         return cols;
     }
 
     private showSpeciesDescription(item: FamilyItem) {
-        return (this.selectedParentItem !== null &&
-            this.selectedParentItem.children !== null && this.selectedParentItem.children.length === 0 &&
+        return (this.selectedParentItem !== null && this.selectedParentItem.children !== null &&
+            this.selectedParentItem.children !== undefined && this.selectedParentItem.children.length === 0 &&
             item !== null && item.characteristics_main_ger !== null);
     }
+
+    private getConcatSpeciesTitle(item: FamilyItem) {
+        const speciesItem = store.getters.getSpeciesByIdFromSpeciesList(item.ptname_id);
+        if (!speciesItem) {
+            return "";
+        }
+        return `${speciesItem.genus} ${speciesItem.species} ${speciesItem.author}`;
+    }
+
+    private emitItem(item: any) {
+        if (item) {
+            this.$emit('input', [item]);
+        }
+    }
 }

app/src/components/SpeciesCatalogContent.vue

@@ -5,11 +5,18 @@
                 <v-card class="mx-auto mb-2"
                         elevation="2"
                         shaped
-                        @click="$emit('input', [item])">
+                        @click="emitItem(item)">
                     <v-card-title class="black--text mt-8">
-                        <p class="ml-3">
-                            {{ item.label }}
-                        </p>
+                        <div v-if="showSpeciesDescription(item)">
+                            <p class="ml-3">
+                                {{ getConcatSpeciesTitle(item) }}
+                            </p>
+                        </div>
+                        <div v-else>
+                            <p class="ml-3">
+                                {{ item.label }}
+                            </p>
+                        </div>
                     </v-card-title>
                     <v-card-text>
                         <div v-if="item.illustration_image_medium"

app/src/components/SpeciesCatalogContentWithSidebar.ts

@@ -2,6 +2,7 @@ import {Component, Vue, Watch} from "vue-property-decorator";
 import store from "@/store";
 import SpeciesCatalogContent from "@/components/SpeciesCatalogContent.vue";
 import {TaxonomyService} from "@/helper/taxonomy.service.ts";
+import {FamilyItem} from "@/types/transect";
 
 @Component({
     components: {
@@ -13,7 +14,7 @@ export default class SpeciesCatalogContentWithSidebar extends Vue {
     private active: number[] = [];
     private open: number[] = [];
     private lastOpen: number[] = [];
-    private selectedItem: Array<{}> = [];
+    private selectedItem: FamilyItem[] = [];
 
     @Watch("selectedItem")
     private selectedItemWatcher(value: any) {
@@ -24,9 +25,11 @@ export default class SpeciesCatalogContentWithSidebar extends Vue {
 
     private mounted() {
         if (this.$route.params.id) {
-            const treeItem = store.getters.getSpeciesById(this.$route.params.id);
-            this.selectedItem.push(treeItem);
-            this.searchForItem(treeItem.label);
+            const treeItem = store.getters.getSpeciesByIdFromTreeList(this.$route.params.id);
+            if (treeItem && treeItem.label) {
+                this.selectedItem.push(treeItem);
+                this.searchForItem(treeItem.label);
+            }
         }
     }
 
@@ -43,6 +46,9 @@ export default class SpeciesCatalogContentWithSidebar extends Vue {
     };
 
     private searchForItem(value: string) {
+        if (!value) {
+            return;
+        }
         const items = store.getters.getSpeciesTreeList;
         items.forEach((first: any) => {
             this.openAndActiveItem(first, value);
@@ -114,8 +120,4 @@ export default class SpeciesCatalogContentWithSidebar extends Vue {
         this.active = [];
         this.active.push(itemID);
     }
-
-    private getItemDescription = async (PtNameId: number) => {
-        return await TaxonomyService.getInstance().getTaxonDescriptionByPtNameId(PtNameId);
-    }
 }

app/src/store/index.ts

@@ -48,7 +48,20 @@ const store = new Vuex.Store({
         getSpeciesTreeList: (state) => {
             return state.speciesTreeList;
         },
-        getSpeciesById: (state, ptNameId) => {
+        getSpeciesByIdFromSpeciesList: (state, ptNameId) => {
+            return (ptNameId: number) => {
+                let obj = null;
+                let species: any;
+
+                for (species of state.speciesList) {
+                    if (species.ptnameId == ptNameId) {
+                        return obj = species;
+                    }
+                }
+                return obj;
+            }
+        },
+        getSpeciesByIdFromTreeList: (state, ptNameId) => {
             return (ptNameId: number) => {
                 let obj = {};
                 let superFamily: FamilyItem;