random-web-tools/src/views/SQLSplitInView.vue

<template>
  <h2 class="tool-title">SQL split IN</h2>
  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="field_name">Field name</label>
    <input id="field_name" v-model="toolData.fieldName" v-on:keyup="result" placeholder="D.ID" type="text">
  </div>

  <div class="input-group">
    <label for="data">Data</label>
    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
  </div>

  <div class="input-group">
    <label for="data_delimiter">Delimiter</label>
    <input id="data_delimiter" v-model="toolData.dataDelimiter" v-on:keyup="result" placeholder="," type="text">
  </div>

  <div class="input-group">
    <label>Wrap in quotes</label>

    <div>
      <input id="wrap_in_quotes_no" value="" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" v-on:change="result" type="radio"> <label for="wrap_in_quotes_no">No</label><br>
      <input id="wrap_in_quotes_single" value="single" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" v-on:change="result" type="radio"> <label for="wrap_in_quotes_single">Single</label><br>
      <input id="wrap_in_quotes_double" value="double" name="wrap_in_quotes" v-model="toolData.wrapInQuotes" v-on:change="result" type="radio"> <label for="wrap_in_quotes_double">Double</label>
    </div>
  </div>

  <div class="input-group">
    <label for="chunk_by">Chunk by</label>
    <input id="chunk_by" v-model="toolData.chunkBy" v-on:keyup="result" placeholder="900" min="1" type="number">
  </div>

  <hr class="mt-5 mb-5">

  <div class="input-group">
    <label for="result">Result</label>
    <MonacoEditor name="result" language="sql" :value="toolResult"></MonacoEditor>
  </div>
</template>

<script>
import MonacoEditor from "@/components/MonacoEditor.vue";

function arrayChunk(arr, chunkSize) {
  const res = [];
  while (arr.length > 0) {
    const chunk = arr.splice(0, chunkSize);
    res.push(chunk);
  }
  return res;
}

export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      toolData: {
        fieldName: '',
        data: '',
        dataDelimiter: '',
        wrapInQuotes: '',
        chunkBy: 900,
      },
      toolResult: '',
    };
  },
  methods: {
    result() {
      let data = this.toolData.data
        .split(this.toolData.dataDelimiter ? this.toolData.dataDelimiter : '\n');

      for (let i = 0; i < data.length; i++) {
        let value = data[i];

        switch (this.toolData.wrapInQuotes) {
          case 'single':
            value = "'" + value.replace("'", "\\'") + "'";
            break;
          case 'double':
            value = '"' + value.replace('"', '\\"') + '"';
            break;
        }

        data[i] = value;
      }

      const chunkBy = this.toolData.chunkBy > 0 ? this.toolData.chunkBy : 1;
      data = arrayChunk(data, chunkBy);

      for (let i = 0; i < data.length; i++) {
        let chunk = data[i];

        data[i] = '(' + chunk.join(',') + ')';
      }

      this.toolResult = '(' + this.toolData.fieldName + ' IN ' + data.join(' OR ' + this.toolData.fieldName + ' IN ') + ')';
    },
  },
}
</script>

<style lang="scss">

</style>