From 2d3e38212e92312d2d77d57ecc32b96d21f012a0 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 26 Dec 2022 13:17:30 +0300
Subject: [PATCH 1/2] =?UTF-8?q?WIP=20=D0=A3=D0=B4=D0=B0=D0=BB=D0=B5=D0=BD?=
 =?UTF-8?q?=D1=8B=20=D0=B4=D0=B5=D1=84=D0=BE=D0=BB=D1=82=D0=BD=D1=8B=D0=B5?=
 =?UTF-8?q?=20placeholders=20=D0=B2=20inputs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInputDate.vue | 4 +---
 src/components/base/BaseInputTime.vue | 4 +---
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/base/BaseInputDate.vue b/src/components/base/BaseInputDate.vue
index 5180894..c803e52 100644
--- a/src/components/base/BaseInputDate.vue
+++ b/src/components/base/BaseInputDate.vue
@@ -28,9 +28,7 @@ export default {
     iconPosition: {
       default: "right",
     },
-    placeholder: {
-      default: "Поиск",
-    },
+    placeholder: String,
     widthInput: Number,
   },
 };
diff --git a/src/components/base/BaseInputTime.vue b/src/components/base/BaseInputTime.vue
index 834645b..539cf7f 100644
--- a/src/components/base/BaseInputTime.vue
+++ b/src/components/base/BaseInputTime.vue
@@ -26,9 +26,7 @@ export default {
     iconPosition: {
       default: "right",
     },
-    placeholder: {
-      default: "Поиск",
-    },
+    placeholder: String,
     widthInput: Number,
   },
 };

From dd954cd47abe41fddfa40f0b2e06a73c87e9f0af Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 26 Dec 2022 19:28:11 +0300
Subject: [PATCH 2/2] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=80=D0=B0=D0=B4=D0=B8=D0=BE=D0=BA=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=BF=D0=BA=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D0=B2=D1=8B=D0=B1?=
 =?UTF-8?q?=D0=BE=D1=80=D0=B0=20=D0=BF=D0=BE=D0=BB=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInput.vue             |   2 +
 src/components/base/BaseRadioButtonsGroup.vue |  47 +++++++
 src/pages/calendar/TheCalendar.vue            |   2 +
 .../components/ClientDetailInfoSection.vue    |   1 +
 .../components/FormCreateMedicalCard.vue      | 126 +++++++++---------
 .../components/MedicalBaseData.vue            |  41 +++++-
 .../components/MedicalIdentityDocuments.vue   |   3 -
 .../components/MedicalPolicyDocuments.vue     |   3 -
 .../schedule/components/ScheduleBody.vue      |   1 +
 9 files changed, 148 insertions(+), 78 deletions(-)
 create mode 100644 src/components/base/BaseRadioButtonsGroup.vue

diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index 4eead6f..d65034a 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -18,6 +18,7 @@
 </template>
 
 <script>
