From e4d2f65abfe90074270c3543d8055478887dd44b Mon Sep 17 00:00:00 2001 From: isah <isabelle.herbauts@univie.ac.at> Date: Fri, 12 Jun 2020 10:03:16 +0200 Subject: [PATCH] fixed display metadata --- src/App.vue | 62 +--- .../display/pharma_display/PhDJsonld.vue | 314 ++++++++++++------ .../display/pharma_display/PhDMetadata.vue | 2 - src/components/input/PhSubmit.vue | 3 +- .../input/pharma-input-fields/PISelect.vue | 2 - .../input/pharma-input-fields/PhInputForm.vue | 44 +-- src/store/index.js | 28 +- src/store/modules/initialForm.js | 15 + src/utils/arrays.js | 10 +- 9 files changed, 260 insertions(+), 220 deletions(-) create mode 100644 src/store/modules/initialForm.js diff --git a/src/App.vue b/src/App.vue index 683bb0e..7986c17 100644 --- a/src/App.vue +++ b/src/App.vue @@ -98,6 +98,7 @@ <v-flex> <v-window v-model="window"> <v-window-item> + <ph-submit :model="contentmodel" :form="form" @@ -107,15 +108,14 @@ v-on:add-phaidrasubject-section="addPhaidrasubjectSection($event)" ></ph-submit> </v-window-item> - <v-window-item> - <v-flex> + <v-window-item> + <v-flex> <v-card> <v-toolbar flat> <v-toolbar-title>{{$t('Display')}}</v-toolbar-title> <v-divider class="mx-3" inset vertical></v-divider> <v-text-field v-model="pid" :placeholder="pid"></v-text-field> <v-spacer></v-spacer> - <v-btn raised single-line @@ -127,7 +127,7 @@ <v-card-text> <v-layout row> <ph-d-jsonld - :form="form" + :form="emptyForm" :jsonld="displayjsonld" :viewpharmameta="true" :pid="pid" @@ -171,54 +171,7 @@ </v-card> </v-flex> </v-window-item> - <!-- <v-window-item> - <v-flex> - <v-card> - <v-toolbar flat> - <v-toolbar-title>{{$t('Edit')}}</v-toolbar-title> - <v-divider class="mx-3" inset vertical></v-divider> - <v-text-field v-model="pid" :placeholder="pid"></v-text-field> - <v-spacer></v-spacer> - <v-btn - raised - single-line - class="right" - color="primary lighten-2" - @click="loadEdit()" - >Load</v-btn> - </v-toolbar> - <v-card-text> - - </v-card-text> - </v-card> - </v-flex> - </v-window-item>--> - - <!-- <v-window-item> - <v-flex> - <v-card> - <v-toolbar flat> - <v-toolbar-title>{{ $t('Search') }}</v-toolbar-title> - <v-divider class="mx-3" inset vertical></v-divider> - <v-text-field - :placeholder="'Collection, e.g. ' + sampleCollection" - v-model="collection" - ></v-text-field> - <v-spacer></v-spacer> - <v-btn - raised - single-line - class="right" - color="primary lighten-2" - @click="loadSearch()" - >Load Collection</v-btn> - </v-toolbar> - <v-card-text> - <p-search :collection="collection"></p-search> - </v-card-text> - </v-card> - </v-flex> - </v-window-item>--> + </v-window> </v-flex> </v-layout> @@ -302,9 +255,10 @@ export default { form: { sections: [] }, + emptyForm: {}, members: [], fullmembers: [], - pid: "o:589108", + pid: "o:589601", piddoc: {}, collection: "", sampleCollection: "", @@ -1136,6 +1090,8 @@ export default { this.form.sections[2].categories[8].fields.push( fields.getField("8-Discipline") ); + this.emptyForm = JSON.parse(JSON.stringify(this.form)); + this.$store.commit("initForm", this.emptyForm); }, createContainerForm: function() { this.createSimpleForm(); diff --git a/src/components/display/pharma_display/PhDJsonld.vue b/src/components/display/pharma_display/PhDJsonld.vue index e20aa14..9907e2d 100644 --- a/src/components/display/pharma_display/PhDJsonld.vue +++ b/src/components/display/pharma_display/PhDJsonld.vue @@ -304,6 +304,7 @@ </template> <template v-else-if="p==='dcterms:subject'" slot="dcterms:subject"> + <template v-for="(subject, j) in o"> <v-card class="mt-3" @@ -325,7 +326,8 @@ </template> </template> <template v-if="viewpharmameta"> - <template v-for="(categ,index) in pharmaStructure"> + + <template v-for="(categ,index) in pharmaStructure()"> <v-card v-if="categ.fields.length>0" :key="index+categ.category"> <v-toolbar dense flat> <v-layout> @@ -336,13 +338,9 @@ <template v-if="categ.fields.length>0"> <v-card v-for="(l,index) in categ.fields" :key="l['@type']+'field'+index"> <v-layout v-if="l"> - <!-- <v-flex xs1 class="subheading"> - <a :href="l.id" target="_blank">{{l.label}}</a> - </v-flex>--> + <v-flex xs11> - <!--<v-card v-for="(inputf,index) in l" :key="index+'subjectField'">--> - - <!-- <v-flex xs2 v-if="inputf.selection">{{getLabel(inputf.data['@type'])}}</v-flex>--> + <p-d-skos-preflabel v-if="getSkosexactMatch(l)==undefined" :o="l" @@ -351,7 +349,7 @@ <ph-d-metadata v-if="getSkosexactMatch(l)" - :o="l" + :o="l" :p="p" :key="l+index+'pharmasubject'" ></ph-d-metadata> @@ -377,8 +375,9 @@ </div> </v-flex> - <v-flex xs11 v-if="viewpharmameta"> + <v-flex xs11> <v-card v-for="(inputf,index) in l.fields" :key="index+'subjectField'"> + <p-d-skos-preflabel v-if="getSkosexactMatch(inputf)==undefined" :p="getLabel(inputf['@type'])" @@ -395,30 +394,94 @@ <v-divider></v-divider> </v-card> </v-flex> - <v-flex xs11 v-if="!viewpharmameta"> - fields {{l.fields}} + + </v-layout> + </v-card> + </template> + </v-card> + </template> + </template> + <template v-if="!viewpharmameta"> + <template v-for="(subject, j) in o"> + <p-d-skos-preflabel :p="p" :o="subject" :key="componentid+'subject'+j"></p-d-skos-preflabel> + </template> + <v-btn @click="pharmaStructure()">View/reload full metadata</v-btn> + <template v-for="(categ,index) in pharma"> + <v-card v-if="categ.fields.length>0" :key="index+categ.category"> + <v-toolbar dense flat> + <v-layout> + <v-toolbar-title class="font-weight-light">{{categ.label}}</v-toolbar-title> + </v-layout> + </v-toolbar> + + <template v-if="categ.fields.length>0"> + <v-card v-for="(l,index) in categ.fields" :key="l['@type']+'field'+index"> + <v-layout v-if="l"> + + <v-flex xs11> + + <p-d-skos-preflabel + v-if="getSkosexactMatch(l)==undefined" + :o="l" + :key="l+index+'pharmafreesubject'" + ></p-d-skos-preflabel> + + <ph-d-metadata + v-if="getSkosexactMatch(l)" + :o="l" + :p="p" + :key="l+index+'pharmasubject'" + ></ph-d-metadata> + <v-divider></v-divider> + </v-flex> + </v-layout> + </v-card> + </template> + </v-card> + <v-card v-if="categ.subcategory" :key="index+categ.label"> + <v-toolbar dense flat> + <v-layout> + <v-toolbar-title class="font-weight-light">{{categ.label}}</v-toolbar-title> + </v-layout> + </v-toolbar> + + <template v-if="categ.subcategory.length>0"> + + <v-card v-for="l in categ.subcategory" :key="l.category+'field'"> + <v-layout v-if="l"> + <v-flex xs1 class="subheading"> + <div class="text-xs-center"> + <a :href="l.id" target="_blank">{{l.category}}</a> + </div> + </v-flex> + + <v-flex xs11> <v-card v-for="(inputf,index) in l.fields" :key="index+'subjectField'"> + <p-d-skos-preflabel + v-if="getSkosexactMatch(inputf)==undefined" :p="getLabel(inputf['@type'])" :o="inputf" :key="inputf+index+'pharmafreesubject'" ></p-d-skos-preflabel> + <ph-d-metadata + v-if="getSkosexactMatch(inputf)" + :o="inputf" + :p="p" + :key="index+'pharmasubject'" + ></ph-d-metadata> <v-divider></v-divider> </v-card> </v-flex> + </v-layout> </v-card> </template> </v-card> </template> </template> - <template v-if="!viewpharmameta"> - <template v-for="(subject, j) in o"> - <p-d-skos-preflabel :p="p" :o="subject" :key="componentid+'subject'+j"></p-d-skos-preflabel> - </template> - </template> - <v-btn @click="pharmaStructure()">view full data</v-btn> + </template> <template v-else-if="p==='@type'"></template> @@ -464,6 +527,7 @@ import { parseoutput } from "../../../mixins/parseoutput"; import { matchsubject } from "../../../mixins/matchsubject"; import fields from "../../../utils/fields"; import PImg from "../../utils/PImg"; +import arrays from "@/utils/arrays"; export default { name: "ph-d-jsonld", @@ -479,9 +543,93 @@ export default { componentid: function() { return Math.floor(Math.random() * 10000000); }, - pharmaStructure: function(json) { - var subjectjson = this.jsonld["dcterms:subject"]; + pharmaData: function() { + var s = this.jsonldd["dcterms:subject"]; + //filter subjects for only the ones with subjects[i]["@type"]=!= "skos:Concept" + //that would be the pharma-related subjects + var subjects = s.filter(s => s["@type"] != "skos:Concept"); + + var n_subjects = []; + + // take all the jsonld["dcterms:subject"] but not the ones which have no skos:prefLabel" + for (let i = 0; i < subjects.length; i++) { + var subcat = subjects[i]["@type"]; // thuis should be unique to each entry field, comes from "subjectType" in jsonld + + var categ = this.getCategory(subcat); + + n_subjects[i] = {}; + if (categ) { + n_subjects[i].category = categ; + n_subjects[i].selection = this.getDescription(subcat); + n_subjects[i].subcategory = subcat; + } else { + n_subjects[i].category = subcat; + } + //now check for the subcategories of:Biological macromolecules and Bioassay, + + n_subjects[i].data = subjects[i]; + } + //console.log("pharmaData", n_subjects); + //console.log("pharmaSubjects", this.pharmaSubjects); + return n_subjects; + } + }, + + mounted: function() { + this.$store.dispatch("loadLanguages"); + }, + props: { + jsonld: { + type: Object, + default: null + }, + pid: String, + form: { + type: Object, + default: null + }, + viewpharmameta: { + type: Boolean, + default: false + } + }, + components: { + PDTitle, + PDEntity, + PhDJsonldLayout, + PDSkosPreflabel, + PDKeyword, + PDLangValue, + PDLicense, + PDValue, + PDDimension, + PDDuration, + PDGeoreference, + PDLabeledValue, + PDFunder, + PDProject, + PDBfPublication, + PDStudyPlan, + PDSeries, + PDAdaptation, + PDCitation, + PIUnknownReadonly, + PhDMetadata, + PImg + }, + data() { + return { + jsonldd: this.jsonld, + pharma: [] + }; + }, + methods: { + alert: function(e) { + console.log("alert", e); + }, + pharmaStructure: function() { + var subjectjson = this.jsonld["dcterms:subject"]; //filter subjects for only the ones with subjects[i]["@type"]=!= "skos:Concept" //that would be the pharma-related subjects var pharmajson = subjectjson.filter( @@ -503,14 +651,24 @@ export default { var formFieldsFiltered = formFields.filter( formFields => formFields.type != "skos:Concept" ); + formFieldsFiltered = formFields.filter( + formFields => formFields.value != "" + ); + formFieldsFiltered = formFields.filter( + formFields => formFields.value != null + ); for (var j = 0; j < formFieldsFiltered.length; j++) { //filter all the elem in subjects which have this type var jsonTypeArray = pharmajson.filter(function(fs) { return fs["@type"] == formFieldsFiltered[j].type; }); - console.log("this.jsonld", jsonTypeArray); + if (jsonTypeArray.length > 0) { + //for (var k = 0; k < jsonTypeArray.length; k++) { + // console.log("jsonTypeArray", jsonTypeArray[k]); + //} + //find first whether there is a subcategory if (formFieldsFiltered[j].subcategory) { //the category is formFieldsFiltered[j].category // if it exists, push to it, otherwise create it @@ -551,6 +709,8 @@ export default { } } } else { + //the category is formFieldsFiltered[j].category + // if it exists, push to it, otherwise create it var n_categ = formFieldsFiltered[j].category[0]; //check if it exists already @@ -559,100 +719,42 @@ export default { ); if (result >= 0) { + /* if (jsonStructured[result].subcategory) { + var r = jsonStructured[result].subcategory.findIndex( + obj => obj.category === n_subcat + ); + console.log( + "n_sub r", + r, + "formFieldsFiltered[j].infoRef", + formFieldsFiltered[j].infoRef + ); + if (r >= 0) { + jsonStructured[result].subcategory[r].fields.push( + jsonTypeArray[0] + ); + } else { + jsonStructured[result].subcategory.push({ + category: n_subcat, + id: formFieldsFiltered[j].infoRef, + fields: jsonTypeArray + }); + } + } else {*/ + jsonStructured[result].fields = jsonTypeArray; + // category: n_categ, + // id: formFieldsFiltered[j].infoRef, + // fields: jsonTypeArray + //}; } } } } } - console.log("jsonStructured", jsonStructured); + this.pharma = jsonStructured; return jsonStructured; }, - pharmaData: function() { - var s = this.jsonldd["dcterms:subject"]; - //filter subjects for only the ones with subjects[i]["@type"]=!= "skos:Concept" - //that would be the pharma-related subjects - var subjects = s.filter(s => s["@type"] != "skos:Concept"); - - var n_subjects = []; - - // take all the jsonld["dcterms:subject"] but not the ones which have no skos:prefLabel" - for (let i = 0; i < subjects.length; i++) { - var subcat = subjects[i]["@type"]; // thuis should be unique to each entry field, comes from "subjectType" in jsonld - - var categ = this.getCategory(subcat); - - n_subjects[i] = {}; - if (categ) { - n_subjects[i].category = categ; - n_subjects[i].selection = this.getDescription(subcat); - n_subjects[i].subcategory = subcat; - } else { - n_subjects[i].category = subcat; - } - //now check for the subcategories of:Biological macromolecules and Bioassay, - - n_subjects[i].data = subjects[i]; - } - //console.log("pharmaData", n_subjects); - //console.log("pharmaSubjects", this.pharmaSubjects); - return n_subjects; - } - }, - - mounted: function() { - this.$store.dispatch("loadLanguages"); - }, - props: { - jsonld: { - type: Object, - default: null - }, - pid: String, - - form: { - type: Object, - default: null - }, - viewpharmameta: { - type: Boolean, - default: false - } - }, - components: { - PDTitle, - PDEntity, - PhDJsonldLayout, - PDSkosPreflabel, - PDKeyword, - PDLangValue, - PDLicense, - PDValue, - PDDimension, - PDDuration, - PDGeoreference, - PDLabeledValue, - PDFunder, - PDProject, - PDBfPublication, - PDStudyPlan, - PDSeries, - PDAdaptation, - PDCitation, - PIUnknownReadonly, - PhDMetadata, - PImg - }, - data() { - return { - jsonldd: this.jsonld - }; - }, - methods: { - alert: function(e) { - console.log("alert", e); - }, - getCatElem: function(cat) { var elem = this.pharmaData.filter( pharmaData => pharmaData.category === cat diff --git a/src/components/display/pharma_display/PhDMetadata.vue b/src/components/display/pharma_display/PhDMetadata.vue index 34b67a8..58824f4 100644 --- a/src/components/display/pharma_display/PhDMetadata.vue +++ b/src/components/display/pharma_display/PhDMetadata.vue @@ -187,8 +187,6 @@ export default { var iri = this.getIri; //var iri = self.getSkosexactMatch(this.o); - console.log("irir ", iri); - //before I was getting it all in an array in the parent component //if (r.hasOwnProperty(iri)) { diff --git a/src/components/input/PhSubmit.vue b/src/components/input/PhSubmit.vue index 833029f..bd4869b 100644 --- a/src/components/input/PhSubmit.vue +++ b/src/components/input/PhSubmit.vue @@ -17,7 +17,7 @@ <v-tab-item v-if="form"> <ph-input-form - :model="model" + :model="model" :form="form" :loading="loading" :templating="templating" @@ -25,7 +25,6 @@ :targetpid="targetpid" v-on:submit="checkWarnings()" ></ph-input-form> - <v-footer> Fields indicated with (*) are required field for submission. </v-footer> diff --git a/src/components/input/pharma-input-fields/PISelect.vue b/src/components/input/pharma-input-fields/PISelect.vue index 728dd6b..ec23a86 100644 --- a/src/components/input/pharma-input-fields/PISelect.vue +++ b/src/components/input/pharma-input-fields/PISelect.vue @@ -95,11 +95,9 @@ export default { if (this.$refs.form.validate()) { this.validationWarning = false; } else { - console.log("here"); this.validationWarning = true; } } else { - console.log("here 2", this.formValidation); this.validationWarning = false; } /*console.log( diff --git a/src/components/input/pharma-input-fields/PhInputForm.vue b/src/components/input/pharma-input-fields/PhInputForm.vue index 42c2a66..ff4dd46 100644 --- a/src/components/input/pharma-input-fields/PhInputForm.vue +++ b/src/components/input/pharma-input-fields/PhInputForm.vue @@ -71,7 +71,7 @@ v-on:input-role="f.role=$event" v-on:input-orcid="f.orcid=$event" v-on:input-email="f.email=$event" - v-on:add="addField(s[index].fields, f);alert(f)" + v-on:add="addField(s[index].fields, f);" v-on:remove="removeField(s[index].fields, f)" v-on:up="sortFieldUp(s[index].fields, f)" v-on:down="sortFieldDown(s[index].fields, f)" @@ -249,7 +249,7 @@ </v-flex> </v-layout> - <ph-d-jsonld :form="form" :viewpharmameta="false" :jsonld="jsonDisplay"></ph-d-jsonld> + <ph-d-jsonld :form="initialForm" :viewpharmameta="false" :jsonld="jsonDisplay"></ph-d-jsonld> <v-layout align-center justify-center fill-height> <v-flex> <v-toolbar dense flat color="white"> @@ -265,46 +265,13 @@ </v-flex> <v-flex xs12> <v-card> - <ph-d-jsonld :form="form" :jsonld="mjson"></ph-d-jsonld> + + <ph-d-jsonld :form="initialForm" :jsonld="mjson"></ph-d-jsonld> <v-spacer></v-spacer> </v-card> </v-flex> </v-layout> <v-layout align-center justify-end row class="ma-3"> - <!--<v-dialog v-if="templating" v-model="templatedialog" width="500"> - <v-btn - class="mr-3" - slot="activator" - dark - raised - :loading="loading" - :disabled="loading" - color="grey" - >Save as template</v-btn> - <v-card> - <v-card-title class="headline grey lighten-2" primary-title> - <span v-t="'Save as template'"></span> - </v-card-title> - <v-card-text> - <v-text-field v-model="templatename" :label="$t('Template name')"></v-text-field> - </v-card-text> - <v-card-actions> - <v-spacer></v-spacer> - <v-btn - :loading="loading" - :disabled="loading" - color="grey" - dark - @click="templatedialog= false" - > - <span v-t="'Cancel'"></span> - </v-btn> - <v-btn :loading="loading" :disabled="loading" color="primary"> - <span v-t="'Save'"></span> - </v-btn> - </v-card-actions> - </v-card> - </v-dialog>--> <v-btn v-if="targetpid" raised @@ -479,6 +446,9 @@ export default { return jsonmembersarray; } } + }, + initialForm: function() { + return this.$store.state.initialForm.initialForm; } }, data() { diff --git a/src/store/index.js b/src/store/index.js index bc03796..ce99f7b 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -2,6 +2,7 @@ import Vue from "vue"; import Vuex from "vuex"; import vocabulary from "./modules/vocabulary"; import metadataInputs from "./modules/metadataInputs"; +import initialForm from "./modules/initialForm"; Vue.use(Vuex); @@ -83,10 +84,10 @@ export default new Vuex.Store({ "Basic " + btoa(credentials.username + ":" + credentials.password) } }) - .then(function(response) { + .then(function (response) { return response.json(); }) - .then(function(json) { + .then(function (json) { if (json.alerts && json.alerts.length > 0) { commit("setAlerts", json.alerts); } @@ -97,9 +98,9 @@ export default new Vuex.Store({ // if sign in was successful, get user's data (name, email, etc) fetch( rootState.settings.instance.api + - "/directory/user/" + - state.user.username + - "/data", + "/directory/user/" + + state.user.username + + "/data", { method: "GET", mode: "cors", @@ -108,10 +109,10 @@ export default new Vuex.Store({ } } ) - .then(function(response) { + .then(function (response) { return response.json(); }) - .then(function(json) { + .then(function (json) { if (json.alerts && json.alerts.length > 0) { commit("setAlerts", json.alerts); } @@ -124,14 +125,14 @@ export default new Vuex.Store({ resolve(); } }) - .catch(function(error) { + .catch(function (error) { console.log(error); reject(); }); } }) - .catch(function(error) { + .catch(function (error) { console.log(error); // eslint-disable-line no-console reject(); }); @@ -146,17 +147,17 @@ export default new Vuex.Store({ "X-XSRF-TOKEN": state.token } }) - .then(function(response) { + .then(function (response) { return response.json(); }) - .then(function(json) { + .then(function (json) { commit("initStore"); if (json.alerts && json.alerts.length > 0) { commit("setAlerts", json.alerts); } resolve(); }) - .catch(function(error) { + .catch(function (error) { console.log(error); // eslint-disable-line no-console commit("initStore"); resolve(); @@ -166,7 +167,8 @@ export default new Vuex.Store({ }, modules: { vocabulary, - metadataInputs + metadataInputs, + initialForm }, strict: debug }); diff --git a/src/store/modules/initialForm.js b/src/store/modules/initialForm.js new file mode 100644 index 0000000..894166f --- /dev/null +++ b/src/store/modules/initialForm.js @@ -0,0 +1,15 @@ +const state = { + initialForm: [], +}; + +const mutations = { + initForm(state, initialForm) { + state.initialForm = initialForm; + }, + +}; + +export default { + state, + mutations +}; diff --git a/src/utils/arrays.js b/src/utils/arrays.js index 55761ba..23cef21 100644 --- a/src/utils/arrays.js +++ b/src/utils/arrays.js @@ -1,5 +1,5 @@ export default { - arrayMove (arr, oldIndex, newIndex) { + arrayMove(arr, oldIndex, newIndex) { if (newIndex >= arr.length) { var k = newIndex - arr.length + 1 while (k--) { @@ -9,23 +9,23 @@ export default { arr.splice(newIndex, 0, arr.splice(oldIndex, 1)[0]) return arr // for testing, arr was modified inplace }, - duplicate (arr, e) { + duplicate(arr, e) { var i = arr.indexOf(e) var e2 = JSON.parse(JSON.stringify(e)) arr.splice(i + 1, 0, e2) return e2 }, - remove (arr, e) { + remove(arr, e) { var i = arr.indexOf(e) arr.splice(i, 1) }, - moveUp (arr, e) { + moveUp(arr, e) { var i = arr.indexOf(e) if (i - 1 >= 0) { this.arrayMove(arr, i, i - 1) } }, - moveDown (arr, e) { + moveDown(arr, e) { var i = arr.indexOf(e) if (i + 1 <= arr.length) { this.arrayMove(arr, i, i + 1) -- GitLab