Sprint/2020-01

src/components/InputCombobox.vue

 <template>
   <div class="InputComboxbox">
     <b-form-group
-      v-bind:class="{ mandatory: checkField(formFieldInformation,'http://www.w3.org/ns/shacl#minCount') && formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1 }"
+      v-bind:class="{
+      mandatory: (checkField(this.formFieldInformation,'http://www.w3.org/ns/shacl#minCount') &&
+      this.formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1),
+      invisible: (!fixedValueMode && checkField(this.formFieldInformation,'https://purl.org/coscine/invisible') &&
+      this.formFieldInformation['https://purl.org/coscine/invisible'][0]['value'] === '1') }"
       :label-for="cssid"
-      label-cols-sm="4"
+      label-cols-sm="3"
       label-align-sm="right"
       :label="label"
       label-class="application-profile-label"
@@ -43,10 +47,16 @@
         ></multiselect>
         </b-col>
         <b-col v-if="fixedValueMode" class="lock-colum col-sm-2">
-            <b-button :disabled="disabledMode || !checkField(formData,nodeName) || (checkField(formData,nodeName) && formData[nodeName][0]['value'] ==='')" class="lockButton" variant="outline-secondary" @click.prevent="changeLockable()">
+          <b-button-group>
+            <b-button :disabled="disabledMode || !checkField(formData,nodeName) || (checkField(formData,nodeName) && formData[nodeName][0]['value'] ==='') || (this.isMandatoryField() && this.invisible)" class="lockButton" variant="outline-secondary" @click.prevent="changeLockable()">
               <LockIcon v-if="locked"/>
               <LockOpenIcon v-else />
             </b-button>
+            <b-button v-b-tooltip.hover.bottom="$t('invisibilityInfo')" :disabled="disabledMode || !fieldCanBeInvisible()" class="visibilityButton" variant="outline-secondary" @click.prevent="changeVisibility()">
+              <Invisible v-if="invisible"/>
+              <Visible v-else />
+            </b-button>
+          </b-button-group>
         </b-col>
       </b-row>
     </b-form-group>
@@ -58,6 +68,8 @@ import Vue from 'vue';
 
 import LockIcon from 'vue-material-design-icons/Lock.vue';
 import LockOpenIcon from 'vue-material-design-icons/LockOpen.vue';
+import Visible from 'vue-material-design-icons/Eye.vue';
+import Invisible from 'vue-material-design-icons/EyeOff.vue';
 
 import Multiselect from 'vue-multiselect';
 import 'vue-multiselect/dist/vue-multiselect.min.css';
@@ -104,6 +116,14 @@ export default Vue.extend({
       this.$set(this.formData,this.nodeName, [{'value': this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'][0].value}]);
       this.locked = true;
     }
+
+    if (this.checkField(this.formFieldInformation['idForFixedValues'],'https://purl.org/coscine/invisible')) {
+      this.invisible = this.formFieldInformation['https://purl.org/coscine/invisible'][0].value === '1';
+    }
+    if (this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/invisible')) {
+      this.invisible = this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/invisible'][0].value === '1';
+    }
+
     if (!this.checkField(this.formData,this.nodeName)){
       // if formdata is still emty take the default value from the ap
       if (this.checkField(this.formFieldInformation,'http://www.w3.org/ns/shacl#defaultValue')) {
@@ -166,6 +186,7 @@ export default Vue.extend({
       listLanguageCode: LanguageUtil.getLanguage(),
       maxNumberOfSelectedObjects: 10000,
       locked: false,
+      invisible: false,
     };
   },
   methods: {
@@ -198,29 +219,48 @@ export default Vue.extend({
       return FieldReader.isValueAssignedToKey(data,nodename,property);
     },
     removeEmptyEntry(){
-      if ( (this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue') && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'][0]['value'] === '') ||
+      if ((this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue') && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'][0]['value'] === '') ||
         this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/defaultValue') && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/defaultValue'][0]['value'] === '') {
-        this.$delete(this.fixedValues,this.formFieldInformation['idForFixedValues']);
+        this.$delete(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/defaultValue');
+        this.$delete(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue');
         this.locked = false;
       }
     },
     updateFixedValues(){
       if(this.fixedValues[this.formFieldInformation['idForFixedValues']] !== undefined && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'] !== undefined){
-        this.$set(this.fixedValues,this.formFieldInformation['idForFixedValues'], {'https://purl.org/coscine/fixedValue': [{'value':this.formData[this.nodeName][0]['value'],'type': 'uri'}]});
         this.locked = true;
       } else {
-        this.$set(this.fixedValues,this.formFieldInformation['idForFixedValues'], {'https://purl.org/coscine/defaultValue': [{'value':this.formData[this.nodeName][0]['value'],'type': 'uri'}]});
         this.locked = false;
       }
-      this.removeEmptyEntry();
+      this.setFixedValues();
     },
     changeLockable() {
-      if(this.fixedValues[this.formFieldInformation['idForFixedValues']] === undefined || this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'] === undefined){
-        this.$set(this.fixedValues,this.formFieldInformation['idForFixedValues'], {'https://purl.org/coscine/fixedValue': [{'value':this.formData[this.nodeName][0]['value'],'type': 'uri'}]});
-        this.locked = true;
+      this.locked = !this.locked;
+      this.setFixedValues();
+    },
+    isMandatoryField(){
+      return this.checkField(this.formFieldInformation,'http://www.w3.org/ns/shacl#minCount') &&
+      this.formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1;
+    },
+    fieldCanBeInvisible(){
+      return (this.isMandatoryField() &&
+      this.checkField(this.formData,this.nodeName) &&
+      this.formData[this.nodeName][0]['value'] !== '' && this.locked) ||
+      !this.isMandatoryField();
+    },
+    changeVisibility() {
+      if(!this.invisible && this.fieldCanBeInvisible()){
+        this.invisible = true;
       } else {
-        this.$set(this.fixedValues,this.formFieldInformation['idForFixedValues'], {'https://purl.org/coscine/defaultValue': [{'value':this.formData[this.nodeName][0]['value'],'type': 'uri'}]});
-        this.locked = false;
+        this.invisible = false;
+      }
+      this.setFixedValues();
+    },
+    setFixedValues() {
+      if(this.locked){
+        this.$set(this.fixedValues, this.formFieldInformation['idForFixedValues'], {'https://purl.org/coscine/invisible': [{'value': this.invisible ? '1' : '0', 'type': 'literal'}], 'https://purl.org/coscine/fixedValue': [{'value':this.formData[this.nodeName][0]['value'],'type': 'uri'}]});
+      }else{
+        this.$set(this.fixedValues, this.formFieldInformation['idForFixedValues'], {'https://purl.org/coscine/invisible': [{'value': this.invisible ? '1' : '0', 'type': 'literal'}], 'https://purl.org/coscine/defaultValue': [{'value':this.formData[this.nodeName][0]['value'],'type': 'uri'}]});
       }
       this.removeEmptyEntry();
     },
@@ -238,6 +278,8 @@ export default Vue.extend({
     Multiselect,
     LockIcon,
     LockOpenIcon,
+    Visible,
+    Invisible,
   },
 });
 </script>