+//TODO: Переписать v-model:value, убрать лишнии пропсы, добавить label или вынести в отдельную компоненту
 export default {
   name: "BaseInput",
   props: {
@@ -47,6 +48,7 @@ export default {
   order: -1
 .right
   order: 1
+//TODO: Вынести grey borders в taiwindConfig
 .input-wrapper
   border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
diff --git a/src/components/base/BaseRadioButtonsGroup.vue b/src/components/base/BaseRadioButtonsGroup.vue
new file mode 100644
index 0000000..feedafa
--- /dev/null
+++ b/src/components/base/BaseRadioButtonsGroup.vue
@@ -0,0 +1,47 @@
+<template lang="pug">
+  .container.flex.flex-col.gap-y-2
+    .label.font-semibold.text-smm(v-if="radioButtonsLabel") {{ radioButtonsLabel }}
+    .group.flex.gap-x-4.text-base(:class="{'flex-col gap-y-1': direction === 'col'}")
+      .option(v-for="item in items")
+        input.mr-2(
+          type="radio",
+          :id="item?.id",
+          :value="item?.value",
+          v-model="value"
+        )
+        span {{item?.label}}
+</template>
+
+<script>
+export default {
+  name: "BaseRadioButtonsGroup",
+  emits: ["update:modelValue"],
+  props: {
+    modelValue: String,
+    radioButtonsLabel: String,
+    items: {
+      type: Array,
+      default: () => [],
+    },
+    direction: {
+      type: String,
+      default: "row",
+    },
+  },
+  computed: {
+    value: {
+      get() {
+        return this.modelValue;
+      },
+      set(value) {
+        this.$emit("update:modelValue", value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.label
+  color: var(--font-grey-color)
+</style>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 3c0a56e..7f330a9 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -48,6 +48,7 @@
 </template>
 
 <script>
+//TODO: Вынести emits в массив
 import { fetchWrapper } from "../../shared/fetchWrapper.js";
 import * as moment from "moment/moment";
 import CalendarSchedule from "./components/CalendarSchedule.vue";
@@ -83,6 +84,7 @@ export default {
       isOpenForm: false,
       WORKING_STATUS: "WORKS",
       changeFormWasClosed: false,
+      //TODO: Вынести eventStatuses в config
       eventStatuses: [
         {
           id: 0,
diff --git a/src/pages/clients/components/ClientDetailInfoSection.vue b/src/pages/clients/components/ClientDetailInfoSection.vue
index efb1343..c00c48c 100644
--- a/src/pages/clients/components/ClientDetailInfoSection.vue
+++ b/src/pages/clients/components/ClientDetailInfoSection.vue
@@ -170,6 +170,7 @@
 </template>
 
 <script>
+//TODO: Разбить на несколько компонент
 import ClientDetailInput from "@/pages/clients/components/ClientDetailInput";
 import BaseButton from "@/components/base/BaseButton";
 import TableAddingNewDoc from "@/pages/clients/components/TableAddingNewDoc";
diff --git a/src/pages/clients/components/FormCreateMedicalCard.vue b/src/pages/clients/components/FormCreateMedicalCard.vue
index b14d056..d4acf1e 100644
--- a/src/pages/clients/components/FormCreateMedicalCard.vue
+++ b/src/pages/clients/components/FormCreateMedicalCard.vue
@@ -1,23 +1,32 @@
 <template lang="pug">
-  .wrap.flex.flex-col.gap-y-6
-    .flex.flex.flex-col.gap-y-9
+  .wrapper.flex.flex-col.gap-y-6.justify-between
+    .flex.flex.flex-col.gap-y-6
       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="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': !isIdentityDoc && isBaseData}", :size="32", :rounded="true")
-          span(v-if="isBaseData") 2
-          .icon-ok.text-xs(v-else)
-        span(:style="{color: !isBaseData ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") ДУЛ
-        .line.flex.mx-2
-        base-button.button(:class="{'active-button': !isPolicyDoc }", :size="32", :rounded="true") 3
-        span(:style="{color: isPolicyDoc ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Полис
-    medical-base-data(v-if="isBaseData", :change-base-data="changeBaseData")
-    medical-identity-documents(v-if="isIdentityDoc", :change-identity-doc="changeIdentityDoc")
-    medical-policy-documents(v-if="isPolicyDoc")
+      .flex.self-center
+        base-stepper(
+          :steps="steps",
+          :currentStep="currentStep"
+        )
+      component(v-bind:is="currentTabComponent")
+    .flex.justify-between
+      .flex
+        base-button.font-semibold(
+            :size="40",
+            @click="prevStep",
+            v-if="currentStep !== 0",
+            outlined,
+          ) Назад
+      .flex
+        base-button.font-semibold(
+          :size="40",
+          @click="nextStep",
+          v-if="currentStep < steps.length-1",
+        ) Далее
+        base-button.font-semibold(
+          :size="40",
+          @click="finish",
+          v-if="currentStep === steps.length-1"
+        ) Создать медицинскую карту
 </template>
 
 <script>
@@ -28,6 +37,7 @@ 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";
+import BaseStepper from "@/components/base/BaseStepper.vue";
 
 export default {
   name: "FormCreateMedicalCard",
@@ -39,68 +49,54 @@ export default {
     MedicalBaseData,
     MedicalIdentityDocuments,
     MedicalPolicyDocuments,
+    BaseStepper,
   },
   data() {
     return {
       isBaseData: true,
       isIdentityDoc: false,
       isPolicyDoc: false,
+      currentStep: 0,
+      steps: [
+        {
+          id: 0,
+          label: "1",
+          value: "Основное",
+          component: "medical-base-data",
+        },
+        {
+          id: 1,
+          label: "2",
+          value: "ДУЛ",
+          component: "medical-identity-documents",
+        },
+        {
+          id: 2,
+          label: "3",
+          value: "Полис",
+          component: "medical-policy-documents",
+        },
+      ],
     };
   },
+  computed: {
+    currentTabComponent: function () {
+      return this.steps[this.currentStep]?.component;
+    },
+  },
   methods: {
-    changeBaseData() {
-      this.isBaseData = !this.isBaseData;
-      this.isIdentityDoc = !this.isIdentityDoc;
+    nextStep() {
+      this.currentStep += 1;
     },
-    changeIdentityDoc() {
-      this.isIdentityDoc = !this.isIdentityDoc;
-      this.isPolicyDoc = !this.isPolicyDoc;
+    prevStep() {
+      this.currentStep -= 1;
     },
+    finish() {},
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.wrap
+.wrapper
   width: 570px
-  height: fit-content
-  min-height: 485px
-
-.services-wrapper
-  border: 1px solid var(--btn-grey-color)
-  border-radius: 8px
-
-.list-services
-  overflow-y: auto
-  max-height: 280px
-
-.input-date
-  border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
-
-.button
-  &:hover
-    background-color: var(--btn-blue-color)
-    border: none
-
-.active-button
-  background: var(--btn-grey-color)
-  color: var(--font-dark-blue-color)
-  border-color: var(--btn-grey-color)
-  &:hover
-    background-color: var(--btn-grey-color)
-    border: none
-
-.line
-  width: 78px
-  border: 1.5px solid var(--btn-grey-color)
-
-.place
-  width: 100%
-  border: 2px dashed var(--font-grey-color)
-  border-radius: 4px
-  color: var(--font-grey-color)
-
-.counter
-  color: var(--font-grey-color)
 </style>
diff --git a/src/pages/medicalCard/components/MedicalBaseData.vue b/src/pages/medicalCard/components/MedicalBaseData.vue
index 88f0bc4..bced744 100644
--- a/src/pages/medicalCard/components/MedicalBaseData.vue
+++ b/src/pages/medicalCard/components/MedicalBaseData.vue
@@ -4,13 +4,22 @@
       span.font-bold Основное
       .flex.flex-col.gap-y-6
         base-input.w-full(placeholder="ФИО*")
+        base-radio-buttons-group(
+          :items="gendersList",
+          radioButtonsLabel="Пол",
+          v-model="gender",
+        )
         .flex.gap-x-4
           .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-2
             .counter.font-semibold.text-smm СНИЛС
-            base-input(:width-input="277", placeholder="000–000–000 00")
+            base-input(
+              :width-input="277",
+              placeholder="000–000–000 00",
+              v-mask="'###-###-### ##'"
+            )
         .flex.flex-col.gap-y-6
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Адрес регистрации
@@ -29,9 +38,6 @@
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Email
             base-input(:width-input="277", placeholder="user@yandex.ru")
-    .flex.py-2.justify-between
-      base-button(:size="40", @click="changeBaseData")
-        span.font-semibold Далее
 </template>
 
 <script>
@@ -40,13 +46,34 @@ import BaseInputDate from "@/components/base/BaseInputDate";
 import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 import { mask } from "vue-the-mask";
+import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
 
 export default {
   name: "MedicalBaseData",
-  components: { BaseInput, BaseInputDate, BaseSelect, BaseButton },
+  components: {
+    BaseInput,
+    BaseInputDate,
+    BaseSelect,
+    BaseButton,
+    BaseRadioButtonsGroup,
+  },
   directives: { mask },
-  props: {
-    changeBaseData: Function,
+  data() {
+    return {
+      gendersList: [
+        {
+          id: "1",
+          label: "Мужской",
+          value: "male",
+        },
+        {
+          id: "2",
+          label: "Женский",
+          value: "woman",
+        },
+      ],
+      gender: "",
+    };
   },
 };
 </script>
diff --git a/src/pages/medicalCard/components/MedicalIdentityDocuments.vue b/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
index 0052b7e..c3a4978 100644
--- a/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
+++ b/src/pages/medicalCard/components/MedicalIdentityDocuments.vue
@@ -17,9 +17,6 @@
           .flex.flex-col.gap-y-2
             .counter.font-semibold.text-smm Страховая оганизация
             base-input(:width-input="277", placeholder="Введите название организации")
-    .flex.py-2
-      base-button(:size="40", @click="changeIdentityDoc")
-        span.font-semibold Далее
 </template>
 
 <script>
diff --git a/src/pages/medicalCard/components/MedicalPolicyDocuments.vue b/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
index 9914201..7955ce1 100644
--- a/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
+++ b/src/pages/medicalCard/components/MedicalPolicyDocuments.vue
@@ -23,9 +23,6 @@
           :width-input="277",
           placeholder="+7 (915) 644–92–23"
         )
-    .flex.py-2
-      base-button(:size="40")
-        span.font-semibold Создать медицинскую карту
 </template>
 
 <script>
diff --git a/src/pages/schedule/components/ScheduleBody.vue b/src/pages/schedule/components/ScheduleBody.vue
index 34482d2..873ffa5 100644
--- a/src/pages/schedule/components/ScheduleBody.vue
+++ b/src/pages/schedule/components/ScheduleBody.vue
@@ -233,6 +233,7 @@ export default {
   border: 1.5px solid var(--border-light-grey-color-1)
   border-radius: 4px
   min-height: 87px
+  width: calc(100vw - 136px)
 
 .schedule-body
   &:hover