LGCC
/
cdrdpyj
4
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge pull request 'abc fate picker' (#53) from main into production
Deploy cdrdpyj / deploy (push) Successful in 55s Details 

Reviewed-on: #53
This commit is contained in:
Esteban Paz 2026-07-28 13:57:43 +00:00
parent a16045e9c9 b543cd1aa0
commit a5eca5370a
1 changed files with 59 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/forms/DynamicForm.vue
View File

@ -52,8 +52,19 @@ const fieldHelp = (key) => {
const stepErrors = reactive({});
const formatErrors = reactive({});
const phoneParts = reactive({});
const dateParts = reactive({});
const triedToProceed = ref(false);
const months = [
"Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
"Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
];
const years = (() => {
const y = new Date().getFullYear();
return Array.from({ length: 101 }, (_, i) => y - i);
})();
const remainingRequired = computed(() => {
const step = config.value?.steps?.[currentStep.value];
if (!step) return 0;
@ -97,6 +108,9 @@ const fetchConfig = async () => {
step.fields.forEach((field) => {
if (field.type === "checkbox") {
formData[field.key] = [];
} else if (field.type === "date") {
formData[field.key] = "";
dateParts[field.key] = { day: null, month: null, year: null };
} else if (field.type === "phone_country") {
formData[field.key] = "";
phoneParts[field.key] = { code: "", number: "", flag: "" };
@ -347,6 +361,20 @@ const handleSubmit = async () => {
const getFieldError = (key) => stepErrors[key] || false;
const composeDate = (key) => {
const parts = dateParts[key];
if (!parts) return;
const d = parts.day;
const m = parts.month;
const y = parts.year;
if (d && m && y) {
formData[key] = `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
} else {
formData[key] = "";
}
stepErrors[key] = false;
};
const onPhoneInput = (key, event) => {
const cleaned = event.target.value.replace(/\D/g, "");
formData[key] = cleaned;
@ -651,19 +679,39 @@ const getFieldInputType = (field) => {
/>
</label>
<label
<div
v-else-if="field.type === 'date'"
class="input w-full bg-white rounded-xl focus-within:outline-2 focus-within:outline-[#22523F]"
:class="{ 'input-error border-red-500 focus-within:outline-red-500': getFieldError(field.key) }"
class="flex gap-2 w-full"
:class="{ 'input-error': getFieldError(field.key) }"
>
<Icon icon="ph:calendar" class="shrink-0 opacity-50 text-gray-400 text-lg" />
<input
class="grow text-[#1a1a1a]"
type="date"
v-model="formData[field.key]"
@change="stepErrors[field.key] = false"
/>
</label>
<select
class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
:class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
v-model="dateParts[field.key].day"
@change="composeDate(field.key)"
>
<option :value="null" disabled>Día</option>
<option v-for="d in 31" :key="d" :value="d">{{ d }}</option>
</select>
<select
class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
:class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
v-model="dateParts[field.key].month"
@change="composeDate(field.key)"
>
<option :value="null" disabled>Mes</option>
<option v-for="(m, i) in months" :key="i" :value="i + 1">{{ m }}</option>
</select>
<select
class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
:class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
v-model="dateParts[field.key].year"
@change="composeDate(field.key)"
>
<option :value="null" disabled>Año</option>
<option v-for="y in years" :key="y" :value="y">{{ y }}</option>
</select>
</div>
<div v-else-if="field.type === 'select'" class="relative">
<label