feat(new tool): ObjectId generator and parser

README.md

@@ -111,7 +111,7 @@ To create a new tool, there is a script that generate the boilerplate of the new
 pnpm run script:create:tool my-tool-name
 ```
 
-It will create a directory in `src/tools` with the correct files, and a the import in `src/tools/index.ts`. You will just need to add the imported tool in the proper category and develop the tool.
+It will create a directory in `src/tools` with the correct files, and add the import in `src/tools/index.ts`. You will just need to add the imported tool in the proper category and develop the tool.
 
 ## Contributors
 

components.d.ts

@@ -90,17 +90,28 @@ declare module '@vue/runtime-core' {
     HttpStatusCodes: typeof import('./src/tools/http-status-codes/http-status-codes.vue')['default']
     IbanValidatorAndParser: typeof import('./src/tools/iban-validator-and-parser/iban-validator-and-parser.vue')['default']
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
+    'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
+    IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
+    IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     IconMdiChevronRight: typeof import('~icons/mdi/chevron-right')['default']
     IconMdiClose: typeof import('~icons/mdi/close')['default']
     IconMdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    IconMdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
+    IconMdiDownload: typeof import('~icons/mdi/download')['default']
     IconMdiEye: typeof import('~icons/mdi/eye')['default']
     IconMdiEyeOff: typeof import('~icons/mdi/eye-off')['default']
     IconMdiHeart: typeof import('~icons/mdi/heart')['default']
+    IconMdiPause: typeof import('~icons/mdi/pause')['default']
+    IconMdiPlay: typeof import('~icons/mdi/play')['default']
+    IconMdiRecord: typeof import('~icons/mdi/record')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
     IconMdiSearch: typeof import('~icons/mdi/search')['default']
     IconMdiTranslate: typeof import('~icons/mdi/translate')['default']
     IconMdiTriangleDown: typeof import('~icons/mdi/triangle-down')['default']
+    IconMdiVideo: typeof import('~icons/mdi/video')['default']
     InputCopyable: typeof import('./src/components/InputCopyable.vue')['default']
     IntegerBaseConverter: typeof import('./src/tools/integer-base-converter/integer-base-converter.vue')['default']
     Ipv4AddressConverter: typeof import('./src/tools/ipv4-address-converter/ipv4-address-converter.vue')['default']
@@ -129,21 +140,44 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
+    NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
     NDivider: typeof import('naive-ui')['NDivider']
+    NDynamicInput: typeof import('naive-ui')['NDynamicInput']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGi: typeof import('naive-ui')['NGi']
+    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
+    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputGroupLabel: typeof import('naive-ui')['NInputGroupLabel']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSlider: typeof import('naive-ui')['NSlider']
     NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
+    NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
+    ObjectId: typeof import('./src/tools/object-id/object-id.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']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']

src/tools/date-time-converter/date-time-converter.models.test.ts

@@ -5,7 +5,6 @@ import {
   isExcelFormat,
   isISO8601DateTimeString,
   isISO9075DateString,
-  isMongoObjectId,
   isRFC3339DateString,
   isRFC7231DateString,
   isTimestamp,
@@ -129,20 +128,6 @@ describe('date-time-converter models', () => {
     });
   });
 
-  describe('isMongoObjectId', () => {
-    test('should return true for valid Mongo ObjectIds', () => {
-      expect(isMongoObjectId('507f1f77bcf86cd799439011')).toBe(true);
-      expect(isMongoObjectId('507f1f77bcf86cd799439012')).toBe(true);
-    });
-
-    test('should return false for invalid Mongo ObjectIds', () => {
-      expect(isMongoObjectId('507f1f77bcf86cd79943901')).toBe(false);
-      expect(isMongoObjectId('507f1f77bcf86cd79943901z')).toBe(false);
-      expect(isMongoObjectId('foo')).toBe(false);
-      expect(isMongoObjectId('')).toBe(false);
-    });
-  });
-
   describe('isExcelFormat', () => {
     test('an Excel format string is a floating number that can be negative', () => {
       expect(isExcelFormat('0')).toBe(true);

src/tools/date-time-converter/date-time-converter.models.ts

@@ -8,7 +8,6 @@ export {
   isUnixTimestamp,
   isTimestamp,
   isUTCDateString,
-  isMongoObjectId,
   dateToExcelFormat,
   excelFormatToDate,
   isExcelFormat,
@@ -36,7 +35,6 @@ const isRFC3339DateString = createRegexMatcher(RFC3339_REGEX);
 const isRFC7231DateString = createRegexMatcher(RFC7231_REGEX);
 const isUnixTimestamp = createRegexMatcher(/^[0-9]{1,10}$/);
 const isTimestamp = createRegexMatcher(/^[0-9]{1,13}$/);
-const isMongoObjectId = createRegexMatcher(/^[0-9a-fA-F]{24}$/);
 
 const isExcelFormat = createRegexMatcher(EXCEL_FORMAT_REGEX);
 

src/tools/date-time-converter/date-time-converter.vue

@@ -19,7 +19,6 @@ import {
   isExcelFormat,
   isISO8601DateTimeString,
   isISO9075DateString,
-  isMongoObjectId,
   isRFC3339DateString,
   isRFC7231DateString,
   isTimestamp,
@@ -28,6 +27,7 @@ import {
 } from './date-time-converter.models';
 import { withDefaultOnError } from '@/utils/defaults';
 import { useValidation } from '@/composable/validation';
+import { isValidObjectId, objectIdFromDate, objectIdToDate } from '@/utils/objectId';
 
 const inputDate = ref('');
 
@@ -84,9 +84,9 @@ const formats: DateFormat[] = [
   },
   {
     name: 'Mongo ObjectID',
-    fromDate: date => `${Math.floor(date.getTime() / 1000).toString(16)}0000000000000000`,
-    toDate: objectId => new Date(Number.parseInt(objectId.substring(0, 8), 16) * 1000),
-    formatMatcher: date => isMongoObjectId(date),
+    fromDate: date => objectIdFromDate(date.getTime(), true),
+    toDate: objectIdToDate,
+    formatMatcher: date => isValidObjectId(date),
   },
   {
     name: 'Excel date/time',

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 objectId } from './object-id';
 import { tool as emailNormalizer } from './email-normalizer';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
@@ -153,6 +154,7 @@ export const toolsByCategory: ToolCategory[] = [
       jsonMinify,
       jsonToCsv,
       sqlPrettify,
+      objectId,
       chmodCalculator,
       dockerRunToDockerComposeConverter,
       xmlFormatter,

src/tools/object-id/index.ts

@@ -0,0 +1,12 @@
+import { Leaf } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ObjectId',
+  path: '/object-id',
+  description: 'MongoDB ObjectId parser and generator',
+  keywords: ['mongo', 'mongodb', 'object-id', 'object', 'id'],
+  component: () => import('./object-id.vue'),
+  icon: Leaf,
+  createdAt: new Date('2025-01-21'),
+});

src/tools/object-id/object-id.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import InputCopyable from '@/components/InputCopyable.vue';
+import { isValidObjectId, objectIdFromDate, objectIdToDate } from '@/utils/objectId';
+
+const objectIdDate = ref(new Date().getTime());
+const objectId = ref<null | string>(objectIdFromDate(objectIdDate.value));
+const objectIdHex = computed({
+  get() {
+    if (objectId.value === null) {
+      return objectIdFromDate(objectIdDate.value, true);
+    }
+
+    return objectId.value;
+  },
+  set(value) {
+    objectId.value = value;
+  },
+});
+const objectIdMongo = computed(() => `ObjectId("${objectIdHex.value}")`);
+
+const objectIdValidationRules = [
+  {
+    validator: isValidObjectId,
+    message: 'This ObjectId is invalid',
+  },
+];
+
+function onObjectIdChanged(value: string) {
+  objectId.value = value;
+  objectIdDate.value = objectIdToDate(value).getTime();
+}
+
+function onDateChanged() {
+  objectId.value = null;
+}
+
+function generateRandomObjectId() {
+  onObjectIdChanged(objectIdFromDate(objectIdDate.value));
+}
+</script>
+
+<template>
+  <c-card>
+    <InputCopyable
+      :value="objectIdHex"
+      raw-text
+      placeholder="000000000000000000000000"
+      label="ObjectId"
+      :validation-rules="objectIdValidationRules"
+      mb-5
+      test-id="objectid-hex"
+      @update:value="onObjectIdChanged"
+    />
+
+    <InputCopyable
+      :value="objectIdMongo"
+      raw-text
+      readonly
+      placeholder="000000000000000000000000"
+      label="Mongo shell format"
+      mb-5
+      test-id="objectid-mongo"
+    />
+
+    <n-form-item label="ObjectId datetime">
+      <n-date-picker
+        id="datetime"
+        v-model:value="objectIdDate"
+        type="datetime"
+        format="yyyy-MM-dd'T'HH:mm:ss.000XX"
+        w-full
+        data-test-id="objectid-date"
+        @update:value="onDateChanged"
+      />
+    </n-form-item>
+
+    <c-button
+      w-full
+      test-id="objectid-generate"
+      @click="generateRandomObjectId()"
+    >
+      Generate random ObjectId
+    </c-button>
+  </c-card>
+</template>