random-web-tools/src/views/sql/SplitInView.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>