From 55953365599459409e06ce5160023d3b2d13de40 Mon Sep 17 00:00:00 2001
From: AMMAR <ammarbr@hotmail.com>
Date: Wed, 13 Apr 2022 10:42:30 +0200
Subject: [PATCH] #40 - Redesign detailViews

- Show valueDomain urn in dataElement detail view
- Show metaData in boxes instead of table
- Add element path to detail view
- Element path is clickable and shows the detail view of all elements along the path
- Add button to navigate from detailView in treeView
- Show progress circular while element is fetching
- Redesign valueDomain metaData
---
 components/item/meta-data.vue                 | 117 ++++++--
 components/views/data-element-detail-view.vue | 252 ++++++++++++++----
 .../views/groups-records-detail-view.vue      | 185 +++++++++++--
 components/views/namespace-detail-view.vue    |  77 +++++-
 .../views/permitted-value-detail-view.vue     |   2 +-
 components/views/value-domain.vue             |  45 +++-
 locales/de-DE.js                              |   8 +-
 locales/en-US.js                              |  11 +-
 pages/all-elements.vue                        |  14 +-
 pages/tools/search.vue                        |   2 +-
 10 files changed, 602 insertions(+), 111 deletions(-)

diff --git a/components/item/meta-data.vue b/components/item/meta-data.vue
index 7e2f11d..b8ead8a 100644
--- a/components/item/meta-data.vue
+++ b/components/item/meta-data.vue
@@ -1,28 +1,109 @@
 <template>
-  <v-list>
-    <v-subheader>{{ $t('global.metaData') }}</v-subheader>
-    <v-list-item>
-      <v-list-item-content>{{ $t('global.type') }}: {{ data.elementType }}</v-list-item-content>
-    </v-list-item>
-    <v-list-item>
-      <v-list-item-content>{{ $t('global.status') }}: {{ data.status }}</v-list-item-content>
-    </v-list-item>
-    <v-list-item>
-      <v-list-item-content>{{ $t('global.identifier') }}: {{ data.identifier }}</v-list-item-content>
-    </v-list-item>
-    <v-list-item>
-      <v-list-item-content>{{ $t('global.revision') }}: {{ data.revision }}</v-list-item-content>
-    </v-list-item>
-    <v-list-item v-if="type === 'NAMESPACE'">
-      <v-list-item-content>{{ $t('global.hidden') }}: {{ data.hideNamespace }}</v-list-item-content>
-    </v-list-item>
-  </v-list>
+  <v-container>
+    <v-row dense>
+      <v-col>
+        <v-card
+          class="meta-data-card d-flex align-center justify-center"
+        >
+          {{ data.elementType.toUpperCase() }}
+        </v-card>
+      </v-col>
+      <v-col>
+        <v-card
+          class="meta-data-card d-flex align-center justify-center"
+        >
+          {{ data.status.toUpperCase() }}
+        </v-card>
+      </v-col>
+      <v-col>
+        <v-card
+          class="meta-data-card d-flex align-center justify-center pt-4"
+        >
+          <v-menu
+            v-model="showUrnInfo"
+            absolute
+            offset-y
+            style="max-width: 300px;"
+          >
+            <template #activator="{ on, attrs }">
+              <v-div
+                v-bind="attrs"
+                v-on="on"
+              >
+                <p style="display: inline-flex;">
+                  <span>
+                    {{ data.urn.toUpperCase().split(':')[0] }}:
+                  </span>
+                  <span :style="showUrnInfo ? 'color: #e4002c;' : 'color: #000000;'">
+                    {{ data.urn.toUpperCase().split(':')[1] }}:
+                  </span>
+                  <span :style="showUrnInfo ? 'color: #0080c8;' : 'color: #000000;'">
+                    {{ data.urn.toUpperCase().split(':')[2] }}:
+                  </span>
+                  <span :style="showUrnInfo ? 'color: #5b2282;' : 'color: #000000;'">
+                    {{ data.urn.toUpperCase().split(':')[3] }}:
+                  </span>
+                  <span :style="showUrnInfo ? 'color: #f6a200;' : 'color: #000000;'">
+                    {{ data.urn.toUpperCase().split(':')[4] }}
+                  </span>
+                  <span>
+                    <v-icon style="padding-left: 3px;">
+                      mdi-information-outline
+                    </v-icon>
+                  </span>
+                </p>
+              </v-div>
+            </template>
+            <v-list>
+              <v-list-item>
+                <card class="meta-data-card" v-if="showUrnInfo" style="text-align: left;">
+                  <p style="color: #e4002c; height: 5px;">
+                    {{ $t('global.namespaceIdentifier') }}
+                  </p>
+                  <p style="color: #0080c8; height: 5px;">
+                    {{ $t('global.elementType') }}
+                  </p>
+                  <p style="color: #5b2282; height: 5px;">
+                    {{ $t('global.elementIdentifier') }}
+                  </p>
+                  <p style="color: #f6a200; height: 5px;">
+                    {{ $t('global.elementVersion') }}
+                  </p>
+                </card>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </v-card>
+      </v-col>
+      <v-col v-if="type === 'NAMESPACE'">
+        <v-card
+          class="meta-data-card d-flex align-center justify-center"
+        >
+          {{ data.hideNamespace ? $t('global.hidden') : $t('global.public') }}
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 <script>
 export default {
   props: {
     data: { required: true, type: Object },
     type: { required: false, default: 'DATAELEMENT', type: String }
+  },
+  data () {
+    return {
+      showUrnInfo: false
+    }
   }
 }
 </script>
