stepperObj.goFirst();
const formSubmit = async () => {
try {
await firebase
.firestore()
.collection("Spark")
.doc("Datos")
.collection("Usuarios")
.add(formData.value);
Swal.fire({
text: "Su consulta fue enviada con exito",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-primary",
},
}).then(() => {
addCustomerModalRef.value as HTMLElement;
hideModal(addCustomerModalRef.value);
_stepperObj.goFirst();
});
} catch (error) {
// eslint-disable-next-line
Swal.fire({
text: "Upps, ha ocurrido un error al intentar guardar los datos, porfavor revisa tu conexion a internet he intenta de nuevo.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
},
});
// console.error(error);
}
};
_stepperObj.value.goFirst();
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { hideModal } from "@/core/helpers/dom";
import { StepperComponent } from "@/assets/ts/components/_StepperComponent";
import Swal from "sweetalert2/dist/sweetalert2.min.js";
import { useForm } from "vee-validate";
import { Field, ErrorMessage } from "vee-validate";
import * as Yup from "yup";
import firebase from "firebase/app";
interface Step1 {
horario: string;
}
interface Step2 {
tratamiento: any;
numeroCaso: string;
leadtime: string;
prioridad: any;
}
interface Step3 {
doctorName: string;
region: string;
}
interface OtrosDatos {
created_at: any;
finalizado: boolean;
end_at: any;
lead: string;
status: {
label: string;
state: string;
};
}
interface KTCreateApp extends Step1, Step2, Step3, OtrosDatos {}
export default defineComponent({
name: "create-account-modal",
components: {
Field,
ErrorMessage,
},
setup() {
const addCustomerModalRef = ref<null | HTMLElement>(null);
const _stepperObj = ref<StepperComponent | null>(null);
const createAccountRef = ref<HTMLElement | null>(null);
const currentStepIndex = ref(0);
const formData = ref<KTCreateApp>({
horario: "regular",
tratamiento: {
label: "CR",
state: "primary",
CR: true,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
},
numeroCaso: "",
leadtime: "",
prioridad: {
label: "NORMAL",
state: "success",
},
doctorName: "",
region: "",
created_at: Date.now(),
finalizado: false,
end_at: null,
lead: "",
status: {
label: "Proceso",
state: "success",
},
});
const NORMAL = {
label: "NORMAL",
state: "success",
};
const RISK = {
label: "RISK",
state: "warning",
};
const PASSDUE = {
label: "PASS-DUE",
state: "danger",
};
const CR = {
label: "CR",
state: "primary",
CR: true,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
};
const SPARK10 = {
label: "SPARK10",
state: "primary",
CR: false,
SPARK10: true,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
};
const SPARK20 = {
label: "SPARK20",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: true,
ADVANCE: false,
REF: false,
KIDS: false,
};
const ADVANCE = {
label: "ADVANCE",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: true,
REF: false,
KIDS: false,
};
const REF = {
label: "REF",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: true,
KIDS: false,
};
const KIDS = {
label: "KIDS",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: true,
};
onMounted(() => {
_stepperObj.value = StepperComponent.createInsance(
addCustomerModalRef.value as HTMLElement
);
});
const createAppSchema = [
Yup.object({}),
Yup.object({
numeroCaso: Yup.string().required().label("Numero de Caso"),
leadtime: Yup.string().required().label("Leadtime"),
}),
Yup.object({
doctorName: Yup.string().required().label("El nombre del Doctor"),
region: Yup.string().required().label("La region es requerida"),
}),
Yup.object({}),
];
// extracts the individual step schema
const currentSchema = computed(() => {
return createAppSchema[currentStepIndex.value];
});
const totalSteps = computed(() => {
if (!_stepperObj.value) {
return;
}
return _stepperObj.value.totatStepsNumber;
});
const { resetForm, handleSubmit } = useForm<
Step1 | Step2 | Step3 | OtrosDatos
>({
validationSchema: currentSchema,
});
const previousStep = () => {
if (!_stepperObj.value) {
return;
}
currentStepIndex.value--;
_stepperObj.value.goPrev();
};
const handleStep = handleSubmit((values) => {
for (const item in values) {
// eslint-disable-next-line no-prototype-builtins
if (values.hasOwnProperty(item)) {
if (values[item]) {
formData.value[item] = values[item];
}
}
}
currentStepIndex.value++;
if (!_stepperObj.value) {
return;
}
_stepperObj.value.goNext();
});
const formSubmit = async () => {
try {
await firebase
.firestore()
.collection("Spark")
.doc("Datos")
.collection("Usuarios")
.add(formData.value);
Swal.fire({
text: "Su consulta fue enviada con exito",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-primary",
},
}).then(() => {
addCustomerModalRef.value as HTMLElement;
hideModal(addCustomerModalRef.value);
_stepperObj.value.goFirst();
});
} catch (error) {
// eslint-disable-next-line
Swal.fire({
text: "Upps, ha ocurrido un error al intentar guardar los datos, porfavor revisa tu conexion a internet he intenta de nuevo.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
},
});
// console.error(error);
}
};
resetForm({
values: {
...formData.value,
},
});
return {
createAccountRef,
totalSteps,
previousStep,
handleStep,
formSubmit,
currentStepIndex,
formData,
NORMAL,
RISK,
PASSDUE,
CR,
SPARK10,
SPARK20,
ADVANCE,
REF,
KIDS,
console,
addCustomerModalRef,
};
},
});
</script>
if (!_stepperObj.value) {
return;
}
_stepperObj.value.goFirst(); // pasa el wizard al paso 1
const formInitData ref<KTCreateApp>({
//put all default values here
})
const formData = ref<KTCreateApp>({
//put actual values here
});
//on form submit
formData.value = formInitData.value;
<script lang="ts">
import { computed, defineComponent, onMounted, ref } from "vue";
import { hideModal } from "@/core/helpers/dom";
import { StepperComponent } from "@/assets/ts/components/_StepperComponent";
import Swal from "sweetalert2/dist/sweetalert2.min.js";
import { useForm } from "vee-validate";
import { Field, ErrorMessage } from "vee-validate";
import * as Yup from "yup";
import firebase from "firebase/app";
interface Step1 {
horario: string;
}
interface Step2 {
tratamiento: any;
numeroCaso: string;
leadtime: string;
prioridad: any;
}
interface Step3 {
doctorName: string;
region: string;
}
interface OtrosDatos {
created_at: any;
finalizado: boolean;
end_at: any;
lead: string;
status: {
label: string;
state: string;
};
}
interface KTCreateApp extends Step1, Step2, Step3, OtrosDatos {}
export default defineComponent({
name: "create-account-modal",
components: {
Field,
ErrorMessage,
},
setup() {
const addCustomerModalRef = ref<null | HTMLElement>(null);
const _stepperObj = ref<StepperComponent | null>(null);
const createAccountRef = ref<HTMLElement | null>(null);
const currentStepIndex = ref(0);
const formInitData = ref({
horario: "",
tratamiento: null,
numeroCaso: "",
leadtime: "",
prioridad: "normal",
doctorName: "",
region: "",
created_at: Date.now(),
finalizado: false,
end_at: null,
lead: "",
status: {
label: "Proceso",
state: "success",
},
});
const formData = ref<KTCreateApp>({
horario: "regular",
tratamiento: {
label: "CR",
state: "primary",
CR: true,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
},
numeroCaso: "",
leadtime: "",
prioridad: {
label: "NORMAL",
state: "success",
},
doctorName: "",
region: "",
created_at: Date.now(),
finalizado: false,
end_at: null,
lead: "",
status: {
label: "Proceso",
state: "success",
},
});
const NORMAL = {
label: "NORMAL",
state: "success",
};
const RISK = {
label: "RISK",
state: "warning",
};
const PASSDUE = {
label: "PASS-DUE",
state: "danger",
};
const CR = {
label: "CR",
state: "primary",
CR: true,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
};
const SPARK10 = {
label: "SPARK10",
state: "primary",
CR: false,
SPARK10: true,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: false,
};
const SPARK20 = {
label: "SPARK20",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: true,
ADVANCE: false,
REF: false,
KIDS: false,
};
const ADVANCE = {
label: "ADVANCE",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: true,
REF: false,
KIDS: false,
};
const REF = {
label: "REF",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: true,
KIDS: false,
};
const KIDS = {
label: "KIDS",
state: "primary",
CR: false,
SPARK10: false,
SPARK20: false,
ADVANCE: false,
REF: false,
KIDS: true,
};
onMounted(() => {
_stepperObj.value = StepperComponent.createInsance(
addCustomerModalRef.value as HTMLElement
);
});
const createAppSchema = [
Yup.object({}),
Yup.object({
numeroCaso: Yup.string().required().label("Numero de Caso"),
leadtime: Yup.string().required().label("Leadtime"),
}),
Yup.object({
doctorName: Yup.string().required().label("El nombre del Doctor"),
region: Yup.string().required().label("La region es requerida"),
}),
Yup.object({}),
];
// extracts the individual step schema
const currentSchema = computed(() => {
return createAppSchema[currentStepIndex.value];
});
const totalSteps = computed(() => {
if (!_stepperObj.value) {
return;
}
return _stepperObj.value.totatStepsNumber;
});
const { resetForm, handleSubmit } = useForm<
Step1 | Step2 | Step3 | OtrosDatos
>({
validationSchema: currentSchema,
});
const previousStep = () => {
if (!_stepperObj.value) {
return;
}
currentStepIndex.value--;
_stepperObj.value.goPrev();
};
const handleStep = handleSubmit((values) => {
for (const item in values) {
// eslint-disable-next-line no-prototype-builtins
if (values.hasOwnProperty(item)) {
if (values[item]) {
formData.value[item] = values[item];
}
}
}
currentStepIndex.value++;
if (!_stepperObj.value) {
return;
}
_stepperObj.value.goNext();
});
const formSubmit = async () => {
try {
await firebase
.firestore()
.collection("Spark")
.doc("Datos")
.collection("Usuarios")
.add(formData.value);
Swal.fire({
text: "Su consulta fue enviada con exito",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-primary",
},
}).then(() => {
formData.value = formInitData.value;
addCustomerModalRef.value as HTMLElement;
hideModal(addCustomerModalRef.value);
if (!_stepperObj.value) {
// pasa el wizard al paso 1
return;
}
_stepperObj.value.goFirst(); // pasa el wizard al paso 1
});
} catch (error) {
Swal.fire({
text: "Upps, ha ocurrido un error al intentar guardar los datos, porfavor revisa tu conexion a internet he intenta de nuevo.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Cerrar",
customClass: {
confirmButton: "btn fw-bold btn-light-danger",
},
});
// console.error(error);
}
};
resetForm({
values: {
...formData.value,
},
});
return {
createAccountRef,
totalSteps,
previousStep,
handleStep,
formSubmit,
currentStepIndex,
formData,
NORMAL,
RISK,
PASSDUE,
CR,
SPARK10,
SPARK20,
ADVANCE,
REF,
KIDS,
console,
addCustomerModalRef,
resetForm,
formInitData,
};
},
});
</script>
resetForm({
values: {
...formInitData.value,
},
});
formData.value = formInitData.value;
currentStepIndex.value = 0;
resetForm({
values: {
...formInitData.value,
},
});