[WIP] Добавил поля на форму создания мед карты и уведомление на некорректный номер

src/components/TheHeader.vue

@@ -28,7 +28,12 @@
           img.h-full.object-cover(:src="url + userData.photo", alt="Avatar")
         button.header-buttons(@click="openPopup")
           .icon-down-arrow.text-xxs.flex.justify-center.items-center.p-0
-        base-popup.right-2.top-10(v-if="showPopup", :width="160", v-click-outside="openPopup")
+        base-popup.right-2.top-10(
+          corner,
+          v-if="showPopup",
+          :width="160",
+          v-click-outside="openPopup"
+        )
           .text-popup.flex.cursor-pointer.pl-2(@click="logout") Выйти
 </template>
 

src/components/base/BasePopup.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .flex.flex-col.items-end.absolute
-    .corner
+    .corner(v-if="!corner")
     .popup-wrapper.flex.flex-col.gap-y-3.p-4.h-fit(:style="{ width : width + 'px' }")
       slot
 </template>
@@ -12,6 +12,7 @@ export default {
     width: Number,
     top: Number,
     right: Number,
+    corner: Boolean,
   },
 };
 </script>

src/pages/clients/components/ClientsTableRow.vue

@@ -271,9 +271,22 @@ export default {
         contacts.push(this.dataClient.email);
       if (
         this.dataClient.phone.username &&
+        this.dataClient.phone.username.length === 18 &&
         !contacts.find((el) => el.kind === "PHONE")
       )
         contacts.push(this.dataClient.phone);
+      else if (
+        this.dataClient.phone.username &&
+        this.dataClient.phone.username.length < 18
+      ) {
+        this.dataClient.phone.username =
+          this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
+          "";
+        this.addErrorNotification(
+          "Некорректный номер телефона",
+          "Введите мобильный номер состоящий из 11 цифр"
+        );
+      }
       let mapCreateContacts = this.client.contacts.map((el) => el.kind);
       let mapDeleteContacts = contacts.map((el) => el.kind);
       let createContacts = contacts.filter((el) =>
@@ -288,9 +301,20 @@ export default {
       this.client.contacts.forEach((el) => {
         if (
           el.kind === "PHONE" &&
+          this.dataClient.phone.username.length === 18 &&
           el.username !== this.dataClient.phone.username
         )
           updateContacts.push(this.dataClient.phone);
+        else if (this.dataClient.phone.username.length < 18) {
+          this.dataClient.phone.username =
+            this.client.contacts.find((el) => el.kind === "PHONE")?.username ||
+            "";
+          this.addErrorNotification(
+            "Некорректный номер телефона",
+            "Введите мобильный номер состоящий из 11 цифр"
+          );
+        }
+
         if (
           el.kind === "EMAIL" &&
           el.username !== this.dataClient.email.username

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -4,57 +4,20 @@
       span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
       .flex.justify-center.items-center.gap-x-2
         base-button.button(:size="32", :rounded="true")
-          span(v-if="!isServices") 1
+          span(v-if="isBaseData") 1
           .icon-ok.text-xs(v-else)
         span(:style="{color: 'var(--btn-blue-color)'}") Основное
         .line.flex.mx-2
-        base-button.button(:class="{'active-button': !isServices}", :size="32", :rounded="true") 2
+        base-button.button(:class="{'active-button': !isIdentityDoc && isBaseData}", :size="32", :rounded="true")
-        span(:style="{color: isServices ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Услуги
+          span(v-if="isBaseData") 2
-    medical-base-data(v-if="!isServices")
+          .icon-ok.text-xs(v-else)
-    .services.flex.flex-col.gap-y-6(v-else)
+        span(:style="{color: !isBaseData ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") ДУЛ
-      .flex.flex-col.gap-y-6
+        .line.flex.mx-2
-        .flex.flex-col.gap-y-2
+        base-button.button(:class="{'active-button': !isPolicyDoc }", :size="32", :rounded="true") 3
-          .font-bold Услуги
+        span(:style="{color: isPolicyDoc ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Полис
-          .counter.text-smm Выберите подходищие из списка
+    medical-base-data(v-if="isBaseData", :change-base-data="changeBaseData")
-        .services-wrapper.flex.flex-col.pt-4.px-4
+    medical-identity-documents(v-if="isIdentityDoc", :change-identity-doc="changeIdentityDoc")
-          .flex.gap-x-2
+    medical-policy-documents(v-if="isPolicyDoc")
-            base-input(
-              :with-icon="true",
-              icon-position="left",
-              :width-input="310",
-              placeholder="Поиск"
-            )
-              .counter.icon-search
-            base-select.h-10(placeholder="Вид услуги")
-          .flex.items-center.px-11px.py-9px(
-            :style="{borderBottom: '1px solid var(--btn-grey-color)'}"
-          )
-            .flex.items-center.gap-x-3
-              input.counter.w-4.h-4.checkbox.cursor-pointer(
-                type="checkbox",
-                @click="selectAll",
-                v-model="isAllServices"
-              )
-              .counter.flex.p-2(:style="{width: '358px'}") Название услуги
-            .counter Вид услуги
-          .list-services.flex.flex-col.px-11px.py-9px
-            .flex.items-center(v-for="service in services", :key="service.id")
-              .flex.items-center.gap-x-3
-                input.w-4.h-4.checkbox.cursor-pointer(
-                  type="checkbox",
-                  v-model="userIds",
-                  :value="service.id"
-                )
-                .flex.p-2(:style="{width: '358px'}") {{service.name}}
-              .counter {{service.type}}
-  base-button.custom-button(
-    v-if="!isServices",
-    :size="40",
-    @click="changeServices"
-  )
-    span.font-semibold Далее
-  base-button.custom-button(:size="40", v-else)
-    span.font-semibold Создать медицинскую карту
 </template>
 
 <script>
@@ -63,6 +26,9 @@ import BaseButton from "@/components/base/BaseButton";
 import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import MedicalBaseData from "@/pages/medicalCard/components/MedicalBaseData";
+import MedicalIdentityDocuments from "@/pages/medicalCard/components/MedicalIdentityDocuments";
+import MedicalPolicyDocuments from "@/pages/medicalCard/components/MedicalPolicyDocuments";
+
 export default {
   name: "FormCreateMedicalCard",
   components: {
@@ -71,23 +37,24 @@ export default {
     BaseInputDate,
     BaseSelect,
     MedicalBaseData,
+    MedicalIdentityDocuments,
+    MedicalPolicyDocuments,
   },
   data() {
     return {
-      isServices: false,
+      isBaseData: true,
-      isAllServices: false,
+      isIdentityDoc: false,
-      userIds: [],
+      isPolicyDoc: false,
     };
   },
   methods: {
-    changeServices() {
+    changeBaseData() {
-      this.isServices = !this.isServices;
+      this.isBaseData = !this.isBaseData;
+      this.isIdentityDoc = !this.isIdentityDoc;
     },
-    selectAll() {
+    changeIdentityDoc() {
-      this.userIds = [];
+      this.isIdentityDoc = !this.isIdentityDoc;
-      if (!this.isAllServices) {
+      this.isPolicyDoc = !this.isPolicyDoc;
-        this.services.forEach((el) => this.userIds.push(el.id));
-      }
     },
   },
 };

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -18,15 +18,35 @@
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Фактический адрес места жительства
             base-input(:width-input="277", placeholder="Введите полный адрес")
+        .flex.gap-x-4
+          .flex.flex-col.gap-y-2
+            .counter.font-semibold.text-smm Номер телефона
+            base-input(
+              :width-input="277",
+              placeholder="+7 (915) 644–92–23",
+              v-mask="'+7 (###) ###-##-##'"
+            )
+          .flex.flex-col.gap-y-2
+            .counter.font-semibold.text-smm Email
+            base-input(:width-input="277", placeholder="user@yandex.ru")
+    base-button(:size="40", @click="changeBaseData")
+      span.font-semibold Далее
 </template>
 
 <script>
 import BaseInput from "@/components/base/BaseInput";
 import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
+import BaseButton from "@/components/base/BaseButton";
+import { mask } from "vue-the-mask";
+
 export default {
   name: "MedicalBaseData",
-  components: { BaseInput, BaseInputDate, BaseSelect },
+  components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
+  directives: { mask },
+  props: {
+    changeBaseData: Function,
+  },
 };
 </script>
 

src/pages/medicalCard/components/MedicalIdentityDocuments.vue

@@ -0,0 +1,48 @@
+<template lang="pug">
+  .base.flex.flex-col.gap-y-6
+    .flex.flex-col.gap-y-6
+      span.font-bold Паспортные данные
+      .flex.flex-col.gap-y-4
+        .flex.gap-x-4
+          .flex.flex-col.gap-y-2
+            .counter.font-semibold.text-smm Серия и номер
+            base-input(:width-input="277", placeholder="0000 000000")
+          .flex.flex-col.gap-y-2
+            .counter.font-semibold.text-smm Дата выдачи
+            base-input-date.input-date.h-10(:width-input="277")
+        .flex.flex-col.gap-y-4
+          .flex.flex-col.gap-y-2
+            .counter.font-semibold.text-smm Кем выдан
+            base-input(:width-input="277", placeholder="Точно как в паспорте")
+          .flex.flex-col.gap-y-2
+            .counter.font-semibold.text-smm Страховая оганизация
+            base-input(:width-input="277", placeholder="Введите название организации")
+    base-button(:size="40", @click="changeIdentityDoc")
+      span.font-semibold Далее
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseSelect from "@/components/base/BaseSelect";
+import BaseButton from "@/components/base/BaseButton";
+import { mask } from "vue-the-mask";
+
+export default {
+  name: "MedicalIdentityDocuments",
+  components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
+  directives: { mask },
+  props: {
+    changeIdentityDoc: Function,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.input-date
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.counter
+  color: var(--font-grey-color)
+</style>

src/pages/medicalCard/components/MedicalPolicyDocuments.vue

@@ -0,0 +1,51 @@
+<template lang="pug">
+  .base.flex.flex-col.gap-y-6
+    .flex.gap-x-4
+      .flex.flex-col.gap-y-6
+        span.font-bold Полис
+        .flex.gap-x-4
+          .flex.flex-col.gap-y-2
+            .counter.font-semibold.text-smm Серия и номер полиса ОМС
+            base-input(:width-input="277", placeholder="0000 000000")
+          .flex.flex-col.gap-y-2
+            .counter.font-semibold.text-smm Серия и номер полиса ДМС
+            base-input(:width-input="277", placeholder="0000 000000")
+    .flex.flex-col.gap-y-2
+      .counter.font-semibold.text-smm Код категории льготы
+      base-input(:width-input="277", placeholder="000")
+    .flex.flex-col.gap-y-4
+      .flex.flex-col.gap-y-2
+        .counter.font-semibold.text-smm К кому обращаться в случае необходимости 
+        base-input.w-full(placeholder="ФИО*")
+      .flex.flex-col.gap-y-2
+        .counter.font-semibold.text-smm Номер телефона
+        base-input(
+          :width-input="277",
+          placeholder="+7 (915) 644–92–23"
+        )
+    base-button(:size="40")
+      span.font-semibold Создать медицинскую карту
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseSelect from "@/components/base/BaseSelect";
+import BaseButton from "@/components/base/BaseButton";
+import { mask } from "vue-the-mask";
+
+export default {
+  name: "MedicalPolicyDocuments",
+  components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
+  directives: { mask },
+};
+</script>
+
+<style lang="sass" scoped>
+.input-date
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
+
+.counter
+  color: var(--font-grey-color)
+</style>