InputDatePicker.vue

<template>
  <div class="InputDatePicker">
    <b-form-group
      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="3"
      label-align-sm="right"
      :label="label"
      label-class="application-profile-label"
    >
      <b-row>
        <b-col>
          <datepicker
            :id="cssId"
            :language="datepickerLanguage[this.languageCode]"
            :calendar-button="true"
            calendar-button-icon="material-icons"
            calendar-button-icon-content="date_range"
            v-model="formData[nodeName][0]['value']"
            :bootstrap-styling="true"
            :full-month-name="true"
            format="dd MMMM yyyy"
            @input="updateFixedValues"
            :disabled="disabledMode || locked"
            :required="checkField(formFieldInformation,'http://www.w3.org/ns/shacl#minCount') &&
            formFieldInformation['http://www.w3.org/ns/shacl#minCount'][0]['value']  >= 1"
          />
        </b-col>
        <b-col v-if="fixedValueMode" class="lock-colum col-sm-2">
          <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>
  </div>
</template>

<script lang="ts">
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 Datepicker from "vuejs-datepicker";
import { de, en } from "vuejs-datepicker/dist/locale";

import { LanguageUtil } from "@coscine/app-util";

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: "InputDatePicker",
  beforeMount(){
    i18n.locale = LanguageUtil.getLanguage();

    this.label = FieldReader.getLocalizedField(
      this.formFieldInformation,
      this.languageCode
    );
    this.nodeName = FieldReader.getNodeName(this.formFieldInformation);
    this.cssId = this.nodeName.substr(this.nodeName.lastIndexOf("\/")+1);
    if (this.cssId.indexOf('#') !== -1) {
      this.cssId = this.cssId.substr(this.cssId.indexOf('#') + 1);
    }

    // if a fixed value was sent with the application profile take this
    if (this.checkField(this.formFieldInformation,'https://purl.org/coscine/fixedValue')) {
      this.$set(this.formData,this.nodeName, [{'value': this.formFieldInformation['https://purl.org/coscine/fixedValue'][0].value}]);
      this.locked = true;
    }
    // if a fixed values was given directly take that
    if (this.checkField(this.fixedValues[this.formFieldInformation['idForFixedValues']],'https://purl.org/coscine/fixedValue')) {
      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')) {
        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}]);
      }
    }
    // if formdata is still empty intialize it with an empty value
    if (!this.checkField(this.formData,this.nodeName)){
      this.$set(this.formData,this.nodeName, [{'value': ''}]);
    }

    // take whatever is defined in formdata now and try to get the content if we are not in fixed value mode
    this.replacePlaceholder();

    this.selectedDate = new Date(this.formData[this.nodeName][0]['value']);

    // set the datatype
    this.$set(this.formData[this.nodeName][0],'type', 'literal');
    this.$set(this.formData[this.nodeName][0],'datatype', 'http://www.w3.org/2001/XMLSchema#date');

    if (this.fixedValueMode) {
      this.updateFixedValues();
    }
  },
  data() {
    return {
      datepickerLanguage: {
        de,
        en
      },
      label: "Label:",
      selectedDate: new Date(),
      nodeName: "",
      cssId:'cssId',
      languageCode: LanguageUtil.getLanguage(),
      locked: false,
      invisible: false,
    };
  },
  props: {
    formFieldInformation: Object,
    formData: Object,
    fixedValues: Object,
    fixedValueMode: Boolean,
    disabledMode: Boolean,
  },
  components: {
    Datepicker,
    LockIcon,
    LockOpenIcon,
    Visible,
    Invisible,
  },
  methods: {
    replacePlaceholder(){
      if (this.checkField(this.formData,this.nodeName)){
        if (this.formData[this.nodeName][0]['value'] === '{TODAY}') {
          if (this.fixedValueMode) {
            return;
          }
          this.selectedDate =new Date();
        } else if (this.formData[this.nodeName][0]['value'] === '') {
          this.selectedDate = new Date();
        } else {
          this.selectedDate = new Date(this.formData[this.nodeName][0]['value']);
        }
        this.$set(this.formData[this.nodeName][0],'value',`${this.selectedDate.getUTCFullYear()}-${this.selectedDate.getUTCMonth()+1}-${this.selectedDate.getUTCDate()}`);
      }
    },
    checkField(data:any,nodename:string,property: string = 'value'){
      return FieldReader.isValueAssignedToKey(data,nodename,property);
    },
    updateFixedValues(){
      if(this.fixedValues[this.formFieldInformation['idForFixedValues']] !== undefined && this.fixedValues[this.formFieldInformation['idForFixedValues']]['https://purl.org/coscine/fixedValue'] !== undefined){
        this.locked = true;
      } else {
        this.locked = false;
      }
      this.setFixedValues();
    },
    changeLockable() {
      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.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': 'literal', 'datatype': 'http://www.w3.org/2001/XMLSchema#date'}]});
      }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': 'literal', 'datatype': 'http://www.w3.org/2001/XMLSchema#date'}]});
      }
    },
  }
});
</script>

<style>
.vdp-datepicker .form-control {
  background-color: #ffffff;
}
.vdp-datepicker__calendar-button {
  height: calc(1.4em + 0.75rem + 2px);
}
</style>

<style scoped>
</style>