VIP search fullname

src/components/base/BaseInputWithSearch.vue

@@ -0,0 +1,79 @@
+<template lang="pug">
+.flex 
+  .col
+    base-input(v-model="fullName", debounce="1000")
+    .state(v-if="showMessageBar")
+      .row
+        .col {{ message }}
+        .col
+          q-btn(
+            @click="createPerson" 
+          )
+            q-icon(name="app:icon-plus", size="12px", left)
+            span Создать
+    .candidates
+      .row.w-full(
+        v-for="candidate in candidates", 
+        key="candidate.id",
+        @click="pickPerson(candidate)"
+      )
+        .col {{ candidate.last_name + ' ' + candidate.first_name + ' ' + candidate.patronymic }}
+</template>
+
+<script>
+import BaseInput from "./BaseInput.vue";
+import { fetchWrapper } from "@/shared/fetchWrapper";
+import { v_model } from "@/shared/mixins/v-model";
+export default {
+  name: "BaseInputWithSearch",
+  components: {
+    BaseInput,
+  },
+  mixins: [v_model],
+  emits: ["createPerson", "update:modelValue"],
+  data() {
+    return {
+      fullName: "",
+      message: "",
+      showMessageBar: true,
+      candidates: [],
+    };
+  },
+  watch: {
+    fullName: {
+      immediate: true,
+      handler(val) {
+        if (!val) return;
+        fetchWrapper.get(`persons/?full_name=${val}`).then((result) => {
+          this.candidates = result;
+          this.showMessageBar = true;
+          this.message = `Нужный ${val} не найден?`;
+        });
+      },
+    },
+  },
+  methods: {
+    pickPerson(person) {
+      this.$emit("update:modelValue", { ...person });
+    },
+    createPerson() {
+      this.$emit("createPerson");
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.candidates
+  max-height: 400px
+  overflow-y: auto
+
+  .row
+    border: 1px solid black
+    cursor: pointer
+    &:hover
+      background: gray
+
+.state
+  background: yellow
+</style>

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)
-      record-creation-form(v-model="isShowForm", :close-form="closeForm")
+      create-event-form(v-model="isShowForm", :close-form="closeForm")
     base-modal(v-model="previewVisibility", :hideHeader="true", :modalPadding="true")
       calendar-record-preview(v-model:preview-visibility="previewVisibility")
 </template>
@@ -13,7 +13,7 @@
 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 CreateEventForm from "@/pages/newCalendar/components/CreateEventForm";
 import * as moment from "moment/moment";
 import BaseModal from "@/components/base/BaseModal.vue";
 import CalendarRecordPreview from "./components/CalendarRecordPreview.vue";
@@ -24,7 +24,7 @@ export default {
     CalendarSidebar,
     CalendarOpenSidebar,
     CalendarWrapper,
-    RecordCreationForm,
+    CreateEventForm,
     BaseModal,
     CalendarRecordPreview,
   },

src/pages/newCalendar/components/CreateEventForm.vue

@@ -0,0 +1,128 @@
+<template lang="pug">
+.flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
+  header-record-form(
+    :current-status="currentStatus",
+    :statuses="patientData.statuses",
+    :choice-status="choiceStatus"
+  )
+  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",
+          placeholder="+7 (915) 644–92–23",
+          mask="+7 (###) ###-##-##",
+          label="Номер телефона",
+          size="M",
+          important
+        )
+       
+.footer.flex.gap-2
+  base-button(type="secondary", label="Отменить", width="126px", @click="closeForm")
+  base-button(width="168px", label="Создать запись", @click="closeForm", disabled)
+</template>
+
+<script>
+import BaseInputWithSearch from "@/components/base/BaseInputWithSearch.vue";
+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";
+
+export default {
+  name: "CreateEventForm",
+  components: {
+    BaseCalendar,
+    HeaderRecordForm,
+    BaseButton,
+    BaseInputWithSearch,
+  },
+  props: { isShowForm: Boolean, closeForm: Function },
+  data() {
+    return {
+      patient: {},
+
+      patientData: patientData,
+      currentStatus: patientData.statuses.find((e) => e.name === "Не принят"),
+    };
+  },
+  computed: {},
+  methods: {
+    createPerson() {
+      alert("crea");
+    },
+
+    choiceStatus(e) {
+      this.currentStatus = e;
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style lang="sass" scoped>
+.dark-blue
+  color: var(--font-dark-blue-color)
+  min-width: 50px
+
+.text
+  color: var(--font-grey-color)
+  width: 76px
+
+.change
+  background: var(--bg-light-grey)
+  color: var(--font-grey-color)
+
+.services
+  background: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  width: 560px
+
+.service
+  display: -webkit-box
+  overflow: hidden
+
+.gradient
+  width: 10%
+  height: 28px
+  right: 0
+
+.other-serivices
+  width: 474px
+  padding: 4px
+  border: 1px solid var(--border-light-grey-color)
+  background: var(--default-white)
+
+.other
+  width: 46px
+  background: var(--bg-light-grey)
+
+.price
+  background: var(--bg-light-grey)
+  width: 82px
+  color: var(--font-grey-color)
+
+.title-info
+  color: var(--font-grey-color)
+  border-bottom: 1.5px solid var(--font-grey-color)
+  &:hover
+    color: var(--btn-blue-color)
+    border-bottom: 1.5px solid var(--btn-blue-color)
+  &.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
+</style>

src/pages/newCalendar/components/del_RecordCreationForm copy.vue

@@ -6,7 +6,7 @@
       :choice-status="choiceStatus"
     )
     .flex.items-center.gap-x-3.text-smm
-      .text.font-semibold Услуги:
+      .text.font-semibold Жалобы:
       .flex.gap-x-1
         .services.flex.items-center.px-4.font-medium.text-smm.gap-x-1.h-9.rounded-md(
           :class="{'other-serivices': services.length}"