create event

src/components/base/BaseInputWithSearch.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 .flex
   .col
-    base-input(v-model="fullName", debounce="1000")
+    base-input(v-model="fullName", debounce="500", size="M" )
     .state(v-if="showMessageBar")
       .row
         .col {{ message }}
@@ -30,7 +30,7 @@ export default {
     BaseInput,
   },
   mixins: [v_model],
-  emits: ["createPerson", "update:modelValue"],
+  emits: ["createPerson"],
   data() {
     return {
       fullName: "",
@@ -39,22 +39,33 @@ export default {
       candidates: [],
     };
   },
+  computed: {
+    pickedFullName() {
+      return (
+        this.value.last_name +
+        " " +
+        this.value.first_name +
+        " " +
+        this.value.patronymic
+      );
+    },
+  },
   watch: {
-    fullName: {
+    fullName(val) {
-      immediate: true,
+      if (!val || val === this.pickedFullName) return;
-      handler(val) {
-        if (!val) return;
       fetchWrapper.get(`persons/?full_name=${val}`).then((result) => {
         this.candidates = result;
         this.showMessageBar = true;
         this.message = `Нужный ${val} не найден?`;
       });
     },
+    value() {
+      this.fullName = this.pickedFullName;
     },
   },
   methods: {
     pickPerson(person) {
-      this.$emit("update:modelValue", { ...person });
+      this.value = { ...person };
     },
     createPerson() {
       this.$emit("createPerson");

src/pages/newCalendar/TheCalendar.vue

@@ -4,7 +4,7 @@
     calendar-open-sidebar(v-else, :open-sidebar="openSidebar", :create-form="createForm")
     calendar-wrapper.ml-2(:open-sidebar="isOpen")
     base-modal(v-model="isShowForm", title="Создание записи <Переделка>", modal-padding)
-      create-event-form(v-model="isShowForm", :close-form="closeForm")
+      create-event-form(:close-form="closeForm")
     base-modal(v-model="previewVisibility", :hideHeader="true", :modalPadding="true")
       calendar-record-preview(v-model:preview-visibility="previewVisibility")
 </template>

src/pages/newCalendar/components/CreateEventForm.vue

@@ -4,31 +4,31 @@
     :current-status="currentStatus",
     :statuses="patientData.statuses",
     :choice-status="choiceStatus"
+    v-model="time"
   )
   base-input-with-search(v-model="patient", @createPerson="createPerson")
-  .text {{ patient }}
   .flex.flex-col.flex-auto.l.gap-y-8
     .wrapper-info.h-full
       .grid.grid-cols-2.gap-x-4.gap-y-6
-        base-input-date(
-          v-model="patient",
-          size="M",
-          important,
-          label="Дата рождения",
-          placeholder="Дата рождения"
-        )
         base-input(
-          v-model="patient",
+          v-model="phone",
           placeholder="+7 (915) 644–92–23",
           mask="+7 (###) ###-##-##",
           label="Номер телефона",
           size="M",
           important
         )
+        base-input-date(
+          v-model="birth_date",
+          size="M",
+          important,
+          label="Дата рождения",
+          placeholder="Дата рождения"
+        )
 
 .footer.flex.gap-2
   base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
-  base-button(width="168px", label="Создать запись", @click="closeForm", disabled)
+  base-button(width="168px", label="Создать запись", @click="createEvent")
 </template>
 
 <script>
@@ -37,6 +37,9 @@ import { patientData } from "@/pages/newCalendar/utils/calendarConfig.js";
 import HeaderRecordForm from "./HeaderRecordForm.vue";
 import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 import BaseButton from "@/components/base/BaseButton.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper";
 
 export default {
   name: "CreateEventForm",
@@ -45,12 +48,16 @@ export default {
     HeaderRecordForm,
     BaseButton,
     BaseInputWithSearch,
+    BaseInput,
+    BaseInputDate,
   },
   props: { isShowForm: Boolean, closeForm: Function },
   data() {
     return {
       patient: {},
-
+      phone: "",
+      birth_date: "",
+      time: {},
       patientData: patientData,
       currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
     };
@@ -64,6 +71,18 @@ export default {
     choiceStatus(e) {
       this.currentStatus = e;
     },
+    async createEvent() {
+      const event = await fetchWrapper.post("events", {
+        start: this.time.start.toISOString(),
+        end: this.time.end.toISOString(),
+        person: {
+          id: this.patient.id,
+        },
+        medic_id: "a6195732-ac98-4f07-8916-4881eca69b7d",
+      });
+
+      console.log(event);
+    },
   },
   mounted() {},
 };

src/pages/newCalendar/components/HeaderRecordForm.vue

@@ -1,23 +1,23 @@
 <template lang="pug">
   .flex.gap-x-10
     .flex.flex-col.gap-y-4.text-smm
-      .flex.gap-x-3.items-center
+      //.flex.gap-x-3.items-center
-        .text.font-semibold Статус:
+      //  .text.font-semibold Статус:
-        .flex.gap-x-1
+      //  .flex.gap-x-1
-          .input.flex.items-center.pl-4.gap-x-1.rounded-md
+      //    .input.flex.items-center.pl-4.gap-x-1.rounded-md
-            img(:src="currentStatus.icon")
+      //      img(:src="currentStatus.icon")
-            .dark-blue.font-medium {{currentStatus.name}}
+      //      .dark-blue.font-medium {{currentStatus.name}}
-          q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
+      //    q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
-            q-icon.icon(name="app:folder", size="20px")
+      //      q-icon.icon(name="app:folder", size="20px")
-            q-menu(:offset="[140, 8]")
+      //      q-menu(:offset="[140, 8]")
-              .flex.p-2.flex-col
+      //        .flex.p-2.flex-col
-                .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+      //          .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
-                  v-for="status in statuses",
+      //            v-for="status in statuses",
-                  @click="choiceStatus(status)",
+      //            @click="choiceStatus(status)",
-                  v-close-popup
+      //            v-close-popup
-                )
+      //          )
-                  img(:src="status.icon")
+      //            img(:src="status.icon")
-                  span {{status.name}}
+      //            span {{status.name}}
       .flex.gap-x-3.items-center
         .text.font-semibold Дата:
         .flex.gap-x-1
@@ -35,7 +35,7 @@
       .flex.gap-x-3.items-center
         .text.font-semibold Время:
         .flex.gap-x-1
-          base-input.input.no-border(size="XS", mask="##:## - ##:##")
+          base-input.input.no-border(size="XS", mask="##:## - ##:##", v-model="times" )
     .flex.h-14.gap-x-3.items-center.text-smm
       .text.font-semibold Медкарта:
       .flex.gap-x-1
@@ -67,6 +67,7 @@ import { patientList } from "@/pages/newCalendar/utils/calendarConfig.js";
 import { trimName } from "@/pages/newCalendar/utils/calendarFunctions.js";
 import * as moment from "moment/moment";
 import BaseInput from "@/components/base/BaseInput.vue";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "HeaderRecordForm",
@@ -77,6 +78,7 @@ export default {
     BaseTimeModal,
     MedcardsModal,
   },
+  mixins: [v_model],
   props: { currentStatus: Object, statuses: Array, choiceStatus: Function },
   data() {
     return {
@@ -85,7 +87,7 @@ export default {
       isShowTime: false,
       isShowMedcards: false,
       patients: patientList.find(({ id }) => id === 2).data,
-      times: { from: "08:30", to: "10:30" },
+      times: "",
       data: [
         {
           start: "8:00",
@@ -100,10 +102,23 @@ export default {
       trimPatientName: trimName,
     };
   },
-  methods: {
+  computed: {
-    closeModalTime() {
+    returnData() {
-      this.isShowTime = false;
+      const times = this.validateTimeString(this.times);
+
+      return {
+        start: this.currentDate
+          .clone()
+          .hours(times.start.hours())
+          .minutes(times.start.minutes()),
+        end: this.currentDate
+          .clone()
+          .hours(times.end.hours())
+          .minutes(times.end.minutes()),
+      };
     },
+  },
+  methods: {
     closeModalMedcards() {
       this.isShowMedcards = false;
     },
@@ -111,18 +126,23 @@ export default {
       this.isShowMedcards = false;
       this.patient = medcard;
     },
-    // validateTimeString(value = "") {
+    validateTimeString(value = "") {
-    //   const [start = "", end = ""] = value.split(" - ");
+      const [start = "", end = ""] = value.split(" - ");
-    //   this.validateTime(start);
+      this.validateTime(start);
-    //   this.times = {
+      return {
-    //     to: this.validateTime(end),
+        end: this.validateTime(end),
-    //     from: this.validateTime(start),
+        start: this.validateTime(start),
-    //   };
+      };
-    // },
+    },
-    // validateTime(value = "") {
+    validateTime(value = "") {
-    //   const [h, m = "00"] = value.split(":");
+      const [h, m = "00"] = value.split(":");
-    //   return moment(`${h}:${m}`, "HH:mm").format("HH:mm");
+      return moment(`${h}:${m}`, "HH:mm");
-    // },
+    },
+  },
+  watch: {
+    returnData(val) {
+      this.value = val;
+    },
   },
 };
 </script>