Add sql formatter tool

This commit is contained in:
2023-12-15 12:11:46 +02:00
parent a9e52bfea8
commit 2d4ec8c498
16 changed files with 156 additions and 21 deletions

View File

@ -11,7 +11,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -4,7 +4,7 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data"></textarea>
</div>
<div class="input-group">
@ -20,7 +20,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -4,7 +4,7 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" v-on:keyup="result" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
</div>
<div class="input-group">
@ -17,7 +17,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -0,0 +1,61 @@
<template>
<h2 class="tool-title">SQL formatter</h2>
<hr class="mt-5 mb-5">
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
</div>
<hr class="mt-5 mb-5">
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>
<script>
import { format } from 'sql-formatter';
export default {
data() {
return {
toolData: {
data: '',
minifyJson: '',
},
toolResult: '',
};
},
methods: {
result() {
try {
this.toolResult = format(this.toolData.data, {
language: 'sql',
tabWidth: 4,
keywordCase: 'upper',
functionCase: 'upper',
identifierCase: 'lower',
linesBetweenQueries: 1,
paramTypes: {
custom: [
{ regex: String.raw`\{\$?[\w\d\->\[\]]+\}` },
{ regex: String.raw`\$[\w\d\->\[\]]+` },
{ regex: String.raw`['"]\s?\..*\.\s?['"]` },
],
positional: true,
named: [':', '@'],
},
});
} catch (e) {
this.toolResult = 'invalid syntax';
}
}
}
}
</script>
<style lang="scss">
</style>

View File

@ -9,7 +9,7 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data"></textarea>
</div>
<div class="input-group">
@ -36,7 +36,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -4,7 +4,7 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data"></textarea>
</div>
<div class="input-group">
@ -22,7 +22,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -4,14 +4,14 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data"></textarea>
</div>
<hr class="mt-5 mb-5">
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -4,7 +4,7 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data"></textarea>
</div>
<div class="input-group">
@ -24,7 +24,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -4,7 +4,7 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data"></textarea>
</div>
<div class="input-group">
@ -20,7 +20,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -4,7 +4,7 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" v-on:keyup="result" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
</div>
<div class="input-group">
@ -20,7 +20,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>

View File

@ -4,7 +4,7 @@
<div class="input-group">
<label for="data">Data</label>
<textarea id="data" v-model="toolData.data" style="height: 150px"></textarea>
<textarea id="data" v-model="toolData.data"></textarea>
</div>
<div class="input-group">
@ -20,7 +20,7 @@
<div class="input-group">
<label for="result">Result</label>
<textarea id="result" v-model="toolResult" style="height: 150px"></textarea>
<textarea id="result" v-model="toolResult"></textarea>
</div>
</template>