Docker/it-tools
Docker/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-08-04 21:15:17 +02:00
Code Issues Releases Activity

fix(roman-numeral-converter): input validation and feedback (#332)

Browse source 
* fix(roman-numeral-converter):  checks for valid input and conversion enhancements

Validates if numeral values are between 1 and 3999999.
Validates if a roman number is valid.

* fix(roman-numeral-converter): optimize logic for copy button

* fix(roman-numeral-converter): changes due to review
This commit is contained in:
cgoIT 2023-04-08 19:33:33 +02:00 • committed by GitHub
parent 076df11024
commit 8930e139b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 62 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/tools/roman-numeral-converter/roman-numeral-converter.vue
View file

@ -2,21 +2,29 @@
<div>
<n-card title="Arabic to roman">
<n-space align="center" justify="space-between">
<n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
<n-form-item v-bind="validationNumeral">
<n-input-number v-model:value="inputNumeral" :min="1" style="width: 200px" :show-button="false" />
</n-form-item>
<div class="result">
{{ outputRoman }}
</div>
<n-button secondary autofocus @click="copyRoman"> Copy </n-button>
<n-button secondary autofocus :disabled="validationNumeral.validationStatus === 'error'" @click="copyRoman">
Copy
</n-button>
</n-space>
</n-card>
<br />
<n-card title="Roman to arabic">
<n-space align="center" justify="space-between">
<n-input v-model:value="inputRoman" style="width: 200px" />
<n-form-item v-bind="validationRoman">
<n-input v-model:value="inputRoman" style="width: 200px" />
</n-form-item>
<div class="result">
{{ outputNumeral }}
</div>
<n-button secondary autofocus @click="copyArabic"> Copy </n-button>
<n-button secondary autofocus :disabled="validationRoman.validationStatus === 'error'" @click="copyArabic">
Copy
</n-button>
</n-space>
</n-card>
</div>
@ -25,14 +33,41 @@
<script setup lang="ts">
import { useCopy } from '@/composable/copy';
import { ref, computed } from 'vue';
import { arabicToRoman, romanToArabic } from './roman-numeral-converter.service';
import { useValidation } from '@/composable/validation';
import {
arabicToRoman,
romanToArabic,
MAX_ARABIC_TO_ROMAN,
MIN_ARABIC_TO_ROMAN,
isValidRomanNumber,
} from './roman-numeral-converter.service';
const inputNumeral = ref(42);
const outputRoman = computed(() => arabicToRoman(inputNumeral.value));
const { attrs: validationNumeral } = useValidation({
source: inputNumeral,
rules: [
{
validator: (value) => value >= MIN_ARABIC_TO_ROMAN && value <= MAX_ARABIC_TO_ROMAN,
message: `We can only convert numbers between ${MIN_ARABIC_TO_ROMAN.toLocaleString()} and ${MAX_ARABIC_TO_ROMAN.toLocaleString()}`,
},
],
});
const inputRoman = ref('XLII');
const outputNumeral = computed(() => romanToArabic(inputRoman.value));
const { attrs: validationRoman } = useValidation({
source: inputRoman,
rules: [
{
validator: (value) => isValidRomanNumber(value),
message: `The input you entered is not a valid roman number`,
},
],
});
const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });
const { copy: copyArabic } = useCopy({ source: outputNumeral, text: 'Arabic number copied to the clipboard' });
</script>