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

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>