Merge pull request #71 from mig-frankfurt/bugfix/70_Available_Element…

…_paths_are_not_displayed_in_the_search_view

#70 - Available Element paths are not displayed in the search view

components/tables/paths-table.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-data-table
+    :headers="table.headers"
+    :items="paths"
+    hide-default-header
+    hide-default-footer
+    class="elevation-1"
+  />
+</template>
+<script>
+export default {
+  props: {
+    paths: { required: false, default: () => [], type: Array }
+  },
+  data () {
+    return {
+      table: {
+        headers: [
+          {
+            text: this.$i18n.t('global.path'),
+            align: 'start',
+            sortable: false,
+            value: 'item'
+          }
+        ]
+      }
+    }
+  }
+}
+</script>

components/views/data-element-detail-view.vue

@@ -25,6 +25,7 @@
         @dialogClosed="dialog = false"
       />
       <v-card
+        v-if="!hidePath"
         class="detailViewCard"
         color="grey lighten-4"
         flat
@@ -34,7 +35,7 @@
           <v-toolbar-title>
             <v-container class="text-center">
               <v-row no-gutters>
-                <v-col v-for="item in elementPath" :key="item.urn">
+                <v-col v-for="item in elementPathInTree" :key="item.urn">
                   <v-icon v-if="!item.urn.includes('namespace')">
                     mdi-slash-forward
                   </v-icon>
@@ -82,6 +83,32 @@
         </v-toolbar>
       </v-card>
       <meta-data :data="dataElement.identification" />
+      <v-card v-if="hidePath" class="detailViewCard">
+        <v-list>
+          <v-subheader>
+            {{ $t('global.paths') }}
+            <div class="choose-button-wrapper">
+              <button
+                :class="getLeftButtonClass()"
+                @click="selectedElementPathType = 'DESIGNATION'"
+              >
+                {{ $t('global.designation') }}
+              </button>
+              <button
+                :class="getRightButtonClass()"
+                @click="selectedElementPathType = 'URN'"
+              >
+                {{ $t('global.urn') }}
+              </button>
+            </div>
+          </v-subheader>
+          <v-list-item>
+            <v-list-item-content>
+              <paths-table :paths="allElementPathsAsString" />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-card>
       <v-card class="detailViewCard">
         <v-list>
           <v-subheader>{{ $t('global.definitions') }}</v-subheader>
@@ -184,8 +211,10 @@ 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'
+import PathsTable from '~/components/tables/paths-table'
 export default {
   components: {
+    PathsTable,
     DefinitionTable,
     SlotTable,
     MetaData,
@@ -198,6 +227,7 @@ export default {
   },
   props: {
     urn: { required: true, type: String },
+    hidePath: { required: false, default: false, type: Boolean },
     parentUrn: { required: false, default: '', type: String },
     activatePathNavigation: { required: false, default: true, type: Boolean },
     editable: { required: false, default: false, type: Boolean },
@@ -216,13 +246,23 @@ export default {
         show: false,
         namespaceIdentifier: -1
       },
+      showAllPaths: false,
       fetchingDataElement: true,
       dataElement: undefined,
       dialog: false,
-      elementPath: []
+      elementPathInTree: [],
+      allElementPaths: [],
+      allElementPathsAsString: [],
+      selectedElementPathType: 'DESIGNATION'
     }
   },
   watch: {
+    allElementPaths () {
+      this.allElementPathsAsString = this.getElementPathsAsStrings(this.selectedElementPathType)
+    },
+    selectedElementPathType () {
+      this.allElementPathsAsString = this.getElementPathsAsStrings(this.selectedElementPathType)
+    },
     urn (n) {
       this.fetchingDataElement = true
       this.fetchDataElementDetails()
@@ -235,6 +275,18 @@ export default {
     this.fetchElementPath()
   },
   methods: {
+    getLeftButtonClass () {
+      return {
+        'left-button-marked': this.selectedElementPathType === 'DESIGNATION',
+        'left-button': this.selectedElementPathType !== 'DESIGNATION'
+      }
+    },
+    getRightButtonClass () {
+      return {
+        'right-button-marked': this.selectedElementPathType === 'URN',
+        'right-button': this.selectedElementPathType !== 'URN'
+      }
+    },
     async fetchDataElementDetails () {
       this.$log.debug('DataElement DetailView: Fetching DataElement details ...')
       await this.$axios.$get(this.ajax.dataElementUrl + this.urn, Ajax.header.ignoreLanguage)
@@ -277,9 +329,10 @@ export default {
       await this.$axios.$get(this.ajax.dataElementUrl + this.urn + '/paths',
         Ajax.header.ignoreLanguage)
         .then(function (res) {
+          this.allElementPaths = res
           for (let i = 0; i < res.length; i++) {
             if (res[i][res[i].length - 2].urn === this.parentUrn) {
-              this.elementPath = res[i]
+              this.elementPathInTree = res[i]
               break
             }
           }
@@ -288,15 +341,38 @@ export default {
           this.$log.error('Unable to fetch DataElement paths: ' + err)
         }.bind(this))
     },
+    getElementPathsAsStrings (type) {
+      let pathsAsStrings = []
+      for (let i = 0; i < this.allElementPaths.length; i++) {
+        let path = ''
+        for (let j = 0; j < this.allElementPaths[i].length; j++) {
+          if (type.toUpperCase() === 'URN') {
+            path = path + this.allElementPaths[i][j].urn
+          } else {
+            path = path + this.allElementPaths[i][j].designation
+          }
+          if (j !== this.allElementPaths[i].length - 1) {
+            path = path + ' / '
+          }
+        }
+        pathsAsStrings.push(path)
+      }
+      pathsAsStrings = pathsAsStrings.map(function (item) {
+        return {
+          item
+        }
+      })
+      return pathsAsStrings
+    },
     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
+        for (let i = 0; i < this.elementPathInTree.length; i++) {
+          if (this.elementPathInTree[i].urn === urn) {
+            this.detailViewDialog.parentUrn = this.elementPathInTree[i - 1].urn
             break
           }
         }
@@ -325,4 +401,53 @@ export default {
   overflow: hidden;
   text-overflow: fade;
 }
+
+.left-button {
+  background-color: white;
+  color: #21587f;
+  border-radius: 6.5rem 0 0 6.5rem;
+  border: solid 0.1rem #21587f;
+  width: 110px;
+  height: 35px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.left-button-marked {
+  background-color: #21587f;
+  color: white;
+  border-radius: 6.5rem 0 0 6.5rem;
+  border: none;
+  width: 110px;
+  height: 35px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.right-button {
+  background-color: white;
+  color: #21587f;
+  border-radius: 0 6.5rem 6.5rem 0;
+  border: solid 0.1rem #21587f;
+  width: 110px;
+  height: 35px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.right-button-marked {
+  background-color: #21587f;
+  color: white;
+  border-radius: 0 6.5rem 6.5rem 0;
+  border: none;
+  width: 110px;
+  height: 35px;
+  font-size: 1rem;
+  cursor: pointer;
+}
+
+.choose-button-wrapper {
+  position: absolute;
+  right: 20px;
+}
 </style>