Commit bc375dde authored by Benedikt Heinrichs's avatar Benedikt Heinrichs
Browse files

New: Functionality for adding vocabulary terms to application profiles (coscine/issues#1558)

parent 808954b3
......@@ -18,6 +18,7 @@
:applicationProfile="selectedApplicationProfile"
:definition="definition"
@selectApplicationProfile="selectApplicationProfile"
@addVocabularyTerm="addVocabularyTerm"
/>
<StoreModal
:applicationProfile="selectedApplicationProfile"
......@@ -38,7 +39,11 @@ import Vue from "vue";
import StoreModal from "@/components/ApplicationProfiles/Modals/Store.vue";
import { parseApplicationProfile } from "@/util/linkedData";
import {
addVocabularyTermToDataset,
parseApplicationProfile,
} from "@/util/linkedData";
import VocabularyTerm from "./types/vocabularyTerm";
export default Vue.extend({
name: "App",
......@@ -69,6 +74,17 @@ export default Vue.extend({
this.selectedApplicationProfile
);
},
addVocabularyTerm(vocabularyTerm: VocabularyTerm) {
const changeHappened = addVocabularyTermToDataset(
vocabularyTerm,
this.selectedApplicationProfile,
this.definition
);
if (changeHappened) {
// Force definition update
this.definition = this.definition.clone();
}
},
},
});
</script>
......
<template>
<ul>
<li
v-for="vocabularyTerm in vocabularyTerms"
:key="vocabularyTerm.property"
>
{{ vocabularyTerm.property }}
<li v-for="vocabularyTerm in vocabularyTerms" :key="vocabularyTerm.uri">
{{ vocabularyTerm.prefix !== null ? vocabularyTerm.prefix + ":" : ""
}}{{ vocabularyTerm.property }}
<b-button @click="addVocabularyTerm(vocabularyTerm)">Add</b-button>
</li>
</ul>
</template>
......@@ -22,6 +21,11 @@ export default Vue.extend({
type: Array as PropType<VocabularyTerm[]>,
},
},
methods: {
addVocabularyTerm(vocabularyTerm: VocabularyTerm) {
this.$emit("addVocabularyTerm", vocabularyTerm);
},
},
});
</script>
......
<template>
<div>
<SearchVoc @vocabularyTerms="handleVocabularyTerms" />
<ListVocs :vocabularyTerms="vocabularyTerms" />
<ListVocs
:vocabularyTerms="vocabularyTerms"
@addVocabularyTerm="addVocabularyTerm"
/>
</div>
</template>
......@@ -28,6 +31,9 @@ export default Vue.extend({
handleVocabularyTerms(vocabularyTerms: Array<VocabularyTerm>) {
this.vocabularyTerms = vocabularyTerms;
},
addVocabularyTerm(vocabularyTerm: VocabularyTerm) {
this.$emit("addVocabularyTerm", vocabularyTerm);
},
},
});
</script>
......
This diff is collapsed.
declare interface VocabularyTerm {
property: string;
vocabulary: string;
definition: Array<unknown>;
uri: string;
label: ?string;
prefix: ?string;
definition: ?Array<unknown>;
}
export = VocabularyTerm;
......@@ -22,6 +22,6 @@ export async function searchVocabularyTerms(
): Promise<Array<VocabularyTerm>> {
const queryFilter = query.toLowerCase().trim();
return vocabularyTerms.filter((vocTerm) =>
vocTerm.property.toLowerCase().trim().includes(queryFilter)
vocTerm.uri.toLowerCase().trim().includes(queryFilter)
);
}
......@@ -5,6 +5,8 @@ import VocabularyTerm from "@/types/vocabularyTerm";
import rdfParser from "rdf-parse";
import { Readable } from "stream";
const shPrefix = "http://www.w3.org/ns/shacl#";
export async function parseRDFDefinition(
definition: string,
contentType = "application/ld+json",
......@@ -72,3 +74,52 @@ export async function parseVocabularyTerms(
}
return datasets;
}
export function addVocabularyTermToDataset(
vocabularyTerm: VocabularyTerm,
applicationProfile: ApplicationProfile,
dataset: DatasetExt
): boolean {
// Filtering logic for when not to add a vocab term
if (applicationProfile.base_url === "") {
return false;
} else if (
dataset.some(
(quad) =>
quad.predicate.value == shPrefix + "path" &&
quad.object.value == vocabularyTerm.uri
)
) {
return false;
}
const blankNode = factory.blankNode();
dataset.add(
factory.quad(
factory.namedNode(applicationProfile.base_url),
factory.namedNode(shPrefix + "property"),
blankNode
)
);
dataset.add(
factory.quad(
blankNode,
factory.namedNode(shPrefix + "path"),
factory.literal(vocabularyTerm.uri)
)
);
if (vocabularyTerm.label !== null) {
dataset.add(
factory.quad(
blankNode,
factory.namedNode(shPrefix + "name"),
factory.literal(vocabularyTerm.label)
)
);
}
return true;
}
......@@ -4,7 +4,7 @@
<APSelection @selectApplicationProfile="selectApplicationProfile" />
</b-col>
<b-col sm="2">
<TermSelection />
<TermSelection @addVocabularyTerm="addVocabularyTerm" />
</b-col>
<b-col sm="4">
<APRepresentation
......@@ -24,6 +24,7 @@
<script lang="ts">
import DatasetExt from "rdf-ext/lib/Dataset";
import ApplicationProfile from "@/types/applicationProfile";
import VocabularyTerm from "@/types/vocabularyTerm";
import Vue, { PropType } from "vue";
......@@ -54,6 +55,9 @@ export default Vue.extend({
selectApplicationProfile(selectedApplicationProfile: ApplicationProfile) {
this.$emit("selectApplicationProfile", selectedApplicationProfile);
},
addVocabularyTerm(vocabularyTerm: VocabularyTerm) {
this.$emit("addVocabularyTerm", vocabularyTerm);
},
},
});
</script>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment