Merge branch 'UC-206' into 'master'

WIP Добавила радиокнопки для выбора пола

See merge request andrusyakka/urban-couscous!223

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

src/components/base/BaseInputDate.vue

@@ -28,9 +28,7 @@ export default {
     iconPosition: {
       default: "right",
     },
-    placeholder: {
+    placeholder: String,
-      default: "Поиск",
-    },
     widthInput: Number,
   },
 };

src/components/base/BaseInputTime.vue

@@ -26,9 +26,7 @@ export default {
     iconPosition: {
       default: "right",
     },
-    placeholder: {
+    placeholder: String,
-      default: "Поиск",
-    },
     widthInput: Number,
   },
 };

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>

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,

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

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -1,23 +1,32 @@
 <template lang="pug">
-  .wrap.flex.flex-col.gap-y-6
+  .wrapper.flex.flex-col.gap-y-6.justify-between
-    .flex.flex.flex-col.gap-y-9
+    .flex.flex.flex-col.gap-y-6
       span.text-center.font-bold.text-xl Создание медицинской карты стоматологического пациента
-      .flex.justify-center.items-center.gap-x-2
+      .flex.self-center
-        base-button.button(:size="32", :rounded="true")
+        base-stepper(
-          span(v-if="isBaseData") 1
+          :steps="steps",
-          .icon-ok.text-xs(v-else)
+          :currentStep="currentStep"
-        span(:style="{color: 'var(--btn-blue-color)'}") Основное
+        )
-        .line.flex.mx-2
+      component(v-bind:is="currentTabComponent")
-        base-button.button(:class="{'active-button': !isIdentityDoc && isBaseData}", :size="32", :rounded="true")
+    .flex.justify-between
-          span(v-if="isBaseData") 2
+      .flex
-          .icon-ok.text-xs(v-else)
+        base-button.font-semibold(
-        span(:style="{color: !isBaseData ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") ДУЛ
+            :size="40",
-        .line.flex.mx-2
+            @click="prevStep",
-        base-button.button(:class="{'active-button': !isPolicyDoc }", :size="32", :rounded="true") 3
+            v-if="currentStep !== 0",
-        span(:style="{color: isPolicyDoc ? 'var(--btn-blue-color)' : 'var(--font-dark-blue-color)' }") Полис
+            outlined,
-    medical-base-data(v-if="isBaseData", :change-base-data="changeBaseData")
+          ) Назад
-    medical-identity-documents(v-if="isIdentityDoc", :change-identity-doc="changeIdentityDoc")
+      .flex
-    medical-policy-documents(v-if="isPolicyDoc")
+        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() {
+    nextStep() {
-      this.isBaseData = !this.isBaseData;
+      this.currentStep += 1;
-      this.isIdentityDoc = !this.isIdentityDoc;
     },
-    changeIdentityDoc() {
+    prevStep() {
-      this.isIdentityDoc = !this.isIdentityDoc;
+      this.currentStep -= 1;
-      this.isPolicyDoc = !this.isPolicyDoc;
     },
+    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>

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: {
+  data() {
-    changeBaseData: Function,
+    return {
+      gendersList: [
+        {
+          id: "1",
+          label: "Мужской",
+          value: "male",
+        },
+        {
+          id: "2",
+          label: "Женский",
+          value: "woman",
+        },
+      ],
+      gender: "",
+    };
   },
 };
 </script>

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>

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>

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