aboutsummaryrefslogtreecommitdiff
path: root/src/tools/json-diff/diff-viewer/diff-viewer.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/diff-viewer/diff-viewer.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/diff-viewer/diff-viewer.vue')
-rw-r--r--src/tools/json-diff/diff-viewer/diff-viewer.vue110
1 files changed, 110 insertions, 0 deletions
diff --git a/src/tools/json-diff/diff-viewer/diff-viewer.vue b/src/tools/json-diff/diff-viewer/diff-viewer.vue
new file mode 100644
index 0000000..c77d407
--- /dev/null
+++ b/src/tools/json-diff/diff-viewer/diff-viewer.vue
@@ -0,0 +1,110 @@
+<template>
+ <div v-if="showResults">
+ <n-space justify="center">
+ <n-form-item label="Only show differences" label-placement="left">
+ <n-switch v-model:value="onlyShowDifferences" />
+ </n-form-item>
+ </n-space>
+
+ <c-card data-test-id="diff-result">
+ <n-text v-if="jsonAreTheSame" depth="3" block text-center italic> The provided JSONs are the same </n-text>
+ <diff-root-viewer v-else :diff="result" />
+ </c-card>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { useAppTheme } from '@/ui/theme/themes';
+import _ from 'lodash';
+import { DiffRootViewer } from './diff-viewer.models';
+import { diff } from '../json-diff.models';
+
+const onlyShowDifferences = ref(false);
+const props = defineProps<{ leftJson: unknown; rightJson: unknown }>();
+const { leftJson, rightJson } = toRefs(props);
+const appTheme = useAppTheme();
+
+const result = computed(() =>
+ diff(leftJson.value, rightJson.value, { onlyShowDifferences: onlyShowDifferences.value }),
+);
+
+const jsonAreTheSame = computed(() => _.isEqual(leftJson.value, rightJson.value));
+const showResults = computed(() => !_.isUndefined(leftJson.value) && !_.isUndefined(rightJson.value));
+</script>
+
+<style lang="less" scoped>
+::v-deep(.diffs-viewer) {
+ color: v-bind('appTheme.text.mutedColor');
+
+ & > ul {
+ padding-left: 0 !important;
+ }
+
+ ul {
+ list-style: none;
+ padding-left: 20px;
+ margin: 0;
+
+ li {
+ .updated-line {
+ padding: 3px 0;
+ }
+
+ .result,
+ .array,
+ .object,
+ .value {
+ &:not(:last-child) {
+ margin-right: 4px;
+ }
+
+ &.added {
+ padding: 3px 5px;
+ border-radius: 4px;
+ background-color: v-bind('appTheme.success.colorFaded');
+ color: v-bind('appTheme.success.color');
+ .key {
+ color: inherit;
+ }
+ }
+
+ &.removed {
+ padding: 3px 5px;
+ border-radius: 4px;
+ background-color: v-bind('appTheme.error.colorFaded');
+ color: v-bind('appTheme.error.color');
+
+ .key {
+ color: inherit;
+ }
+ }
+ }
+
+ .value {
+ cursor: pointer;
+ border: 1px solid transparent;
+ transition: border-color 0.2s ease-in-out;
+
+ &.added:hover {
+ border-color: v-bind('appTheme.success.color');
+ }
+
+ &.removed:hover {
+ border-color: v-bind('appTheme.error.color');
+ }
+ }
+
+ .added .added,
+ .removed .removed {
+ background-color: transparent;
+ color: inherit;
+ }
+
+ .key {
+ font-weight: 500;
+ color: v-bind('appTheme.text.baseColor');
+ }
+ }
+ }
+}
+</style>