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 @@
+
+ medical-form-wrapper(
+ :title="`Доверенное лицо ${index+1}`"
+ titleDelete="Удалить контакт"
+ :delete-item="deleteConfidant"
+ :is-check-change="isCheckChange"
+ :is-loading-data="isLoadingData"
+ :is-edit="isEdit"
+ :save="saveChange"
+ :cancel="cancelEdit"
+ :open-edit="openEdit"
+ )
+ q-form.form-wrap.gap-24.w-full(ref="formConfidant")
+ .flex.flex-col.gap-4(v-for="data in configData")
+ .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
+ .flex.w-full.h-full.justify-between.gap-4(v-for="field in data.fields")
+ .label-field.font-sm.text-sm.whitespace-nowrap.mt-10px {{`${field.label} :`}}
+ .input-wrapper.items-center.flex.h-10.gap-10px
+ .flex.gap-1(v-if="field.key === 'networks'")
+ .flex.rounded-full.cursor-pointer.items-center.gap-10px.py-1.pl-1.pr-2(
+ v-for="network in confidant.networks"
+ @click="() => copyLinkNetwork(network.username)"
+ style="background-color: var(--bg-light-grey)"
+ )
+ q-icon.icon(:name="mapNetworks[network.kind].icon" :class="{old: network.id, new: !network.id}")
+ span.text-sm.font-medium {{ mapNetworks[network.kind].title || network.username }}
+ .flex.add-network.w-7.h-7.rounded-full.items-center.justify-center.cursor-pointer(v-if="isEdit")
+ q-icon.w-3.h-3(name="app:plus")
+ //- .flex.gap-10px(v-else :key="key+index")
+ //- base-select-networks(
+ //- :list-data="Object.values(mapNetworks)"
+ //- :option-data="data.kind"
+ //- :choose-option="(e) => chooseNetwork(e, index)"
+ //- :style-border="true"
+ //- :size-input="50"
+ //- )
+ //- base-input.w-full(
+ //- v-model="data.username"
+ //- type="text"
+ //- no-error-icon
+ //- :name="key"
+ //- :rule="configData[key].rules"
+ //- :standout="!isEdit"
+ //- :outlined="isEdit"
+ //- text-color="black"
+ //- )
+
+ base-input.w-full(
+ v-else
+ :readonly="!isEdit"
+ v-model="confidant[field.key]"
+ @update:model-value="checkChangeInput"
+ :mask="field.mask"
+ :type="field.type"
+ :name="field.key"
+ :placeholder="field.placeholder"
+ :standout="!isEdit"
+ :outlined="isEdit"
+ no-error-icon
+ :rule="field.rules"
+ text-color="black"
+ )
+
+
+
+
+
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 @@
+
+ .flex.flex-col.gap-27px.w-full
+ .flex.flex-col.gap-2
+ confidant-form(v-for="(confidant, index) in confidants" :index="index" :confidant="confidant")
+ base-button(
+ left-icon="icon-plus"
+ added-border-none
+ :icon-left-size="12"
+ @click="addNewConfidant"
+ )
+ span.font-medium.text-base Добавить контакт
+
+
+
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",