Add resolving labels to enum select editor

Author: janslifka

src/components/ShaclForm/Editor/EnumSelectEditor.vue

@@ -8,11 +8,11 @@
       - select -
     </option>
     <option
-      v-for="option in createOptions()"
-      :key="option.key"
-      :value="option.key"
+      v-for="key in keys"
+      :key="key"
+      :value="key"
     >
-      {{ option.value }}
+      {{ values[key] }}
     </option>
   </select>
 </template>
@@ -21,6 +21,8 @@ import * as $rdf from 'rdflib'
 import _ from 'lodash'
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import rdfUtils from '@/rdf/utils'
+import api from '@/api'
+import { SHACL } from '@/rdf/namespaces'
 
 @Component({})
 export default class EnumSelectEditor extends Vue {
@@ -30,11 +32,30 @@ export default class EnumSelectEditor extends Vue {
   @Prop({ required: true })
   readonly value: any
 
-  createOptions() {
-    return _.get(this.field, 'in', []).map((val) => ({
-      key: val,
-      value: rdfUtils.pathTerm(val),
-    }))
+  keys : any
+
+  values : any
+
+  created(): void {
+    this.keys = []
+    this.values = {}
+
+    _.get(this.field, 'in', []).forEach((key) => {
+      this.keys.push(key)
+      this.values[key] = rdfUtils.pathTerm(key)
+
+      if (this.field.nodeKind === SHACL('IRI').value) {
+        this.resolveValue(key)
+      }
+    })
+  }
+
+  async resolveValue(key: string): Promise<void> {
+    try {
+      this.values[key] = await api.label.getLabel(key)
+    } catch {
+      // nothing could be fetched, keep default label
+    }
   }
 
   onInput(e) {