create event

2023-08-02 03:10:43 +03:00
parent 9d378c1e62
commit ec4cbe35de
4 changed files with 113 additions and 63 deletions
--- a/src/components/base/BaseInputWithSearch.vue
+++ b/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: {
-      immediate: true,
-      handler(val) {
-        if (!val) return;
+    fullName(val) {
+      if (!val || val === this.pickedFullName) 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");
--- a/src/pages/newCalendar/TheCalendar.vue
+++ b/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>
--- a/src/pages/newCalendar/components/CreateEventForm.vue
+++ b/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() {},
 };
--- a/src/pages/newCalendar/components/HeaderRecordForm.vue
+++ b/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
-        .text.font-semibold Статус:
-        .flex.gap-x-1
-          .input.flex.items-center.pl-4.gap-x-1.rounded-md
-            img(:src="currentStatus.icon")
-            .dark-blue.font-medium {{currentStatus.name}}
-          q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
-            q-icon.icon(name="app:folder", size="20px")
-            q-menu(:offset="[140, 8]")
-              .flex.p-2.flex-col
-                .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
-                  v-for="status in 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.gap-x-1.rounded-md
+      //      img(:src="currentStatus.icon")
+      //      .dark-blue.font-medium {{currentStatus.name}}
+      //    q-btn.change.flex.w-7.h-7.rounded-md(dense, padding="4px 4px")
+      //      q-icon.icon(name="app:folder", size="20px")
+      //      q-menu(:offset="[140, 8]")
+      //        .flex.p-2.flex-col
+      //          .status.flex.items-center.gap-x-1.font-medium.text-smm.rounded.h-7(
+      //            v-for="status in 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
@@ -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: {
-    closeModalTime() {
-      this.isShowTime = false;
+  computed: {
+    returnData() {
+      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 = "") {
-    //   const [start = "", end = ""] = value.split(" - ");
-    //   this.validateTime(start);
-    //   this.times = {
-    //     to: this.validateTime(end),
-    //     from: this.validateTime(start),
-    //   };
-    // },
-    // validateTime(value = "") {
-    //   const [h, m = "00"] = value.split(":");
-    //   return moment(`${h}:${m}`, "HH:mm").format("HH:mm");
-    // },
+    validateTimeString(value = "") {
+      const [start = "", end = ""] = value.split(" - ");
+      this.validateTime(start);
+      return {
+        end: this.validateTime(end),
+        start: this.validateTime(start),
+      };
+    },
+    validateTime(value = "") {
+      const [h, m = "00"] = value.split(":");
+      return moment(`${h}:${m}`, "HH:mm");
+    },
+  },
+  watch: {
+    returnData(val) {
+      this.value = val;
+    },
  },
 };
 </script>