InputTextField.vue

<template>
  <b-form-input
    v-if="singleLine"
    v-model="object.value"
    :disabled="disabledMode || locked"
    :required="required"
    :state="state"
    :type="type"
    @update:model-value="updateMetadataValue"
  />
  <b-form-textarea
    v-else
    v-model="object.value"
    :disabled="disabledMode || locked"
    :required="required"
    :state="state"
    :type="type"
    @update:model-value="updateMetadataValue"
  />
</template>

<script lang="ts">
import type { NamedNode, Quad_Object } from '@rdfjs/types';
import prefixes from '@zazuko/prefixes/prefixes';
import factory from 'rdf-ext';

import type { User } from '@/types/user';
import type { InputType } from 'bootstrap-vue-next';

export default defineComponent({
  name: 'InputTextField',
  props: {
    locked: {
      default: false,
      type: Boolean,
    },
    required: {
      default: false,
      type: Boolean,
    },
    singleLine: {
      default: false,
      type: Boolean,
    },
    entry: {
      required: true,
      type: Object as PropType<Quad_Object>,
    },
    dataType: {
      default: () => factory.namedNode(prefixes.xsd + 'string'),
      type: Object as PropType<NamedNode<string>>,
    },
    fixedValueMode: {
      default: false,
      type: Boolean,
    },
    nodeName: {
      default: '',
      type: String,
    },
    disabledMode: {
      default: false,
      type: Boolean,
    },
    state: {
      type: [Boolean] as PropType<boolean | null>,
      default: null,
    },
    userReceiver: {
      default: () => {
        return async () => ({});
      },
      type: Function as PropType<() => Promise<User>>,
    },
  },
  data() {
    return {
      object: factory.literal('', this.dataType) as Quad_Object,
    };
  },
  computed: {
    type(): InputType {
      const dataType = this.dataType.value;
      if (dataType.endsWith('#dateTime')) {
        return 'datetime-local';
      } else if (
        dataType.endsWith('#byte') ||
        dataType.endsWith('#int') ||
        dataType.endsWith('#short') ||
        dataType.endsWith('#integer') ||
        dataType.endsWith('#long') ||
        dataType.endsWith('#unsignedByte') ||
        dataType.endsWith('#unsignedShort') ||
        dataType.endsWith('#unsignedInt') ||
        dataType.endsWith('#unsignedLong')
      ) {
        return 'number';
      }
      return 'text';
    },
  },
  watch: {
    entry() {
      this.loadData();
    },
  },
  mounted() {
    // take whatever is defined in metadata now and try to get the content if we are not in fixed value mode
    this.replacePlaceholder();
    this.loadData();
  },
  methods: {
    updateMetadataValue() {
      if (this.type === 'datetime-local') {
        this.object.value += ':00';
      }
      // Sometimes numbers are set, which break existing logic, don't remove!
      this.object.value = this.object.value + '';
      this.$emit('update:metadata-value', this.object);
    },
    loadData() {
      if (this.object.value !== this.entry.value) {
        this.object = this.entry;
      }
    },
    replacePlaceholder() {
      if (!this.fixedValueMode) {
        if (this.entry.value === '{ME}') {
          this.retrieveUser();
        }
      }
    },
    async retrieveUser() {
      try {
        const user = await this.userReceiver();
        if (user.displayName) {
          this.object.value = user.displayName;
          this.$emit('update:metadata-value', this.object);
        }
      } catch (e) {
        // No user exists
        console.error(e);
      }
    },
  },
});
</script>

<style scoped></style>