aboutsummaryrefslogtreecommitdiff
path: root/src/tools/json-diff/json-diff.vue
diff options
context:
space:
mode:
authorGravatar Corentin Thomasset <corentin.thomasset74@gmail.com> 2023-04-22 00:49:03 +0200
committerGravatar Corentin THOMASSET <corentin.thomasset74@gmail.com> 2023-04-23 15:24:20 +0200
commit362f2fa280fdab210074e9a7e01dde6187924d29 (patch)
tree2a17c13e1db19e0b244cda22eabf8e107218f6b9 /src/tools/json-diff/json-diff.vue
parent61ece2387f7061d67177ee41c35db572ffeb84a7 (diff)
downloadit-tools-362f2fa280fdab210074e9a7e01dde6187924d29.tar.gz
it-tools-362f2fa280fdab210074e9a7e01dde6187924d29.tar.zst
it-tools-362f2fa280fdab210074e9a7e01dde6187924d29.zip
feat(new-tool): diff of two json objects
Diffstat (limited to 'src/tools/json-diff/json-diff.vue')
-rw-r--r--src/tools/json-diff/json-diff.vue59
1 files changed, 59 insertions, 0 deletions
diff --git a/src/tools/json-diff/json-diff.vue b/src/tools/json-diff/json-diff.vue
new file mode 100644
index 0000000..df106c6
--- /dev/null
+++ b/src/tools/json-diff/json-diff.vue
@@ -0,0 +1,59 @@
+<template>
+ <n-form-item label="Your first json" v-bind="leftJsonValidation.attrs">
+ <n-input
+ v-model:value="rawLeftJson"
+ placeholder="Paste your first json here..."
+ type="textarea"
+ rows="20"
+ autocomplete="off"
+ autocorrect="off"
+ autocapitalize="off"
+ spellcheck="false"
+ :input-props="{ 'data-test-id': 'leftJson' }"
+ />
+ </n-form-item>
+ <n-form-item label="Your json to compare" v-bind="rightJsonValidation.attrs">
+ <n-input
+ v-model:value="rawRightJson"
+ placeholder="Paste your json to compare here..."
+ type="textarea"
+ rows="20"
+ autocomplete="off"
+ autocorrect="off"
+ autocapitalize="off"
+ spellcheck="false"
+ :input-props="{ 'data-test-id': 'rightJson' }"
+ />
+ </n-form-item>
+
+ <DiffsViewer :left-json="leftJson" :right-json="rightJson" />
+</template>
+
+<script setup lang="ts">
+import JSON5 from 'json5';
+
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import DiffsViewer from './diff-viewer/diff-viewer.vue';
+
+const rawLeftJson = ref('');
+const rawRightJson = ref('');
+
+const leftJson = computed(() => withDefaultOnError(() => JSON5.parse(rawLeftJson.value), undefined));
+const rightJson = computed(() => withDefaultOnError(() => JSON5.parse(rawRightJson.value), undefined));
+
+const createJsonValidation = (json: Ref) =>
+ useValidation({
+ source: json,
+ rules: [
+ {
+ validator: (value) => value === '' || isNotThrowing(() => JSON5.parse(value)),
+ message: 'Invalid JSON',
+ },
+ ],
+ });
+
+const leftJsonValidation = createJsonValidation(rawLeftJson);
+const rightJsonValidation = createJsonValidation(rawRightJson);
+</script>