From 2986c819c12db68d773a0364b0728e0ffe100125 Mon Sep 17 00:00:00 2001
From: Jens Jonas <j.jonas@global-communication.de>
Date: Wed, 15 Feb 2023 12:02:33 +0100
Subject: [PATCH] Add selections for items with non-unique URLs Change url id
 from geocase_id to id

---
 package-lock.json                             |   31 +-
 src/components/MapWrapper.vue                 |    2 +-
 src/components/detail_view/HeadlineBox.vue    |  100 +
 src/components/front_page/MglPopupWrapper.vue |    4 +-
 src/components/image/ImageOverflow.vue        |    2 +-
 src/components/tabs/TabTable.vue              |    4 +-
 src/middleware/SearchService.js               |    5 +-
 src/store/modules/detail/getters.js           |    4 +
 src/views/DetailView.vue                      | 1875 ++++++++---------
 vue.config.js                                 |    1 +
 10 files changed, 1068 insertions(+), 960 deletions(-)
 create mode 100644 src/components/detail_view/HeadlineBox.vue

diff --git a/package-lock.json b/package-lock.json
index 25144b6..ecdaf42 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8208,6 +8208,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/esm": {
+      "version": "3.2.25",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+      "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/espree": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
@@ -12070,11 +12080,11 @@
       "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
     },
     "node_modules/leaflet.markercluster": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",
-      "integrity": "sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
       "peerDependencies": {
-        "leaflet": "~1.3.1"
+        "leaflet": "^1.3.1"
       }
     },
     "node_modules/left-pad": {
@@ -26241,6 +26251,13 @@
       "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
       "dev": true
     },
+    "esm": {
+      "version": "3.2.25",
+      "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+      "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+      "dev": true,
+      "peer": true
+    },
     "espree": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
@@ -29318,9 +29335,9 @@
       "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw=="
     },
     "leaflet.markercluster": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.4.1.tgz",
