CorentinTh · CorentinTh · May 7, 2023 · May 2, 2023 · May 7, 2023 · May 7, 2023
diff --git a/components.d.ts b/components.d.ts
diff --git a/src/tools/index.ts b/src/tools/index.ts
@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as listConverter } from './list-converter';
 import { tool as phoneParserAndFormatter } from './phone-parser-and-formatter';
 import { tool as jsonDiff } from './json-diff';
 import { tool as ipv4RangeExpander } from './ipv4-range-expander';
@@ -74,6 +75,7 @@ export const toolsByCategory: ToolCategory[] = [
       textToNatoAlphabet,
       yamlToJson,
       jsonToYaml,
+      listConverter,
     ],
   },
   {

diff --git a/src/tools/list-converter/index.ts b/src/tools/list-converter/index.ts
@@ -0,0 +1,13 @@
+import { List } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'List converter',
+  path: '/list-converter',
+  description:
+    'This tool can process column-based data and apply various changes (transpose, add prefix and suffix, reverse list, sort list, lowercase values, truncate values) to each row.',
+  keywords: ['list', 'converter', 'sort', 'reverse', 'prefix', 'suffix', 'lowercase', 'truncate'],
+  component: () => import('./list-converter.vue'),
+  icon: List,
+  createdAt: new Date('2023-05-07'),
+});
diff --git a/src/tools/list-converter/list-converter.e2e.spec.ts b/src/tools/list-converter/list-converter.e2e.spec.ts
@@ -0,0 +1,40 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Tool - List converter', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/list-converter');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('List converter - IT Tools');
+  });
+
+  test('Simple list should be converted with default settings', async ({ page }) => {
+    await page.getByTestId('input').fill(`1
+    2
+    3
+    4
+    5`);
+
+    const result = await page.getByTestId('area-content').innerText();
+
+    expect(result.trim()).toEqual('1, 2, 3, 4, 5');
+  });
+
+  test('Duplicates should be removed, list should be sorted and prefix and suffix list items', async ({ page }) => {
+    await page.getByTestId('input').fill(`1
+    2
+    2
+    4
+    4
+    3
+    5`);
+    await page.getByTestId('removeDuplicates').check();
+    await page.getByTestId('reverseList').check();
+    await page.getByTestId('itemPrefix').locator('input').fill("'");
+    await page.getByTestId('itemSuffix').locator('input').fill("'");
+
+    const result = await page.getByTestId('area-content').innerText();
+    expect(result.trim()).toEqual("'5', '3', '4', '2', '1'");
+  });
+});
diff --git a/src/tools/list-converter/list-converter.models.test.ts b/src/tools/list-converter/list-converter.models.test.ts
@@ -0,0 +1,57 @@
+import { expect, describe, it } from 'vitest';
+import { convert } from './list-converter.models';
+import type { ConvertOptions } from './list-converter.types';
+
+describe('list-converter', () => {
+  describe('convert', () => {
+    it('should convert a given list', () => {
+      const options = {
+        separator: ', ',
+        trimItems: true,
+        removeDuplicates: true,
+        itemPrefix: '"',
+        itemSuffix: '"',
+      } as ConvertOptions;
+      const input = `
+        1
+        2
+
+        3
+        3
+        4
+        `;
+      expect(convert(input, options)).toEqual('"1", "2", "3", "4"');
+    });
+
+    it('should return an empty value for an empty input', () => {
+      const options = {
+        separator: ', ',
+        trimItems: true,
+      } as ConvertOptions;
+      expect(convert('', options)).toEqual('');
+    });
+
+    it('should keep line breaks', () => {
+      const options = {
+        separator: '',
+        trimItems: true,
+        itemPrefix: '<li>',
+        itemSuffix: '</li>',
+        listPrefix: '<ul>',
+        listSuffix: '</ul>',
+        keepLineBreaks: true,
+      } as ConvertOptions;
+      const input = `
+        1
+        2
+        3
+        `;
+      const expected = `<ul>
+<li>1</li>
+<li>2</li>
+<li>3</li>
+</ul>`;
+      expect(convert(input, options)).toEqual(expected);
+    });
+  });
+});
diff --git a/src/tools/list-converter/list-converter.models.ts b/src/tools/list-converter/list-converter.models.ts
@@ -0,0 +1,55 @@
+import _ from 'lodash';
+import type { ConvertOptions } from './list-converter.types';
+
+export { convert };
+
+function convert(list: string, options: ConvertOptions): string {
+  if (options.lowerCase) {
+    list = list.toLowerCase();
+  }
+
+  let parts: string[];
+  parts = list.split('\n');
+
+  if (options.removeDuplicates) {
+    parts = _.uniq(parts);
+  }
+
+  if (options.reverseList) {
+    parts = _.reverse(parts);
+  }
+
+  if (options.sortList) {
+    parts = parts.sort((a, b) => (options.sortList === 'asc' ? a.localeCompare(b) : b.localeCompare(a)));
+  }
+
+  if (options.trimItems) {
+    parts = _.map(parts, (p) => p.trim());
+  }
+
+  // Remove empty lines
+  parts = _.without(parts, '');
+
+  if (options.itemPrefix) {
+    parts = _.map(parts, (p) => options.itemPrefix + p);
+  }
+
+  if (options.itemSuffix) {
+    parts = _.map(parts, (p) => p + options.itemSuffix);
+  }
+
+  let str = '';
+  if (options.listPrefix) {
+    str += options.listPrefix + (options.keepLineBreaks ? '\n' : '');
+  }
+
+  if (options.keepLineBreaks) {
+    _.forEach(parts, (p) => (str += p + (options.separator || '') + '\n'));
+  } else {
+    str += parts.join(options.separator);
+  }
+  if (options.listSuffix) {
+    str += options.listSuffix;
+  }
+  return str;
+}
diff --git a/src/tools/list-converter/list-converter.types.ts b/src/tools/list-converter/list-converter.types.ts
@@ -0,0 +1,15 @@
+export type SortOrder = 'asc' | 'desc' | null;
+
+export type ConvertOptions = {
+  lowerCase: boolean;
+  trimItems: boolean;
+  itemPrefix: string | undefined;
+  itemSuffix: string | undefined;
+  listPrefix: string | undefined;
+  listSuffix: string | undefined;
+  reverseList: boolean;
+  sortList: SortOrder;
+  removeDuplicates: boolean;
+  separator: string | undefined;
+  keepLineBreaks: boolean;
+};
diff --git a/src/tools/list-converter/list-converter.vue b/src/tools/list-converter/list-converter.vue
@@ -0,0 +1,103 @@
+<template>
+  <div style="flex: 0 0 100%">
+    <n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
+      <c-card>
+        <n-grid cols="1 400:2" x-gap="12" y-gap="12">
+          <n-form-item-gi label="Trim list items" label-placement="left" label-width="180">
+            <n-switch v-model:value="trimItems" />
+          </n-form-item-gi>
+          <n-form-item-gi label="Remove duplicate list items" label-placement="left" label-width="180">
+            <n-switch v-model:value="removeDuplicates" data-test-id="removeDuplicates" />
+          </n-form-item-gi>
+          <n-form-item-gi label="Convert items to lowercase" label-placement="left" label-width="180">
+            <n-switch v-model:value="lowerCase" />
+          </n-form-item-gi>
+          <n-form-item-gi label="Keep line breaks" label-placement="left" label-width="180">
+            <n-switch v-model:value="keepLineBreaks" />
+          </n-form-item-gi>
+          <n-form-item-gi label="Sort list" label-placement="left" label-width="180">
+            <n-select
+              v-model:value="sortList"
+              :options="sortOrderOptions"
+              clearable
+              :disabled="reverseList"
+              data-test-id="sortList"
+            />
+          </n-form-item-gi>
+          <n-form-item-gi label="Reverse list" label-placement="left" label-width="180">
+            <n-switch v-model:value="reverseList" :disabled="sortList !== null" data-test-id="reverseList" />
+          </n-form-item-gi>
+          <n-form-item-gi label="Item prefix" label-placement="left" label-width="180">
+            <n-input v-model:value="itemPrefix" placeholder="<li>" data-test-id="itemPrefix" />
+          </n-form-item-gi>
+          <n-form-item-gi label="Item suffix" label-placement="left" label-width="180">
+            <n-input v-model:value="itemSuffix" placeholder="</li>" data-test-id="itemSuffix" />
+          </n-form-item-gi>
+          <n-form-item-gi label="List prefix" label-placement="left" label-width="180">
+            <n-input v-model:value="listPrefix" placeholder="<ul>" />
+          </n-form-item-gi>
+          <n-form-item-gi label="List suffix" label-placement="left" label-width="180">
+            <n-input v-model:value="listSuffix" placeholder="</ul>" />
+          </n-form-item-gi>
+          <n-form-item-gi label="Separator" label-placement="left" label-width="180">
+            <n-input v-model:value="separator" placeholder="," />
+          </n-form-item-gi>
+        </n-grid>
+      </c-card>
+    </n-space>
+  </div>
+  <format-transformer
+    input-label="Your input data"
+    input-placeholder="Paste your input data here..."
+    output-label="Your transformed data"
+    :transformer="transformer"
+  />
+</template>
+
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core';
+import { convert } from './list-converter.models';
+
+const sortOrderOptions = [
+  {
+    label: 'Asc',
+    value: 'asc',
+    disabled: false,
+  },
+  {
+    label: 'Desc',
+    value: 'desc',
+    disabled: false,
+  },
+];
+
+const lowerCase = useStorage('list-converter--lowerCase', false);
+const trimItems = useStorage('list-converter--trimItems', true);
+const removeDuplicates = useStorage('list-converter--removeDuplicates', true);
+const keepLineBreaks = useStorage('list-converter--keepLineBreaks', false);
+const itemPrefix = useStorage('list-converter--itemPrefix', '');
+const itemSuffix = useStorage('list-converter--itemSuffix', '');
+const listPrefix = useStorage('list-converter--listPrefix', '');
+const listSuffix = useStorage('list-converter--listSuffix', '');
+const reverseList = useStorage('list-converter--reverseList', false);
+const sortList = useStorage('list-converter--sortList', null);
+const separator = useStorage('list-converter--separator', ', ');
+
+const transformer = (value: string) => {
+  return convert(value, {
+    lowerCase: lowerCase.value,
+    trimItems: trimItems.value,
+    removeDuplicates: removeDuplicates.value,
+    keepLineBreaks: keepLineBreaks.value,
+    itemPrefix: itemPrefix.value,
+    itemSuffix: itemSuffix.value,
+    listPrefix: listPrefix.value,
+    listSuffix: listSuffix.value,
+    reverseList: reverseList.value,
+    sortList: sortList.value,
+    separator: separator.value,
+  });
+};
+</script>
+
+<style lang="less" scoped></style>