85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import { provide, ref } from 'vue'
|
|
import { VForm } from 'vuetify/components/VForm'
|
|
import StoreTabItemH from '@/views/pages/store/view/StoreTabItemH.vue'
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const { t } = useI18n()
|
|
|
|
const itemForm = ref('')
|
|
const injItemForm = ref('')
|
|
const refItemForm = ref<VForm>()
|
|
|
|
provide('item', injItemForm)
|
|
|
|
const validateItemForm = () => {
|
|
refItemForm.value?.validate().then(valid => {
|
|
if (valid.valid) {
|
|
console.log(itemForm.value)
|
|
injItemForm.value = itemForm.value
|
|
}
|
|
else { console.log(`KO:${itemForm.value}`) }
|
|
})
|
|
}
|
|
|
|
const lengthMinValidator = (value: unknown, length: number) => {
|
|
if (isEmpty(value))
|
|
return true
|
|
|
|
return String(value).length >= length || `The Min Character field must be at least ${length} characters`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<VRow>
|
|
<VCol cols="12">
|
|
<!-- 👉 Item search -->
|
|
<VCard title="">
|
|
<VCardText>
|
|
<VAlert
|
|
variant="tonal"
|
|
color="warning"
|
|
class="mb-4"
|
|
>
|
|
<VAlertTitle class="mb-2">
|
|
{{ $t('You can search for a reference, reference-color or reference-color-size.') }}
|
|
</VAlertTitle>
|
|
<span>{{ $t('Minimum 5 characters long') }}</span>
|
|
</VAlert>
|
|
|
|
<VForm
|
|
ref="refItemForm"
|
|
@submit.prevent="validateItemForm"
|
|
>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="itemForm"
|
|
label="Reference"
|
|
persistent-placeholder
|
|
placeholder="QY10010"
|
|
:rules="[requiredValidator, lengthMinValidator(itemForm, 5)]"
|
|
/>
|
|
</VCol>
|
|
<VCol cols="12">
|
|
<VBtn type="submit">
|
|
{{ $t('Submit') }}
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
|
|
<VCol cols="12">
|
|
<StoreTabItemH />
|
|
</VCol>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</div>
|
|
</template>
|