-      "integrity": "sha512-ZSEpE/EFApR0bJ1w/dUGwTSUvWlpalKqIzkaYdYB7jaftQA/Y2Jav+eT4CMtEYFj+ZK4mswP13Q2acnPBnhGOw==",
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
       "requires": {}
     },
     "left-pad": {
diff --git a/src/components/MapWrapper.vue b/src/components/MapWrapper.vue
index 46e80a7..be7370e 100644
--- a/src/components/MapWrapper.vue
+++ b/src/components/MapWrapper.vue
@@ -295,7 +295,7 @@ export default {
                 marker.on("click", () => {
                   if (this.isDetailView)
                     window.open(item.recordURI, "RecordUriWindow");
-                  else this.$router.push({ path: `specimen/${encodeURIComponent(item.geocase_id)}` });
+                  else this.$router.push({ path: `specimen/${encodeURIComponent(item.id)}` });
                 });
             }
             if (item.locality) {
diff --git a/src/components/detail_view/HeadlineBox.vue b/src/components/detail_view/HeadlineBox.vue
new file mode 100644
index 0000000..9692777
--- /dev/null
+++ b/src/components/detail_view/HeadlineBox.vue
@@ -0,0 +1,100 @@
+<template>
+    <div>
+        <v-row justify="space-between">
+            <v-col>
+                <div class="mb-1">
+                    <template v-if="isItemFossil || isItemMineral || isItemRock || isItemMeteorite">
+                      <span class="mr-2">
+                        <v-icon small color="primary" v-if="isItemFossil">fas fa-fish</v-icon>
+                        <v-icon small color="primary" v-else-if="isItemMineral">far fa-gem</v-icon>
+                        <v-icon small color="primary" v-else-if="isItemRock">fas fa-mountain</v-icon>
+                        <v-icon small color="primary" v-else-if="isItemMeteorite">fas fa-meteor</v-icon>
+                      </span>
+
+                        <span>{{ $t(`detail.specimenType.${getSpecimenType}`) }}</span>
+                    </template>
+
+                    <template v-if="(isItemFossil ||isItemMineral || isItemRock || isItemMeteorite) && (item.collectioncode || item.unitid)">
+                        &ndash;
+                    </template>
+
+                    <span class="font-weight-bold" v-if="item.collectioncode || item.unitid">
+                        <span v-if="item.collectioncode">{{ item.collectioncode }}</span>
+                        <template v-if="item.collectioncode && item.unitid">{{ '&nbsp;' }}</template>
+                        <span v-if="item.unitid">{{ item.unitid }}</span>
+                    </span>
+                </div>
+
+                <h1 :class="{ 'font-italic': isItemFossil }" class="font-weight-bold mb-1" style="font-size: 2rem" v-if="item.fullscientificname">
+                    {{ item.fullscientificname }}
+                </h1>
+
+                <h2 style="font-size: 1.25rem" v-if="filteredNames.length > 0">
+                    <span class="font-weight-regular">{{ $t("detail.otherIdentification") }}<span v-if="filteredNames.length > 1">s</span>:</span>
+                    <span :class="{ 'font-italic': isItemFossil }" v-for="(entity, index) in filteredNames" :key="index">
+                      <span class="font-weight-bold">{{ entity }}</span>
+                      <span class="mx-1" v-if="index < filteredNames.length - 1">|</span>
+                    </span>
+                </h2>
+
+                <div v-if="!item.fullscientificname && !filteredNames">
+                    GeoCASe ID: {{ item.geocase_id }}
+                </div>
+            </v-col>
+
+            <v-col v-if="logoURI" cols="auto">
+                <v-img :src="logoURI" :max-height="$vuetify.breakpoint.mdAndDown ? '75' : '100'" :max-width="$vuetify.breakpoint.mdAndDown ? '75' : '100'" contain :alt="`${item.datasetowner} logo`"></v-img>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+
+  export default {
+    name: 'DetailViewHeadlineBox',
+    props: {
+      item: {
+        type: Object,
+        required: true
+      },
+      logoURI: {}
+    },
+    computed: {
+      isItemFossil () {
+        return this.item.recordbasis === 'Fossil'
+      },
+      isItemMineral () {
+        return this.item.recordbasis === 'Mineral'
+      },
+      isItemRock () {
+        return this.item.recordbasis === 'Rock'
+      },
+      isItemMeteorite () {
+        return this.item.recordbasis === 'Meteorite'
+      },
+      filteredNames () {
+        if (this.item.names) {
+          return this.item.names.filter((name) => name !== this.item.fullscientificname)
+        }
+        return []
+      },
+      getSpecimenType () {
+        let type = "fossil"
+        if (this.isItemMineral) {
+          type = "mineral"
+        } else {
+          if (this.isItemRock) {
+            type = "rock"
+          } else {
+            if (this.isItemMeteorite) {
+              type = "meteorite"
+            }
+          }
+        }
+        return type
+      }
+    }
+  }
+
+</script>
\ No newline at end of file
diff --git a/src/components/front_page/MglPopupWrapper.vue b/src/components/front_page/MglPopupWrapper.vue
index c068340..6031e43 100644
--- a/src/components/front_page/MglPopupWrapper.vue
+++ b/src/components/front_page/MglPopupWrapper.vue
@@ -46,7 +46,7 @@
             <router-link
               class="icon-link"
               style="text-decoration: unset"
-              :to="{ path: `specimen/${encodeURIComponent(item.geocase_id)}` }"
+              :to="{ path: `specimen/${encodeURIComponent(item.id)}` }"
               :title="$t('search.goToDetailView')"
             >
               <v-icon
@@ -79,7 +79,7 @@
           <template v-slot:item.unitid="{ item }">
             <router-link
               style="text-decoration: unset"
-              :to="{ path: `specimen/${encodeURIComponent(item.geocase_id)}` }"
+              :to="{ path: `specimen/${encodeURIComponent(item.id)}` }"
               :title="$t('search.goToDetailView')"
             >
               {{ item.unitid }}
diff --git a/src/components/image/ImageOverflow.vue b/src/components/image/ImageOverflow.vue
index 80f4968..8c3b9bd 100644
--- a/src/components/image/ImageOverflow.vue
+++ b/src/components/image/ImageOverflow.vue
@@ -114,7 +114,7 @@
                   <router-link
                     class="text-decoration-none"
                     :to="{
-                      path: `specimen/${images[currentIndex].geocase_id}`,
+                      path: `specimen/${images[currentIndex].id}`,
                     }"
                     >{{ $t("imageGallery.goToSpecimenView") }}</router-link
                   >
diff --git a/src/components/tabs/TabTable.vue b/src/components/tabs/TabTable.vue
index 191e29d..51c34fb 100644
--- a/src/components/tabs/TabTable.vue
+++ b/src/components/tabs/TabTable.vue
@@ -114,7 +114,7 @@
         <router-link
           class="icon-link"
           style="text-decoration: unset"
-          :to="{ path: `specimen/${encodeURIComponent(item.geocase_id)}` }"
+          :to="{ path: `specimen/${encodeURIComponent(item.id)}` }"
           :title="$t('search.goToDetailView')"
         >
           <v-icon small color="primary" v-if="getItemType(item) === 'fossil'"
@@ -141,7 +141,7 @@
       <template v-slot:item.unitid="{ item }">
         <router-link
           style="text-decoration: unset"
-          :to="{ path: `specimen/${encodeURIComponent(item.geocase_id)}` }"
+          :to="{ path: `specimen/${encodeURIComponent(item.id)}` }"
           :title="$t('search.goToDetailView')"
         >
           {{ item.unitid }}
diff --git a/src/middleware/SearchService.js b/src/middleware/SearchService.js
index f8a351c..efb4a93 100644
--- a/src/middleware/SearchService.js
+++ b/src/middleware/SearchService.js
@@ -35,7 +35,10 @@ class SearchService {
 
   static async getDetailView(id) {
     try {
-      let url = `${API_URL}?q=geocase_id:"${decodeURIComponent(id)}"`;
+      const searchValue = decodeURIComponent(id);
+      const searchField = /^\d+$/.test(searchValue) ? 'id' : 'geocase_id'
+
+      const url = `${API_URL}?q=${searchField}:"${decodeURIComponent(id)}"`;
 
       const res = await axios.get(url);
       return res.data;
diff --git a/src/store/modules/detail/getters.js b/src/store/modules/detail/getters.js
index bdef885..e0fd325 100644
--- a/src/store/modules/detail/getters.js
+++ b/src/store/modules/detail/getters.js
@@ -13,6 +13,10 @@ const getters = {
     return getters.itemExists ? state.response[0] : [];
   },
 
+  items: (state, getters) => {
+    return state.response ?? [];
+  },
+
   imageExists: (state, getters) => {
     return !!(getters.itemExists && getters.item && getters.item.images);
   },
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index f79fd11..5c95067 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -1,1009 +1,992 @@
 <template>
-  <v-container class="detail-view" v-if="!isLoading">
-    <GoBackButton />
-
-    <v-row class="mx-0" justify="center" v-if="!itemExists">
-      <v-col cols="12" style="max-width: 500px">
-        <v-alert
-          class="mb-0"
-          text
-          border="left"
-          icon="fas fa-search"
-          color="error"
-        >
-          <span v-if="showError" v-html="error" />
-          <span
-            v-else
-            v-html="
+    <v-container class="detail-view" v-if="!isLoading">
+        <GoBackButton />
+
+        <v-row class="mx-0" justify="center" v-if="!itemExists">
+            <v-col cols="12" style="max-width: 500px">
+                <v-alert
+                        class="mb-0"
+                        text
+                        border="left"
+                        icon="fas fa-search"
+                        color="error"
+                >
+                    <span v-if="showError" v-html="error" />
+                    <span
+                            v-else
+                            v-html="
               $t('detail.noResults', {
                 id: encodeURIComponent($route.params.id),
               })
             "
-          />
-        </v-alert>
-      </v-col>
-    </v-row>
-
-    <v-card class="px-6 py-4" shaped v-if="itemExists">
-      <v-row>
-        <!-- TITLE, TABLE and TABLE SECONDARY -->
-        <v-col cols="12" :sm="imageExists || localityExists ? 6 : 12">
-          <!-- TITLE -->
-          <v-card>
-            <v-card-title class="primary--text" style="word-break: break-word">
-              <div
-                class="
-                  d-flex
-                  justify-start
-                  flex-wrap flex-grow-1
-                  justify-space-between
-                "
-              >
-                <div class="d-flex flex-column flex-nowrap">
-                  <div class="mb-1">
-                    <span
-                      v-if="
-                        isItemFossil ||
-                        isItemMineral ||
-                        isItemRock ||
-                        isItemMeteorite
-                      "
-                    >
-                      <span class="mr-2">
-                        <v-icon small color="primary" v-if="isItemFossil"
-                          >fas fa-fish</v-icon
-                        >
-                        <v-icon small color="primary" v-else-if="isItemMineral"
-                          >far fa-gem</v-icon
-                        >
-                        <v-icon small color="primary" v-else-if="isItemRock"
-                          >fas fa-mountain</v-icon
-                        >
-                        <v-icon
-                          small
-                          color="primary"
-                          v-else-if="isItemMeteorite"
-                          >fas fa-meteor</v-icon
-                        >
-                      </span>
-
-                      <span>{{
-                        $t(`detail.specimenType.${getSpecimenType}`)
-                      }}</span>
-                    </span>
-
-                    <span
-                      v-if="
-                        (isItemFossil ||
-                          isItemMineral ||
-                          isItemRock ||
-                          isItemMeteorite) &&
-                        (item.collectioncode || item.unitid)
-                      "
-                    >
-                      -
-                    </span>
-
-                    <span
-                      class="font-weight-bold"
-                      v-if="item.collectioncode || item.unitid"
-                    >
-                      <span v-if="item.collectioncode"
-                        >{{ item.collectioncode }}
-                      </span>
-                      <span v-if="item.unitid">{{ item.unitid }}</span>
-                    </span>
-                  </div>
-
-                  <h1
-                    :class="{ 'font-italic': isItemFossil }"
-                    class="font-weight-bold mb-1"
-                    style="font-size: 2rem"
-                    v-if="item.fullscientificname"
-                  >
-                    {{ item.fullscientificname }}
-                  </h1>
+                    />
+                </v-alert>
+            </v-col>
+        </v-row>
 
-                  <h2
-                    style="font-size: 1.25rem"
-                    v-if="filteredNames.length > 0"
-                  >
-                    <span class="font-weight-regular"
-                      >{{ $t("detail.otherIdentification")
-                      }}<span v-if="filteredNames.length > 1">s</span>:
-                    </span>
-                    <span
-                      :class="{ 'font-italic': isItemFossil }"
-                      v-for="(entity, index) in filteredNames"
-                      :key="index"
-                    >
-                      <span class="font-weight-bold">{{ entity }}</span>
-                      <span class="mx-1" v-if="index < filteredNames.length - 1"
-                        >|</span
-                      >
-                    </span>
-                  </h2>
-
-                  <div v-if="!item.fullscientificname && !filteredNames">
-                    GeoCASe ID: {{ item.geocase_id }}
-                  </div>
-                </div>
-
-                <div
-                  v-if="logoURI"
-                  class="flex-grow-1 title-logo align-self-center"
-                >
-                  <v-img
-                    :src="logoURI"
-                    :max-height="$vuetify.breakpoint.mdAndDown ? '75' : '100'"
-                    :max-width="$vuetify.breakpoint.mdAndDown ? '75' : '100'"
-                    contain
-                    :alt="`${item.datasetowner} logo`"
-                  ></v-img>
-                </div>
-              </div>
+        <v-card class="px-6 py-4 mb-5" shaped v-if="items.length > 1">
+            <v-card-title class="red--text" style="word-break: break-word">
+                More than one entry was found, please select one.
             </v-card-title>
-          </v-card>
-
-          <!-- TABLE -->
-          <v-card v-if="itemExists" class="mt-6 item-card">
-            <v-data-table
-              class="detail-view-table"
-              :mobile-breakpoint="9000"
-              disable-sort
-              disable-filtering
-              disable-pagination
-              hide-default-footer
-              :headers="filteredItemHeaders"
-              :items="[item]"
-            >
-              <template v-slot:item.type_status="{ value }">
-                <div>
+
+            <v-row>
+                <template v-for="item in items">
+                    <v-col cols="6" :key="item.id">
+                        <v-card>
+                            <v-card-title class="primary--text" style="word-break: break-word">
+                                <detail-view-headline-box style="width: 100%;" :item="item" />
+                            </v-card-title>
+
+                            <v-card-text>
+                                <router-link :to="{ name: 'Detail', params: { id: item.id } }">
+                                    <v-btn class="font-weight-bold" color="primary" elevation="6">
+                                        Select
+                                    </v-btn>
+                                </router-link>
+                            </v-card-text>
+                        </v-card>
+                    </v-col>
+                </template>
+            </v-row>
+        </v-card>
+
+        <v-card class="px-6 py-4" shaped v-if="items.length === 1">
+            <v-row>
+                <!-- TITLE, TABLE and TABLE SECONDARY -->
+                <v-col cols="12" :sm="imageExists || localityExists ? 6 : 12">
+                    <!-- TITLE -->
+                    <v-card v-if="items.length === 1">
+                        <v-card-title class="primary--text" style="word-break: break-word">
+                            <detail-view-headline-box style="width: 100%;" :item="item" :logoURI="logoURI" />
+                        </v-card-title>
+                    </v-card>
+
+                    <!-- TABLE -->
+                    <v-card v-if="itemExists" class="mt-6 item-card">
+                        <v-data-table
+                                class="detail-view-table"
+                                :mobile-breakpoint="9000"
+                                disable-sort
+                                disable-filtering
+                                disable-pagination
+                                hide-default-footer
+                                :headers="filteredItemHeaders"
+                                :items="[item]"
+                        >
+                            <template v-slot:item.type_status="{ value }">
+                                <div>
                   <span
-                    v-if="
+                          v-if="
                       value === 'holotype' ||
                       value === 'neotype' ||
                       value === 'Holotypus' ||
                       value === 'Neotypus'
                     "
-                    class="font-weight-bold"
+                          class="font-weight-bold"
                   >
                     {{ value }}
                   </span>
-                  <span v-else>
+                                    <span v-else>
                     {{ value }}
                   </span>
-                  <span v-if="originalStatus">({{ originalStatus }})</span>
-                </div>
-              </template>
-
-              <template v-slot:item.stratigraphy>
-                <!-- Currently uncommented stratigraphy directly from source as all the cases haven't been handled yet  -->
-                <!-- For example currently only handling Chronostratigraphic terms but there's also Lithostratigraphic terms -->
-                <!-- That means itemStratigraphy getter needs to be updated -->
-                <!--                <div v-if="itemStratigraphy && itemStratigraphy.length > 0">-->
-                <!--                  <ul class="circle-list">-->
-                <!--                    <li v-for="(item, index) in itemStratigraphy" :key="index">-->
-                <!--                      <span v-if="item.division">{{ item.division }}: </span>-->
-                <!--                      <span v-if="item.name">{{ item.name }}</span>-->
-                <!--                    </li>-->
-                <!--                  </ul>-->
-                <!--                </div>-->
-                <div v-if="item.stratigraphies">
-                  <ul style="list-style-type: circle">
-                    <li
-                      v-for="(item, index) in item.stratigraphies"
-                      :key="index"
-                    >
-                      {{ item }}
-                    </li>
-                  </ul>
-                </div>
-                <div v-else-if="item.stratigraphytexts">
-                  <ul style="list-style-type: circle">
-                    <li
-                      v-for="(item, index) in item.stratigraphytexts"
-                      :key="index"
-                    >
-                      {{ item }}
-                    </li>
-                  </ul>
-                </div>
-              </template>
-
-              <template v-slot:item.area>
-                <div v-if="itemArea && itemArea.length > 0">
-                  <ul class="circle-list">
-                    <li v-for="(item, index) in itemArea" :key="index">
-                      {{ item }}
-                    </li>
-                  </ul>
-                </div>
-              </template>
-
-              <template v-slot:item.areaDetail>
-                <div v-if="areaDetail">
-                  {{ areaDetail }}
-                </div>
-              </template>
-
-              <template v-slot:item.nearNamedPlace>
-                <div v-if="nearNamedPlace">
-                  {{ nearNamedPlace }}
-                </div>
-              </template>
-
-              <template v-slot:item.highertaxon="{ item }">
-                <div v-if="itemHighertaxon && itemHighertaxon.length > 0">
-                  <ul class="circle-list">
-                    <li v-for="(item, index) in itemHighertaxon" :key="index">
-                      {{ item }}
-                    </li>
-                  </ul>
-                </div>
-                <div v-else>{{ item.highertaxon }}</div>
-              </template>
-
-              <template v-slot:item.itemMineralGroup="{ item }">
-                <!--                <div v-if="itemMineralGroup && itemMineralGroup.length > 0">-->
-                <!--                  <ul class="circle-list">-->
-                <!--                    <li v-for="(item, index) in itemMineralGroup" :key="index">-->
-                <!--                      {{ item }}-->
-                <!--                    </li>-->
-                <!--                  </ul>-->
-                <!--                </div>-->
-                <div v-if="itemMineralGroup">
-                  {{ itemMineralGroup }}
-                </div>
-              </template>
-
-              <template v-slot:item.mineralNameDetail="{ item }">
-                <div v-if="mineralNameDetail">
-                  {{ mineralNameDetail }}
-                </div>
-              </template>
-
-              <template v-slot:item.reference="{ item }">
-                <div v-if="itemReference && itemReference.length > 0">
-                  <ul class="circle-list">
-                    <li v-for="(item, index) in itemReference" :key="index">
-                      <span v-html="item" />
-                    </li>
-                  </ul>
-                </div>
-              </template>
-
-              <template v-slot:item.unitWeight="{ item }">
-                <div v-if="unitWeight">
-                  {{ unitWeight }}
-                </div>
-              </template>
-
-              <template v-slot:item.acquisitionDate="{ item }">
-                <div v-if="acquisitionDate">
-                  {{ acquisitionDate }}
-                </div>
-              </template>
-
-              <template v-slot:item.gatheringAgent="{ item }">
-                <div v-if="gatheringAgent">
-                  {{ gatheringAgent }}
-                </div>
-              </template>
-
-              <template v-slot:item.unitDateText="{ item }">
-                <div v-if="unitDateText">
-                  {{ unitDateText }}
-                </div>
-              </template>
-
-              <template v-slot:item.kindOfUnit="{ item }">
-                <div v-if="kindOfUnit">
-                  {{ kindOfUnit }}
-                </div>
-              </template>
-
-              <template v-slot:item.mindat_url="{ item }">
-                <a
-                  style="text-decoration: unset"
-                  title="Link to Mindat.org"
-                  @click="openMindatInNewWindow(item.mindat_url)"
-                  >{{ item.mindat_url }}
-                  <v-icon small color="primary"
-                    >fas fa-external-link-square-alt</v-icon
-                  >
-                </a>
-              </template>
-
-              <template v-slot:item.taxon_id_pbdb="{ item }">
-                <a
-                  style="text-decoration: unset"
-                  title="Link to taxon record in PBDB"
-                  @click="openPaleobiodbInNewWindow(item.taxon_id_pbdb)"
-                  >Link to taxon record in PBDB<v-icon
-                    right
-                    small
-                    color="primary"
-                    >fas fa-external-link-square-alt</v-icon
-                  >
-                </a>
-              </template>
-
-              <template v-slot:item.taxon_id_eol="{ item }">
-                <a
-                  style="text-decoration: unset"
-                  title="Link to taxon record in Encyclopedia of Life"
-                  @click="openEolInNewWindow(item.taxon_id_eol)"
-                  >Link to taxon record in Encyclopedia of Life<v-icon
-                    right
-                    small
-                    color="primary"
-                    >fas fa-external-link-square-alt</v-icon
-                  >
-                </a>
-              </template>
-
-              <template v-slot:item.taxon_id_tol="{ item }">
-                <a
-                  style="text-decoration: unset"
-                  title="Link to taxon record in Tree of life"
-                  @click="openTolwebInNewWindow(item.taxon_id_tol)"
-                  >Link to taxon record in Tree of life<v-icon
-                    right
-                    small
-                    color="primary"
-                    >fas fa-external-link-square-alt</v-icon
-                  >
-                </a>
-              </template>
-
-              <template v-slot:item.taxon_id="{ item }">
-                <a
-                  style="text-decoration: unset"
-                  title="Link to taxon record in fossiilid.info"
-                  @click="openFossiilidInNewWindow(item.taxon_id)"
-                  >Link to taxon record in fossiilid.info<v-icon
-                    right
-                    small
-                    color="primary"
-                    >fas fa-external-link-square-alt</v-icon
-                  >
-                </a>
-              </template>
-
-              <template v-slot:item.recordURI="{ item }">
-                <a
-                  :href="item.recordURI"
-                  target="RecordUriWindow"
-                  style="text-decoration: unset"
-                  >{{ item.recordURI }}</a
-                >
-              </template>
-
-              <template v-slot:item.relatedResource="{ item }">
-                <a
-                  :href="item.relatedResource"
-                  target="RelatedResourceWindow"
-                  style="text-decoration: unset"
-                  >{{ item.relatedResource }}</a
-                >
-              </template>
-            </v-data-table>
-          </v-card>
-
-          <!-- TABLE SECONDARY -->
-          <v-card
-            class="mt-6 item-card item-card--secondary"
-            v-if="
+                                    <span v-if="originalStatus">({{ originalStatus }})</span>
+                                </div>
+                            </template>
+
+                            <template v-slot:item.stratigraphy>
+                                <!-- Currently uncommented stratigraphy directly from source as all the cases haven't been handled yet  -->
+                                <!-- For example currently only handling Chronostratigraphic terms but there's also Lithostratigraphic terms -->
+                                <!-- That means itemStratigraphy getter needs to be updated -->
+                                <!--                <div v-if="itemStratigraphy && itemStratigraphy.length > 0">-->
+                                <!--                  <ul class="circle-list">-->
+                                <!--                    <li v-for="(item, index) in itemStratigraphy" :key="index">-->
+                                <!--                      <span v-if="item.division">{{ item.division }}: </span>-->
+                                <!--                      <span v-if="item.name">{{ item.name }}</span>-->
+                                <!--                    </li>-->
+                                <!--                  </ul>-->
+                                <!--                </div>-->
+                                <div v-if="item.stratigraphies">
+                                    <ul style="list-style-type: circle">
+                                        <li
+                                                v-for="(item, index) in item.stratigraphies"
+                                                :key="index"
+                                        >
+                                            {{ item }}
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div v-else-if="item.stratigraphytexts">
+                                    <ul style="list-style-type: circle">
+                                        <li
+                                                v-for="(item, index) in item.stratigraphytexts"
+                                                :key="index"
+                                        >
+                                            {{ item }}
+                                        </li>
+                                    </ul>
+                                </div>
+                            </template>
+
+                            <template v-slot:item.area>
+                                <div v-if="itemArea && itemArea.length > 0">
+                                    <ul class="circle-list">
+                                        <li v-for="(item, index) in itemArea" :key="index">
+                                            {{ item }}
+                                        </li>
+                                    </ul>
+                                </div>
+                            </template>
+
+                            <template v-slot:item.areaDetail>
+                                <div v-if="areaDetail">
+                                    {{ areaDetail }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.nearNamedPlace>
+                                <div v-if="nearNamedPlace">
+                                    {{ nearNamedPlace }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.highertaxon="{ item }">
+                                <div v-if="itemHighertaxon && itemHighertaxon.length > 0">
+                                    <ul class="circle-list">
+                                        <li v-for="(item, index) in itemHighertaxon" :key="index">
+                                            {{ item }}
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div v-else>{{ item.highertaxon }}</div>
+                            </template>
+
+                            <template v-slot:item.itemMineralGroup="{ item }">
+                                <!--                <div v-if="itemMineralGroup && itemMineralGroup.length > 0">-->
+                                <!--                  <ul class="circle-list">-->
+                                <!--                    <li v-for="(item, index) in itemMineralGroup" :key="index">-->
+                                <!--                      {{ item }}-->
+                                <!--                    </li>-->
+                                <!--                  </ul>-->
+                                <!--                </div>-->
+                                <div v-if="itemMineralGroup">
+                                    {{ itemMineralGroup }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.mineralNameDetail="{ item }">
+                                <div v-if="mineralNameDetail">
+                                    {{ mineralNameDetail }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.reference="{ item }">
+                                <div v-if="itemReference && itemReference.length > 0">
+                                    <ul class="circle-list">
+                                        <li v-for="(item, index) in itemReference" :key="index">
+                                            <span v-html="item" />
+                                        </li>
+                                    </ul>
+                                </div>
+                            </template>
+
+                            <template v-slot:item.unitWeight="{ item }">
+                                <div v-if="unitWeight">
+                                    {{ unitWeight }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.acquisitionDate="{ item }">
+                                <div v-if="acquisitionDate">
+                                    {{ acquisitionDate }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.gatheringAgent="{ item }">
+                                <div v-if="gatheringAgent">
+                                    {{ gatheringAgent }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.unitDateText="{ item }">
+                                <div v-if="unitDateText">
+                                    {{ unitDateText }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.kindOfUnit="{ item }">
+                                <div v-if="kindOfUnit">
+                                    {{ kindOfUnit }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.mindat_url="{ item }">
+                                <a
+                                        style="text-decoration: unset"
+                                        title="Link to Mindat.org"
+                                        @click="openMindatInNewWindow(item.mindat_url)"
+                                >{{ item.mindat_url }}
+                                    <v-icon small color="primary"
+                                    >fas fa-external-link-square-alt
+                                    </v-icon
+                                    >
+                                </a>
+                            </template>
+
+                            <template v-slot:item.taxon_id_pbdb="{ item }">
+                                <a
+                                        style="text-decoration: unset"
+                                        title="Link to taxon record in PBDB"
+                                        @click="openPaleobiodbInNewWindow(item.taxon_id_pbdb)"
+                                >Link to taxon record in PBDB
+                                    <v-icon
+                                            right
+                                            small
+                                            color="primary"
+                                    >fas fa-external-link-square-alt
+                                    </v-icon
+                                    >
+                                </a>
+                            </template>
+
+                            <template v-slot:item.taxon_id_eol="{ item }">
+                                <a
+                                        style="text-decoration: unset"
+                                        title="Link to taxon record in Encyclopedia of Life"
+                                        @click="openEolInNewWindow(item.taxon_id_eol)"
+                                >Link to taxon record in Encyclopedia of Life
+                                    <v-icon
+                                            right
+                                            small
+                                            color="primary"
+                                    >fas fa-external-link-square-alt
+                                    </v-icon
+                                    >
+                                </a>
+                            </template>
+
+                            <template v-slot:item.taxon_id_tol="{ item }">
+                                <a
+                                        style="text-decoration: unset"
+                                        title="Link to taxon record in Tree of life"
+                                        @click="openTolwebInNewWindow(item.taxon_id_tol)"
+                                >Link to taxon record in Tree of life
+                                    <v-icon
+                                            right
+                                            small
+                                            color="primary"
+                                    >fas fa-external-link-square-alt
+                                    </v-icon
+                                    >
+                                </a>
+                            </template>
+
+                            <template v-slot:item.taxon_id="{ item }">
+                                <a
+                                        style="text-decoration: unset"
+                                        title="Link to taxon record in fossiilid.info"
+                                        @click="openFossiilidInNewWindow(item.taxon_id)"
+                                >Link to taxon record in fossiilid.info
+                                    <v-icon
+                                            right
+                                            small
+                                            color="primary"
+                                    >fas fa-external-link-square-alt
+                                    </v-icon
+                                    >
+                                </a>
+                            </template>
+
+                            <template v-slot:item.recordURI="{ item }">
+                                <a
+                                        :href="item.recordURI"
+                                        target="RecordUriWindow"
+                                        style="text-decoration: unset"
+                                >{{ item.recordURI }}</a
+                                >
+                            </template>
+
+                            <template v-slot:item.relatedResource="{ item }">
+                                <a
+                                        :href="item.relatedResource"
+                                        target="RelatedResourceWindow"
+                                        style="text-decoration: unset"
+                                >{{ item.relatedResource }}</a
+                                >
+                            </template>
+                        </v-data-table>
+                    </v-card>
+
+                    <!-- TABLE SECONDARY -->
+                    <v-card
+                            class="mt-6 item-card item-card--secondary"
+                            v-if="
               filteredItemHeadersSecondary &&
               filteredItemHeadersSecondary.length > 0
             "
-          >
-            <v-data-table
-              dense
-              class="detail-view-table-secondary secondary--text"
-              :mobile-breakpoint="9000"
-              disable-sort
-              disable-filtering
-              disable-pagination
-              hide-default-footer
-              :headers="filteredItemHeadersSecondary"
-              :items="[item]"
-            >
-              <template v-slot:item.institutionHomepage>
-                <div
-                  v-if="representationTitle || representationURI"
-                  class="d-flex justify-start"
-                >
-                  <div
-                    class="align-self-center mr-3"
-                    v-if="representationTitle"
-                  >
-                    <a
-                      v-if="representationURI"
-                      class="text-decoration-none"
-                      :href="representationURI"
-                      :title="representationURI"
-                      target="InstitutionHomepage"
-                      >{{ representationTitle }}</a
                     >
-                    <div v-else>{{ representationTitle }}</div>
-                  </div>
-                </div>
-              </template>
-
-              <template v-slot:item.contentContactName>
-                <div>
-                  {{ contentContactName }}
-                </div>
-              </template>
-
-              <template v-slot:item.contentContactEmail>
-                <div v-if="contentContactEmail">
-                  <a
-                    :href="`mailto:${contentContactEmail}`"
-                    class="text-decoration-none"
-                    ><v-icon x-small class="mr-1" color="primary"
-                      >far fa-envelope</v-icon
-                    >{{ contentContactEmail }}</a
-                  >
-                </div>
-              </template>
-
-              <template v-slot:item.contentContactPhone>
-                <div v-if="contentContactPhone">
-                  <a
-                    :href="`tel:${contentContactPhone}`"
-                    class="text-decoration-none"
-                    ><v-icon x-small class="mr-1" color="primary"
-                      >fas fa-phone</v-icon
-                    >{{ contentContactPhone }}</a
-                  >
-                </div>
-              </template>
-
-              <template v-slot:item.contentContactAddress>
-                <div v-if="contentContactAddress">
-                  <a
-                    :href="`https://www.google.com/maps/search/?api=1&query=${contentContactAddress}`"
-                    target="GoogleMapsWindow"
-                    class="text-decoration-none"
-                    ><v-icon x-small class="mr-1" color="primary"
-                      >fas fa-map-marker-alt</v-icon
-                    >{{ contentContactAddress }}</a
-                  >
-                </div>
-              </template>
-
-              <template v-slot:item.copyrights>
-                <div class="max-text-width">{{ copyrights }}</div>
-              </template>
-
-              <template v-slot:item.termsofusestatements>
-                <div class="max-text-width">{{ termsofusestatements }}</div>
-              </template>
-
-              <template v-slot:item.disclaimers>
-                <div class="max-text-width">{{ disclaimers }}</div>
-              </template>
-
-              <template v-slot:item.acknowledgements>
-                <div class="max-text-width">{{ acknowledgements }}</div>
-              </template>
-
-              <template v-slot:item.dateLastEdited>
-                <div>{{ dateLastEdited }}</div>
-              </template>
-
-              <template v-slot:item.last_harvested_processing>
-                <div>{{ computedLastHarvestedProcessing }}</div>
-              </template>
-
-              <template v-slot:item.providerurl="{ item }">
-                <a
-                  class=""
-                  :href="item.providerurl"
-                  target="ProviderWindow"
-                  style="text-decoration: unset"
-                  >{{ item.providerurl }}</a
-                >
-              </template>
-
-              <template v-slot:item.specimenVerifier>
-                <div>{{ specimenVerifier }}</div>
-              </template>
-
-              <template v-slot:item.unitGuid>
-                <div>{{ unitGuid }}</div>
-              </template>
-
-              <template v-slot:item.cetaf_identifier>
-                <a
-                  :href="
+                        <v-data-table
+                                dense
+                                class="detail-view-table-secondary secondary--text"
+                                :mobile-breakpoint="9000"
+                                disable-sort
+                                disable-filtering
+                                disable-pagination
+                                hide-default-footer
+                                :headers="filteredItemHeadersSecondary"
+                                :items="[item]"
+                        >
+                            <template v-slot:item.institutionHomepage>
+                                <div
+                                        v-if="representationTitle || representationURI"
+                                        class="d-flex justify-start"
+                                >
+                                    <div
+                                            class="align-self-center mr-3"
+                                            v-if="representationTitle"
+                                    >
+                                        <a
+                                                v-if="representationURI"
+                                                class="text-decoration-none"
+                                                :href="representationURI"
+                                                :title="representationURI"
+                                                target="InstitutionHomepage"
+                                        >{{ representationTitle }}</a
+                                        >
+                                        <div v-else>{{ representationTitle }}</div>
+                                    </div>
+                                </div>
+                            </template>
+
+                            <template v-slot:item.contentContactName>
+                                <div>
+                                    {{ contentContactName }}
+                                </div>
+                            </template>
+
+                            <template v-slot:item.contentContactEmail>
+                                <div v-if="contentContactEmail">
+                                    <a
+                                            :href="`mailto:${contentContactEmail}`"
+                                            class="text-decoration-none"
+                                    >
+                                        <v-icon x-small class="mr-1" color="primary"
+                                        >far fa-envelope
+                                        </v-icon
+                                        >
+                                        {{ contentContactEmail }}</a
+                                    >
+                                </div>
+                            </template>
+
+                            <template v-slot:item.contentContactPhone>
+                                <div v-if="contentContactPhone">
+                                    <a
+                                            :href="`tel:${contentContactPhone}`"
+                                            class="text-decoration-none"
+                                    >
+                                        <v-icon x-small class="mr-1" color="primary"
+                                        >fas fa-phone
+                                        </v-icon
+                                        >
+                                        {{ contentContactPhone }}</a
+                                    >
+                                </div>
+                            </template>
+
+                            <template v-slot:item.contentContactAddress>
+                                <div v-if="contentContactAddress">
+                                    <a
+                                            :href="`https://www.google.com/maps/search/?api=1&query=${contentContactAddress}`"
+                                            target="GoogleMapsWindow"
+                                            class="text-decoration-none"
+                                    >
+                                        <v-icon x-small class="mr-1" color="primary"
+                                        >fas fa-map-marker-alt
+                                        </v-icon
+                                        >
+                                        {{ contentContactAddress }}</a
+                                    >
+                                </div>
+                            </template>
+
+                            <template v-slot:item.copyrights>
+                                <div class="max-text-width">{{ copyrights }}</div>
+                            </template>
+
+                            <template v-slot:item.termsofusestatements>
+                                <div class="max-text-width">{{ termsofusestatements }}</div>
+                            </template>
+
+                            <template v-slot:item.disclaimers>
+                                <div class="max-text-width">{{ disclaimers }}</div>
+                            </template>
+
+                            <template v-slot:item.acknowledgements>
+                                <div class="max-text-width">{{ acknowledgements }}</div>
+                            </template>
+
+                            <template v-slot:item.dateLastEdited>
+                                <div>{{ dateLastEdited }}</div>
+                            </template>
+
+                            <template v-slot:item.last_harvested_processing>
+                                <div>{{ computedLastHarvestedProcessing }}</div>
+                            </template>
+
+                            <template v-slot:item.providerurl="{ item }">
+                                <a
+                                        class=""
+                                        :href="item.providerurl"
+                                        target="ProviderWindow"
+                                        style="text-decoration: unset"
+                                >{{ item.providerurl }}</a
+                                >
+                            </template>
+
+                            <template v-slot:item.specimenVerifier>
+                                <div>{{ specimenVerifier }}</div>
+                            </template>
+
+                            <template v-slot:item.unitGuid>
+                                <div>{{ unitGuid }}</div>
+                            </template>
+
+                            <template v-slot:item.cetaf_identifier>
+                                <a
+                                        :href="
                     getCetafIdentifierUrl(
                       item.datasourcecountry,
                       item.cetaf_identifier
                     )
                   "
-                  target="CetafIdentifierWindow"
-                  style="text-decoration: unset"
-                  >{{
-                    getCetafIdentifierUrl(
-                      item.datasourcecountry,
-                      item.cetaf_identifier
-                    )
-                  }}</a
-                >
-              </template>
-            </v-data-table>
-          </v-card>
-        </v-col>
-
-        <!-- IMAGES and MAP -->
-        <v-col cols="12" sm="6">
-          <v-row no-gutters>
-            <!-- IMAGES -->
-            <v-col cols="12" v-if="imageExists && detailViewImages.length > 0">
-              <image-carousel :images="detailViewImages" />
+                                        target="CetafIdentifierWindow"
+                                        style="text-decoration: unset"
+                                >{{
+                                        getCetafIdentifierUrl(
+                                                item.datasourcecountry,
+                                                item.cetaf_identifier
+                                        )
+                                    }}</a
+                                >
+                            </template>
+                        </v-data-table>
+                    </v-card>
+                </v-col>
+
+                <!-- IMAGES and MAP -->
+                <v-col cols="12" sm="6">
+                    <v-row no-gutters>
+                        <!-- IMAGES -->
+                        <v-col cols="12" v-if="imageExists && detailViewImages.length > 0">
+                            <image-carousel :images="detailViewImages" />
+                        </v-col>
+
+                        <!-- MAP -->
+                        <v-col cols="12">
+                            <v-card v-if="localityExists" class="mt-3">
+                                <tab-map
+                                        style="margin-top: -12px"
+                                        :response-results="response"
+                                        :is-detail-view="true"
+                                />
+                            </v-card>
+                        </v-col>
+                    </v-row>
+                </v-col>
+
+                <!-- DATA FROM SOURCE -->
+                <v-col cols="12" v-show="responseFromSource">
+                    <v-card>
+                        <v-card-title
+                                class="justify-center card-title--clickable"
+                                @click="showResponseFromSource = !showResponseFromSource"
+                        >{{ $t("detail.dataFromProvider") }}
+                            <v-spacer />
+                            <v-btn icon
+                            >
+                                <v-icon v-if="showResponseFromSource">fas fa-angle-up
+                                </v-icon
+                                >
+                                <v-icon v-else>fas fa-angle-down</v-icon>
+                            </v-btn
+                            >
+                        </v-card-title>
+
+                        <v-expand-transition v-show="showResponseFromSource">
+                            <v-card-text>
+                                <v-treeview
+                                        shaped
+                                        dense
+                                        open-all
+                                        hoverable
+                                        open-on-click
+                                        :items="computedResponseFromSource"
+                                />
+                            </v-card-text>
+                        </v-expand-transition>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-card>
+    </v-container>
+
+    <v-container class="detail-view" v-else>
+        <GoBackButton />
+
+        <v-row>
+            <v-col cols="12" sm="6">
+                <v-skeleton-loader elevation="2" type="card"></v-skeleton-loader>
+            </v-col>
+            <v-col cols="12" sm="6">
+                <v-skeleton-loader elevation="2" type="card"></v-skeleton-loader>
             </v-col>
+        </v-row>
 
-            <!-- MAP -->
+        <v-row>
             <v-col cols="12">
-              <v-card v-if="localityExists" class="mt-3">
-                <tab-map
-                  style="margin-top: -12px"
-                  :response-results="response"
-                  :is-detail-view="true"
-                />
-              </v-card>
+                <v-skeleton-loader elevation="2" type="card"></v-skeleton-loader>
             </v-col>
-          </v-row>
-        </v-col>
-
-        <!-- DATA FROM SOURCE -->
-        <v-col cols="12" v-show="responseFromSource">
-          <v-card>
-            <v-card-title
-              class="justify-center card-title--clickable"
-              @click="showResponseFromSource = !showResponseFromSource"
-              >{{ $t("detail.dataFromProvider") }}
-              <v-spacer />
-              <v-btn icon
-                ><v-icon v-if="showResponseFromSource">fas fa-angle-up</v-icon
-                ><v-icon v-else>fas fa-angle-down</v-icon></v-btn
-              >
-            </v-card-title>
-
-            <v-expand-transition v-show="showResponseFromSource">
-              <v-card-text>
-                <v-treeview
-                  shaped
-                  dense
-                  open-all
-                  hoverable
-                  open-on-click
-                  :items="computedResponseFromSource"
-                />
-              </v-card-text>
-            </v-expand-transition>
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-card>
-  </v-container>
-
-  <v-container class="detail-view" v-else>
-    <GoBackButton />
-
-    <v-row>
-      <v-col cols="12" sm="6">
-        <v-skeleton-loader elevation="2" type="card"></v-skeleton-loader>
-      </v-col>
-      <v-col cols="12" sm="6">
-        <v-skeleton-loader elevation="2" type="card"></v-skeleton-loader>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <v-skeleton-loader elevation="2" type="card"></v-skeleton-loader>
-      </v-col>
-    </v-row>
-  </v-container>
+        </v-row>
+    </v-container>
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from "vuex";
-import ImageCarousel from "@/components/image/ImageCarousel";
-import TabMap from "@/components/tabs/TabMap";
-import helperMixin from "@/mixins/helperMixin";
-import GoBackButton from "@/components/GoBackButton";
-
-export default {
-  name: "DetailView",
-
-  components: { GoBackButton, ImageCarousel, TabMap },
-
-  mixins: [helperMixin],
-
-  metaInfo() {
-    // TITLE
-    const type =
-      this.getSpecimenType.charAt(0).toUpperCase() +
-      this.getSpecimenType.substring(1);
-    const collectioncode = this.item.collectioncode;
-    const unitid = this.item.unitid;
-    const fullscientificname = this.item.fullscientificname;
-
-    let title = `${type} Specimen`;
-
-    if (fullscientificname) title = fullscientificname;
-    else if (collectioncode || unitid)
-      title += ` - ${collectioncode} ${unitid}`;
-
-    // DESCRIPTION
-    let description = "";
-    const fields = [
-      "recordbasis",
-      "fullscientificname",
-      "locality",
-      "datasetowner",
-    ];
-    if (this.item) {
-      fields.forEach((item, index) => {
-        if (this.item[item])
-          description += ` ${this.$t(`search.table.${item}`)}: ${
-            this.item[item]
-          }${index < fields.length - 1 ? "," : ""}`;
-      });
-    }
-
-    const ogImage =
-      this.detailViewImages?.[0]?.thumbnailImage ??
-      "https://files.geocollections.info/img/geocase/front_page/geocase_landing.jpg";
-    const ogImageAlt = this.detailViewImages?.[0]?.altText ?? description;
-    const ogUrl = document.location.href;
-
-    return {
-      title: title,
-      meta: [
-        {
-          vmid: "description",
-          name: "description",
-          content: description,
-        },
-        {
-          vmid: "og:title",
-          property: "og:title",
-          content: title,
-        },
-        {
-          vmid: "og:description",
-          property: "og:description",
-          content: description,
-        },
-        {
-          vmid: "og:image",
-          property: "og:image",
-          content: ogImage,
-        },
-        {
-          vmid: "og:url",
-          property: "og:url",
-          content: ogUrl,
-        },
-        {
-          vmid: "og:image:alt",
-          name: "og:image:alt",
-          content: ogImageAlt,
-        },
-        {
-          vmid: "twitter:image:alt",
-          name: "twitter:image:alt",
-          content: ogImageAlt,
-        },
-      ],
-    };
-  },
-
-  props: {
-    id: {
-      type: String,
-      required: false,
-    },
-  },
-
-  data: () => ({
-    showResponseFromSource: false,
-  }),
-
-  computed: {
-    ...mapState("detail", [
-      "response",
-      "responseFromSource",
-      "error",
-      "showError",
-      "itemHeaders",
-      "isLoading",
-    ]),
-
-    ...mapGetters("detail", [
-      "itemExists",
-      "imageExists",
-      "localityExists",
-      "item",
-      "filteredItemHeaders",
-      "filteredItemHeadersSecondary",
-      "isItemFossil",
-      "isItemMineral",
-      "isItemRock",
-      "isItemMeteorite",
-      "itemStratigraphy",
-      "itemReference",
-      "itemArea",
-      "areaDetail",
-      "nearNamedPlace",
-      "originalStatus",
-      "unitWeight",
-      "acquisitionDate",
-      "gatheringAgent",
-      "unitDateText",
-      "kindOfUnit",
-      "itemHighertaxon",
-      "itemMineralGroup",
-      "mineralNameDetail",
-      "contentContactName",
-      "contentContactEmail",
-      "contentContactPhone",
-      "contentContactAddress",
-      "logoURI",
-      "representationTitle",
-      "representationURI",
-      "copyrights",
-      "termsofusestatements",
-      "dateLastEdited",
-      "disclaimers",
-      "acknowledgements",
-      "specimenVerifier",
-      "unitGuid",
-      "translatedItemHeaders",
-      "translatedItemHeadersSecondary",
-    ]),
-
-    getSpecimenType() {
-      let type = "fossil";
-      if (this.isItemMineral) type = "mineral";
-      else if (this.isItemRock) type = "rock";
-      else if (this.isItemMeteorite) type = "meteorite";
-      return type;
-    },
+  import DetailViewHeadlineBox from "@/components/detail_view/HeadlineBox"
+  import { mapActions, mapGetters, mapState } from "vuex"
+  import ImageCarousel from "@/components/image/ImageCarousel"
+  import TabMap from "@/components/tabs/TabMap"
+  import helperMixin from "@/mixins/helperMixin"
+  import GoBackButton from "@/components/GoBackButton"
+
+  export default {
+    name: "DetailView",
+
+    components: { GoBackButton, ImageCarousel, TabMap, DetailViewHeadlineBox },
+
+    mixins: [helperMixin],
+
+    metaInfo () {
+      // TITLE
+      const type =
+        this.getSpecimenType.charAt(0).toUpperCase() +
+        this.getSpecimenType.substring(1)
+      const collectioncode = this.item.collectioncode
+      const unitid = this.item.unitid
+      const fullscientificname = this.item.fullscientificname
+
+      let title = `${type} Specimen`
+
+      if (fullscientificname) {
+        title = fullscientificname
+      } else {
+        if (collectioncode || unitid) {
+          title += ` - ${collectioncode} ${unitid}`
+        }
+      }
 
-    filteredNames() {
-      if (this.item.names) {
-        return this.item.names.filter(
-          (name) => name !== this.item.fullscientificname
-        );
-      } else return [];
-    },
+      // DESCRIPTION
+      let description = ""
+      const fields = [
+        "recordbasis",
+        "fullscientificname",
+        "locality",
+        "datasetowner"
+      ]
+      if (this.item) {
+        fields.forEach((item, index) => {
+          if (this.item[item]) {
+            description += ` ${this.$t(`search.table.${item}`)}: ${
+              this.item[item]
+            }${index < fields.length - 1 ? "," : ""}`
+          }
+        })
+      }
 
-    computedResponseFromSource() {
-      let treeview = this.buildTreeview(
-        this.responseFromSource?.["abcd:DataSets"],
-        0
-      );
-      return treeview;
+      const ogImage =
+        this.detailViewImages?.[0]?.thumbnailImage ??
+        "https://files.geocollections.info/img/geocase/front_page/geocase_landing.jpg"
+      const ogImageAlt = this.detailViewImages?.[0]?.altText ?? description
+      const ogUrl = document.location.href
+
+      return {
+        title: title,
+        meta: [
+          {
+            vmid: "description",
+            name: "description",
+            content: description
+          },
+          {
+            vmid: "og:title",
+            property: "og:title",
+            content: title
+          },
+          {
+            vmid: "og:description",
+            property: "og:description",
+            content: description
+          },
+          {
+            vmid: "og:image",
+            property: "og:image",
+            content: ogImage
+          },
+          {
+            vmid: "og:url",
+            property: "og:url",
+            content: ogUrl
+          },
+          {
+            vmid: "og:image:alt",
+            name: "og:image:alt",
+            content: ogImageAlt
+          },
+          {
+            vmid: "twitter:image:alt",
+            name: "twitter:image:alt",
+            content: ogImageAlt
+          }
+        ]
+      }
     },
 
-    computedLastHarvestedProcessing() {
-      if (this.item?.last_harvested_processing) {
-        if (this.item.last_harvested_processing.includes("T"))
-          return this.item.last_harvested_processing.split("T")[0];
-        else return this.item.last_harvested_processing;
+    props: {
+      id: {
+        type: String,
+        required: false
       }
-      return null;
     },
-  },
-
-  watch: {
-    "$route.params.id": {
-      handler: async function (id) {
-        if (typeof this.id === "undefined" || this.id === null) {
-          this.resetResponseFromSource();
-          await this.getDetailViewData(id);
-          this.getDetailViewDataDirectly();
+
+    data: () => ({
+      showResponseFromSource: false
+    }),
+
+    computed: {
+      ...mapState("detail", [
+        "response",
+        "responseFromSource",
+        "error",
+        "showError",
+        "itemHeaders",
+        "isLoading"
+      ]),
+
+      ...mapGetters("detail", [
+        "itemExists",
+        "imageExists",
+        "localityExists",
+        "items",
+        "filteredItemHeaders",
+        "filteredItemHeadersSecondary",
+        "isItemFossil",
+        "isItemMineral",
+        "isItemRock",
+        "isItemMeteorite",
+        "itemStratigraphy",
+        "itemReference",
+        "itemArea",
+        "areaDetail",
+        "nearNamedPlace",
+        "originalStatus",
+        "unitWeight",
+        "acquisitionDate",
+        "gatheringAgent",
+        "unitDateText",
+        "kindOfUnit",
+        "itemHighertaxon",
+        "itemMineralGroup",
+        "mineralNameDetail",
+        "contentContactName",
+        "contentContactEmail",
+        "contentContactPhone",
+        "contentContactAddress",
+        "logoURI",
+        "representationTitle",
+        "representationURI",
+        "copyrights",
+        "termsofusestatements",
+        "dateLastEdited",
+        "disclaimers",
+        "acknowledgements",
+        "specimenVerifier",
+        "unitGuid",
+        "translatedItemHeaders",
+        "translatedItemHeadersSecondary"
+      ]),
+
+      item () {
+        if (this.items.length === 1) {
+          return this.items[0]
+        }
+        return {}
+      },
+
+      getSpecimenType () {
+        let type = "fossil"
+        if (this.isItemMineral) {
+          type = "mineral"
+        } else {
+          if (this.isItemRock) {
+            type = "rock"
+          } else {
+            if (this.isItemMeteorite) {
+              type = "meteorite"
+            }
+          }
+        }
+        return type
+      },
+
+      filteredNames () {
+        if (this.item.names) {
+          return this.item.names.filter(
+            (name) => name !== this.item.fullscientificname
+          )
+        } else {
+          return []
         }
       },
-      immediate: true,
+
+      computedResponseFromSource () {
+        let treeview = this.buildTreeview(
+          this.responseFromSource?.["abcd:DataSets"],
+          0
+        )
+        return treeview
+      },
+
+      computedLastHarvestedProcessing () {
+        if (this.item?.last_harvested_processing) {
+          if (this.item.last_harvested_processing.includes("T")) {
+            return this.item.last_harvested_processing.split("T")[0]
+          } else {
+            return this.item.last_harvested_processing
+          }
+        }
+        return null
+      }
     },
-    item(newVal) {
-      this.handleColorChange(newVal);
+
+    watch: {
+      "$route.params.id": {
+        handler: async function (id) {
+          if (typeof this.id === "undefined" || this.id === null) {
+            this.resetResponseFromSource()
+            await this.getDetailViewData(id)
+            this.getDetailViewDataDirectly()
+          }
+        },
+        immediate: true
+      },
+      item (newVal) {
+        this.handleColorChange(newVal)
+      }
     },
-  },
-
-  beforeRouteLeave(to, from, next) {
-    this.$vuetify.theme.themes.light.primary = "#FFA000";
-    this.resetResponseFromSource();
-    next();
-  },
-
-  methods: {
-    ...mapActions("detail", [
-      "getDetailView",
-      "getDetailViewDataFromSource",
-      "resetResponseFromSource",
-    ]),
-
-    async getDetailViewData(id) {
-      await this.getDetailView(id);
+
+    beforeRouteLeave (to, from, next) {
+      this.$vuetify.theme.themes.light.primary = "#ffa000"
+      this.resetResponseFromSource()
+      next()
     },
 
-    getDetailViewDataDirectly() {
-      if (
-        this.item?.datasourceurl &&
-        this.item?.unitid &&
-        this.item?.datasourceurl.includes("pywrapper")
-      ) {
-        let querytoolUrl =
-          this.item.datasourceurl.replace("pywrapper", "querytool/raw") +
-          `&filter=(cat=${this.item.unitid})`;
+    methods: {
+      ...mapActions("detail", [
+        "getDetailView",
+        "getDetailViewDataFromSource",
+        "resetResponseFromSource"
+      ]),
+
+      async getDetailViewData (id) {
+        await this.getDetailView(id)
+
+        if (this.items.length === 1 && !/^\d+$/.test(id)) {
+          // only found 1 item and id param is old.
+          this.$router.push({ name: 'Detail', params: { id: this.items[0].id } })
+        }
+      },
+
+      getDetailViewDataDirectly () {
         if (
-          this.item.datasourceurl.includes("geocollections.info") &&
-          this.item?.datasetownerabbrev
+          this.item?.datasourceurl &&
+          this.item?.unitid &&
+          this.item?.datasourceurl.includes("pywrapper")
         ) {
-          querytoolUrl += `AND(col=${this.item.datasetownerabbrev})`;
+          let querytoolUrl =
+            this.item.datasourceurl.replace("pywrapper", "querytool/raw") +
+            `&filter=(cat=${this.item.unitid})`
+          if (
+            this.item.datasourceurl.includes("geocollections.info") &&
+            this.item?.datasetownerabbrev
+          ) {
+            querytoolUrl += `AND(col=${this.item.datasetownerabbrev})`
+          }
+          querytoolUrl += "&schema=http://www.tdwg.org/schemas/abcd/2.06"
+          this.getDetailViewDataFromSource(querytoolUrl)
         }
-        querytoolUrl += "&schema=http://www.tdwg.org/schemas/abcd/2.06";
-        this.getDetailViewDataFromSource(querytoolUrl);
-      }
-    },
+      },
 
-    openMindatInNewWindow(url) {
-      window.open(url, "MindatWindow", "width=800,height=750");
-    },
+      openMindatInNewWindow (url) {
+        window.open(url, "MindatWindow", "width=800,height=750")
+      },
 
-    openPaleobiodbInNewWindow(id) {
-      window.open(
-        `https://paleobiodb.org/classic/basicTaxonInfo?taxon_no=${id}`,
-        "PaleobiodbWindow",
-        "width=800,height=750"
-      );
-    },
+      openPaleobiodbInNewWindow (id) {
+        window.open(
+          `https://paleobiodb.org/classic/basicTaxonInfo?taxon_no=${id}`,
+          "PaleobiodbWindow",
+          "width=800,height=750"
+        )
+      },
 
-    openEolInNewWindow(id) {
-      window.open(
-        `https://eol.org/pages/${id}`,
-        "EolWindow",
-        "width=800,height=750"
-      );
-    },
+      openEolInNewWindow (id) {
+        window.open(
+          `https://eol.org/pages/${id}`,
+          "EolWindow",
+          "width=800,height=750"
+        )
+      },
 
-    openTolwebInNewWindow(id) {
-      window.open(
-        `http://tolweb.org/${id}`,
-        "TolwebWindow",
-        "width=800,height=750"
-      );
-    },
+      openTolwebInNewWindow (id) {
+        window.open(
+          `http://tolweb.org/${id}`,
+          "TolwebWindow",
+          "width=800,height=750"
+        )
+      },
 
-    openFossiilidInNewWindow(id) {
-      window.open(
-        `https://fossiilid.info/${id}`,
-        "FossiilidWindow",
-        "width=800,height=750"
-      );
-    },
+      openFossiilidInNewWindow (id) {
+        window.open(
+          `https://fossiilid.info/${id}`,
+          "FossiilidWindow",
+          "width=800,height=750"
+        )
+      },
 
-    handleColorChange(item) {
-      if (item) {
-        if (this.isItemFossil) {
-          this.$vuetify.theme.themes.light.primary =
-            this.$vuetify.theme.themes.light.fossil;
-        } else if (this.isItemMineral) {
-          this.$vuetify.theme.themes.light.primary =
-            this.$vuetify.theme.themes.light.mineral;
-        } else if (this.isItemRock) {
+      handleColorChange (item) {
+        if (item) {
+          if (this.isItemFossil) {
+            this.$vuetify.theme.themes.light.primary =
+              this.$vuetify.theme.themes.light.fossil
+          } else {
+            if (this.isItemMineral) {
+              this.$vuetify.theme.themes.light.primary =
+                this.$vuetify.theme.themes.light.mineral
+            } else {
+              if (this.isItemRock) {
+                this.$vuetify.theme.themes.light.primary =
+                  this.$vuetify.theme.themes.light.rock
+              } else {
+                if (this.isItemMeteorite) {
+                  this.$vuetify.theme.themes.light.primary =
+                    this.$vuetify.theme.themes.light.meteorite
+                } else {
+                  this.$vuetify.theme.themes.light.primary =
+                    this.$vuetify.theme.themes.light.main
+                }
+              }
+            }
+          }
+        } else {
           this.$vuetify.theme.themes.light.primary =
-            this.$vuetify.theme.themes.light.rock;
-        } else if (this.isItemMeteorite) {
-          this.$vuetify.theme.themes.light.primary =
-            this.$vuetify.theme.themes.light.meteorite;
-        } else
-          this.$vuetify.theme.themes.light.primary =
-            this.$vuetify.theme.themes.light.main;
-      } else
-        this.$vuetify.theme.themes.light.primary =
-          this.$vuetify.theme.themes.light.main;
-    },
-
-    buildTreeview(data, depth) {
-      if (typeof data === "object") {
-        return Object.entries(data).map((item, index) => {
-          depth++;
-
-          return {
-            id: Math.floor(Math.random() * Math.floor(index + 314159 * depth)),
-            name:
-              typeof item[1] === "string" ? `${item[0]}: ${item[1]}` : item[0],
-            children: this.buildTreeview(item[1], depth),
-          };
-        });
-      } else return [];
-    },
+            this.$vuetify.theme.themes.light.main
+        }
+      },
 
-    getCetafIdentifierUrl(country, identifier) {
-      if (country && identifier) {
-        if (country === "UK") country = "united-kingdom";
-        if (country === "The Netherlands") country = "netherlands-the";
+      buildTreeview (data, depth) {
+        if (typeof data === "object") {
+          return Object.entries(data).map((item, index) => {
+            depth++
+
+            return {
+              id: Math.floor(Math.random() * Math.floor(index + 314159 * depth)),
+              name:
+                typeof item[1] === "string" ? `${item[0]}: ${item[1]}` : item[0],
+              children: this.buildTreeview(item[1], depth)
+            }
+          })
+        } else {
+          return []
+        }
+      },
 
-        country = country.toLowerCase();
-        return `https://collections.naturalsciences.be/cpb/nh-collections/countries/${country}/${identifier}`;
+      getCetafIdentifierUrl (country, identifier) {
+        if (country && identifier) {
+          if (country === "UK") {
+            country = "united-kingdom"
+          }
+          if (country === "The Netherlands") {
+            country = "netherlands-the"
+          }
+
+          country = country.toLowerCase()
+          return `https://collections.naturalsciences.be/cpb/nh-collections/countries/${country}/${identifier}`
+        }
       }
-    },
-  },
-};
+    }
+  }
 </script>
 
 <style scoped>
-.detail-view-table >>> .v-data-table__mobile-row {
-  font-size: 1rem;
-}
-.item-card >>> tr:hover {
-  background-color: unset !important;
-}
-
-.item-card >>> .v-data-table__mobile-row:hover {
-  /*background: #eee;*/
-}
-
-.item-card >>> .v-data-table__mobile-row {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
-}
-
-.item-card >>> .v-data-table__mobile-row:last-child {
-  border-bottom: unset;
-}
-
-.item-card >>> .v-data-table__mobile-row__header {
-  min-width: 140px;
-}
-
-.item-card >>> .v-data-table td {
-  height: unset;
-  min-height: 48px;
-}
-
-.item-card >>> .v-data-table__mobile-row__cell {
-  text-align: left;
-  width: 100%;
-  padding-left: 10px;
-}
-
-.item-card--secondary >>> .v-data-table td {
-  height: unset;
-  min-height: 36px;
-}
-
-.detail-view-table >>> thead,
-.detail-view-table-secondary >>> thead {
-  display: none;
-}
-
-.card-title--clickable:hover {
-  opacity: 0.7;
-  cursor: pointer;
-}
-
-.max-text-width {
-  max-width: 700px;
-}
-
-.circle-list {
-  list-style-type: circle;
-}
-
-.title-logo {
-  text-align: right;
-  text-align: -webkit-right;
-  text-align: -moz-right;
-}
+    .detail-view-table >>> .v-data-table__mobile-row {
+        font-size: 1rem;
+    }
+
+    .item-card >>> tr:hover {
+        background-color: unset !important;
+    }
+
+    .item-card >>> .v-data-table__mobile-row:hover {
+        /*background: #eee;*/
+    }
+
+    .item-card >>> .v-data-table__mobile-row {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    .item-card >>> .v-data-table__mobile-row:last-child {
+        border-bottom: unset;
+    }
+
+    .item-card >>> .v-data-table__mobile-row__header {
+        min-width: 140px;
+    }
+
+    .item-card >>> .v-data-table td {
+        height: unset;
+        min-height: 48px;
+    }
+
+    .item-card >>> .v-data-table__mobile-row__cell {
+        text-align: left;
+        width: 100%;
+        padding-left: 10px;
+    }
+
+    .item-card--secondary >>> .v-data-table td {
+        height: unset;
+        min-height: 36px;
+    }
+
+    .detail-view-table >>> thead,
+    .detail-view-table-secondary >>> thead {
+        display: none;
+    }
+
+    .card-title--clickable:hover {
+        opacity: 0.7;
+        cursor: pointer;
+    }
+
+    .max-text-width {
+        max-width: 700px;
+    }
+
+    .circle-list {
+        list-style-type: circle;
+    }
+
+    .title-logo {
+        text-align: right;
+        text-align: -webkit-right;
+        text-align: -moz-right;
+    }
 </style>
diff --git a/vue.config.js b/vue.config.js
index 95dee8b..c4b9a6e 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -3,6 +3,7 @@ const routes = require("./src/router/sitemapRoutes");
 module.exports = {
   transpileDependencies: ["vuetify"],
   devServer: {
+    disableHostCheck: process.env.NODE_ENV === 'development',
     proxy: {
       "/api": {
         target: "http://api.geocase.eu/",