<commit_before><template>
  <div class="gobierto-data-sql-editor-table-container">
    <table class="gobierto-data-sql-editor-table">
      <thead>
        <tr>
          <th
            v-for="(column, index) in keysData"
            :key="index"
            :item="column"
            class="gobierto-data-sql-editor-table-header"
          >
            {{ column }}
          </th>
        </tr>
      </thead>
      <tbody
        class="gobierto-data-sql-editor-table-body"
      >
        <tr
          v-for="(row, idx) of mutableList"
          :key="idx"
        >
          <td
            v-for="(column, idx1) of keysData"
            :key="idx1"
          >
            {{ row[column] }}
          </td>
        </tr>
      </tbody>
    </table>
    <button
      v-show="showTotalRows"
      class="gobierto-data-btn-blue btn-sql-editor btn-sql-show-all"
      @click="queryTotal()"
    >
      Mostrar todas las filas
    </button>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'SQLEditorTable',
  props: {
    items: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      keysData: [],
      mutableList: this.items,
      showTotalRows: false
    }
  },
  watch:{
    items: function(){
        this.mutableList = JSON.parse(this.items);
    }
  },
  mounted() {
    this.$root.$on('sendData', this.destroyTable)
    this.keysData = Object.keys(this.mutableList[0])
    this.showAllRows()
    this.$root.$on('sendCompleteQuery', this.updateQuery)
  },
  created() {
    this.labelSave = I18n.t('gobierto_data.projects.save');
  },
  methods: {
    updateQuery(code) {
      this.queryEditor = code
    },
    destroyTable(keys, data) {
      this.keysData = []
      this.data = []
      setTimeout(() => {
        this.showTable(keys, data)
      }, 10)
    },
    showTable(keys, data) {
      this.keysData = keys
      this.mutableList = data
    },
    showAllRows() {
      if (this.$route.params.rowsDataset > 100) {
        this.showTotalRows = true
      }
    },
    queryTotal() {
      this.urlPath = location.origin
      this.endPoint = '/api/v1/data/data';
      this.url = `${this.urlPath}${this.endPoint}?sql=${this.queryEditor}`

      axios
        .get(this.url)
        .then(response => {
          this.data = []
          this.keysData = []
          this.rawData = response.data
          this.meta = this.rawData.meta
          this.data = this.rawData.data

          this.queryDurationRecors = [this.meta.rows, this.meta.duration]

          this.keysData = Object.keys(this.data[0])

          this.$root.$emit('recordsDuration', this.queryDurationRecors)
          this.$root.$emit('sendData', this.keysData, this.data)
          this.$root.$emit('showMessages', true)

        })
        .catch(error => {
          this.$root.$emit('apiError', error)
          this.data = []
          this.keysData = []<commit_msg>wrapper queries first iteration<commit_after><template>
  <div class="gobierto-data-sql-editor-table-container">
    <table class="gobierto-data-sql-editor-table">
      <thead>
        <tr>
          <th
            v-for="(column, index) in keysData"
            :key="index"
            :item="column"
            class="gobierto-data-sql-editor-table-header"
          >
            {{ column }}
          </th>
        </tr>
      </thead>
      <tbody
        class="gobierto-data-sql-editor-table-body"
      >
        <tr
          v-for="(row, idx) of mutableList"
          :key="idx"
        >
          <td
            v-for="(column, idx1) of keysData"
            :key="idx1"
          >
            {{ row[column] }}
          </td>
        </tr>
      </tbody>
    </table>
    <button
      v-show="showTotalRows"
      class="gobierto-data-btn-blue btn-sql-editor btn-sql-show-all"
      @click="queryTotal()"
    >
      Mostrar todas las filas
    </button>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'SQLEditorTable',
  props: {
    items: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      keysData: [],
      mutableList: this.items,
      showTotalRows: false
    }
  },
  watch:{
    items: function(){
        this.mutableList = JSON.parse(this.items);
    }
  },
  mounted() {
    this.$root.$on('sendData', this.destroyTable)
    this.keysData = Object.keys(this.mutableList[0])
    this.showAllRows()
    this.$root.$on('sendCompleteQuery', this.updateQuery)
  },
  created() {
    this.labelSave = I18n.t('gobierto_data.projects.save');
  },
  methods: {
    updateQuery(code) {
      this.queryEditor = code
    },
    destroyTable(keys, data) {
      this.keysData = []
      this.data = []
      setTimeout(() => {
        this.showTable(keys, data)
      }, 10)
    },
    showTable(keys, data) {
      this.keysData = keys
      this.mutableList = data
    },
    showAllRows() {
      if (this.$route.params.rowsDataset > 100) {
        this.showTotalRows = true
      } else {
        this.showTotalRows = false
      }
    },
    queryTotal() {
      this.urlPath = location.origin
      this.endPoint = '/api/v1/data/data';
      this.url = `${this.urlPath}${this.endPoint}?sql=${this.queryEditor}`

      axios
        .get(this.url)
        .then(response => {
          this.data = []
          this.keysData = []
          this.rawData = response.data
          this.meta = this.rawData.meta
          this.data = this.rawData.data

          this.queryDurationRecors = [this.meta.rows, this.meta.duration]

          this.keysData = Object.keys(this.data[0])

          this.$root.$emit('recordsDuration', this.queryDurationRecors)
          this.$root.$emit('sendData', this.keysData, this.data)
          this.$root.$emit('showMessages', true)

        })
        .catch(error => {
          this.$root.$emit('apiError', error)
          this.data = []
          this.keysData = []
{'fraction_non_alphanumeric': 0.1534090909090909, 'fraction_numerical': 0.004010695187165776, 'mean_word_length': 1.792813812412506, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 55, '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': '4333964', 'n_tokens_mistral': 1946, 'n_tokens_neox': 1927, 'n_words': 302}