<commit_before><script>
import { clone } from '../utils/Utils'

export default {
  props: {
    basemodel: { type: Object, required: true },
    attrs: { type: Array, required: true },
    autoremove: Boolean,
  },

  methods: {
    clickType(index, item){
      this.$dispatch('clicktype', index, item);
    },

    clickAddNew(){
      this.attrs.push(clone(this.basemodel));
      this.upgradeComponents();
    },

    clickRemove(index){
      if (this.autoremove){
        this.attrs.splice(index, 1);
      }
      this.$dispatch('clickRemove', index);
    },

    upgradeComponents(){
      setTimeout(() => componentHandler.upgradeAllRegistered(), 200);
    },

    onDragStart(e){
      this.$data.dragged = e.currentTarget;
      e.dataTransfer.effectAllowed = 'move';
    },

    onDragEnd(e){
      console.log(e.currentTarget);
    }
  }
}

</script>

<style lang='stylus'>
.rowInput
  display inline-block

  .mdl-textfield
    width 120px
    margin-right 30px


  .docs
    width 270px
    margin-right 0px

</style>

<template lang='jade'>
div(v-for='item in attrs', track-by="$index")
  .rowInput(draggable='true', @dragstart='onDragStart', @dragend='onDragEnd')
    .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.is-dirty(
      v-bind:class="{ 'invalid': !item.viewname,'is-dirty': item.viewname }")
      input.mdl-textfield__input(v-model='item.viewname')
      label.mdl-textfield__label Visual Name

    .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.is-dirty(
      v-bind:class="{ 'invalid': !item.jsonfield,'is-dirty': item.jsonfield }")
      input.mdl-textfield__input(v-model='item.jsonfield')
      label.mdl-textfield__label Json Field

    .mdl-textfield.docs.mdl-js-textfield.mdl-textfield--floating-label.is-dirty(
      v-bind:class="{ 'is-dirty': item.comment }")
      input.mdl-textfield__input(v-model='item.comment')
      label.mdl-textfield__label Comment (docs)

    mdl-button.btnType(@click='clickType(this.$index, item)', v-mdl-ripple-effect) {{ item.type }}
    mdl-button(@click='clickRemove(this.$index)', v-mdl-ripple-effect)
      i.material-icons delete

mdl-button(@click='clickAddNew', v-mdl-ripple-effect, fab)<commit_msg>drag and drop<commit_after><script>
import { clone } from '../utils/Utils'

export default {
  props: {
    basemodel: { type: Object, required: true },
    attrs: { type: Array, required: true },
    autoremove: Boolean,
  },

  methods: {
    clickType(index, item){
      this.$dispatch('clicktype', index, item);
    },

    clickAddNew(){
      this.attrs.push(clone(this.basemodel));
      this.upgradeComponents();
    },

    clickRemove(index){
      if (this.autoremove){
        this.attrs.splice(index, 1);
      }
      this.$dispatch('clickRemove', index);
    },

    upgradeComponents(){
      setTimeout(() => componentHandler.upgradeAllRegistered(), 200);
    },

    onDragStart(e){
      e.currentTarget.classList.add('dragging');
      this.$data.dragged = e.currentTarget;
    },

    onDragEnd(e){
      e.currentTarget.classList.remove('dragging');
      console.log(e.target);
      console.log(e.currentTarget);
    }
  }
}

</script>

<style lang='stylus'>
.rowInput
  display inline-block

  .mdl-textfield
    width 120px
    margin-right 30px


  .docs
    width 270px
    margin-right 0px

.dragging
  opacity: 0.8
  border 1px solid grey
  border-style dashed

</style>

<template lang='jade'>
div(v-for='item in attrs', track-by="$index")
  .rowInput(draggable='true', @dragstart='onDragStart', @dragend='onDragEnd')
    .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.is-dirty(
      v-bind:class="{ 'invalid': !item.viewname,'is-dirty': item.viewname }")
      input.mdl-textfield__input(v-model='item.viewname')
      label.mdl-textfield__label Visual Name

    .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label.is-dirty(
      v-bind:class="{ 'invalid': !item.jsonfield,'is-dirty': item.jsonfield }")
      input.mdl-textfield__input(v-model='item.jsonfield')
      label.mdl-textfield__label Json Field

    .mdl-textfield.docs.mdl-js-textfield.mdl-textfield--floating-label.is-dirty(
      v-bind:class="{ 'is-dirty': item.comment }")
      input.mdl-textfield__input(v-model='item.comment')
      label.mdl-textfield__label Comment (docs)

    mdl-button.btnType(@click='clickType(this.$index, item)', v-mdl-ripple-effect) {{ item.type }}
    mdl-button(@click='clickRemove(this.$index)', v-mdl-ripple-effect)
      i.material-icons delete

mdl-button(@click='clickAddNew', v-mdl-ripple-effect, fab)
{'fraction_non_alphanumeric': 0.16335009840367373, 'fraction_numerical': 0.006341570085283184, 'mean_word_length': 3.3069679849340865, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4215978', 'n_tokens_mistral': 1641, 'n_tokens_neox': 1568, 'n_words': 231}