New: sh:in Rendering

src/components/InputBooleanCombobox.vue

@@ -125,7 +125,5 @@ export default Vue.extend({
 });
 </script>
 
-<style></style>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped></style>

src/components/InputCombobox.vue

@@ -145,7 +145,5 @@ export default Vue.extend({
 });
 </script>
 
-<style></style>
-
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped></style>

src/components/InputList.vue

+<template>
+  <MultiSelect
+    :value="selectedOption"
+    :options="selectableOptions"
+    label="name"
+    track-by="name"
+    :placeholder="$t('selectPlaceholder')"
+    :required="required"
+    :disabled="disabledMode || locked"
+    select-label=""
+    selected-label=""
+    deselect-label=""
+    @input="input"
+  />
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import VueI18n from 'vue-i18n';
+
+import locale from '@/locale';
+
+import Multiselect from 'vue-multiselect';
+import 'vue-multiselect/dist/vue-multiselect.min.css';
+Vue.component('MultiSelect', Multiselect);
+
+import type {
+  BilingualLabels,
+  Label,
+} from '@coscine/api-client/dist/types/Coscine.Api.Metadata';
+import type { Quad_Object } from 'rdf-js';
+import factory from 'rdf-ext';
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages: locale,
+  silentFallbackWarn: true,
+});
+
+export default Vue.extend({
+  i18n,
+  name: 'InputCombobox',
+  props: {
+    locked: {
+      default: false,
+      type: Boolean,
+    },
+    required: {
+      default: false,
+      type: Boolean,
+    },
+    entry: {
+      required: true,
+      type: Object as PropType<Quad_Object>,
+    },
+    disabledMode: {
+      default: false,
+      type: Boolean,
+    },
+    languageCode: {
+      default: 'en',
+      type: String,
+    },
+    list: {
+      required: true,
+      type: Array as PropType<Array<string>>,
+    },
+    classReceiver: {
+      default: () => {
+        return async () => ({} as BilingualLabels);
+      },
+      type: Function as PropType<
+        (classUrl: string) => Promise<BilingualLabels>
+      >,
+    },
+  },
+  data() {
+    return {
+      object: factory.literal(''),
+    };
+  },
+  computed: {
+    selectableOptions(): Label[] {
+      return this.list.map((entry) => {
+        return {
+          name: entry,
+          value: entry,
+        };
+      });
+    },
+    selectedOption(): Label | undefined {
+      if (this.object.value !== '') {
+        return {
+          name: this.object.value,
+          value: this.object.value,
+        };
+      }
+      return undefined;
+    },
+  },
+  watch: {
+    entry() {
+      this.loadData();
+    },
+  },
+  mounted() {
+    i18n.locale = this.languageCode;
+  },
+  methods: {
+    input(label: Label) {
+      if (label.value) {
+        this.object.value = label.value;
+      } else {
+        this.object.value = '';
+      }
+      this.$emit('input', this.object);
+    },
+    loadData() {
+      if (this.object.value !== this.entry.value) {
+        this.object.value = this.entry.value;
+      }
+    },
+  },
+});
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped></style>

src/components/WrapperInput.vue

@@ -27,6 +27,7 @@
           :entry="entry"
           :data-type="dataType"
           :class-object="classObject"
+          :list="list"
           :single-line="singleLine"
           :state="state"
           :class-receiver="classReceiver"
@@ -110,6 +111,7 @@ import InputCombobox from './InputCombobox.vue';
 import InputTextField from './InputTextField.vue';
 import InputDatePicker from './InputDatePicker.vue';
 import InputBooleanCombobox from './InputBooleanCombobox.vue';
+import InputList from './InputList.vue';
 
 Vue.use(VueI18n);
 
@@ -125,7 +127,7 @@ import type { UserObject } from '@coscine/api-client/dist/types/Coscine.Api.User
 import type { Dataset, NamedNode, Quad_Object, Quad_Subject } from 'rdf-js';
 import { prefixes } from '@zazuko/rdf-vocabularies';
 import factory from 'rdf-ext';
-import { getObject } from '@/util/linkedData';
+import { getObject, getObjectStringList } from '@/util/linkedData';
 import type {
   FixedValueObject,
   FixedValues,
@@ -151,6 +153,7 @@ export default Vue.extend({
     InputCombobox,
     InputDatePicker,
     InputBooleanCombobox,
+    InputList,
   },
   props: {
     metadata: {
@@ -231,13 +234,8 @@ export default Vue.extend({
         if (this.classObject) {
           return 'InputCombobox';
         }
-        if (
-          this.dataset.match(
-            this.property,
-            factory.namedNode(prefixes.sh + 'in')
-          ).size
-        ) {
-          return 'InputTextField';
+        if (this.isList) {
+          return 'InputList';
         }
       }
       return null;
@@ -289,6 +287,12 @@ export default Vue.extend({
         return true;
       }
     },
+    isList(): boolean {
+      return (
+        this.dataset.match(this.property, factory.namedNode(prefixes.sh + 'in'))
+          .size > 0
+      );
+    },
     label(): string {
       const labels = getObject(
         this.property,
@@ -301,6 +305,16 @@ export default Vue.extend({
       }
       return labels[0].object.value;
     },
+    list(): string[] {
+      if (this.isList) {
+        return getObjectStringList(
+          this.property,
+          factory.namedNode(prefixes.sh + 'in'),
+          this.dataset
+        );
+      }
+      return [];
+    },
     maxCount(): number | undefined {
       const maxCounts = getObject(
         this.property,

src/util/linkedData.ts

+import { prefixes } from '@zazuko/rdf-vocabularies';
+import factory from 'rdf-ext';
 import type {
   Dataset,
   Literal,
@@ -23,3 +25,48 @@ export function getObject(
   }
   return results;
 }
+
+export function getObjectList(
+  subject: Quad_Subject,
+  predicate: Quad_Predicate,
+  dataset: Dataset
+): Quad[] {
+  let results = Array.from(dataset.match(subject, predicate));
+  if (results.length > 0) {
+    // Assume it is an rdf list and go through with it
+    const quadList: Quad[] = [];
+    let currentSubject = results[0].object;
+    const rdfFirstNode = factory.namedNode(prefixes.rdf + 'first');
+    const rdfRestNode = factory.namedNode(prefixes.rdf + 'rest');
+    const rdfNilNode = factory.namedNode(prefixes.rdf + 'nil');
+    if (!currentSubject.equals(rdfNilNode)) {
+      quadList.push(results[0]);
+      do {
+        results = Array.from(dataset.match(currentSubject, rdfFirstNode));
+        if (results.length > 0) {
+          quadList.push(results[0]);
+        }
+        results = Array.from(dataset.match(currentSubject, rdfRestNode));
+        if (results.length > 0) {
+          quadList.push(results[0]);
+          currentSubject = results[0].object;
+        } else {
+          break;
+        }
+      } while (!currentSubject.equals(rdfNilNode));
+    }
+    return quadList;
+  }
+  return [];
+}
+
+export function getObjectStringList(
+  subject: Quad_Subject,
+  predicate: Quad_Predicate,
+  dataset: Dataset
+): string[] {
+  const rdfFirstNode = factory.namedNode(prefixes.rdf + 'first');
+  return getObjectList(subject, predicate, dataset)
+    .filter((quad) => quad.predicate.equals(rdfFirstNode))
+    .map((quad) => quad.object.value);
+}