New: adjusted functionality for the resource view

coscine/issues#566

src/components/InputCombobox.vue

@@ -3,49 +3,52 @@
     <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 }"
       :label-for="cssid"
-      label-cols-sm="3"
+      label-cols-sm="4"
       label-align-sm="right"
       :label="label"
+      label-class="application-profile-label"
     >
-    <b-row>
-      <b-col>
-      <multiselect
-        v-if="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#maxCount') && formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value'] === 1"
-        :id="cssid"
-        :options="selectableOptions"
-        v-model="selectedOptions"
-        :multiple="false"
-        :hide-selected="true"
-        label="name"
-        track-by="name"
-        :required="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#minCount') && formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1"
-        :disabled="disabledMode || locked"
-        @input="input"
-        @change="input"
-      ></multiselect>
-      <multiselect
-        v-else
-        :id="cssId"
-        :options="selectableOptions"
-        v-model="selectedOptions"
-        :multiple="true"
-        :hide-selected="true"
-        label="name"
-        track-by="name"
-        :max="this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'] !== undefined && this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0] !== undefined  && formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value'] !== undefined ? parseInt(formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value']) : maxNumberOfSelectedObjects"
-        :disabled="disabledMode || locked"
-        :required="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#minCount') && formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1"
-        @input="input"
-        @change="input"
-      ></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()">
-            <LockIcon v-if="locked"/>
-            <LockOpenIcon v-else />
-          </b-button>
-      </b-col>
-    </b-row>
+      <b-row>
+        <b-col>
+        <multiselect
+          v-if="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#maxCount') && formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value'] === 1"
+          :id="cssid"
+          :options="selectableOptions"
+          v-model="selectedOptions"
+          :multiple="false"
+          :hide-selected="true"
+          label="name"
+          track-by="name"
+          :placeholder="$t('multiselectPlaceholder')"
+          :required="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#minCount') && formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1"
+          :disabled="disabledMode || locked"
+          @input="input"
+          @change="input"
+        ></multiselect>
+        <multiselect
+          v-else
+          :id="cssId"
+          :options="selectableOptions"
+          v-model="selectedOptions"
+          :multiple="true"
+          :hide-selected="true"
+          label="name"
+          track-by="name"
+          :placeholder="$t('multiselectPlaceholder')"
+          :max="this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'] !== undefined && this.formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0] !== undefined  && formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value'] !== undefined ? parseInt(formFieldInformation['http://www.w3.org/ns/shacl#maxCount'][0]['value']) : maxNumberOfSelectedObjects"
+          :disabled="disabledMode || locked"
+          :required="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#minCount') && formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value'] >= 1"
+          @input="input"
+          @change="input"
+        ></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()">
+              <LockIcon v-if="locked"/>
+              <LockOpenIcon v-else />
+            </b-button>
+        </b-col>
+      </b-row>
     </b-form-group>
   </div>
 </template>
@@ -65,9 +68,22 @@ import { MetadataApi, defaultOnCatch } from '@coscine/api-connection';
 
 import FieldReader from '../util/FieldReader';
 
+import locales from '../locale/locales';
+import VueI18n from 'vue-i18n';
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+  locale: 'en', // set locale
+  messages: locales, // set locale messages
+  silentFallbackWarn: true,
+});
+
 export default Vue.extend({
+  i18n,
   name: 'InputCombobox',
   beforeMount() {
+    i18n.locale = LanguageUtil.getLanguage();
+
     this.label = FieldReader.getLocalizedField(
       this.formFieldInformation,
       this.languageCode,
@@ -93,6 +109,10 @@ export default Vue.extend({
       if (this.checkField(this.formFieldInformation,'http://www.w3.org/ns/shacl#defaultValue')) {
         this.$set(this.formData,this.nodeName, [{'value': this.formFieldInformation['http://www.w3.org/ns/shacl#defaultValue'][0].value}]);
       }
+      // take the default value from the alt provided values of the ap
+      if (this.checkField(this.formFieldInformation,'https://purl.org/coscine/defaultValue')) {
+        this.$set(this.formData,this.nodeName, [{'value': this.formFieldInformation['https://purl.org/coscine/defaultValue'][0].value}]);
+      }
       // take the default value from the provided values
       if (this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/defaultValue')) {
         this.$set(this.formData,this.nodeName, [{'value': this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/defaultValue'][0].value}]);
@@ -109,7 +129,9 @@ export default Vue.extend({
     // set the datatype
     this.$set(this.formData[this.nodeName][0],'type', 'uri');
 
-    this.updateFixedValues();
+    if (this.fixedValueMode) {
+      this.updateFixedValues();
+    }
   },
   mounted() {
     MetadataApi.getVocabulary(
@@ -129,7 +151,9 @@ export default Vue.extend({
         },
         defaultOnCatch,
       );
-      this.updateFixedValues();
+      if (this.fixedValueMode) {
+        this.updateFixedValues();
+      }
   },
   data() {
     return {
@@ -190,7 +214,7 @@ export default Vue.extend({
       }
       this.removeEmptyEntry();
     },
-    changeLockable() {      
+    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;
@@ -204,7 +228,7 @@ export default Vue.extend({
   props: {
     formFieldInformation: Object,
     formData: Object,
-    resourceId: String,    
+    resourceId: String,
     fixedValues: Object,
     fixedValueMode: Boolean,
     projectId: String,
@@ -220,7 +244,7 @@ export default Vue.extend({
 
 <style>
 .multiselect {
-  height: calc(1.4em + 0.75rem + 2px);
+  height: auto;
 }
 .multiselect__input {
   border: 0px !important;
@@ -261,14 +285,4 @@ export default Vue.extend({
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.multiselect {
-  height: calc(1.4em + 0.75rem + 2px);
-}
-.multiselect__input {
-  border: 0px;
-  height: calc(1.4em + 0.75rem + 2px);
-}
-.multiselect__tags {
-  border-radius: 0px;
-}
 </style>