From 900cc7b2bae3882c946ed148f18156f39cd6e623 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Fri, 9 Jun 2023 13:05:50 +0300
Subject: [PATCH 1/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D0=BD=D0=B0=20=D1=84=D0=BE=D1=80=D0=BC=D1=83=20?=
 =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=B8:=20=D0=A4=D0=98=D0=9E,=20=D0=9E=D1=81?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BD=D1=83=D1=8E=20=D0=B8=D0=BD=D1=84=D0=BE?=
 =?UTF-8?q?=D1=80=D0=BC=D0=B0=D1=86=D0=B8=D1=8E,=20=D0=94=D0=A3=D0=9B,=20?=
 =?UTF-8?q?=D0=90=D0=B4=D1=80=D0=B5=D1=81,=20=D0=B8=D0=B7=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseInputFullName.vue     |  95 ++++++++
 src/pages/newCalendar/TheCalendar.vue         |   5 +-
 .../components/RecordCreationForm.vue         | 217 ++++++++++++++----
 3 files changed, 272 insertions(+), 45 deletions(-)
 create mode 100644 src/components/base/BaseInputFullName.vue

diff --git a/src/components/base/BaseInputFullName.vue b/src/components/base/BaseInputFullName.vue
new file mode 100644
index 0000000..5625e33
--- /dev/null
+++ b/src/components/base/BaseInputFullName.vue
@@ -0,0 +1,95 @@
+<template lang="pug">
+  .flex.gap-x-4.h-fit
+    .flex.gap-x-3.w-full
+      q-btn(
+        color="secondary",
+        text-color="primary",
+        style="width: 40px; height: 40px",
+        rounded
+        no-caps
+        padding="0 16px"
+      )
+        q-icon(v-if="image === defaultIcon", name="app:icon-download")
+        q-avatar(v-else, size="40px", round)
+          img(:src="image")
+        q-menu(anchor="bottom middle", self="top right", v-model="showPopup")
+          .flex.flex-col.p-4.gap-y-3
+            .flex.items-center.gap-x-2.cursor-pointer(@click="changeOpenModal")
+              q-icon(name="app:computer", size="18px", color="primary")
+              span.text-smm.title Загрузить с компьютера
+            .flex.items-center.gap-x-2.cursor-pointer
+              q-icon(name="app:camera", size="18px", color="primary")
+              span.text-smm.title Сделать фото
+        base-modal(v-model="showModal", title="Загрузить изображение")
+          .flex.flex-col.items-center.justify-center(
+            :style="{padding: '153px 370px'}"
+          )
+            .avatar-wrapper.flex.relative
+              base-input(
+                circle,
+                type="file",
+                id="image-upload",
+                accept="image/*",
+                @change="(e) => previewImage(e)"
+              )
+              .avatar.flex.absolute.items-center.gap-x-6
+                img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
+                q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
+      base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
+</template>
+
+<script>
+import BaseModal from "./BaseModal.vue";
+import BaseInput from "./BaseInput.vue";
+import addImageIcon from "@/assets/icons/photo.svg";
+
+export default {
+  name: "BaseInputFullName",
+  components: { BaseModal, BaseInput },
+  props: { infoClient: Object },
+  data() {
+    return {
+      defaultIcon: addImageIcon,
+      showModal: false,
+      showPopup: false,
+      image: addImageIcon,
+    };
+  },
+  methods: {
+    closeAddImage() {
+      this.showModal = false;
+      this.showPopup = false;
+    },
+    changeOpenModal() {
+      this.showModal = true;
+      this.showPopup = false;
+    },
+    previewImage(event) {
+      let picture = event.target.files;
+      let reader = new FileReader();
+      reader.onload = (e) => {
+        this.image = e.target.result;
+      };
+      reader.readAsDataURL(picture[0]);
+    },
+  },
+  watch: {
+    showModal: function () {
+      if (this.showModal === false) {
+        this.closeAddImage();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.avatar-wrapper
+  width: 400px
+  height: 400px
+  border-radius: 50%
+
+.avatar
+  height: 100%
+  border-radius: 50%
+</style>
diff --git a/src/pages/newCalendar/TheCalendar.vue b/src/pages/newCalendar/TheCalendar.vue
index b3ac0e4..6476ecc 100644
--- a/src/pages/newCalendar/TheCalendar.vue
+++ b/src/pages/newCalendar/TheCalendar.vue
@@ -3,7 +3,8 @@
     calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
     calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
     calendar-wrapper.ml-2(:open-sidebar="isOpen")
-    record-creation-form(:is-show-form="isShowForm")
+    base-modal(v-model="isShowForm", title="Создание записи")
+      record-creation-form(v-model="isShowForm")
 </template>
 
 <script>
@@ -12,6 +13,7 @@ import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSide
 import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
 import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
 import * as moment from "moment/moment";
+import BaseModal from "@/components/base/BaseModal.vue";
 
 export default {
   name: "TheCalendar",
@@ -20,6 +22,7 @@ export default {
     CalendarOpenSidebar,
     CalendarWrapper,
     RecordCreationForm,
+    BaseModal,
   },
   data() {
     return {
diff --git a/src/pages/newCalendar/components/RecordCreationForm.vue b/src/pages/newCalendar/components/RecordCreationForm.vue
index 72e21c8..3b839c2 100644
--- a/src/pages/newCalendar/components/RecordCreationForm.vue
+++ b/src/pages/newCalendar/components/RecordCreationForm.vue
@@ -1,66 +1,185 @@
 <template lang="pug">
-  base-modal(v-model="isShowForm", title="Создание записи")
-    .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
-      .flex.gap-x-10
-        .flex.flex-col.gap-y-4.text-smm
-          .flex.gap-x-3.items-center
-            .text.font-semibold Статус
-            .flex.gap-x-1
-              .input.flex.items-center.pl-4
-                .text-input.font-medium Не принят
-              q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
-                img(:src="folder")
-          .flex.gap-x-3.items-center
-            .text.font-semibold Дата:
-            .flex.gap-x-1
-              .input.flex.items-center.pl-4
-                .text-input.font-medium 24 мая 2020
-              q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
-                img(:src="calendar")
-          .flex.gap-x-3.items-center
-            .text.font-semibold Время:
-            .flex.gap-x-1
-              .input.flex.items-center.pl-4
-                .text-input.font-medium 13:00 - 14:00
-              q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
-                img(:src="time")
-        .flex.h-14.gap-x-3.items-center.text-smm
-          .text.font-semibold Медкарта:
-          .flex.gap-x-1 
-            .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2
-              .photo.flex.h-10.w-10.items-center.justify-center
-                img(:src="noname")
-              .flex.flex-col.font-medium
-                .text-input Имя Фамилия
-                .name-date.text-xsx Дата
-            .change.flex.items-center
-              q-btn(dense, padding="24px 8px")
-                q-icon(name="app:icon-plus", size="12px")
-      .flex.items-center.gap-x-3
-        .text.font-semibold.text-smm Услуги
-        .flex.gap-x-1
-          .services.flex
-          .change.flex.w-7.h-7
+  .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
+    .flex.gap-x-10
+      .flex.flex-col.gap-y-4.text-smm
+        .flex.gap-x-3.items-center
+          .text.font-semibold Статус
+          .flex.gap-x-1
+            .input.flex.items-center.pl-4
+              .text-input.font-medium Не принят
+            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+              img(:src="folder")
+        .flex.gap-x-3.items-center
+          .text.font-semibold Дата:
+          .flex.gap-x-1
+            .input.flex.items-center.pl-4
+              .text-input.font-medium 24 мая 2020
+            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+              img(:src="calendar")
+        .flex.gap-x-3.items-center
+          .text.font-semibold Время:
+          .flex.gap-x-1
+            .input.flex.items-center.pl-4
+              .text-input.font-medium 13:00 - 14:00
+            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+              img(:src="time")
+      .flex.h-14.gap-x-3.items-center.text-smm
+        .text.font-semibold Медкарта:
+        .flex.gap-x-1 
+          .name.flex.items-center.px-4.pt-2.pb-1.gap-x-2
+            .photo.flex.h-10.w-10.items-center.justify-center
+              img(:src="noname")
+            .flex.flex-col.font-medium
+              .text-input Имя Фамилия
+              .name-date.text-xsx Дата
+          .change.flex.items-center
+            q-btn(dense, padding="24px 8px")
+              q-icon(name="app:icon-plus", size="12px")
+    .flex.items-center.gap-x-3.text-smm
+      .text.font-semibold Услуги:
+      .flex.gap-x-1
+        .services.flex.items-center.px-4.font-medium.text
+          span Выберите услуги
+        q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+          img(:src="folder")
+    base-input-full-name(:info-client="infoClient")
+    .flex.flex-col.flex-auto.l.gap-y-8
+      .flex
+        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
+          v-for="form in forms",
+          @click="selectForm(form.component)",
+          :class="{active: form.component === currentForm}",
+          :key="form.id",
+          :id="form.id"
+        ) {{form.title}}
+      component(
+        v-bind:is="currentForm",
+        :basic-info="infoClient.basic",
+        :phone="infoClient.phone",
+        :email="infoClient.email",
+        :add-network="addNewNetwork",
+        :priority-list="priorityList",
+        :identity-document="infoClient.identity_document",
+        :addresses="infoClient.addresses",
+        :save-file="saveDocFile",
+        :networks-list="getNetworksList",
+      )
 </template>
 
 <script>
+import { column } from "@/pages/clients/utils/tableConfig";
+import { v_model } from "@/shared/mixins/v-model";
 import BaseModal from "@/components/base/BaseModal.vue";
 import noname from "@/assets/icons/noname.svg";
 import folder from "@/assets/icons/folder.svg";
 import time from "@/assets/icons/time.svg";
 import calendar from "@/assets/icons/calendar-grey.svg";
+import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
+import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
+import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
 
 export default {
   name: "RecordCreationForm",
-  components: { BaseModal },
+  components: {
+    BaseModal,
+    FormCreateBasicInfo,
+    FormCreateIdentityDocuments,
+    FormCreateAddresses,
+    BaseInput,
+    BaseInputFullName,
+  },
   props: { isShowForm: Boolean },
+  mixins: [v_model],
   data() {
-    return { noname, folder, time, calendar, isPhoto: false };
+    return {
+      noname,
+      folder,
+      time,
+      calendar,
+      isPhoto: false,
+      infoClient: {
+        basic: { contacts: [] },
+        phone: { username: "" },
+        email: { username: "" },
+        identity_document: {},
+        addresses: {},
+      },
+      forms: [
+        {
+          title: "Основное",
+          id: "basic",
+          component: "form-create-basic-info",
+        },
+        {
+          title: "ДУЛ",
+          id: "doc",
+          component: "form-create-identity-documents",
+        },
+        {
+          title: "Адрес",
+          id: "address",
+          component: "form-create-addresses",
+        },
+      ],
+      currentForm: "form-create-basic-info",
+      priorityList: [
+        {
+          id: 1,
+          label: "Высокий",
+        },
+        {
+          id: 2,
+          label: "Средний",
+        },
+        {
+          id: 3,
+          label: "Низкий",
+        },
+        {
+          id: 4,
+          label: "-",
+        },
+      ],
+      networksSettings: column.find((el) => el.name === "networks")?.settings,
+    };
+  },
+  computed: {
+    getNetworksList() {
+      let contacts = [];
+      this.infoClient.basic.contacts.forEach((elem) =>
+        contacts.push(elem.kind.id)
+      );
+      let filteredNetworks = this.networksSettings.filter(
+        ({ id }) => !contacts.includes(id)
+      );
+      return filteredNetworks;
+    },
   },
   methods: {
     changePhoto() {
       this.isPhoto = true;
     },
+    selectForm(componentName) {
+      this.currentForm = this.forms.find(
+        (elem) => elem.component === componentName
+      )?.component;
+    },
+    saveDocFile(e) {
+      this.infoClient.doc = e.target.files;
+    },
+    addNewNetwork() {
+      const newNetwork = this.getNetworksList;
+      if (newNetwork[0])
+        this.infoClient.basic.contacts.push({
+          kind: {
+            id: newNetwork[0].id,
+            icon: newNetwork[0].icon,
+          },
+          username: "",
+        });
+    },
   },
 };
 </script>
@@ -102,4 +221,14 @@ export default {
   border-radius: 6px
   height: 28px
   width: 560px
+
+.title-info
+  color: var(--font-grey-color)
+  border-bottom: 1.5px solid var(--font-grey-color)
+  &:hover
+    color: var(--btn-blue-color)
+    border-bottom: 1.5px solid var(--btn-blue-color)
+  &.active
+    color: var(--btn-blue-color)
+    border-bottom: 1.5px solid var(--btn-blue-color)
 </style>

From 10c72e8b6189295b791882a5bd5929bd7c0b20c5 Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Fri, 9 Jun 2023 19:41:04 +0300
Subject: [PATCH 2/2] =?UTF-8?q?[WIP]=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=B8=D0=BB=20=D1=84=D0=BE=D1=80=D0=BC=D1=8B=20=D0=BD=D0=B0=20?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=BC=20=D0=BE?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=B5=20=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=B7=D0=B0=D0=BF=D0=B8=D1=81=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/locked.svg                   |   3 +
 src/components/base/BaseInput.vue             |   7 +-
 src/components/base/BaseInputContainer.vue    |   2 +
 src/components/base/BaseInputFullName.vue     |  73 +++++------
 src/components/base/BaseModal.vue             |   6 +-
 src/components/base/BaseTimeModal.vue         |  91 +++++++++++++
 .../components/FormCreateBasicInfo.vue        |   9 +-
 src/pages/newCalendar/TheCalendar.vue         |   7 +-
 .../components/RecordCreationForm.vue         | 123 ++++++++++++------
 src/pages/newCalendar/utils/calendarConfig.js |  62 +++++++++
 10 files changed, 297 insertions(+), 86 deletions(-)
 create mode 100644 src/assets/icons/locked.svg
 create mode 100644 src/components/base/BaseTimeModal.vue

diff --git a/src/assets/icons/locked.svg b/src/assets/icons/locked.svg
new file mode 100644
index 0000000..6bbe3cc
--- /dev/null
+++ b/src/assets/icons/locked.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.84087 4.11519C7.4338 4.68057 7.29199 5.37779 7.29199 5.83333V8.54167H12.7087V5.83333C12.7087 5.37779 12.5669 4.68057 12.1598 4.11519C11.7757 3.58168 11.13 3.125 10.0003 3.125C8.87069 3.125 8.22499 3.58168 7.84087 4.11519ZM13.9587 8.54167V5.83333C13.9587 5.17776 13.7671 4.20832 13.1742 3.38481C12.5583 2.52943 11.5374 1.875 10.0003 1.875C8.46329 1.875 7.44232 2.52943 6.82645 3.38481C6.23352 4.20832 6.04199 5.17776 6.04199 5.83333V8.54167H4.16699C3.82181 8.54167 3.54199 8.82149 3.54199 9.16667V17.5C3.54199 17.8452 3.82181 18.125 4.16699 18.125H15.8337C16.1788 18.125 16.4587 17.8452 16.4587 17.5V9.16667C16.4587 8.82149 16.1788 8.54167 15.8337 8.54167H13.9587ZM4.79199 9.79167V16.875H15.2087V9.79167H4.79199Z" fill="white"/>
+</svg>
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index fbd8b25..6bac6b4 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -1,9 +1,9 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
+  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px' }")
     q-input(
       v-model="value",
       :name="name",
-      :multiple="multiple"
+      :multiple="multiple",
       :class="{'circle': circle, 'font-input': true, 'doc': doc}",
       :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight}",
       :borderless="borderless",
@@ -26,7 +26,7 @@
       :standout="standout"
       :accept="accept",
       :debounce="debounce",
-      :shadow-text="shadowText"
+      :shadow-text="shadowText",
       hide-bottom-space
     )
       template(v-slot:prepend, v-if="iconLeft")
@@ -116,6 +116,7 @@ export default {
     iconLeft: Boolean,
     iconRight: Boolean,
     name: String,
+    important: Boolean,
   },
   emits: ["update:modelValue"],
   computed: {
diff --git a/src/components/base/BaseInputContainer.vue b/src/components/base/BaseInputContainer.vue
index 36c1f51..f2875ef 100644
--- a/src/components/base/BaseInputContainer.vue
+++ b/src/components/base/BaseInputContainer.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
     .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
+      span.-mt-2(v-if="important", :style="{color: 'var(--font-obligatory-color)'}") *
     slot
 </template>
 
@@ -9,6 +10,7 @@ export default {
   name: "BaseInputContainer",
   props: {
     label: String,
+    important: Boolean,
   },
 };
 </script>
diff --git a/src/components/base/BaseInputFullName.vue b/src/components/base/BaseInputFullName.vue
index 5625e33..d531812 100644
--- a/src/components/base/BaseInputFullName.vue
+++ b/src/components/base/BaseInputFullName.vue
@@ -1,41 +1,40 @@
 <template lang="pug">
-  .flex.gap-x-4.h-fit
-    .flex.gap-x-3.w-full
-      q-btn(
-        color="secondary",
-        text-color="primary",
-        style="width: 40px; height: 40px",
-        rounded
-        no-caps
-        padding="0 16px"
-      )
-        q-icon(v-if="image === defaultIcon", name="app:icon-download")
-        q-avatar(v-else, size="40px", round)
-          img(:src="image")
-        q-menu(anchor="bottom middle", self="top right", v-model="showPopup")
-          .flex.flex-col.p-4.gap-y-3
-            .flex.items-center.gap-x-2.cursor-pointer(@click="changeOpenModal")
-              q-icon(name="app:computer", size="18px", color="primary")
-              span.text-smm.title Загрузить с компьютера
-            .flex.items-center.gap-x-2.cursor-pointer
-              q-icon(name="app:camera", size="18px", color="primary")
-              span.text-smm.title Сделать фото
-        base-modal(v-model="showModal", title="Загрузить изображение")
-          .flex.flex-col.items-center.justify-center(
-            :style="{padding: '153px 370px'}"
-          )
-            .avatar-wrapper.flex.relative
-              base-input(
-                circle,
-                type="file",
-                id="image-upload",
-                accept="image/*",
-                @change="(e) => previewImage(e)"
-              )
-              .avatar.flex.absolute.items-center.gap-x-6
-                img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
-                q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
-      base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
+  .flex.gap-x-3.w-full.py-6
+    q-btn(
+      color="secondary",
+      text-color="primary",
+      style="width: 40px; height: 40px",
+      rounded,
+      no-caps,
+      padding="0 16px"
+    )
+      q-icon(v-if="image === defaultIcon", name="app:icon-download")
+      q-avatar(v-else, size="40px", round)
+        img(:src="image")
+      q-menu(anchor="bottom middle", self="top right", v-model="showPopup")
+        .flex.flex-col.p-4.gap-y-3
+          .flex.items-center.gap-x-2.cursor-pointer(@click="changeOpenModal")
+            q-icon(name="app:computer", size="18px", color="primary")
+            span.text-smm.title Загрузить с компьютера
+          .flex.items-center.gap-x-2.cursor-pointer
+            q-icon(name="app:camera", size="18px", color="primary")
+            span.text-smm.title Сделать фото
+      base-modal(v-model="showModal", title="Загрузить изображение")
+        .flex.flex-col.items-center.justify-center(
+          :style="{padding: '153px 370px'}"
+        )
+          .avatar-wrapper.flex.relative
+            base-input(
+              circle,
+              type="file",
+              id="image-upload",
+              accept="image/*",
+              @change="(e) => previewImage(e)"
+            )
+            .avatar.flex.absolute.items-center.gap-x-6
+              img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
+              q-btn(round, color="primary", @click="closeAddImage", icon="app:icon-ok")
+    base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", outlined)
 </template>
 
 <script>
diff --git a/src/components/base/BaseModal.vue b/src/components/base/BaseModal.vue
index e95635a..1c1fcfc 100644
--- a/src/components/base/BaseModal.vue
+++ b/src/components/base/BaseModal.vue
@@ -6,7 +6,7 @@
     ref="dialog"
   )
     .base-content(
-      :class="{'draggable': draggable, 'base-content-default': !defaultPadding}",
+      :class="{'draggable': draggable, 'base-content-default': !defaultPadding, 'base-modal-default': modalPadding}",
       ref="contentRef",
       :style="{...contentStyles, height}"
     )
@@ -30,6 +30,7 @@ export default {
     draggable: Boolean,
     hideOverlay: Boolean,
     defaultPadding: Boolean,
+    modalPadding: Boolean,
     hideHeader: Boolean,
     height: {
       type: String,
@@ -135,6 +136,9 @@ export default {
 .base-content-default
   padding: 32px 40px
 
+.base-modal-default
+  padding: 28px 32px
+
 .base-content
   width: auto
   background-color: var(--default-white)
diff --git a/src/components/base/BaseTimeModal.vue b/src/components/base/BaseTimeModal.vue
new file mode 100644
index 0000000..559ae43
--- /dev/null
+++ b/src/components/base/BaseTimeModal.vue
@@ -0,0 +1,91 @@
+<template lang="pug">
+  .flex.flex-col.gap-y-6.pt-6
+    .table-time.flex.p-4
+      .flex.flex-col.gap-1(v-for="time in timeCoil")
+        .flex {{ time }}
+        .side.flex.p-1.h-9(:style="{columnGap: '2px'}")
+          q-btn.left-side(size="9px", padding="0 8px", color="primary")
+            q-icon(name="app:icon-ok")
+          q-btn.right-side(size="4px", padding="0 4px")
+            img(:src="lockIcon")
+    .flex.justify-between.items-center
+      .flex.gap-2
+        q-btn(
+          color="primary",
+          outline,
+          size="16px",
+          no-caps,
+          label="Отмена",
+          :style="{width: '108px', height: '40px'}",
+          padding="0",
+          @click="closeModalTime"
+        )
+        q-btn(
+          color="primary",
+          size="16px",
+          no-caps,
+          label="Сохранить"
+          :style="{width: '132px', height: '40px'}",
+          padding="0",
+          @click="closeModalTime"
+        )
+      .text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
+</template>
+
+<script>
+import lockIcon from "@/assets/icons/locked.svg";
+
+export default {
+  name: "BaseTimeModal",
+  props: { times: Object, closeModalTime: Function },
+  data() {
+    return { lockIcon, select: false };
+  },
+  computed: {
+    validateStartTime() {
+      return this.verifyTime("8:00");
+    },
+    validateEndTime() {
+      return this.verifyTime("19:00");
+    },
+    timeCoil() {
+      let time = [];
+      for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
+        time.push(`${i}:00`);
+      }
+      return time;
+    },
+  },
+  methods: {
+    verifyTime(dayTime) {
+      let timeArray = dayTime.split(":").map((elem) => parseInt(elem, 10));
+      let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
+      return newTime;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.table-time
+  width: 463px
+  height: 174px
+  border: 1px solid var(--border-light-grey-color)
+  border-radius: 6px
+  flex-wrap: wrap !important
+
+.text
+  color: var(--font-dark-blue-color)
+
+.side
+  border-left: 1px solid var(--border-light-grey-color)
+  border-right: 1px solid var(--border-light-grey-color)
+
+.left-side
+  border-radius: 6px 1px 1px 6px
+  background: #4772F2
+
+.right-side
+  border-radius: 1px 6px 6px 1px
+  background: #FF6565
+</style>
diff --git a/src/pages/clients/components/FormCreateBasicInfo.vue b/src/pages/clients/components/FormCreateBasicInfo.vue
index 92afdc2..8ec87e3 100644
--- a/src/pages/clients/components/FormCreateBasicInfo.vue
+++ b/src/pages/clients/components/FormCreateBasicInfo.vue
@@ -11,20 +11,23 @@
         type="date"
         v-model="basicInfo.birth_date",
         label="Дата рождения",
-        outlined
+        outlined,
+        important
       )
       base-input(
         v-model="phone.username",
         placeholder="+7 (915) 644–92–23",
         mask="+7 (###) ###-##-##",
         label="Номер телефона",
-        outlined
+        outlined,
+        important
       )
       base-input(
         v-model="email.username",
         placeholder="user@yandex.ru",
         label="Email",
-        outlined
+        outlined,
+        important
       )
       .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
         span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
diff --git a/src/pages/newCalendar/TheCalendar.vue b/src/pages/newCalendar/TheCalendar.vue
index 6476ecc..add8028 100644
--- a/src/pages/newCalendar/TheCalendar.vue
+++ b/src/pages/newCalendar/TheCalendar.vue
@@ -3,8 +3,8 @@
     calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar", :create-form="createForm")
     calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
     calendar-wrapper.ml-2(:open-sidebar="isOpen")
-    base-modal(v-model="isShowForm", title="Создание записи")
-      record-creation-form(v-model="isShowForm")
+    base-modal(v-model="isShowForm", title="Создание записи", modal-padding)
+      record-creation-form(v-model="isShowForm", :close-form="closeForm")
 </template>
 
 <script>
@@ -38,6 +38,9 @@ export default {
     createForm() {
       this.isShowForm = true;
     },
+    closeForm() {
+      this.isShowForm = false;
+    },
   },
 };
 </script>
diff --git a/src/pages/newCalendar/components/RecordCreationForm.vue b/src/pages/newCalendar/components/RecordCreationForm.vue
index 3b839c2..7671b7c 100644
--- a/src/pages/newCalendar/components/RecordCreationForm.vue
+++ b/src/pages/newCalendar/components/RecordCreationForm.vue
@@ -5,24 +5,42 @@
         .flex.gap-x-3.items-center
           .text.font-semibold Статус
           .flex.gap-x-1
-            .input.flex.items-center.pl-4
-              .text-input.font-medium Не принят
+            .input.flex.items-center.pl-4.gap-x-1
+              img(:src="currentStatus.icon")
+              .text-input.font-medium {{currentStatus.name}}
             q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
               img(:src="folder")
+              q-menu
+                .status.flex.items-center.gap-x-1.font-medium.text-smm(
+                  v-for="status in patientData.statuses",
+                  @click="choiceStatus(status)",
+                  v-close-popup
+                )
+                  img(:src="status.icon")
+                  span {{status.name}}
         .flex.gap-x-3.items-center
           .text.font-semibold Дата:
           .flex.gap-x-1
             .input.flex.items-center.pl-4
-              .text-input.font-medium 24 мая 2020
+              .text-input.font-medium {{currentDate.format("DD MMMM YYYY")}}
             q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
               img(:src="calendar")
+              q-menu(
+                transition-show="scale",
+                transition-hide="scale",
+                self="top middle",
+                :offset="[118, 14]",
+              )
+                base-calendar(v-model="currentDate")
         .flex.gap-x-3.items-center
           .text.font-semibold Время:
           .flex.gap-x-1
             .input.flex.items-center.pl-4
               .text-input.font-medium 13:00 - 14:00
-            q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
+            q-btn.change.flex.w-7.h-7(@click="isShowTime = true", dense, padding="4px 4px")
               img(:src="time")
+            base-modal(v-model="isShowTime", title="Время", modal-padding)
+              base-time-modal(:times="times", :close-modal-time="closeModalTime")
       .flex.h-14.gap-x-3.items-center.text-smm
         .text.font-semibold Медкарта:
         .flex.gap-x-1 
@@ -42,7 +60,7 @@
           span Выберите услуги
         q-btn.change.flex.w-7.h-7(dense, padding="4px 4px")
           img(:src="folder")
-    base-input-full-name(:info-client="infoClient")
+    base-input-full-name(:info-client="patientData")
     .flex.flex-col.flex-auto.l.gap-y-8
       .flex
         button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
@@ -54,16 +72,36 @@
         ) {{form.title}}
       component(
         v-bind:is="currentForm",
-        :basic-info="infoClient.basic",
-        :phone="infoClient.phone",
-        :email="infoClient.email",
+        :basic-info="patientData.basic",
+        :phone="patientData.phone",
+        :email="patientData.email",
         :add-network="addNewNetwork",
-        :priority-list="priorityList",
-        :identity-document="infoClient.identity_document",
-        :addresses="infoClient.addresses",
+        :priority-list="patientData.priorityList",
+        :identity-document="patientData.identity_document",
+        :addresses="patientData.addresses",
         :save-file="saveDocFile",
         :networks-list="getNetworksList",
       )
+  .footer.flex.gap-2
+    q-btn(
+      color="primary",
+      outline,
+      size="16px",
+      no-caps,
+      label="Отменить"
+      :style="{width: '126px', height: '40px'}",
+      padding="0",
+      @click="closeForm"
+    )
+    q-btn(
+      color="primary",
+      size="16px",
+      no-caps,
+      label="Создать запись"
+      :style="{width: '174px', height: '40px'}",
+      padding="0",
+      @click="closeForm"
+    )
 </template>
 
 <script>
@@ -79,6 +117,10 @@ import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateId
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
+import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
+import BaseCalendar from "@/components/base/BaseCalendar.vue";
+import BaseTimeModal from "@/components/base/BaseTimeModal.vue";
+import * as moment from "moment/moment";
 
 export default {
   name: "RecordCreationForm",
@@ -89,8 +131,10 @@ export default {
     FormCreateAddresses,
     BaseInput,
     BaseInputFullName,
+    BaseCalendar,
+    BaseTimeModal,
   },
-  props: { isShowForm: Boolean },
+  props: { isShowForm: Boolean, closeForm: Function },
   mixins: [v_model],
   data() {
     return {
@@ -99,13 +143,11 @@ export default {
       time,
       calendar,
       isPhoto: false,
-      infoClient: {
-        basic: { contacts: [] },
-        phone: { username: "" },
-        email: { username: "" },
-        identity_document: {},
-        addresses: {},
-      },
+      patientData: patientData,
+      currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
+      currentDate: moment().clone(),
+      isShowTime: false,
+      times: { from: "8:30", to: "10:30" },
       forms: [
         {
           title: "Основное",
@@ -124,31 +166,13 @@ export default {
         },
       ],
       currentForm: "form-create-basic-info",
-      priorityList: [
-        {
-          id: 1,
-          label: "Высокий",
-        },
-        {
-          id: 2,
-          label: "Средний",
-        },
-        {
-          id: 3,
-          label: "Низкий",
-        },
-        {
-          id: 4,
-          label: "-",
-        },
-      ],
       networksSettings: column.find((el) => el.name === "networks")?.settings,
     };
   },
   computed: {
     getNetworksList() {
       let contacts = [];
-      this.infoClient.basic.contacts.forEach((elem) =>
+      this.patientData.basic.contacts.forEach((elem) =>
         contacts.push(elem.kind.id)
       );
       let filteredNetworks = this.networksSettings.filter(
@@ -167,12 +191,12 @@ export default {
       )?.component;
     },
     saveDocFile(e) {
-      this.infoClient.doc = e.target.files;
+      this.patientData.doc = e.target.files;
     },
     addNewNetwork() {
       const newNetwork = this.getNetworksList;
       if (newNetwork[0])
-        this.infoClient.basic.contacts.push({
+        this.patientData.basic.contacts.push({
           kind: {
             id: newNetwork[0].id,
             icon: newNetwork[0].icon,
@@ -180,6 +204,12 @@ export default {
           username: "",
         });
     },
+    choiceStatus(e) {
+      this.currentStatus = e;
+    },
+    closeModalTime() {
+      this.isShowTime = false;
+    },
   },
 };
 </script>
@@ -231,4 +261,17 @@ export default {
   &.active
     color: var(--btn-blue-color)
     border-bottom: 1.5px solid var(--btn-blue-color)
+
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
+  margin: 40px -32px 0px
+  padding: 16px 32px 0px 32px
+
+.status
+  border-radius: 4px
+  height: 28px
+  padding: 8px 8px 8px 5px
+  &:hover
+    background: var(--bg-light-grey)
+    cursor: pointer
 </style>
diff --git a/src/pages/newCalendar/utils/calendarConfig.js b/src/pages/newCalendar/utils/calendarConfig.js
index ce35b3d..fa2c1e7 100644
--- a/src/pages/newCalendar/utils/calendarConfig.js
+++ b/src/pages/newCalendar/utils/calendarConfig.js
@@ -136,3 +136,65 @@ export const patientList = [
     choice: false,
   },
 ];
+export const patientData = {
+  basic: {
+    full_name: "",
+    birth_date: null,
+    priority: {
+      id: null,
+      label: "",
+    },
+    contacts: [
+      {
+        kind: {
+          id: "TELEGRAM",
+          icon: "app:icon-tg",
+        },
+        username: "",
+      },
+    ],
+  },
+  identity_document: {
+    pass: {
+      series_number: "",
+      issued_by_org: "",
+      issued_by_date: null,
+      issued_by_org_code: "",
+    },
+    snils: {
+      kind: "СНИЛС",
+      number: "",
+    },
+    inn: {
+      kind: "ИНН",
+      number: "",
+    },
+  },
+  phone: { username: "" },
+  email: { username: "" },
+  addresses: {},
+  priorityList: [
+    {
+      id: 1,
+      label: "Высокий",
+    },
+    {
+      id: 2,
+      label: "Средний",
+    },
+    {
+      id: 3,
+      label: "Низкий",
+    },
+    {
+      id: 4,
+      label: "-",
+    },
+  ],
+  statuses: [
+    { name: "Отказ", icon: rejected, check: false },
+    { name: "Не принят", icon: not_accepted, check: true },
+    { name: "На приеме", icon: reception, check: false },
+    { name: "Принят", icon: accepted, check: false },
+  ],
+};