Merge branch 'ASTRA-108' into 'master'

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

See merge request andrusyakka/urban-couscous!409

src/assets/icons/calendar-grey.svg

@@ -0,0 +1,4 @@
+<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="M3.33398 6.55396V16.6666C3.33398 17.1268 3.70708 17.4999 4.16732 17.4999H15.834C16.2942 17.4999 16.6673 17.1268 16.6673 16.6666V6.55396H3.33398Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.97035 1.875C7.31553 1.875 7.59535 2.15482 7.59535 2.5V3.49662H12.81V2.5C12.81 2.15482 13.0898 1.875 13.435 1.875C13.7802 1.875 14.06 2.15482 14.06 2.5V3.49662H15.834C16.6394 3.49662 17.2923 4.14954 17.2923 4.95495V16.6667C17.2923 17.4721 16.6394 18.125 15.834 18.125H4.16732C3.3619 18.125 2.70898 17.4721 2.70898 16.6667V4.95495C2.70898 4.14954 3.3619 3.49662 4.16732 3.49662H6.34535V2.5C6.34535 2.15482 6.62517 1.875 6.97035 1.875ZM4.16732 4.74662C4.05226 4.74662 3.95898 4.8399 3.95898 4.95495V5.92905H16.0423V4.95495C16.0423 4.8399 15.949 4.74662 15.834 4.74662H4.16732ZM16.0423 7.17905H3.95898V16.6667C3.95898 16.7817 4.05226 16.875 4.16732 16.875H15.834C15.949 16.875 16.0423 16.7817 16.0423 16.6667V7.17905ZM5.20898 9.53096C5.20898 9.18578 5.48881 8.90596 5.83398 8.90596H14.1673C14.5125 8.90596 14.7923 9.18578 14.7923 9.53096C14.7923 9.87614 14.5125 10.156 14.1673 10.156H5.83398C5.48881 10.156 5.20898 9.87614 5.20898 9.53096ZM5.20898 12.031C5.20898 11.6858 5.48881 11.406 5.83398 11.406H14.1673C14.5125 11.406 14.7923 11.6858 14.7923 12.031C14.7923 12.3761 14.5125 12.656 14.1673 12.656H5.83398C5.48881 12.656 5.20898 12.3761 5.20898 12.031ZM5.20898 14.531C5.20898 14.1858 5.48881 13.906 5.83398 13.906H14.1673C14.5125 13.906 14.7923 14.1858 14.7923 14.531C14.7923 14.8761 14.5125 15.156 14.1673 15.156H5.83398C5.48881 15.156 5.20898 14.8761 5.20898 14.531Z" fill="#9294A7"/>
+</svg>

src/assets/icons/folder.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="M1.875 5.00008C1.875 4.19467 2.52792 3.54175 3.33333 3.54175H7.57149C7.95826 3.54175 8.3292 3.69539 8.60269 3.96888L9.7812 5.1474C9.82027 5.18647 9.87326 5.20841 9.92851 5.20841H16.6667C17.4721 5.20841 18.125 5.86133 18.125 6.66675V15.0001C18.125 15.8055 17.4721 16.4584 16.6667 16.4584H3.33333C2.52792 16.4584 1.875 15.8055 1.875 15.0001V5.00008ZM3.33333 4.79175C3.21827 4.79175 3.125 4.88502 3.125 5.00008V7.70842H16.875V6.66675C16.875 6.55169 16.7817 6.45841 16.6667 6.45841H9.92851C9.54174 6.45841 9.1708 6.30477 8.89731 6.03128L7.7188 4.85277C7.67973 4.8137 7.62674 4.79175 7.57149 4.79175H3.33333ZM16.875 8.95842H3.125V15.0001C3.125 15.1151 3.21827 15.2084 3.33333 15.2084H16.6667C16.7817 15.2084 16.875 15.1151 16.875 15.0001V8.95842Z" fill="#9294A7"/>
+</svg>

