fix(VariableGroup): Fixed being able to use variable selector with fi…

…lters for VariableGroup update form

OpenSILEX/opensilex-dev!1272

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

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<OpenSilexResponse<GermplasmGroupGetWithDetailsDTO>>) => {
       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);
       });
     });

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<GermplasmGetAllDTO>;
+  germplasmsWithLabels : Array<GermplasmGetAllDTO>;
 
   setSelectorsToFirstTimeOpenAndSetLabels(germplasmsWithLabels){
     this.germplasmSelector.setGermplasmSelectorToFirstTimeOpen();

opensilex-front/front/src/components/groupVariable/GroupVariablesForm.vue

@@ -29,18 +29,12 @@
 
     <!-- Variables -->
 
-    <!-- We use the old VariableSelector in editMode because of the edit bug -->
-    <opensilex-VariableSelector
-      v-if="editMode"
-      label="DataView.filter.variables"
-      :variables.sync="form.variables"
-      :multiple="true"
-    ></opensilex-VariableSelector>
-
     <opensilex-VariableSelectorWithFilter
-      v-else
+      ref="variablesSelectorRef"
       placeholder="VariableSelectorWithFilter.placeholder-multiple"
       :variables.sync="form.variables"
+      :variablesWithLabels="variablesWithLabels"
+      :editMode="this.editMode"
       @hideSelector='$emit("hideSelector")'
       @shownSelector='$emit("shownSelector")'
     ></opensilex-VariableSelectorWithFilter>
@@ -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<NamedResourceDTOVariableModel> = [];
+
+  setSelectorsToFirstTimeOpenAndSetLabels(variablesWithLabels){
+    this.variablesSelectorRef.setVariableSelectorToFirstTimeOpen();
+    this.variablesWithLabels = variablesWithLabels;
+  }
+
   static getEmptyForm(){
     return {
       uri: null,

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) {

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<any>){
+    this.variableSelection.setInitiallySelectedItems(initiallySelectedItems);
+  }
+
   show() {
     this.$emit("shown");
     this.modalRef.show();

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<NamedResourceDTOVariableModel>
+}
 
 @Component
 export default class VariablesView extends Vue {
@@ -429,23 +435,33 @@ 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<String> = [];
+        let new_variable_list : Array<NamedResourceDTOVariableModel>= [];
+      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) {
 
             // ensure that the group form component is loaded
             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{

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<SelectableItem>;
+
+  //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();
   }