diff --git a/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue b/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue index d702342..74a5db2 100644 --- a/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue +++ b/src/pages/newMedicalCard/components/AllergiesForms/AllergiesForm.vue @@ -9,8 +9,8 @@ :open-edit="openEdit" ) .flex.flex-col.gap-19px.w-full - .flex.flex-col.gap-4 - .flex.gap-4.items-center(v-for="(allergy, index) in allergies") + .flex.flex-col.gap-4.w-full + .flex.gap-4.items-center.w-full.justify-between(v-for="(allergy, index) in allergies") .label-field.font-sm.text-sm.whitespace-nowrap {{ `Аллерген ${index+1}:` }} .flex.gap-2.w-full.items-center base-input( @@ -51,6 +51,7 @@ import BaseButton from "@/components/base/BaseButton.vue"; import BaseInput from "@/components/base/BaseInput.vue"; import { checkChangeData } from "@/shared/utils/changesObjects"; import { mapState, mapGetters } from "vuex"; +import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData"; export default { name: "AllergiesForm", @@ -65,15 +66,35 @@ export default { computed: { ...mapState({ allergies: (state) => state.medical.allergies, + personId: (state) => state.medical.medicalCard.person.id, }), ...mapGetters({ initAllergies: "getAllergiesData", }), }, methods: { + updateAllergies() { + const notEmptyAllergies = this.allergies.filter( + (el) => el.name && el.title + ); + return getRequestArrayData( + this.initAllergies, + notEmptyAllergies, + "person", + this.personId, + "general", + "allergic" + ); + }, saveChange() { - this.isEdit = false; - this.isCheckChange = false; + this.isLoadingData = true; + Promise.allSettled(this.updateAllergies()) + .then(() => this.$store.dispatch("getMedicalCardData")) + .then(() => { + this.isLoadingData = false; + this.isEdit = false; + this.isCheckChange = false; + }); }, cancelEdit() { this.$store.dispatch("returnInitData"); diff --git a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue index baecd48..d0f61c7 100644 --- a/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue +++ b/src/pages/newMedicalCard/components/BasicDataForms/ContactsForm.vue @@ -8,7 +8,7 @@ :cancel="cancelEdit" :open-edit="openEdit" ) - .form-wrap.gap-24.w-full + q-form.form-wrap.gap-24.w-full(ref="formContacts") .flex.flex-col.gap-4(v-for="(contact, key) in contacts") .font-semibold.text-sm.whitespace-nowrap {{configData[key].title}} .flex.w-full.justify-between.items-center.gap-4(v-for="(data, index) in contact") @@ -44,6 +44,7 @@ :disabled="!isEdit" v-model="data.username" :mask="configData[key].inputMask" + :rule="configData[key].rules" @update:model-value="checkChangeInput" type="text" :standout="!isEdit" @@ -72,6 +73,7 @@ import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue"; import { mapNetworks } from "@/pages/newMedicalCard/utils/medicalConfig"; import { checkChangeData } from "@/shared/utils/changesObjects"; import { contactsDataForm } from "@/pages/newMedicalCard/utils/medicalConfig"; +import { getRequestArrayData } from "@/shared/utils/wrapperRequestChangeData"; import { mapState, mapGetters } from "vuex"; export default { @@ -92,6 +94,8 @@ export default { }), ...mapState({ contacts: (state) => state.medical.contactsData, + personId: (state) => state.medical.medicalCard.person.id, + initAllContacts: (state) => state.medical.medicalCard.person.contacts, }), }, methods: { @@ -111,11 +115,37 @@ export default { this.isEdit = false; this.isCheckChange = false; }, + updateContacts() { + const allNewContacts = [ + ...this.contacts.phones, + ...this.contacts.emails, + ...this.contacts.networks, + ]; + const notEmptyContacts = allNewContacts.filter( + (el) => el.kind && el.username + ); + return getRequestArrayData( + this.initAllContacts, + notEmptyContacts, + "person", + this.personId, + "general", + "contact" + ); + }, saveChange() { - this.isLoadingData = true; - this.$store.dispatch("updateContactsData").then(() => { - this.isEdit = false; - this.isLoadingData = false; + const form = this.$refs.formContacts; + form.validate().then((validate) => { + if (validate) { + this.isLoadingData = true; + Promise.allSettled(this.updateContacts()) + .then(() => this.$store.dispatch("getMedicalCardData")) + .then(() => { + this.isLoadingData = false; + this.isEdit = false; + this.isCheckChange = false; + }); + } }); }, checkChangeInput() { diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js index 3acb88f..5179fb8 100644 --- a/src/pages/newMedicalCard/utils/medicalConfig.js +++ b/src/pages/newMedicalCard/utils/medicalConfig.js @@ -1,3 +1,5 @@ +import { ruleLengthValue, ruleEmailValue } from "@/shared/utils/rulesInputs"; + export const baseDataForm = [ { dataLabel: "Личные данные", @@ -147,11 +149,13 @@ export const contactsDataForm = { title: "Телефон", fieldName: "Телефон", kind: "PHONE", + rules: [(val) => ruleLengthValue(val, 18)], inputMask: "+7 (###) ###-##-##", }, emails: { title: "Почта", fieldName: "Email", + rules: [(val) => ruleEmailValue(val)], kind: "EMAIL", }, networks: { diff --git a/src/shared/utils/rulesInputs.js b/src/shared/utils/rulesInputs.js new file mode 100644 index 0000000..dd619e6 --- /dev/null +++ b/src/shared/utils/rulesInputs.js @@ -0,0 +1,19 @@ +export function ruleNotValue(val, text) { + return val || text || false; +} + +export function ruleLengthValue(val, minLength, text) { + return (val && val.length === minLength) || text || false; +} + +export function ruleEmailValue(val, text) { + return ( + (val && + val.length < 100 && + val.includes("@") && + val.match(/@(?=\S+)/) && + val.match(/(?<=\S+)@/)) || + text || + false + ); +} diff --git a/src/shared/utils/wrapperRequestChangeData.js b/src/shared/utils/wrapperRequestChangeData.js index 3bea476..0bb49a6 100644 --- a/src/shared/utils/wrapperRequestChangeData.js +++ b/src/shared/utils/wrapperRequestChangeData.js @@ -1,5 +1,5 @@ import { fetchWrapper } from "../fetchWrapper"; -import { removeEmptyFields } from "./changesObjects"; +import { removeEmptyFields, checkChangeData } from "./changesObjects"; export function getRequestChangeData( createData, @@ -26,3 +26,39 @@ export function getRequestChangeData( } return Promise.resolve(); } + +export function getRequestArrayData( + initData, + updateData, + updateName, + idUpdateName, + api, + key +) { + const deleteRequests = initData + .filter((el) => !updateData.find((data) => data.id === el.id)) + .map((el) => fetchWrapper.del(`${api}/${key}/${el.id}/delete/`)); + const requests = updateData.map((el) => { + const requestObj = { + [updateName]: idUpdateName, + ...el, + }; + delete requestObj.id; + if (!el?.id) { + return fetchWrapper.post(`${api}/${key}/create/`, { ...requestObj }); + } + if ( + el?.id && + checkChangeData( + initData.find((obj) => obj.id === el.id), + el + ) + ) { + return fetchWrapper.post(`${api}/${key}/${el.id}/update/`, { + ...requestObj, + }); + } + return Promise.resolve(); + }); + return requests.concat(deleteRequests); +} diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js index 0efe466..43fe4a4 100644 --- a/src/store/modules/medicalCard.js +++ b/src/store/modules/medicalCard.js @@ -245,46 +245,6 @@ const actions = { localStorage.removeItem("medicalId"); }); }, - updateContactsData({ commit, state }) { - const personId = state.medicalCard.person.id; - const initContacts = state.medicalCard.person.contacts; - const allNewContacts = [ - ...state.contactsData.phones, - ...state.contactsData.emails, - ...state.contactsData.networks, - ]; - let requestDelete = initContacts - .filter((el) => !allNewContacts.find((newNet) => newNet.id === el.id)) - .map((el) => fetchWrapper.del(`general/contact/${el.id}/delete/`)); - const request = allNewContacts - .map((contact) => { - let initNetwork = initContacts.find((el) => el.id === contact.id); - if (!contact.id && contact.username && contact.kind) { - return fetchWrapper.post(`general/contact/create/`, { - person: personId, - username: contact.username, - kind: contact.kind, - }); - } - if ( - contact.id && - contact.username && - contact.username !== initNetwork.username - ) { - return fetchWrapper.post(`general/contact/${contact.id}/update/`, { - person: personId, - username: contact.username, - kind: contact.kind, - }); - } - return Promise.resolve(); - }) - .concat(requestDelete); - - return Promise.allSettled(request).then(() => - actions.getMedicalCardData({ commit }) - ); - }, }; const mutations = {