+<style>
+.meta-data-card {
+  border-radius: 75px;
+  elevation: level;
+  height: 100%;
+  padding-inline: 15px;
+  min-height: 50px;
+}
+</style>
diff --git a/components/views/data-element-detail-view.vue b/components/views/data-element-detail-view.vue
index b221b66..3c4a778 100644
--- a/components/views/data-element-detail-view.vue
+++ b/components/views/data-element-detail-view.vue
@@ -1,5 +1,22 @@
 <template>
-  <div>
+  <div v-if="fetchingDataElement">
+    <v-container fluid>
+      <v-row>
+        <v-col
+          align="center"
+          justify="center"
+        >
+          <v-progress-circular
+            :size="500"
+            color="primary"
+            indeterminate
+          >
+          </v-progress-circular>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+  <div v-else>
     <div v-if="dataElement !== undefined">
       <data-element-dialog
         :urn="urn"
@@ -9,12 +26,44 @@
         @dialogClosed="dialog = false"
       />
       <v-card
+        class="detailViewCard"
         color="grey lighten-4"
         flat
       >
         <!-- Namespace Toolbar TODO: Check of this could be outsourced ...-->
         <v-toolbar>
-          <v-toolbar-title>{{ $t('global.properties') }} {{ $t('global.of') }} <b>{{ urn }}</b></v-toolbar-title>
+          <v-toolbar-title>
+            <v-container class="text-center">
+              <v-row no-gutters>
+                <v-col v-for="item in elementPath" :key="item.urn">
+                  <v-row no-gutters style="width: 100%;">
+                    <v-col v-if="!item.urn.includes('namespace')" cols="3">
+                      <v-icon>
+                        mdi-slash-forward
+                      </v-icon>
+                    </v-col>
+                    <v-col cols="9">
+                      <v-btn
+                        color="grey lighten-4"
+                        rounded
+                        :disabled="!activatePathNavigation"
+                        @click="showDetailViewDialog(item.urn)"
+                      >
+                        <div
+                          v-if="item.urn === urn"
+                        >
+                          {{ item.designation }}
+                        </div>
+                        <a v-if="item.urn !== urn">
+                          {{ item.designation }}
+                        </a>
+                      </v-btn>
+                    </v-col>
+                  </v-row>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-toolbar-title>
           <v-spacer />
           <v-btn
             v-if="editable"
@@ -34,50 +83,96 @@
         </v-toolbar>
       </v-card>
       <meta-data :data="dataElement.identification" />
-      <v-list>
-        <v-subheader>{{ $t('global.definitions') }}</v-subheader>
-        <v-list-item>
-          <v-list-item-content>
-            <definition-table :definitions="dataElement.definitions" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-      <v-list>
-        <v-subheader>{{ $t('global.valueDomain') }}</v-subheader>
-        <v-list-item>
-          <v-list-item-content>
-            <value-domain :urn="dataElement.identification.urn" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-      <v-list v-if="dataElement.slots.length > 0">
-        <v-subheader>{{ $t('global.slots') }}</v-subheader>
-        <v-list-item>
-          <v-list-item-content>
-            <slot-table :slots="dataElement.slots" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-      <v-list v-if="dataElement.relations.length > 0">
-        <v-subheader>{{ $t('global.relations') }}</v-subheader>
-        <v-list-item>
-          <v-list-item-content>
-            <relation-table
-              :relations="dataElement.relations"
-              :detail-view-available="relationDetailViewAvailable"
-            />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-      <v-list v-if="dataElement.conceptAssociations.length > 0">
-        <v-subheader>{{ $t('global.conceptAssociations') }}</v-subheader>
-        <v-list-item>
-          <v-list-item-content>
-            <concept-association-table :associations="dataElement.conceptAssociations" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
+      <v-card class="detailViewCard">
+        <v-list>
+          <v-subheader>{{ $t('global.definitions') }}</v-subheader>
+          <v-list-item>
+            <v-list-item-content>
+              <definition-table :definitions="dataElement.definitions" />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card>
+      <v-card class="detailViewCard">
+        <v-list>
+          <v-subheader>{{ $t('global.valueDomain') }} : {{ dataElement.valueDomainUrn }}</v-subheader>
+          <v-list-item>
+            <v-list-item-content>
+              <value-domain :urn="dataElement.identification.urn" />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card>
+      <v-card class="detailViewCard">
+        <v-list v-if="dataElement.slots.length > 0">
+          <v-subheader>{{ $t('global.slots') }}</v-subheader>
+          <v-list-item>
+            <v-list-item-content>
+              <slot-table :slots="dataElement.slots" />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card>
+      <v-card class="detailViewCard">
+        <v-list v-if="dataElement.relations.length > 0">
+          <v-subheader>{{ $t('global.relations') }}</v-subheader>
+          <v-list-item>
+            <v-list-item-content>
+              <relation-table
+                :relations="dataElement.relations"
+                :detail-view-available="relationDetailViewAvailable"
+              />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card>
+      <v-card class="detailViewCard">
+        <v-list v-if="dataElement.conceptAssociations.length > 0">
+          <v-subheader>{{ $t('global.conceptAssociations') }}</v-subheader>
+          <v-list-item>
+            <v-list-item-content>
+              <concept-association-table :associations="dataElement.conceptAssociations" />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card>
+      <v-btn
+        v-if="showJumpToElementButton"
+        class="d-block mr-0 ml-auto"
+        color="primary"
+        rounded
+        @click="dialog.elementType = 'NAMESPACE'; dialog.showNamespace = true"
+      >
+        {{ $t('global.button.showInTreeView') }}
+        <v-icon dark>
+          mdi-arrow-right-circle
+        </v-icon>
+      </v-btn>
     </div>
