Commit b698f50e authored by Joel Collins's avatar Joel Collins
Browse files

Metadata values can be edited once added

parent 463bec6e

src/components/fieldComponents/keyvalList.vue

+14 −1
Original line number Diff line number Diff line
@@ -13,7 +13,9 @@ 
    </form>



    <div v-for="(val, key) in value" :key="key" class="uk-width-1-1 uk-margin-small uk-margin-remove-left uk-margin-remove-right uk-flex uk-flex-middle">

      <div class="uk-margin-remove-top uk-padding-remove uk-width-expand"><b>{{ key }}: </b>{{ val }}</div>

      <div class="uk-margin-remove-top uk-padding-remove uk-width-expand">

        <labelInput :label="key" :value="value[key]" @input="value[key]=$event"/> 

      </div>

      <a href="#" v-on:click="delMetadataKey(key)" class="uk-icon uk-width-auto"><i class="material-icons">delete</i></a>

    </div>
@@ -21,9 +23,15 @@ 
</template>



<script>

import labelInput from "../fieldComponents/labelInput"



export default {

  name: 'keyvalList',



  components: {

    labelInput

  },



  data: function () {

    return {

      newMetadata: {
@@ -64,6 +72,11 @@ export default { 
      this.$emit('input', newSelected)

    },



    modifyValue: function (e, v) {

      console.log(e)

      console.log(v)

    }



  }

}

</script>

src/components/fieldComponents/labelInput.vue

0 → 100644
+58 −0
Original line number Diff line number Diff line 
<template>

  <div>

    <label class="uk-form-label uk-text-bold">{{label}}</label>



    <div @click="setEditing(true)" uk-tooltip="title: Click to edit value; delay: 250">



      <div v-show="editing == false">

        <label> {{value}} </label>

      </div>



      <input

        v-show="editing == true"

        class="uk-input uk-form-small"

        type="text"

        v-bind:name="name"

        v-bind:value="value"

        ref="textinput"

        v-on:blur= "setEditing(false)"

        @keyup.enter = "setEditing(false)"

        @input="$emit('input', $event.target.value)"

        autofocus

      >

    </div>







  </div>

</template>



<script>

export default {

  name: 'labelInput',



  data: function () {

    return {

      editing: false

    }

  },



  props: [

    'name',

    'label',

    'value'

  ],



  methods: {

    setEditing(editing) {

      this.editing = editing

      if (editing == true) {

        this.$nextTick(() => this.$refs.textinput.focus())

      }

    }

  },



}

</script>



<style scoped></style>
 
 No newline at end of file