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

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