src/assets/icons/noname.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 19.5C3.25 16.8766 5.37665 14.75 8 14.75H16C18.6234 14.75 20.75 16.8766 20.75 19.5V20.5C20.75 21.4665 19.9665 22.25 19 22.25H5C4.0335 22.25 3.25 21.4665 3.25 20.5V19.5ZM8 16.25C6.20507 16.25 4.75 17.7051 4.75 19.5V20.5C4.75 20.6381 4.86193 20.75 5 20.75H19C19.1381 20.75 19.25 20.6381 19.25 20.5V19.5C19.25 17.7051 17.7949 16.25 16 16.25H8Z" fill="#9294A7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4219 4.82209C10.2271 5.13736 10.2084 5.57049 10.2084 6.13572C10.2084 6.54993 9.87262 6.88573 9.45841 6.88574C9.0442 6.88574 8.7084 6.54996 8.7084 6.13575C8.7084 6.11806 8.70837 6.09983 8.70834 6.0811C8.70766 5.58919 8.70648 4.74461 9.14584 4.03359C9.65552 3.20877 10.6058 2.75537 12.062 2.75537C12.8526 2.75537 13.497 2.87673 14.0038 3.13963C14.5331 3.4142 14.8645 3.81883 15.0492 4.27838C15.2238 4.71256 15.2557 5.16634 15.2565 5.54119C15.2569 5.73193 15.2489 5.91988 15.2416 6.0857L15.2412 6.09597C15.2339 6.26375 15.2276 6.40616 15.2276 6.53828C15.2277 7.12693 14.9287 7.55796 14.6077 7.85296C14.3022 8.13366 13.9203 8.34403 13.6226 8.50269C13.57 8.53074 13.5199 8.55723 13.4723 8.58244C13.2149 8.71869 13.0281 8.81754 12.8856 8.92303C12.8516 8.94822 12.8279 8.96814 12.812 8.98287V9.71454C12.812 10.1288 12.4762 10.4645 12.062 10.4645C11.6478 10.4645 11.312 10.1288 11.312 9.71454V8.90036C11.312 8.3016 11.7164 7.92224 11.9933 7.71733C12.2359 7.53773 12.5434 7.37588 12.7943 7.24385C12.8371 7.22133 12.8782 7.19967 12.9171 7.17895C13.2233 7.01574 13.4453 6.88399 13.5928 6.74848C13.7247 6.62727 13.7276 6.56799 13.7276 6.53838C13.7276 6.37261 13.7352 6.20069 13.742 6.04433C13.7424 6.03627 13.7427 6.02826 13.7431 6.02028C13.7504 5.85119 13.7568 5.69592 13.7565 5.54436C13.7559 5.2346 13.7257 5.00743 13.6575 4.83793C13.5996 4.69381 13.5076 4.57205 13.3131 4.47114C13.0961 4.35856 12.7162 4.25537 12.062 4.25537C10.9146 4.25537 10.5631 4.59353 10.4219 4.82209Z" fill="#9294A7"/>
+<path d="M12.7918 12.5C12.7918 12.9373 12.4373 13.2918 12 13.2918C11.5627 13.2918 11.2082 12.9373 11.2082 12.5C11.2082 12.0627 11.5627 11.7082 12 11.7082C12.4373 11.7082 12.7918 12.0627 12.7918 12.5Z" fill="#9294A7"/>
+</svg>

src/assets/icons/time.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="M10 3.125C6.20304 3.125 3.125 6.20304 3.125 10C3.125 13.797 6.20304 16.875 10 16.875C13.797 16.875 16.875 13.797 16.875 10C16.875 6.20304 13.797 3.125 10 3.125ZM1.875 10C1.875 5.51269 5.51269 1.875 10 1.875C14.4873 1.875 18.125 5.51269 18.125 10C18.125 14.4873 14.4873 18.125 10 18.125C5.51269 18.125 1.875 14.4873 1.875 10ZM10 6.04167C10.3452 6.04167 10.625 6.32149 10.625 6.66667V9.74112L12.1086 11.2247C12.3527 11.4688 12.3527 11.8645 12.1086 12.1086C11.8645 12.3527 11.4688 12.3527 11.2247 12.1086L9.55806 10.4419C9.44085 10.3247 9.375 10.1658 9.375 10V6.66667C9.375 6.32149 9.65482 6.04167 10 6.04167Z" fill="#9294A7"/>
+</svg>

src/components/base/BaseModal.vue

@@ -4,7 +4,7 @@
     @show="onShow",
     @hide="onHide",
     ref="dialog"
-    )
+  )
     .base-content(
       :class="{'draggable': draggable, 'base-content-default': !defaultPadding}",
       ref="contentRef",
@@ -165,4 +165,6 @@ export default {
 @media (min-width: 600px)
   .q-dialog__inner--minimized > div
     max-width: 100vh !important
+.q-dialog
+  font-feature-settings: 'pnum' on, 'lnum' on
 </style>

src/pages/newCalendar/TheCalendar.vue

@@ -1,29 +1,40 @@
 <template lang="pug">
   .w-full.flex
-    calendar-sidebar(v-if="!isOpen", :open-sidebar="openSidebar")
-    calendar-open-sidebar(v-else, :open-sidebar="openSidebar")
+    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")
 </template>
 
 <script>
 import CalendarSidebar from "@/pages/newCalendar/components/CalendarSidebar";
 import CalendarOpenSidebar from "@/pages/newCalendar/components/CalendarOpenSidebar";
 import CalendarWrapper from "@/pages/newCalendar/components/CalendarWrapper";
+import RecordCreationForm from "@/pages/newCalendar/components/RecordCreationForm";
 import * as moment from "moment/moment";
 
 export default {
   name: "TheCalendar",
-  components: { CalendarSidebar, CalendarOpenSidebar, CalendarWrapper },
+  components: {
+    CalendarSidebar,
+    CalendarOpenSidebar,
+    CalendarWrapper,
+    RecordCreationForm,
+  },
   data() {
     return {
       isOpen: false,
       currentDate: moment(),
+      isShowForm: false,
     };
   },
   methods: {
     openSidebar() {
       this.isOpen = !this.isOpen;
     },
+    createForm() {
+      this.isShowForm = true;
+    },
   },
 };
 </script>

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>