87 lines
2.0 KiB
Vue
87 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import InputCopyable from '@/components/InputCopyable.vue';
|
|
import CCard from '@/ui/c-card/c-card.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>
|