diff --git a/src/assets/sass/variables.sass b/src/assets/sass/variables.sass index 8dea133..6b00d7f 100644 --- a/src/assets/sass/variables.sass +++ b/src/assets/sass/variables.sass @@ -2,6 +2,7 @@ --bg-lavender-color: #e9e9f6 --bg-body-color: #e8e8f3 --bg-ligth-blue-color: #e6eafc + --bg-opacity-0: rgba(0, 0, 0, 0 ) --font-dark-blue-color: #252850 --font-dark-blue-color-0: rgba(37, 40, 80, 0.7) --font-black-color: #090a15 diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue index 7e465a8..acaa248 100644 --- a/src/components/base/BaseButton.vue +++ b/src/components/base/BaseButton.vue @@ -130,14 +130,14 @@ export default { .added-border-none border: none width: fit-content - background-color: var(--default-white) + background-color: var(--bg-opacity-0) color: var(--btn-blue-color) padding: 0 row-gap: 10px &:hover border: none color: var(--btn-blue-color-hover) - background-color: var(--default-white) + background-color: var(--bg-opacity-0) .secondary background-color: var(--btn-blue-sec-color) border: 1px solid var(--btn-blue-sec-color) diff --git a/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue b/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue new file mode 100644 index 0000000..8e44007 --- /dev/null +++ b/src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue @@ -0,0 +1,149 @@ + + + + + diff --git a/src/pages/newMedicalCard/components/MedicalBaseInfo.vue b/src/pages/newMedicalCard/components/MedicalBaseInfo.vue index aa68e06..7d92f70 100644 --- a/src/pages/newMedicalCard/components/MedicalBaseInfo.vue +++ b/src/pages/newMedicalCard/components/MedicalBaseInfo.vue @@ -11,12 +11,14 @@ import MedicalSidebar from "@/pages/newMedicalCard/components/MedicalSidebar.vue"; import MedicalBasicDataWrapper from "@/pages/newMedicalCard/components/MedicalBasicDataWrapper.vue"; import MedicalAllergiesWrapper from "@/pages/newMedicalCard/components/MedicalAllergiesWrapper.vue"; +import MedicalConfidantWrapper from "@/pages/newMedicalCard/components/MedicalConfidantWrapper.vue"; export default { name: "MedicalBaseInfo", components: { MedicalSidebar, MedicalBasicDataWrapper, MedicalAllergiesWrapper, + MedicalConfidantWrapper, }, data() { return { diff --git a/src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue b/src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue new file mode 100644 index 0000000..ff2cbce --- /dev/null +++ b/src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue @@ -0,0 +1,40 @@ + + + diff --git a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue index 1e6dc09..8a91d97 100644 --- a/src/pages/newMedicalCard/components/MedicalFormWrapper.vue +++ b/src/pages/newMedicalCard/components/MedicalFormWrapper.vue @@ -4,9 +4,13 @@ .loader.absolute.z-10.flex.items-center.justify-center.w-full.h-full.rounded(v-if="isLoadingData") base-loader .flex.flex-col.h-full.gap-25px.p-6 - .flex.w-fit.gap-11px.items-center - span.font-bold.text-base {{title}} - q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20") + .flex.w-full.justify-between + .flex.w-fit.gap-11px.items-center + span.font-bold.text-base.whitespace-nowrap {{title}} + q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20") + .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem") + q-icon(name="app:basket" size="20") + span.text-smm.font-medium {{ titleDelete }} slot .flex.h-fit.w-fit.gap-2(v-if="isEdit") base-button.text-base.font-semibold(outlined :size="40" @click="cancel") Отменить @@ -21,6 +25,7 @@ export default { components: { BaseButton, BaseLoader }, props: { title: String, + titleDelete: String, cancel: { type: Function, default: () => {}, @@ -33,6 +38,10 @@ export default { type: Function, default: () => {}, }, + deleteItem: { + type: Function, + default: () => {}, + }, isCheckChange: { type: Boolean, default: false, @@ -54,6 +63,12 @@ export default { background-color: var(--default-white) .edit-button color: var(--btn-blue-color) + &:hover + color: var(--btn-blue-color-hover) +.delete-button + color: var(--font-grey-color) + &:hover + opacity: 0.7 .loader background-color: var(--default-white) .medical-form-enter-from diff --git a/src/pages/newMedicalCard/utils/medicalConfig.js b/src/pages/newMedicalCard/utils/medicalConfig.js index e9d4c6c..efb1a5b 100644 --- a/src/pages/newMedicalCard/utils/medicalConfig.js +++ b/src/pages/newMedicalCard/utils/medicalConfig.js @@ -214,6 +214,59 @@ export const allergiesConfig = { }, }; +export const confidantConfig = [ + { + dataLabel: "Общая информация", + fields: [ + { + key: "first_name", + label: "Имя", + }, + { + key: "last_name", + label: "Фамилия", + }, + { + key: "patronymic", + label: "Отчество", + }, + ], + }, + { + dataLabel: "Контакты", + fields: [ + { + key: "phone", + label: "Телефон", + mask: "+7 (###) ###-##-##", + rules: [(val) => ruleLengthValue(val, 18)], + }, + { + key: "email", + label: "Почта", + rules: [(val) => ruleEmailValue(val)], + }, + { + key: "networks", + label: "Соцсеть", + rules: [(val) => ruleNotValue(val)], + }, + ], + }, + { + dataLabel: "Дополнения", + fields: [ + { + key: "additions", + label: "Информация", + type: "textarea", + autogrow: true, + placeholder: "Нет информации", + }, + ], + }, +]; + export const genderOptions = [ { id: "MALE", @@ -266,8 +319,8 @@ export const baseInfoMenu = [ }, { title: "Доверенное лицо", - id: "trusted-person", - component: "TrustedPerson", + id: "confidant", + component: "MedicalConfidantWrapper", }, { title: "Аллергии", diff --git a/src/store/modules/medicalCard.js b/src/store/modules/medicalCard.js index a342588..befc46f 100644 --- a/src/store/modules/medicalCard.js +++ b/src/store/modules/medicalCard.js @@ -3,6 +3,7 @@ import { genderOptions } from "@/pages/newMedicalCard/utils/medicalConfig"; const state = () => ({ medicalCard: {}, + confidantData: [], contactsData: { phones: [], emails: [], @@ -200,6 +201,20 @@ const getters = { getAllergiesData(state) { return [...state.medicalCard.person.allergic.map((el) => ({ ...el }))]; }, + getConfidantData(state) { + return [ + ...state.medicalCard.confidant.map((el) => ({ + ...el, + phone: el.contacts.find((contact) => contact.kind === "PHONE") + ?.username, + email: el.contacts.find((contact) => contact.kind === "EMAIL") + ?.username, + networks: el.contacts.filter( + (contact) => contact.kind !== "PHONE" && contact.kind !== "EMAIL" + ), + })), + ]; + }, getAvatar(state) { let lastName = state?.medicalCard?.person?.last_name; let firstName = state?.medicalCard?.person?.first_name; @@ -234,12 +249,14 @@ const actions = { commit("setContactsData"); commit("setDocumentsData"); commit("setAllergiesData"); + commit("setConfidantData"); }); }, returnInitData({ commit }) { commit("setBasicData"); commit("setContactsData"); commit("setAllergiesData"); + commit("setConfidantData"); }, removeMedicalCardData({ commit, rootState }) { fetchWrapper @@ -275,6 +292,9 @@ const mutations = { setAllergiesData(state) { state.allergies = this.getters.getAllergiesData; }, + setConfidantData(state) { + state.confidantData = this.getters.getConfidantData; + }, }; export default { diff --git a/tailwind.config.js b/tailwind.config.js index 9d8b11e..e90b771 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -52,6 +52,7 @@ module.exports = { "19px": "19px", "22px": "22px", "23px": "23px", + "27px": "27px", "29_25px": "29.25px", "30px": "30px", "45px": "45px",