feat(new tool): List Comparaison

components.d.ts

@@ -116,6 +116,7 @@ declare module '@vue/runtime-core' {
     JsonViewer: typeof import('./src/tools/json-viewer/json-viewer.vue')['default']
     JwtParser: typeof import('./src/tools/jwt-parser/jwt-parser.vue')['default']
     KeycodeInfo: typeof import('./src/tools/keycode-info/keycode-info.vue')['default']
+    ListComparer: typeof import('./src/tools/list-comparer/list-comparer.vue')['default']
     ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
     LocaleSelector: typeof import('./src/modules/i18n/components/locale-selector.vue')['default']
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
@@ -138,11 +139,15 @@ declare module '@vue/runtime-core' {
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
-    NTable: typeof import('naive-ui')['NTable']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

package.json

@@ -42,13 +42,15 @@
     "@tiptap/pm": "2.1.6",
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
+    "@types/arr-diff": "^4.0.3",
     "@types/figlet": "^1.5.8",
     "@types/markdown-it": "^13.0.7",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
     "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^10.0.0",
+    "arr-diff": "^4.0.0",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",
@@ -61,6 +63,7 @@
     "dompurify": "^3.0.6",
     "email-normalizer": "^1.0.0",
     "emojilib": "^3.0.10",
+    "fast_array_intersect": "^1.1.0",
     "figlet": "^1.7.0",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",

src/tools/index.ts

@@ -29,6 +29,7 @@ import { tool as tomlToJson } from './toml-to-json';
 import { tool as jsonToCsv } from './json-to-csv';
 import { tool as cameraRecorder } from './camera-recorder';
 import { tool as listConverter } from './list-converter';
+import { tool as listComparer } from './list-comparer';
 import { tool as phoneParserAndFormatter } from './phone-parser-and-formatter';
 import { tool as jsonDiff } from './json-diff';
 import { tool as ipv4RangeExpander } from './ipv4-range-expander';
@@ -111,6 +112,7 @@ export const toolsByCategory: ToolCategory[] = [
       jsonToYaml,
       jsonToToml,
       listConverter,
+      listComparer,
       tomlToJson,
       tomlToYaml,
       xmlToJson,

src/tools/list-comparer/index.ts

@@ -0,0 +1,12 @@
+import { List } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Lists Comparer',
+  path: '/list-comparer',
+  description: 'Compare two list items',
+  keywords: ['list', 'comparer'],
+  component: () => import('./list-comparer.vue'),
+  icon: List,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/list-comparer/list-comparer.service.test.ts

@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest';
+import { compareLists } from './list-comparer.service';
+
+describe('list-comparer', () => {
+  describe('compareLists', () => {
+    it('return correct comparaison', () => {
+      expect(compareLists({
+        list1: '1\n 2\n3\n4\n5\n4\n7\nA',
+        list2: '1\n2\n3\n4\n6\n4\n7\na',
+        trimItems: true,
+        ignoreCase: true,
+      })).to.deep.eq({
+        list1Not2: [
+          '5',
+        ],
+        list2Not1: [
+          '6',
+        ],
+        same: [
+          '1',
+          '2',
+          '3',
+          '4',
+          '7',
+          'a',
+        ],
+      });
+
+      expect(compareLists({
+        list1: '1\n 2\n3\n4\n5\n4\n7\nA',
+        list2: '1\n2\n3\n4\n6\n4\n7\na',
+        trimItems: false,
+        ignoreCase: false,
+      })).to.deep.eq({
+        list1Not2: [
+          ' 2',
+          '5',
+          'A',
+        ],
+        list2Not1: [
+          '2',
+          '6',
+          'a',
+        ],
+        same: [
+          '1',
+          '3',
+          '4',
+          '7',
+        ],
+      });
+
+      expect(compareLists({
+        list1: '1, 2,3,4,5\n4,7,A,A',
+        list2: '1\n2\n3\n4\n6\n4\n7\na',
+        trimItems: false,
+        ignoreCase: false,
+        separator: ',',
+      })).to.deep.eq({
+        list1Not2: [
+          ' 2',
+          '5',
+          'A',
+        ],
+        list2Not1: [
+          '2',
+          '6',
+          'a',
+        ],
+        same: [
+          '1',
+          '3',
+          '4',
+          '7',
+        ],
+      });
+
+      expect(compareLists({
+        list1: '10\n20\n20\n30',
+        list2: '30\n20\n40',
+        trimItems: false,
+        ignoreCase: false,
+      })).to.deep.eq({
+        list1Not2: [
+          '10',
+        ],
+        list2Not1: [
+          '40',
+        ],
+        same: [
+          '30',
+          '20',
+        ],
+      });
+    });
+  });
+});

src/tools/list-comparer/list-comparer.service.ts

@@ -0,0 +1,36 @@
+import _ from 'lodash';
+import intersect from 'fast_array_intersect';
+import diff from 'arr-diff';
+
+export function compareLists({
+  list1,
+  list2,
+  ignoreCase = false,
+  trimItems = true,
+  separator = '',
+}: {
+  list1: string
+  list2: string
+  separator?: string
+  ignoreCase?: boolean
+  trimItems?: boolean
+}) {
+  const splitSep = separator ? `${separator}|` : '';
+  const splitRegExp = new RegExp(`(?:${splitSep}\\n)`, 'g');
+
+  const prepareList = (list: string) =>
+    _.chain(list ?? '')
+      .thru(text => ignoreCase ? text.toLowerCase() : text)
+      .split(splitRegExp)
+      .map(text => trimItems ? text.trim() : text)
+      .value();
+
+  const list1Arr = prepareList(list1);
+  const list2Arr = prepareList(list2);
+
+  return {
+    same: [...new Set(intersect([list1Arr, list2Arr]))],
+    list2Not1: [...new Set(diff(list2Arr, list1Arr))],
+    list1Not2: [...new Set(diff(list1Arr, list2Arr))],
+  };
+}

src/tools/list-comparer/list-comparer.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { compareLists } from './list-comparer.service';
+
+const compareConfig = useStorage<{ ignoreCase: boolean; trimItems: boolean; noDuplicate: boolean; separator: string }>('list-cmp:conf', {
+  ignoreCase: false,
+  trimItems: true,
+  noDuplicate: false,
+  separator: '',
+});
+const list1 = ref('');
+const list2 = ref('');
+
+const compareResult = computed(() => {
+  return compareLists({
+    list1: list1.value,
+    list2: list2.value,
+    ignoreCase: compareConfig.value.ignoreCase,
+    trimItems: compareConfig.value.trimItems,
+    separator: compareConfig.value.separator,
+  });
+});
+</script>
+
+<template>
+  <div>
+    <n-space justify="center" gap-1 align="baseline">
+      <n-form-item
+        label="Trim items"
+        label-placement="left"
+      >
+        <n-switch v-model:value="compareConfig.trimItems" />
+      </n-form-item>
+
+      <n-form-item
+        label="Ignore case"
+        label-placement="left"
+        mb-2
+      >
+        <n-switch v-model:value="compareConfig.ignoreCase" />
+      </n-form-item>
+
+      <n-form-item
+        label="Separator"
+        label-placement="left"
+      >
+        <n-input
+          v-model:value="compareConfig.separator"
+          placeholder="Additional separator"
+        />
+      </n-form-item>
+    </n-space>
+
+    <div flex gap-1>
+      <c-input-text
+        v-model:value="list1"
+        multiline
+        rows="10"
+        label="List 1"
+      />
+      <c-input-text
+        v-model:value="list2"
+        multiline
+        rows="10"
+        label="List 2"
+      />
+    </div>
+
+    <div v-if="list1 || list2">
+      <n-divider />
+
+      <c-card title="Items in both lists" mb-2>
+        <textarea-copyable :value="compareResult.same.join('\n')" />
+      </c-card>
+      <c-card title="Items in List 1 but not in List 2" mb-2>
+        <textarea-copyable :value="compareResult.list1Not2.join('\n')" />
+      </c-card>
+      <c-card title="Items in List 2 but not in List 1" mb-2>
+        <textarea-copyable :value="compareResult.list2Not1.join('\n')" />
+      </c-card>
+    </div>
+  </div>
+</template>