chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: comma input behavior

Browse source
This commit is contained in:
puriphatt 2024-12-25 15:47:25 +07:00
parent 61501dba8d
commit 889d4afbf5
6 changed files with 113 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/components/04_product-service/PriceDataComponent.vue
View file

@ -10,9 +10,13 @@ const price = defineModel<number>('price');
const vatIncluded = defineModel<boolean>('vatIncluded');
const calcVat = defineModel<boolean>('calcVat');
const price4Show = ref('');
const agentPrice4Show = ref('');
const serviceCharge4Show = ref('');
const price4Show = ref<string>(commaInput(price.value?.toString() || '0'));
const agentPrice4Show = ref<string>(
commaInput(agentPrice.value?.toString() || '0'),
);
const serviceCharge4Show = ref<string>(
commaInput(serviceCharge.value?.toString() || '0'),
);
const column = [
{
@ -194,17 +198,21 @@ withDefaults(
:borderless="readonly"
hide-bottom-space
input-class="text-right"
debounce="500"
:model-value="commaInput(price?.toString() || '0')"
:model-value="price4Show"
@blur="
() => {
price = Number(price4Show.replace(/,/g, ''));
if (price % 1 === 0) {
const [, dec] = price4Show.split('.');
if (!dec) {
price4Show += '.00';
}
}
}
"
@update:model-value="
(v) => {
if (typeof v === 'string') price4Show = commaInput(v);
const x = parseFloat(
price4Show && typeof price4Show === 'string'
? price4Show.replace(/,/g, '')
: '',
);
price = x;
price4Show = commaInput(v?.toString() || '0', 'string');
}
"
/>
@ -218,17 +226,24 @@ withDefaults(
:borderless="readonly"
hide-bottom-space
input-class="text-right"
debounce="500"
:model-value="commaInput(agentPrice?.toString() || '0')"
:model-value="agentPrice4Show"
@blur="
() => {
agentPrice = Number(agentPrice4Show.replace(/,/g, ''));
if (agentPrice % 1 === 0) {
const [, dec] = agentPrice4Show.split('.');
if (!dec) {
agentPrice4Show += '.00';
}
}
}
"
@update:model-value="
(v) => {
if (typeof v === 'string') agentPrice4Show = commaInput(v);
const x = parseFloat(
agentPrice4Show && typeof agentPrice4Show === 'string'
? agentPrice4Show.replace(/,/g, '')
: '',
agentPrice4Show = commaInput(
v?.toString() || '0',
'string',
);
agentPrice = x;
}
"
/>
@ -242,19 +257,26 @@ withDefaults(
:borderless="readonly"
input-class="text-right"
hide-bottom-space
debounce="500"
:model-value="commaInput(serviceCharge?.toString() || '0')"
:model-value="serviceCharge4Show"
@blur="
() => {
serviceCharge = Number(
serviceCharge4Show.replace(/,/g, ''),
);
if (serviceCharge % 1 === 0) {
const [, dec] = serviceCharge4Show.split('.');
if (!dec) {
serviceCharge4Show += '.00';
}
}
}
"
@update:model-value="
(v) => {
if (typeof v === 'string')
serviceCharge4Show = commaInput(v);
const x = parseFloat(
serviceCharge4Show &&
typeof serviceCharge4Show === 'string'
? serviceCharge4Show.replace(/,/g, '')
: '',
serviceCharge4Show = commaInput(
v?.toString() || '0',
'string',
);
serviceCharge = x;
}
"
/>

30
src/components/05_quotation/ProductItem.vue
View file

@ -394,22 +394,30 @@ watch(
outlined
input-class="text-right"
style="width: 90px"
debounce="500"
:model-value="
commaInput(props.row.discount.toString() || '0')
discount4Show[props.rowIndex] ||
commaInput(props.row.discount?.toString() || '0')
"
@blur="
() => {
props.row.discount = Number(
discount4Show[props.rowIndex].replace(/,/g, ''),
);
if (props.row.discount % 1 === 0) {
const [, dec] =
discount4Show[props.rowIndex].split('.');
if (!dec) {
discount4Show[props.rowIndex] += '.00';
}
}
}
"
@update:model-value="
(v) => {
if (typeof v === 'string')
discount4Show[props.rowIndex] = commaInput(v);
const x = parseFloat(
discount4Show[props.rowIndex] &&
typeof discount4Show[props.rowIndex] === 'string'
? discount4Show[props.rowIndex].replace(/,/g, '')
: '',
discount4Show[props.rowIndex] = commaInput(
v?.toString() || '0',
'string',
);
props.row.discount = x;
$emit('updateTable', props.row);
}
"
/>

2
src/components/05_quotation/TableQuotation.vue
View file

@ -2,7 +2,7 @@
import { QTableProps } from 'quasar';
import { dateFormat } from 'src/utils/datetime';
import { formatNumberDecimal, commaInput } from 'stores/utils';
import { formatNumberDecimal } from 'stores/utils';
import BadgeComponent from 'components/BadgeComponent.vue';
import KebabAction from 'components/shared/KebabAction.vue';

20
src/pages/03_customer-management/components/employer/EmployerFormAbout.vue
View file

@ -1,7 +1,11 @@
<script setup lang="ts">
import { QSelect } from 'quasar';
import { onMounted, ref, watch, capitalize } from 'vue';
import { selectFilterOptionRefMod, commaInput } from 'stores/utils';
import {
selectFilterOptionRefMod,
commaInput,
formatNumberWithCommas,
} from 'stores/utils';
import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
import useOptionStore from 'src/stores/options';
@ -236,9 +240,21 @@ watch(
:label="$t('customer.form.authorizedCapital')"
for="input-authorized-capital"
:model-value="authorizedCapital"
@blur="
() => {
let val = authorizedCapital.replace(/[^0-9.]/g, '');
if (!val.includes('.')) val = val + '.00';
val = formatNumberWithCommas(val);
authorizedCapital = val;
}
"
@update:model-value="
(v) => {
if (typeof v === 'string')
if (
isNaN(Number(typeof v === 'string' ? v.replace(/,/g, '') : v))
) {
authorizedCapital = '0';
} else if (typeof v === 'string')
authorizedCapital = commaInput(v, 'string');
}
"

22
src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
View file

@ -1,5 +1,9 @@
<script setup lang="ts">
import { selectFilterOptionRefMod, commaInput } from 'stores/utils';
import {
selectFilterOptionRefMod,
commaInput,
formatNumberWithCommas,
} from 'stores/utils';
import { onMounted, watch } from 'vue';
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
@ -19,7 +23,6 @@ const wageRateText = defineModel<string>('wageRateText', { default: '0' });
const rate = ref<string>(commaInput(wageRate.value?.toString() || '0'));
const wageRate4Show = ref('');
const typeBusinessOption = ref([]);
const typeBusinessENOption = ref([]);
const jobPositionOption = ref([]);
@ -314,12 +317,19 @@ let jobPositionENFilter = selectFilterOptionRefMod(
class="col-md-3 col-6"
:label="$t('customer.form.payRate')"
:model-value="rate?.toString()"
@blur="
() => {
let val = rate.replace(/[^0-9.]/g, '');
if (!val.includes('.')) val = val + '.00';
val = formatNumberWithCommas(val);
rate = val;
}
"
@update:model-value="
(v) => {
if (typeof v === 'string') {
console.log(v);
rate = commaInput(v, 'string');
}
if (isNaN(Number(typeof v === 'string' ? v.replace(/,/g, '') : v))) {
rate = '0';
} else if (typeof v === 'string') rate = commaInput(v, 'string');
}
"
/>

7
src/stores/utils/index.ts
View file

@ -461,6 +461,7 @@ export function commaInput(
const integerPart = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
const decimalPart = parts[1]?.slice(0, 2) || (type === 'number' && '00');
if (integerPart === 'NaN') return '0';
return integerPart + (decimalPart ? `.${decimalPart}` : '');
}
@ -491,6 +492,12 @@ export function calculateDaysUntilExpire(expireDate: Date): number {
return diffInDays;
}
export function formatNumberWithCommas(value: string) {
const [integer, decimal] = value.split('.');
const integerWithCommas = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
return decimal ? `${integerWithCommas}.${decimal}` : integerWithCommas;
}
export function createDataRefBase<T>(
defaultPage = 1,
defaultPageMax = 1,