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

src/pages/newCalendar/components/CalendarOpenSidebar.vue

@@ -13,6 +13,7 @@
         color="primary",
         size="16px",
         label="Создать запись",
+        @click="createForm",
         no-caps,
         icon="add",
         :style="{width: '100%', height: '40px'}",
@@ -82,7 +83,7 @@ import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 
 export default {
   name: "CalendarOpenSidebar",
-  props: { openSidebar: Function },
+  props: { openSidebar: Function, createForm: Function },
   components: { BaseInput },
   data() {
     return {

src/pages/newCalendar/components/CalendarSidebar.vue

@@ -9,7 +9,7 @@
       )
         img(:src="arrow")
     .button.flex      
-      q-btn(color="primary", dense, padding="14px")
+      q-btn(color="primary", dense, padding="14px", @click="createForm")
         q-icon(name="app:icon-plus", size="12px")
     .button.flex
       q-btn(dense, style="color: var(--font-grey-color)", padding="0px")
@@ -30,7 +30,7 @@ import round from "@/assets/icons/status_round.svg";
 
 export default {
   name: "CalendarSidebar",
-  props: { openSidebar: Function },
+  props: { openSidebar: Function, createForm: Function },
   data() {
     return { arrow, group, medcard, round };
   },

src/pages/newCalendar/components/RecordCreationForm.vue

@@ -0,0 +1,105 @@
+<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
+</template>
+
+<script>
+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";
+
+export default {
+  name: "RecordCreationForm",
+  components: { BaseModal },
+  props: { isShowForm: Boolean },
+  data() {
+    return { noname, folder, time, calendar, isPhoto: false };
+  },
+  methods: {
+    changePhoto() {
+      this.isPhoto = true;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.input
+  width: 200px
+  background: var(--bg-light-grey)
+  border-radius: 6px
+
+.text-input
+  color: var(--font-dark-blue-color)
+
+.name-date
+  color: var(--font-grey-color)
+
+.text
+  color: var(--font-grey-color)
+  width: 76px
+
+.change
+  background: var(--bg-light-grey)
+  border-radius: 6px
+  color: var(--font-grey-color)
+
+.name
+  background: var(--bg-light-grey)
+  border-radius: 6px
+  border-bottom-color: var(--border-light-grey-color)
+  border-bottom-width: 4px
+  width: 200px
+
+.photo
+  background: var(--border-light-grey-color)
+  border-radius: 50%
+
+.services
+  background: var(--bg-light-grey)
+  border-radius: 6px
+  height: 28px
+  width: 560px
+</style>