Refactor views structure

2024-09-29 10:06:13 +03:00
parent f75809c12d
commit 029adcbc17
31 changed files with 58 additions and 56 deletions
--- a/src/views/sql/SplitInView.vue
+++ b/src/views/sql/SplitInView.vue
@ -0,0 +1,111 @@
+<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>