Add resolving labels to enum select editor

src/components/ShaclForm/Editor/EnumSelectEditor.vue

@@ -3,16 +3,17 @@
  class="input-field"
  :value="toInputValue(value)"
  @input="onInput"
+ :key="resolvedCounter"
  >
  <option :value="null">
  - 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 +22,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 +33,34 @@ 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
+
+ resolvedCounter : number = 0
+
+ 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 {
+ const label = await api.label.getLabel(key)
+ this.values[key] = label.data.label
+ this.resolvedCounter += 1
+ } catch {
+ // nothing could be fetched, keep default label
+ }
  }
 
  onInput(e) {