WIP Добавил страницу доверенного лица

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

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)

src/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue

@@ -0,0 +1,149 @@
+<template lang="pug">
+  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"
+              )
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelectNetworks from "@/components/base/BaseSelectNetworks.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import { checkChangeData } from "@/shared/utils/changesObjects";
+import { mapState, mapGetters } from "vuex";
+import {
+  confidantConfig,
+  mapNetworks,
+} from "@/pages/newMedicalCard/utils/medicalConfig";
+
+export default {
+  name: "ConfidantForm",
+  components: { MedicalFormWrapper, BaseInput, BaseSelectNetworks, BaseButton },
+  data() {
+    return {
+      isEdit: false,
+      isLoadingData: false,
+      isCheckChange: false,
+      configData: confidantConfig,
+      mapNetworks: mapNetworks,
+    };
+  },
+  props: {
+    confidant: {},
+    index: Number,
+  },
+  computed: {
+    ...mapGetters({
+      initConfidant: "getConfidantData",
+    }),
+    ...mapState({
+      confidants: (state) => state.medical.confidantData,
+    }),
+  },
+  methods: {
+    checkChangeInput() {
+      this.isCheckChange = checkChangeData(this.initConfidant, this.confidant);
+    },
+    saveChange() {
+      // console.log(this.confidants);
+    },
+    cancelEdit() {
+      this.$store.dispatch("returnInitData");
+      this.isEdit = false;
+      this.isCheckChange = false;
+    },
+    openEdit() {
+      this.isEdit = true;
+    },
+    deleteConfidant() {
+      this.confidants.splice(this.index, 1);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.form-wrap
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1900px)
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: repeat(2, 1fr)
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: repeat(3, 1fr)
+.label-field
+  color: var(--font-grey-color)
+.input-wrapper
+  width: 302px
+.add-network
+  color: var(--font-dark-blue-color)
+  background-color: var(--bg-light-grey)
+  &:hover
+    color: var(--btn-blue-color)
+    opacity: 0.7
+.icon
+  &.old
+    color: var(--btn-blue-color)
+  &.new
+    color: var(--icon-violet-color)
+</style>

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 {

src/pages/newMedicalCard/components/MedicalConfidantWrapper.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+  .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 Добавить контакт
+</template>
+
+<script>
+import ConfidantForm from "@/pages/newMedicalCard/components/ConfidantForms/ConfidantForm.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
+import { mapState } from "vuex";
+
+export default {
+  name: "MedicalConfidantWrapper",
+  components: { ConfidantForm, BaseButton },
+  computed: {
+    ...mapState({
+      confidants: (state) => state.medical.confidantData,
+    }),
+  },
+  methods: {
+    addNewConfidant() {
+      this.confidants.push({
+        networks: [],
+        email: "",
+        phone: "",
+        first_name: "",
+        last_name: "",
+        patronymic: "",
+      });
+    },
+  },
+};
+</script>

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
+      .flex.w-full.justify-between
-        span.font-bold.text-base {{title}}
+        .flex.w-fit.gap-11px.items-center
-        q-icon.edit-button.text-lg.cursor-pointer(name="app:edit" v-if="!isEdit" @click="openEdit" size="20")
+          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

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",
+    id: "confidant",
-    component: "TrustedPerson",
+    component: "MedicalConfidantWrapper",
   },
   {
     title: "Аллергии",

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 {

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",