Array getting rewritten but aren't sure why
Can't figure out why a variable is getting reset in my code, I'll try and put it simply but it's quite long and complicated really. What I'm doing is creating a page that is for creating and updating a survey with charts, now the survey form and the charts form are on separate components and transferring the data across is resulting a nightmare. I'm going to post the full methods just in case I missed something dumb. I'm only going to remove the method code that has to do with a new form. since my problem is only when I edit.
This is a 2 step 'form' where step 1 is the survey's info and step 2 are the charts info. You can go between the steps as much as you want but going backward is giving this issue.
Parent component has the child form and child charts components, the issue I'm having is with a specific array inside a variable.
The parent component has a created where I set up the data accordingly if it's a new form or if I'm updating an existing survey. As far as I understand this created is working correctly and it does set the info correctly on the first load.
Moving between the steps works like this in case its relevant
goBack(e) {
this.$set(this.form, 'survey_charts', e);
this.changeStep(1);
},
moveTo(e) {
if (this.validFirstSection(e[0])) {
//take first_section and join with rest of sections, and re-number them
this.changeStep(e[2]);
let survey_sections_fixed = [e[0]].concat(e[1].survey_sections);
survey_sections_fixed.map((x, i) => x.number = i + 1);
this.form = e[1];
this.form.survey_sections = survey_sections_fixed;
this.modelType = e[0].hasOwnProperty('id') ?
this.form.survey_sections.find(x => x.number === 1).survey_questions[0].survey_question_options[0].choiceable.label :
this.form.survey_sections.find(x => x.number === 1).survey_questions[0].survey_question_options[0].choice.value;
this.modelName = e[0].hasOwnProperty('id') ?
this.form.survey_sections.find(x => x.number === 1).survey_questions[1].survey_question_options[0].choiceable.label :
this.form.survey_sections.find(x => x.number === 1).survey_questions[1].survey_question_options[0].choice.value;
}
},
//PARENT CREATED
created() {
if (this.$page.props.profile) {
//editing form
const data = this.$page.props.profile;
data.survey_sections.forEach((section) => {
section.key = uuid();
section.survey_section_rules = section.survey_section_rules.map(x => x.survey_section_rule_type_id);
});
const newForm = { restriction_groups: [] };
for (const [indexGroup, group] of data.survey_restriction_groups.entries()) {
newForm.restriction_groups[indexGroup] = {};
newForm.restriction_groups[indexGroup].key = uuid();
newForm.restriction_groups[indexGroup].id = group.id;
newForm.restriction_groups[indexGroup].name = group.name;
newForm.restriction_groups[indexGroup].is_repeated = group.is_repeated;
newForm.restriction_groups[indexGroup].is_mandatory = group.is_mandatory;
newForm.restriction_groups[indexGroup].can_edit = group.can_edit;
newForm.restriction_groups[indexGroup].can_clone = group.can_clone;
newForm.restriction_groups[indexGroup].restrictions = [];
for (const [indexRestriction, restriction] of group.survey_restrictions.entries()) {
newForm.restriction_groups[indexGroup].restrictions[indexRestriction] = {};
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].id = restriction.id;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].restrictable_id = restriction.restrictable_id;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].restrictable_type = restriction.restrictable_type;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].restrictable_uuid = null;
if (restriction.restrictable_type === this.enum_restriction_types['Punto de Venta'])
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].sp = restriction.restrictable;
else if (restriction.restrictable_type === this.enum_restriction_types['Usuario'])
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].user = restriction.restrictable;
else if (restriction.restrictable_type === this.enum_restriction_types['Equipo'])
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].team = restriction.restrictable;
else if (restriction.restrictable_type === this.enum_restriction_types['Seccion']) {
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].section = restriction.restrictable;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].restrictable_uuid = survey.survey_sections.find((item) => item.id === restriction.restrictable_id).key;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].section['key'] = survey.survey_sections.find((item) => item.id === restriction.restrictable_id).key;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].section['questions_count'] = survey.survey_sections.find((item) => item.id === restriction.restrictable_id).survey_questions.length;
} else if (restriction.restrictable_type === this.enum_restriction_types['Horario']) {
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule = {};
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.id = restriction.restrictable.id;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.schedule_type_id = restriction.restrictable.schedule_type_id;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.start_date = restriction.restrictable.start_date;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.end_date = restriction.restrictable.end_date;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.interval = restriction.restrictable.interval;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.execute_types = [];
for (const [indexExType, execute_type] of restriction.restrictable.execute_types.entries()) {
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.execute_types[indexExType] = {};
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.execute_types[indexExType].execute_type_id = execute_type.pivot.execute_type_id;
newForm.restriction_groups[indexGroup].restrictions[indexRestriction].schedule.execute_types[indexExType].executed_at = execute_type.pivot.executed_at;
}
}
}
}
this.form = this.$inertia.form({ ...data, ...newForm });
}
}
The created in the child form component gets started again and idk why it resets my data for this.form.restriction_groups, the super weird part is that I'm not actually doing anything with that array in the child created method, the created method for the parent only gets called once so but I'm not modifying that array in any other place.
//CHILD CREATED
created() {
if (this.profileForm && this.profileForm.hasOwnProperty('id')) {
this.form.survey_sections = this.profileForm.survey_sections.filter(x => x.number !== 1);
this.first_section = this.profileForm.survey_sections.find(x => x.number === 1);
this.form.survey_sections.forEach((section) => {
section.survey_questions.forEach((question) => {
question.key = uuid();
question.survey_question_options.forEach((option) => {
option.key = uuid();
if (option.hasOwnProperty('id') && option.hasOwnProperty('choice')) {
option.choiceable = { id: option.choice.id, label: option.choice.value }
}
})
})
})
this.add_section_number();
this.first_section.key = uuid();
this.first_section.survey_questions.forEach((question) => {
question.key = uuid();
question.survey_question_options.forEach((option) => {
option.key = uuid();
})
})
this.$set(this.evaluees, 'model_type', this.first_section.hasOwnProperty('id') ? this.first_section.survey_questions[0].survey_question_options[0].choiceable.label : this.first_section.survey_questions[0].survey_question_options[0].choice.value);
this.$set(this.evaluees, 'model', this.first_section.hasOwnProperty('id') ? this.first_section.survey_questions[1].survey_question_options[0].choiceable.label : this.first_section.survey_questions[1].survey_question_options[0].choice.value);
this.$set(this.evaluees, 'items', this.first_section.hasOwnProperty('id') ?
this.first_section.survey_questions[2].survey_question_options.map(x => {
return { id: x.choiceable.id, name: x.choiceable.label }
}) :
this.first_section.survey_questions[2].survey_question_options.map(x => {
return { id: x.choice.id, name: x.choice.value }
}));
}
}
I'm not touching this.form.restriction_groups in the child component created at all.
Here is what's actually happening to the data from step 1 -> step 2
[ { "key": "497b0558-c5f8-4f6f-9e1b-60ed1606d7c3", "id": "9f0faba7-cf0e-4d5b-b712-8ebefad19934", "name": "wewer", "is_repeated": false, "is_mandatory": true, "can_edit": false, "can_clone": false, "restrictions": [ { "restrictable_type": "App\\Models\\Tenant\\User", "id": "9f0faba7-d1da-4543-bf8e-18017b6fed34", "restrictable_id": "99229e6a-ae1b-4830-a68c-404550f0d655", "restrictable": { "id": "99229e6a-ae1b-4830-a68c-404550f0d655", "uuid": "46eb5e2c-14f2-4d60-ba0d-e9cd2c660dc8", "name": "Cristian Solís Montero", "email": "[email protected]", "is_active": 1, "created_at": "2023-05-10T23:27:37.000000Z", "updated_at": "2023-05-10T23:27:37.000000Z", "can_export_db": false }, "restrictable_uuid": null } ] } ]
from step 2 -> step 1
[ { "key": "497b0558-c5f8-4f6f-9e1b-60ed1606d7c3", "id": "9f0faba7-cf0e-4d5b-b712-8ebefad19934", "name": "wewer", "is_repeated": false, "is_mandatory": true, "can_edit": false, "can_clone": false, "restrictions": [ { "restrictable_type": "App\\Models\\Tenant\\User", "restrictable_uuid": null } ] } ]
I'm pretty lost on what is happening here, any ideas would be great
Please or to participate in this conversation.