diff --git a/opensilex-front/front/src/components/germplasm/GermplasmSelectorWithFilter.vue b/opensilex-front/front/src/components/germplasm/GermplasmSelectorWithFilter.vue index 7fbc14498..ff3a989bf 100644 --- a/opensilex-front/front/src/components/germplasm/GermplasmSelectorWithFilter.vue +++ b/opensilex-front/front/src/components/germplasm/GermplasmSelectorWithFilter.vue @@ -22,7 +22,6 @@ import {Component, Prop, PropSync, Ref} from "vue-property-decorator"; import Vue from "vue"; import SelectForm, {SelectableItem} from '../common/forms/SelectForm.vue'; -import {GermplasmService} from "opensilex-core/api/germplasm.service"; import OpenSilexVuePlugin from "../../models/OpenSilexVuePlugin"; @Component diff --git a/opensilex-front/front/src/components/germplasmGroup/GermplasmGroup.vue b/opensilex-front/front/src/components/germplasmGroup/GermplasmGroup.vue index 217510fe2..6d311d160 100644 --- a/opensilex-front/front/src/components/germplasmGroup/GermplasmGroup.vue +++ b/opensilex-front/front/src/components/germplasmGroup/GermplasmGroup.vue @@ -180,8 +180,8 @@ export default class GermplasmGroup extends Vue { showEditForm(uri) { this.service.getGermplasmGroupWithGermplasms(uri).then((http: HttpResponse>) => { this.$nextTick(() => { - let updateDtoAndExtractedGermplasms = this.convertUpdateDtoAndExtractGermplasms(http.response.result); - this.groupGermplasmForm.setSelectorsToFirstTimeOpenAndSetLabels(updateDtoAndExtractedGermplasms.germplasmModels); + let updateDtoAndExtractedGermplasms = this.convertUpdateDtoAndExtractGermplasms(http.response.result); + this.groupGermplasmForm.setSelectorsToFirstTimeOpenAndSetLabels(updateDtoAndExtractedGermplasms.germplasmModels); this.groupGermplasmForm.showEditForm(updateDtoAndExtractedGermplasms.updateDto); }); }); diff --git a/opensilex-front/front/src/components/germplasmGroup/GroupGermplasmForm.vue b/opensilex-front/front/src/components/germplasmGroup/GroupGermplasmForm.vue index 28f2bf931..8d8fa5a5f 100644 --- a/opensilex-front/front/src/components/germplasmGroup/GroupGermplasmForm.vue +++ b/opensilex-front/front/src/components/germplasmGroup/GroupGermplasmForm.vue @@ -45,7 +45,6 @@ import {Component, Prop, Ref} from "vue-property-decorator"; import Vue from "vue"; import GermplasmSelectorWithFilter from '../germplasm/GermplasmSelectorWithFilter.vue'; import {GermplasmGroupUpdateDTO} from "../../../../../opensilex-core/front/src/lib"; -import {SelectableItem} from "../common/forms/SelectForm.vue"; import {GermplasmGetAllDTO} from "opensilex-core/model/germplasmGetAllDTO"; @@ -65,7 +64,7 @@ export default class GroupGermplasmForm extends Vue { @Ref("germplasmSelector") readonly germplasmSelector!: GermplasmSelectorWithFilter; - germplasmsWithLabels : Array; + germplasmsWithLabels : Array; setSelectorsToFirstTimeOpenAndSetLabels(germplasmsWithLabels){ this.germplasmSelector.setGermplasmSelectorToFirstTimeOpen(); diff --git a/opensilex-front/front/src/components/groupVariable/GroupVariablesForm.vue b/opensilex-front/front/src/components/groupVariable/GroupVariablesForm.vue index 87f739ecf..a7d8451d8 100644 --- a/opensilex-front/front/src/components/groupVariable/GroupVariablesForm.vue +++ b/opensilex-front/front/src/components/groupVariable/GroupVariablesForm.vue @@ -29,18 +29,12 @@ - - - @@ -56,6 +50,8 @@ import OpenSilexVuePlugin from "../../models/OpenSilexVuePlugin"; import {VariablesService} from "opensilex-core/api/variables.service"; import {VariablesGroupCreationDTO} from "opensilex-core/model/variablesGroupCreationDTO"; import {VariablesGroupUpdateDTO} from "opensilex-core/model/variablesGroupUpdateDTO"; +import VariableSelectorWithFilter from "../../components/variables/views/VariableSelectorWithFilter.vue"; +import {NamedResourceDTOVariableModel} from "opensilex-core/model/namedResourceDTOVariableModel"; @Component @@ -71,6 +67,7 @@ export default class GroupVariablesForm extends Vue { uriGenerated; @Ref("validatorRef") readonly validatorRef!: any; + @Ref("variablesSelectorRef") readonly variablesSelectorRef!: VariableSelectorWithFilter; get user() { return this.$store.state.user; @@ -79,6 +76,13 @@ export default class GroupVariablesForm extends Vue { @Prop() form; + variablesWithLabels : Array = []; + + setSelectorsToFirstTimeOpenAndSetLabels(variablesWithLabels){ + this.variablesSelectorRef.setVariableSelectorToFirstTimeOpen(); + this.variablesWithLabels = variablesWithLabels; + } + static getEmptyForm(){ return { uri: null, diff --git a/opensilex-front/front/src/components/variables/VariableList.vue b/opensilex-front/front/src/components/variables/VariableList.vue index 64ba428fa..d3057d40f 100644 --- a/opensilex-front/front/src/components/variables/VariableList.vue +++ b/opensilex-front/front/src/components/variables/VariableList.vue @@ -658,6 +658,10 @@ export default class VariableList extends Vue { this.groupVariableSelection.show(); } + setInitiallySelectedItems(initiallySelectedItems:any){ + this.tableRef.setInitiallySelectedItems(initiallySelectedItems); + } + private variableGroupsList = {}; loadVariablesGroupFromVariable(data) { diff --git a/opensilex-front/front/src/components/variables/VariableModalList.vue b/opensilex-front/front/src/components/variables/VariableModalList.vue index 092e33d23..837a4b7b9 100644 --- a/opensilex-front/front/src/components/variables/VariableModalList.vue +++ b/opensilex-front/front/src/components/variables/VariableModalList.vue @@ -70,6 +70,10 @@ export default class VariableModalList extends Vue { this.variableSelection.onItemUnselected(row); } + setInitiallySelectedItems(initiallySelectedItems:Array){ + this.variableSelection.setInitiallySelectedItems(initiallySelectedItems); + } + show() { this.$emit("shown"); this.modalRef.show(); diff --git a/opensilex-front/front/src/components/variables/VariablesView.vue b/opensilex-front/front/src/components/variables/VariablesView.vue index 994b50dc5..54bc64a50 100644 --- a/opensilex-front/front/src/components/variables/VariablesView.vue +++ b/opensilex-front/front/src/components/variables/VariablesView.vue @@ -186,7 +186,13 @@ import DTOConverter from "../../models/DTOConverter"; import {VariablesGroupCreationDTO} from "opensilex-core/model/variablesGroupCreationDTO"; import {VariablesGroupUpdateDTO} from "opensilex-core/model/variablesGroupUpdateDTO"; import GroupVariablesForm from "../groupVariable/GroupVariablesForm.vue"; +import {VariablesGroupGetDTO} from "opensilex-core/model/variablesGroupGetDTO"; +import {NamedResourceDTOVariableModel} from "opensilex-core/model/namedResourceDTOVariableModel"; +interface GroupUpdateDtoAndVariableModels { + updateDto: VariablesGroupUpdateDTO, + variableModels: Array +} @Component export default class VariablesView extends Vue { @@ -429,14 +435,23 @@ export default class VariablesView extends Vue { } } - formatVariablesGroup(dto : any) { + formatVariablesGroup(dto : VariablesGroupGetDTO) : GroupUpdateDtoAndVariableModels{ let copy = JSON.parse(JSON.stringify(dto)); - if (copy.variables) { - copy.variables = copy.variables.map(variable => variable.uri); + let variables_uris : Array = []; + let new_variable_list : Array= []; + if (copy.variables) { + for(let variable of copy.variables){ + let variableUri = this.$opensilex.getLongUri(variable.uri); + variables_uris.push(variableUri); + variable.uri = variableUri; + new_variable_list.push(variable); } - return copy; + copy.variables = variables_uris; + } + return {updateDto : (copy as VariablesGroupUpdateDTO), variableModels : new_variable_list}; } + showEditForm(dto : any){ if (this.elementType == VariablesView.GROUP_VARIABLE_TYPE) { @@ -444,8 +459,9 @@ export default class VariablesView extends Vue { this.loadGroupForm = true; this.$nextTick(() => { - let formatVariableGroup = this.formatVariablesGroup(dto); - this.getForm().showEditForm(formatVariableGroup); + let updateDtoAndExtractedVariables = this.formatVariablesGroup(dto); + this.getForm().setSelectorsToFirstTimeOpenAndSetLabels(updateDtoAndExtractedVariables.variableModels); + this.getForm().showEditForm(updateDtoAndExtractedVariables.updateDto); }); } else{ diff --git a/opensilex-front/front/src/components/variables/views/VariableSelectorWithFilter.vue b/opensilex-front/front/src/components/variables/views/VariableSelectorWithFilter.vue index 8b5f1e1db..630543546 100644 --- a/opensilex-front/front/src/components/variables/views/VariableSelectorWithFilter.vue +++ b/opensilex-front/front/src/components/variables/views/VariableSelectorWithFilter.vue @@ -5,6 +5,7 @@ :label="label" :placeholder="placeholder" :selected.sync="variablesURI" + :selectedInJsonFormat="this.editMode ? variablesAsSelectableItems : null" :experiment="experiment" :objects="objects" :devices="devices" @@ -13,7 +14,7 @@ :multiple="true" :maximumSelectedItems="maximumSelectedRows" :withAssociatedData="withAssociatedData" - :limit="1" + :limit="4" @clear="refreshVariableSelector" @select="select" @deselect="deselect" @@ -28,17 +29,26 @@ import { Component, Prop, PropSync, Ref } from "vue-property-decorator"; import Vue from "vue"; // @ts-ignore import { NamedResourceDTO, VariableDetailsDTO } from "opensilex-core/index"; -import HttpResponse, {OpenSilexResponse} from "opensilex-core/HttpResponse" +import {SelectableItem} from '../../common/forms/SelectForm.vue'; +import SelectForm from "../../common/forms/SelectForm.vue"; @Component export default class VariableSelectorWithFilter extends Vue { $opensilex: any; - @Ref("variableSelector") readonly variableSelector!: any; + @Ref("variableSelector") readonly variableSelector!: SelectForm; @PropSync("variables") variablesURI; + //Needed if elements were already present to correctly show their labels + @PropSync("variablesWithLabels") + variablesAsSelectableItems: Array; + + //To say if some elements can already be present when we open this selector + @Prop() + editMode: boolean; + @Prop() placeholder; @@ -75,6 +85,11 @@ export default class VariableSelectorWithFilter extends Vue { this.$emit("validate", value); } + //Function to load in the already present variables if this is the first time we are opening this selector + setVariableSelectorToFirstTimeOpen(){ + this.variableSelector.setSelectorToFirstTimeOpen(); + } + refreshVariableSelector() { this.variableSelector.refreshModalSearch(); }