fix(ui): use term(iri) instead of labels

zazuko · Oct 28, 2019 · f5d7272 · f5d7272
1 parent 532d6d7
commit f5d7272
Show file tree

Hide file tree

Showing 14 changed files with 163 additions and 412 deletions.
diff --git a/components/fallback/LinkToIri.vue b/components/fallback/LinkToIri.vue
@@ -4,13 +4,13 @@
       v-if="path"
       :to="{ path: path + (anchor ? `#${anchor}` : ''), params: {} }"
       :class="classes">
-      {{ getTerm(term.value) }}
+      {{ $getTerm(term) }}
     </nuxt-link>
     <a
       v-else
       :href="url"
       :class="classes">
-      {{ getTerm(term.value) }}
+      {{ $getTerm(term) }}
       <span
         class="icon is-small"
         title="Outgoing link will open in new tab">
@@ -21,8 +21,6 @@
 </template>
 
 <script>
-import { term } from '@/libs/utils'
-
 export default {
   name: 'LinkToIri',
   props: {
@@ -56,9 +54,6 @@ export default {
       url
     }
   },
-  methods: {
-    getTerm: term
-  },
   computed: {
     classes () {
       return Object.entries(this.linkClass)

diff --git a/components/fallback/ObjectDetails.vue b/components/fallback/ObjectDetails.vue
@@ -49,9 +49,13 @@
           <span v-else />
         </template>
       </h1>
+      <h2 class="subtitle is-6">
+        Canonical URL: <span class="title-url">{{ iri.value }}</span>
+      </h2>
 
       <div class="content">
         <ul class="goto-nav">
+          <li>Quick links:</li>
           <li><a href="#proposals">Proposals</a></li>
           <li><a href="#conversations">Conversation</a></li>
         </ul>
@@ -73,17 +77,14 @@
 
       <template v-if="isClass">
         <properties-table
-          v-if="properties.length"
           :properties="properties"
           :ontology="ontology"
           :structure="structure" />
-        <template
-          v-else
+        <p
+          v-show="!properties.length"
           class="content">
-          <p>
-            This class does not have any properties.
-          </p>
-        </template>
+          This class does not have any properties.
+        </p>
       </template>
 
       <template v-else>

diff --git a/components/fallback/PouchBox.vue b/components/fallback/PouchBox.vue
@@ -30,7 +30,12 @@
         title="Class icon"
         class="class-box-icon">
       <p class="class-box-title">
-        {{ label }}
+        <template v-if="type === 'container'">
+          {{ label }}
+        </template>
+        <template v-else>
+          {{ $getTerm(iri) || label }}
+        </template>
       </p>
       <div class="class-box-level">
         <div

diff --git a/components/fallback/sidenav/ObjectNode.vue b/components/fallback/sidenav/ObjectNode.vue
@@ -35,7 +35,7 @@
           v-show="showPlusSymbol"
           class="mdi mdi-plus" />
       </span>
-      {{ tree.label }}
+      {{ $getTerm(tree.iri) || tree.label }}
     </nuxt-link>
 
     <ul

diff --git a/components/fallback/sidenav/ObjectTree.vue b/components/fallback/sidenav/ObjectTree.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <p class="menu-label">
-      {{ tree.label }}
+      {{ $getTerm(tree.iri) || tree.label }}
     </p>
     <ul
       class="menu-list">

diff --git a/components/fallback/sidenav/SideNav.vue b/components/fallback/sidenav/SideNav.vue
@@ -26,7 +26,7 @@ export default {
   },
   data () {
     return {
-      children: _get(this, '$store.state.graph.structureTree[0].children', [])
+      children: _get(this, '$store.state.graph.structureTree', [])
     }
   },
   methods: {