Add sql formatter tool

This commit is contained in:
Illya Marchenko 2023-12-15 12:11:46 +02:00
parent a9e52bfea8
commit 2d4ec8c498
Signed by: stuzer05
GPG Key ID: A6ABAAA9268F9F4F
16 changed files with 156 additions and 21 deletions

63
package-lock.json generated

@ -270,8 +270,7 @@
"argparse": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
"dev": true
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
},
"asynckit": {
"version": "0.4.0",
@ -420,6 +419,11 @@
"delayed-stream": "~1.0.0"
}
},
"commander": {
"version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -492,6 +496,11 @@
"resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
"integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
},
"discontinuous-range": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
"integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ=="
},
"dlv": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@ -971,6 +980,11 @@
"integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==",
"dev": true
},
"get-stdin": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
"integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg=="
},
"glob": {
"version": "7.2.3",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@ -1211,6 +1225,11 @@
"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
"integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ=="
},
"moo": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
"integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@ -1228,6 +1247,17 @@
"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
"dev": true
},
"nearley": {
"version": "2.20.1",
"resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
"integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
"requires": {
"commander": "^2.19.0",
"moo": "^0.5.0",
"railroad-diagrams": "^1.0.0",
"randexp": "0.4.6"
}
},
"node-releases": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
@ -1411,6 +1441,20 @@
"resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
"integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA=="
},
"railroad-diagrams": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
"integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A=="
},
"randexp": {
"version": "0.4.6",
"resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
"integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
"requires": {
"discontinuous-range": "1.0.0",
"ret": "~0.1.10"
}
},
"readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@ -1441,6 +1485,11 @@
"integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
"dev": true
},
"ret": {
"version": "0.1.15",
"resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
"integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
},
"reusify": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
@ -1522,6 +1571,16 @@
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
"sql-formatter": {
"version": "15.0.2",
"resolved": "https://registry.npmjs.org/sql-formatter/-/sql-formatter-15.0.2.tgz",
"integrity": "sha512-B8FTRc1dhb36lfuwSdiLhwrhkvT3PU/3es7YDPPQBOhbGHdXKlweAXTRS+QfCWk06ufAh118yFja6NcukBS4gg==",
"requires": {
"argparse": "^2.0.1",
"get-stdin": "=8.0.0",
"nearley": "^2.20.1"
}
},
"strip-ansi": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",

@ -14,6 +14,7 @@
"mitt": "^3.0.0",
"pinia": "^2.0.14",
"postcss": "^8",
"sql-formatter": "^15.0.2",
"tailwindcss": "^3",
"vue": "^3.2.36",
"vue-axios": "^3.4.1",

@ -8,6 +8,7 @@
*/
input[type=text], input[type=number], textarea {
@apply appearance-none border leading-tight focus:outline-none;
font-family: monospace;
}
input:disabled, textarea:disabled {
@ -30,4 +31,11 @@ input:disabled, textarea:disabled {
.input-group > label {
font-style: italic;
}
textarea[id=data] {
height: 200px;
}
textarea[id=result] {
height: 350px;
}

@ -42,6 +42,7 @@ export default {
'php_array_to_json': 'PHP array to Json',
},
'SQL': {
'sql_formatter': 'SQL formatter',
'sql_split_in': 'SQL split IN',
},
};

@ -69,6 +69,11 @@ const router = createRouter({
name: 'sql_split_in',
component: () => import('../views/SQLSplitInView.vue'),
},
{
path: '/sql_formatter',
name: 'sql_formatter',
component: () => import('../views/SQLFormatter.vue'),
},
],
})

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>

@ -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>