+    <v-dialog
+      v-model="detailViewDialog.show"
+      width="600"
+    >
+      <v-card class="dialogCard">
+        <GroupsRecordsDetailView
+          v-if="detailViewDialog.urn.toUpperCase().includes('DATAELEMENTGROUP')
+            || detailViewDialog.urn.toUpperCase().includes('RECORD')"
+          :urn="detailViewDialog.urn"
+          :parent-urn="detailViewDialog.parentUrn"
+          :activate-path-navigation="false"
+          :show-jump-to-element-button="true"
+          :editable="false"
+          :deletable="false"
+        />
+        <NamespaceDetailView
+          v-if="detailViewDialog.urn.toUpperCase().includes('NAMESPACE')"
+          :show-jump-to-element-button="true"
+          :urn="detailViewDialog.urn"
+          :editable="false"
+          :deletable="false"
+        />
+      </v-card>
+    </v-dialog>
   </div>
 </template>
 <script>
@@ -89,6 +184,7 @@ import DataElementDialog from '~/components/dialogs/data-element-dialog'
 import RelationTable from '~/components/tables/relation-table'
 import ConceptAssociationTable from '~/components/tables/concept-association-table'
 import ValueDomain from '~/components/views/value-domain'
+import NamespaceDetailView from '~/components/views/namespace-detail-view.vue'
 export default {
   components: {
     DefinitionTable,
@@ -97,31 +193,47 @@ export default {
     DataElementDialog,
     RelationTable,
     ConceptAssociationTable,
-    ValueDomain
+    ValueDomain,
+    GroupsRecordsDetailView: () => import('~/components/views/groups-records-detail-view'),
+    NamespaceDetailView
   },
   props: {
     urn: { required: true, type: String },
+    parentUrn: { required: false, default: '', type: String },
+    activatePathNavigation: { required: false, default: true, type: Boolean },
     editable: { required: false, default: false, type: Boolean },
     deletable: { required: false, default: false, type: Boolean },
-    relationDetailViewAvailable: { required: false, default: false, type: Boolean }
+    relationDetailViewAvailable: { required: false, default: false, type: Boolean },
+    showJumpToElementButton: { required: false, default: false, type: Boolean }
   },
   data () {
     return {
       ajax: {
         dataElementUrl: process.env.mdrBackendUrl + '/v1/element/'
       },
+      detailViewDialog: {
+        urn: '',
+        parentUrn: '',
+        show: false,
+        namespaceIdentifier: -1
+      },
+      fetchingDataElement: true,
       dataElement: undefined,
-      dialog: false
+      dialog: false,
+      elementPath: []
     }
   },
   watch: {
     urn (n) {
+      this.fetchingDataElement = true
       this.fetchDataElementDetails()
+      this.fetchElementPath()
     }
   },
   mounted () {
     this.$log.debug('Mounted DataElement view ...')
     this.fetchDataElementDetails()
+    this.fetchElementPath()
   },
   methods: {
     async fetchDataElementDetails () {
@@ -134,6 +246,7 @@ export default {
           this.$axios.$get(this.ajax.dataElementUrl + this.urn + '/relations', Ajax.header.ignoreLanguage)
             .then(function (res1) {
               this.dataElement.relations = res1
+              this.fetchingDataElement = false
             }.bind(this))
             .catch(function (err) {
               this.$log.error('Could not fetch relations: ' + err)
@@ -161,7 +274,50 @@ export default {
             this.$log.debug('Could not delete this item: ' + err)
           }.bind(this))
       }
+    },
+    async fetchElementPath () {
+      this.$log.debug('DataElement DetailView: Fetching DataElement path ...')
+      await this.$axios.$get(this.ajax.dataElementUrl + this.urn + '/paths',
+        Ajax.header.ignoreLanguage)
+        .then(function (res) {
+          for (let i = 0; i < res.length; i++) {
+            if (res[i][res[i].length - 2].urn === this.parentUrn) {
+              this.elementPath = res[i]
+              break
+            }
+          }
+        }.bind(this))
+        .catch(function (err) {
+          this.$log.error('Unable to fetch DataElement paths: ' + err)
+        }.bind(this))
+    },
+    showDetailViewDialog (urn) {
+      if (urn.toUpperCase().includes('DATAELEMENT:')) {
+        return
+      }
+      this.detailViewDialog.urn = urn
+      if (!urn.toUpperCase().includes('NAMESPACE')) {
+        for (let i = 0; i < this.elementPath.length; i++) {
+          if (this.elementPath[i].urn === urn) {
+            this.detailViewDialog.parentUrn = this.elementPath[i - 1].urn
+            break
+          }
+        }
+      }
+      this.detailViewDialog.show = true
     }
   }
 }
 </script>
+<style>
+.dialogCard {
+  padding-top: 40px;
+  padding-bottom: 25px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.detailViewCard {
+  margin-bottom: 30px;
+}
+</style>
diff --git a/components/views/groups-records-detail-view.vue b/components/views/groups-records-detail-view.vue
index f4a2c51..f86359c 100644
--- a/components/views/groups-records-detail-view.vue
+++ b/components/views/groups-records-detail-view.vue
@@ -1,5 +1,22 @@
 <template>
-  <div v-if="element !== undefined">
+  <div v-if="fetchingElement">
+    <v-container fluid>
+      <v-row>
+        <v-col
+          align="center"
+          justify="center"
+        >
+          <v-progress-circular
+            :size="500"
+            color="primary"
+            indeterminate
+          >
+          </v-progress-circular>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+  <div v-else>
     <GroupRecordDialog
       :show="dialog"
       :urn="urn"
@@ -10,12 +27,40 @@
       @dialogClosed="dialog = false"
     />
     <v-card
+      class="detailViewCard"
       color="grey lighten-4"
       flat
     >
       <!-- Namespace Toolbar TODO: Check of this could be outsourced ...-->
       <v-toolbar>
-        <v-toolbar-title>{{ $t('global.properties') }} {{ $t('global.of') }} <b>{{ urn }}</b></v-toolbar-title>
+        <v-toolbar-title>
+          <v-container class="text-center">
+            <v-row no-gutters>
+              <v-col v-for="item in elementPath" :key="item.urn">
+                <v-row no-gutters style="width: 100%;">
+                  <v-col v-if="!item.urn.includes('namespace')" cols="3">
+                    <v-icon>
+                      mdi-slash-forward
+                    </v-icon>
+                  </v-col>
+                  <v-col cols="9">
+                    <v-btn
+                      color="grey lighten-4"
+                      rounded
+                      :disabled="!activatePathNavigation"
+                      @click="showDetailViewDialog(item.urn)"
+                    >
+                      <div v-if="item.urn === urn">
+                        {{ item.designation }}
+                      </div>
+                      <a v-if="item.urn !== urn">{{ item.designation }}</a>
+                    </v-btn>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-toolbar-title>
         <v-spacer />
         <v-tooltip bottom>
           <template #activator="{ on, attrs }">
@@ -50,22 +95,61 @@
       </v-toolbar>
     </v-card>
     <meta-data :data="element.identification" />
-    <v-list>
-      <v-subheader>{{ $t('global.definitions') }}</v-subheader>
-      <v-list-item>
-        <v-list-item-content>
-          <definition-table :definitions="element.definitions" />
-        </v-list-item-content>
-      </v-list-item>
-    </v-list>
-    <v-list v-if="element.members.length > 0">
-      <v-subheader>{{ $t('global.members') }}</v-subheader>
-      <v-list-item>
-        <v-list-item-content>
-          <members-table :members="element.members" />
-        </v-list-item-content>
-      </v-list-item>
-    </v-list>
+    <v-card class="detailViewCard">
+      <v-list>
+        <v-subheader>{{ $t('global.definitions') }}</v-subheader>
+        <v-list-item>
+          <v-list-item-content>
+            <definition-table :definitions="element.definitions" />
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-card>
+    <v-card class="detailViewCard">
+      <v-list v-if="element.members.length > 0">
+        <v-subheader>{{ $t('global.members') }}</v-subheader>
+        <v-list-item>
+          <v-list-item-content>
+            <members-table :members="element.members" />
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-card>
+    <v-dialog
+      v-model="detailViewDialog.show"
+      width="600"
+    >
+      <v-card class="dialogCard">
+        <GroupsRecordsDetailView
+          v-if="detailViewDialog.urn.toUpperCase().includes('DATAELEMENTGROUP')
+            || detailViewDialog.urn.toUpperCase().includes('RECORD')"
+          :urn="detailViewDialog.urn"
+          :parent-urn="detailViewDialog.parentUrn"
+          :activate-path-navigation="false"
+          :show-jump-to-element-button="true"
+          :editable="false"
+          :deletable="false"
+        />
+        <NamespaceDetailView
+          v-if="detailViewDialog.urn.toUpperCase().includes('NAMESPACE')"
+          :urn="detailViewDialog.urn"
+          :editable="false"
+          :deletable="false"
+        />
+      </v-card>
+    </v-dialog>
+    <v-btn
+      v-if="showJumpToElementButton"
+      class="d-block mr-0 ml-auto"
+      color="primary"
+      rounded
+      @click="$root.$emit('changeActiveElement', urn)"
+    >
+      {{ $t('global.button.showInTreeView') }}
+      <v-icon dark>
+        mdi-arrow-right-circle
+      </v-icon>
+    </v-btn>
   </div>
 </template>
 <script>
@@ -75,23 +159,37 @@ import DefinitionTable from '~/components/tables/definition-table'
 import MetaData from '~/components/item/meta-data'
 import MembersTable from '~/components/tables/members-table'
 import GroupRecordDialog from '~/components/dialogs/group-record-dialog'
+import NamespaceDetailView from '~/components/views/namespace-detail-view.vue'
 export default {
   components: {
     MetaData,
     DefinitionTable,
     MembersTable,
-    GroupRecordDialog
+    GroupRecordDialog,
+    GroupsRecordsDetailView: () => import('~/components/views/groups-records-detail-view'),
+    NamespaceDetailView
   },
   props: {
     urn: { required: true, type: String },
+    parentUrn: { required: false, default: '', type: String },
     editable: { required: false, default: false, type: Boolean },
-    deletable: { required: false, default: false, type: Boolean }
+    deletable: { required: false, default: false, type: Boolean },
+    activatePathNavigation: { required: false, default: true, type: Boolean },
+    showJumpToElementButton: { required: false, default: false, type: Boolean }
   },
   data () {
     return {
       ajax: {
         elementUrl: process.env.mdrBackendUrl + '/v1/element/'
       },
+      detailViewDialog: {
+        urn: '',
+        parentUrn: '',
+        show: false,
+        namespaceIdentifier: -1
+      },
+      fetchingElement: true,
+      elementPath: [],
       element: undefined,
       dialog: false
     }
@@ -103,16 +201,20 @@ export default {
   },
   watch: {
     urn (n) {
+      this.fetchingElement = true
       this.loadDetails()
+      this.fetchElementPath()
     }
   },
   mounted () {
     this.loadDetails()
+    this.fetchElementPath()
   },
   methods: {
     async loadDetails () {
       await this.$axios.$get(this.ajax.elementUrl + this.urn, Ajax.header.ignoreLanguage)
         .then(function (res) {
+          this.fetchingElement = false
           this.element = res
         }.bind(this))
     },
@@ -149,7 +251,50 @@ export default {
             this.$log.debug('Could not delete this item: ' + err)
           }.bind(this))
       }
+    },
+    async fetchElementPath () {
+      this.$log.debug('DataElement DetailView: Fetching DataElement path ...')
+      await this.$axios.$get(this.ajax.elementUrl + this.urn + '/paths',
+        Ajax.header.ignoreLanguage)
+        .then(function (res) {
+          for (let i = 0; i < res.length; i++) {
+            if (res[i][res[i].length - 2].urn === this.parentUrn) {
+              this.elementPath = res[i]
+              break
+            }
+          }
+        }.bind(this))
+        .catch(function (err) {
+          this.$log.error('Unable to fetch DataElement paths: ' + err)
+        }.bind(this))
+    },
+    showDetailViewDialog (urn) {
+      if (this.elementPath.length > 0 && this.elementPath.slice(-1)[0].urn === urn) {
+        return
+      }
+      this.detailViewDialog.urn = urn
+      if (!urn.toUpperCase().includes('NAMESPACE')) {
+        for (let i = 0; i < this.elementPath.length; i++) {
+          if (this.elementPath[i].urn === urn) {
+            this.detailViewDialog.parentUrn = this.elementPath[i - 1].urn
+            break
+          }
+        }
+      }
+      this.detailViewDialog.show = true
     }
   }
 }
 </script>
+<style>
+.dialogCard {
+  padding-top: 40px;
+  padding-bottom: 25px;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.detailViewCard {
+  margin-bottom: 30px;
+}
+</style>
diff --git a/components/views/namespace-detail-view.vue b/components/views/namespace-detail-view.vue
index 4b35faa..a9f7227 100644
--- a/components/views/namespace-detail-view.vue
+++ b/components/views/namespace-detail-view.vue
@@ -1,7 +1,24 @@
 <template>
-  <div v-if="namespace !== undefined">
+  <div v-if="fetchingNamespace">
+    <v-container fluid>
+      <v-row>
+        <v-col
+          align="center"
+          justify="center"
+        >
+          <v-progress-circular
+            :size="500"
+            color="primary"
+            indeterminate
+          >
+          </v-progress-circular>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+  <div v-else>
     <namespace-dialog
-      :id="id"
+      :id="namespaceIdentifier"
       :show="dialog"
       @save="$emit('save', $event); fetchNamespaceDetails()"
       @saveFailure="$emit('saveFailure', $event)"
@@ -13,7 +30,12 @@
     >
       <!-- Namespace Toolbar TODO: Check of this could be outsourced ...-->
       <v-toolbar>
-        <v-toolbar-title>{{ $t('global.properties') }} {{ $t('global.of') }} <b>{{ urn }}</b></v-toolbar-title>
+        <v-btn
+          color="grey lighten-4"
+          rounded
+        >
+          {{ namespace.definitions[0].designation }}
+        </v-btn>
         <v-spacer />
         <v-btn
           v-if="editable"
@@ -51,6 +73,18 @@
         </v-list-item>
       </template>
     </v-list>
+    <v-btn
+      v-if="showJumpToElementButton"
+      class="d-block mr-0 ml-auto"
+      color="primary"
+      rounded
+      @click="$root.$emit('changeActiveElement', urn)"
+    >
+      {{ $t('global.button.showInTreeView') }}
+      <v-icon dark>
+        mdi-arrow-right-circle
+      </v-icon>
+    </v-btn>
   </div>
 </template>
 <script>
@@ -67,34 +101,46 @@ export default {
     NamespaceDialog
   },
   props: {
-    id: { required: true, type: Number },
     urn: { required: true, type: String },
     editable: { required: false, default: false, type: Boolean },
-    deletable: { required: false, default: false, type: Boolean }
+    deletable: { required: false, default: false, type: Boolean },
+    showJumpToElementButton: { required: false, default: false, type: Boolean }
   },
   data () {
     return {
       ajax: {
         namespaceUrl: process.env.mdrBackendUrl + '/v1/namespaces/'
       },
+      detailViewDialog: {
+        urn: '',
+        show: false,
+        namespaceIdentifier: -1
+      },
+      fetchingNamespace: true,
+      namespaceIdentifier: -1,
       namespace: undefined,
       dialog: false
     }
   },
   watch: {
-    id (n) {
+    urn (n) {
+      this.fetchingNamespace = true
+      this.namespaceIdentifier = this.urn.split(':')[3]
       this.fetchNamespaceDetails()
     }
   },
   mounted () {
     this.$log.debug('Mounted Namespace view ...')
+    this.namespaceIdentifier = this.urn.split(':')[3]
     this.fetchNamespaceDetails()
   },
   methods: {
     async fetchNamespaceDetails () {
-      await this.$axios.$get(this.ajax.namespaceUrl + this.id, Ajax.header.ignoreLanguage)
+      await this.$axios.$get(this.ajax.namespaceUrl + this.namespaceIdentifier,
+        Ajax.header.ignoreLanguage)
         .then(function (res) {
           this.$log.debug('Fetching Namespace details ...')
+          this.fetchingNamespace = false
           this.namespace = Object.assign({}, res)
         }.bind(this))
         .catch(function (err) {
@@ -106,7 +152,7 @@ export default {
     },
     async deleteNamespace () {
       if (confirm(this.$i18n.t('global.itemDialog.deleteItemTitle').toString())) {
-        await this.$axios.$delete(this.ajax.namespaceUrl + this.id)
+        await this.$axios.$delete(this.ajax.namespaceUrl + this.namespaceIdentifier)
           .then(function (res) {
             this.$emit('delete', {
               id: this.id
@@ -119,6 +165,21 @@ export default {
             this.$log.debug('Could not delete this item: ' + err)
           }.bind(this))
       }
+    },
+    showDetailViewDialog (urn) {
+      if (this.elementPath.length > 0 && this.elementPath.slice(-1)[0].urn === urn) {
+        return
+      }
+      this.detailViewDialog.urn = urn
+      if (!urn.toUpperCase().includes('NAMESPACE')) {
+        for (let i = 0; i < this.elementPath.length; i++) {
+          if (this.elementPath[i].urn === urn) {
+            this.detailViewDialog.parentUrn = this.elementPath[i - 1].urn
+            break
+          }
+        }
+      }
+      this.detailViewDialog.show = true
     }
   }
 }
diff --git a/components/views/permitted-value-detail-view.vue b/components/views/permitted-value-detail-view.vue
index 436dfdb..b6e1818 100644
--- a/components/views/permitted-value-detail-view.vue
+++ b/components/views/permitted-value-detail-view.vue
@@ -29,7 +29,7 @@
       <meta-data :data="permittedValue.identification" />
       <v-list>
         <v-subheader v-if="permittedValue.value">{{ $t('global.value') }}: {{ permittedValue.value }}</v-subheader>
-        <v-subheader>{{ $t('global.definitions') }}</v-subheader>
+        <v-subheader> {{ $t('global.definitions') }} </v-subheader>
         <v-list-item>
           <v-list-item-content>
             <definition-table :definitions="permittedValue.definitions" />
diff --git a/components/views/value-domain.vue b/components/views/value-domain.vue
index a8d2efd..5066d78 100644
--- a/components/views/value-domain.vue
+++ b/components/views/value-domain.vue
@@ -9,6 +9,10 @@
           sm="4"
         >
           <v-card
+            v-if="valueDomainMetaData.values[n-1] !== false &&
+              valueDomainMetaData.values[n-1] !== true &&
+              valueDomainMetaData.values[n-1] !== null &&
+              valueDomainMetaData.values[n-1] !== ''"
             class="pa-2"
             outlined
             tile
@@ -26,7 +30,10 @@
       class="elevation-1"
       @click:row="handlePermittedValueClicked"
     />
-    <concept-association-table v-if="valueDomain.conceptAssociations.length > 0" :associations="valueDomain.conceptAssociations" />
+    <concept-association-table
+      v-if="valueDomain.conceptAssociations.length > 0"
+      :associations="valueDomain.conceptAssociations"
+    />
     <v-dialog
       v-model="showPermittedValueDetailView"
       width="600"
@@ -122,29 +129,46 @@ export default {
       this.valueDomainMetaData.values = []
       this.valueDomainMetaData.keys.push('Type')
       this.valueDomainMetaData.values.push(this.valueDomain.type)
+      let range = ''
       switch (this.valueDomain.type) {
         case 'STRING':
-          this.valueDomainMetaData.keys.push(this.$i18n.t('global.form.label.useRegEx'), this.$i18n.t('global.regEx'), this.$i18n.t('global.form.label.useMaximumLength'), this.$i18n.t('global.maximumLength'))
-          this.valueDomainMetaData.values.push(this.valueDomain.text.useRegEx, this.valueDomain.text.regEx, this.valueDomain.text.useMaximumLength, this.valueDomain.text.maximumLength)
+          this.valueDomainMetaData.keys.push(this.$i18n.t('global.regEx'),
+            this.$i18n.t('global.maximumLength'))
+          this.valueDomainMetaData.values.push(this.valueDomain.text.regEx,
+            this.valueDomain.text.maximumLength)
           break
         case 'NUMERIC':
           this.valueDomainMetaData.values[0] = this.valueDomain.numeric.type
-          this.valueDomainMetaData.keys.push(this.$i18n.t('global.form.label.useMinimum'), this.$i18n.t('global.form.label.useMaximum'), this.$i18n.t('global.minimum'), this.$i18n.t('global.maximum'), this.$i18n.t('global.form.label.unitOfMeasure'))
-          this.valueDomainMetaData.values.push(this.valueDomain.numeric.useMinimum, this.valueDomain.numeric.useMaximum, this.valueDomain.numeric.minimum, this.valueDomain.numeric.maximum, this.valueDomain.numeric.unitOfMeasure)
+          if (this.valueDomain.numeric.minimum || this.valueDomain.numeric.maximum) {
+            range = 'x'
+          }
+          if (this.valueDomain.numeric.minimum) {
+            range = this.valueDomain.numeric.minimum + ' <= ' + range
+          }
+          if (this.valueDomain.numeric.maximum) {
+            range = range + ' <= ' + this.valueDomain.numeric.maximum
+          }
+          this.valueDomainMetaData.keys.push(this.$i18n.t('global.range'),
+            this.$i18n.t('global.form.label.unitOfMeasure'))
+          this.valueDomainMetaData.values.push(range, this.valueDomain.numeric.unitOfMeasure)
           break
         case 'ENUMERATED':
           break
         case 'TIME':
-          this.valueDomainMetaData.keys.push(this.$i18n.t('global.time'), this.$i18n.t('global.hourFormat'))
-          this.valueDomainMetaData.values.push(this.valueDomain.datetime.time, this.valueDomain.datetime.hourFormat)
+          this.valueDomainMetaData.keys.push(this.$i18n.t('global.time'),
+            this.$i18n.t('global.hourFormat'))
+          this.valueDomainMetaData.values.push(this.valueDomain.datetime.time,
+            this.valueDomain.datetime.hourFormat)
           break
         case 'DATE':
           this.valueDomainMetaData.keys.push(this.$i18n.t('global.date'))
           this.valueDomainMetaData.values.push(this.valueDomain.datetime.date)
           break
         case 'DATETIME':
-          this.valueDomainMetaData.keys.push(this.$i18n.t('global.time'), this.$i18n.t('global.hourFormat'), this.$i18n.t('global.date'))
-          this.valueDomainMetaData.values.push(this.valueDomain.datetime.time, this.valueDomain.datetime.hourFormat, this.valueDomain.datetime.date)
+          this.valueDomainMetaData.keys.push(this.$i18n.t('global.time'),
+            this.$i18n.t('global.hourFormat'), this.$i18n.t('global.date'))
+          this.valueDomainMetaData.values.push(this.valueDomain.datetime.time,
+            this.valueDomain.datetime.hourFormat, this.valueDomain.datetime.date)
           break
         default:
           break
@@ -152,7 +176,8 @@ export default {
     },
     async fetchValueDomain () {
       this.$log.debug('Fetching Value Domain of URN: ' + this.urn)
-      await this.$axios.$get(this.ajax.dataElementUrl + this.urn + '/valuedomain', Ajax.header.preferredLanguage)
+      await this.$axios.$get(this.ajax.dataElementUrl + this.urn + '/valuedomain',
+        Ajax.header.preferredLanguage)
         .then(function (res) {
           this.valueDomain = res
         }.bind(this))
diff --git a/locales/de-DE.js b/locales/de-DE.js
index 739de8b..9e8f72f 100644
--- a/locales/de-DE.js
+++ b/locales/de-DE.js
@@ -44,7 +44,8 @@ export default {
       create: 'Erstellen',
       edit: 'Editieren',
       delete: 'Löschen',
-      close: 'Schließen'
+      close: 'Schließen',
+      showInTreeView: 'IM TREEVIEW ZEIGEN'
     },
     addItem: 'ARTIKEL HINZUFÜGEN',
     dragAndDrop: 'einfach ziehen und ablegen',
@@ -57,6 +58,10 @@ export default {
     identifier: 'Identifier',
     revision: 'Revision',
     urn: 'URN',
+    namespaceIdentifier: 'NAMESPACE IDENTIFIER',
+    elementIdentifier: 'ELEMENT IDENTIFIER',
+    elementVersion: 'ELEMENT VERSION',
+    elementType: 'ELEMENT TYPE',
     hidden: 'Hidden',
     property: 'Property',
     properties: 'Eigenschaften',
@@ -99,6 +104,7 @@ export default {
     regEx: 'RegEx',
     minimum: 'Minimum',
     maximum: 'Maximum',
+    range: 'Bereich',
     maximumLength: 'Maximale Länge',
     date: 'Datum',
     time: 'Zeit',
diff --git a/locales/en-US.js b/locales/en-US.js
index 0db3743..597dc32 100644
--- a/locales/en-US.js
+++ b/locales/en-US.js
@@ -44,8 +44,11 @@ export default {
       create: 'Create',
       edit: 'Edit',
       delete: 'Delete',
-      close: 'Close'
+      close: 'Close',
+      showInTreeView: 'SHOW IN TREEVIEW'
     },
+    public: 'PUBLIC',
+    hidden: 'HIDDEN',
     addItem: 'ADD ITEM',
     dragAndDrop: 'simply drag and drop',
     metaData: 'Meta Data',
@@ -57,7 +60,10 @@ export default {
     identifier: 'Identifier',
     revision: 'Revision',
     urn: 'URN',
-    hidden: 'Hidden',
+    namespaceIdentifier: 'NAMESPACE IDENTIFIER',
+    elementIdentifier: 'ELEMENT IDENTIFIER',
+    elementVersion: 'ELEMENT VERSION',
+    elementType: 'ELEMENT TYPE',
     property: 'Property',
     properties: 'Properties',
     of: 'of',
@@ -100,6 +106,7 @@ export default {
     regEx: 'RegEx',
     minimum: 'Minimum',
     maximum: 'Maximum',
+    range: 'Range',
     maximumLength: 'Maximum length',
     date: 'Date',
     time: 'Time',
diff --git a/pages/all-elements.vue b/pages/all-elements.vue
index 76ccb45..4d32b5d 100644
--- a/pages/all-elements.vue
+++ b/pages/all-elements.vue
@@ -147,6 +147,7 @@
           <DataElementDetailView
             v-if="selected && selectedElement.identification.elementType === 'DATAELEMENT'"
             :urn="selectedElement.identification.urn"
+            :parent-urn="activeElements.slice(-1)[0].parentUrn"
             :editable="true"
             :deletable="true"
             @save="updateTree($event); snackbar.saveSuccess = true"
@@ -158,6 +159,7 @@
             v-if="selected && (selectedElement.identification.elementType === 'DATAELEMENTGROUP'
               || selectedElement.identification.elementType === 'RECORD' )"
             :urn="selectedElement.identification.urn"
+            :parent-urn="activeElements.slice(-1)[0].parentUrn"
             :editable="true"
             :deletable="true"
             @save="snackbar.saveSuccess = true"
@@ -168,7 +170,6 @@
           />
           <NamespaceDetailView
             v-if="selected && selectedElement.identification.elementType === 'NAMESPACE'"
-            :id="selectedElement.identification.identifier"
             :urn="selectedElement.identification.urn"
             :editable="true"
             :deletable="true"
@@ -257,6 +258,13 @@ export default {
   },
   mounted () {
     this.fetchNamespaces()
+    const findAnd = require('find-and')
+    this.$root.$on('changeActiveElement', (urn) => {
+      const item = findAnd.returnFound(this.treeItems, { urn })
+      this.activeElements = []
+      this.activeElements.unshift(item)
+      this.setActiveElements(this.activeElements)
+    })
   },
   methods: {
     updateTree (element) {
@@ -354,6 +362,7 @@ export default {
             if (member.status !== 'OUTDATED') {
               members.push({
                 id: this.generateItemId(),
+                parentUrn: element.urn,
                 urn,
                 editable: this.getNamespace(urn).editable,
                 isPreferredLanguage: Ajax.preferredLanguage.includes(member.definitions[0].language),
@@ -436,7 +445,8 @@ export default {
         return
       }
       if (elements.length > 0) {
-        const activeItems = findAnd.returnFound(this.treeItems, { urn: elements.slice(-1)[0].urn })
+        const activeItems =
+          findAnd.returnFound(this.treeItems, { urn: elements.slice(-1)[0].urn })
         this.activeElements = Array.isArray(activeItems) ? activeItems : [activeItems]
       } else {
         this.activeElements = []
diff --git a/pages/tools/search.vue b/pages/tools/search.vue
index c95507a..fb75688 100644
--- a/pages/tools/search.vue
+++ b/pages/tools/search.vue
@@ -94,7 +94,7 @@
           <template v-if="showDetails">
             <namespace-detail-view
               v-if="detailItem.type == 'NAMESPACE'"
-              :id="detailItem.id"
+              namespaceIdentifier="detailItem.id"
               :urn="detailItem.urn"
               @delete="executeSearch(); snackbar.deleteSuccess = true"
               @deleteFailure="snackbar.deleteFailure = true"