From 614fa59f600ceb140e6458bba45599d562a4fabf Mon Sep 17 00:00:00 2001
From: kandrusyak <kandrusyak@inno.tech>
Date: Tue, 14 Feb 2023 18:51:45 +0300
Subject: [PATCH] finished modal movement

---
 .../Notifications/TheNotificationProvider.vue |   4 +-
 src/components/TheHeader.vue                  |   5 -
 src/components/base/BaseClientFormCreate.vue  |   9 +-
 src/components/base/BaseModal.vue             |  23 ++-
 src/pages/calendar/TheCalendar.vue            |   2 +-
 .../components/CalendarFormAddEvent.vue       | 143 +++++++++---------
 6 files changed, 90 insertions(+), 96 deletions(-)

diff --git a/src/components/Notifications/TheNotificationProvider.vue b/src/components/Notifications/TheNotificationProvider.vue
index 27455c7..4002884 100644
--- a/src/components/Notifications/TheNotificationProvider.vue
+++ b/src/components/Notifications/TheNotificationProvider.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   teleport(:to="appContainer")
-  .absolute.bottom-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
+  .absolute.top-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
     .pt-32(v-if="displayPadding")
     .flex.gap-2.flex-col.relative
       transition-group(name="list", @before-leave="displayPadding = true", @after-leave="displayPadding = false")
@@ -54,7 +54,7 @@ export default {
 .list-enter-from,
 .list-leave-to {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(-30px);
   pointer-events: none;
 }
 </style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index 04cdfa2..1be383d 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -155,8 +155,3 @@ export default {
   border-radius: 4px
   background-color: var(--default-white)
 </style>
-
-<style lang="sass">
-.q-menu
-  z-index: 40 !important
-</style>
diff --git a/src/components/base/BaseClientFormCreate.vue b/src/components/base/BaseClientFormCreate.vue
index 7c955c9..70383e7 100644
--- a/src/components/base/BaseClientFormCreate.vue
+++ b/src/components/base/BaseClientFormCreate.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  base-modal(v-model="value", hide-overlay, title="Создание клиента", draggable )
+  base-modal(v-model="value", hide-overlay, title="Создание клиента", draggable, height="696px" )
     .wrapper-create.gap-y-8.flex.flex-col.pt-8
       .flex.gap-x-4.h-fit
         .flex.gap-x-3.w-full
@@ -525,11 +525,4 @@ export default {
   background-repeat: no-repeat
   background-position: center
   background-image: url(@/assets/icons/download.svg)
-
-.modal
-  max-width: 1220px
-  max-height: 794px
-  width: 1220px
-  height: 794px
-  background-color: var(--default-white)
 </style>
diff --git a/src/components/base/BaseModal.vue b/src/components/base/BaseModal.vue
index 2573d86..5bbc342 100644
--- a/src/components/base/BaseModal.vue
+++ b/src/components/base/BaseModal.vue
@@ -5,7 +5,7 @@
     @hide="onHide",
     ref="dialog"
     )
-    .base-content(ref="contentRef", :style="contentStyles")
+    .base-content(:class="{'draggable': draggable}", ref="contentRef", :style="{...contentStyles, height}")
       q-resize-observer(@resize="onResize")
       .base-header(draggable, :class="{'cursor-move': draggable}", ref="headerRef")
         .header-title.text {{ title }}
@@ -25,13 +25,13 @@ export default {
     showCloseIcon: Boolean,
     draggable: Boolean,
     hideOverlay: Boolean,
+    height: {
+      type: String,
+    },
   },
   data() {
     return {
-      contentStyles: {
-        top: 0,
-        left: 0,
-      },
+      contentStyles: {},
     };
   },
   methods: {
@@ -64,6 +64,8 @@ export default {
       )
         this.contentStyles.top =
           parseInt(originalStyles.top) + e.movementY + "px";
+      this.contentStyles.bottom = "unset";
+      this.contentStyles.right = "unset";
     },
 
     onLetGo() {
@@ -106,6 +108,12 @@ export default {
     } else backdropEl.style.background = "rgba(0,0,0,0)";
     console.log("123");
   },
+  watch: {
+    value(val) {
+      if (val || !this.draggable) return;
+      this.contentStyles = {};
+    },
+  },
 };
 </script>
 
@@ -125,7 +133,10 @@ export default {
   background-color: var(--default-white)
   box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   border-radius: 4px
-  position: relative
+  &.draggable
+    position: fixed
+    bottom: 10px
+    right: 10px
 
 .header-title
   font-weight: 700
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 7f330a9..bdc820a 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -26,7 +26,7 @@
     )
     transition(name="form")
       calendar-form-add-event(
-        v-if="isOpenForm",
+        v-model="isOpenForm"
         :close-form="closeFormCreateEvent",
         :selected-event-data="selectedEvent",
         :event-statuses="eventStatuses",
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index c8da0ae..35e4398 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -1,76 +1,71 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-6.bottom-6(
-    v-click-outside="clearForm"
-  )
-    .flex.justify-between
-      span.title.text-xl.font-bold {{!selectedEventData.id ? "Запись на прием" : "Изменение записи"}}
-      .flex.pt-2
-        .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
-    .flex.flex-col.gap-y-8
-      base-select(
-        v-if="selectedEventData.id"
-        v-model="status",
-        :items="eventStatuses",
-        label="Статус приема"
+  base-modal(v-model="value", :title="!selectedEventData.id ? 'Запись на прием' : 'Изменение записи'", draggable, hide-overlay )
+    .event-form.flex.flex-col.gap-y-6.pt-8
+      .flex.flex-col.gap-y-8
+        base-select(
+          v-if="selectedEventData.id"
+          v-model="status",
+          :items="eventStatuses",
+          label="Статус приема"
+        )
+        base-input(
+          v-else,
+          disabled,
+          v-model="status.label",
+          label="Статус приема",
+          outlined
+        )
+        base-select(
+          :items="ownersList",
+          v-model="employees.employee",
+          placeholder="Выберите сотрудника"
+          label="Сотрудник"
+        )
+        base-select(
+          :items="membersList",
+          v-model="members.person",
+          placeholder="Выберите клиента",
+          label="Клиент"
+        )
+      .flex.gap-x-4
+        base-input(
+          v-model="eventDate",
+          label="Дата",
+          type="date",
+          outlined
+        )
+        .flex.gap-x-2.items-center.justify-between
+          base-input(
+            type="time",
+            v-model="startTime",
+            label="Начало",
+            outlined
+          )
+          span.mt-4 —
+          base-input(
+            type="time",
+            v-model="endTime",
+            label="Конец",
+            outlined
+          )
+      q-btn.create-button(
+        v-if="!selectedEventData.id",
+        label="Создать событие",
+        no-caps,
+        color="primary",
+        padding="10px 22px",
+        :disabled="disabledCreateButton",
+        @click="sendEventData",
       )
-      base-input(
+      q-btn.update-button(
         v-else,
-        disabled,
-        v-model="status.label",
-        label="Статус приема",
-        outlined
+        label="Сохранить",
+        no-caps,
+        color="primary",
+        padding="10px 22px",
+        :disabled="disabledUpdateButton",
+        @click="updateEventData",
       )
-      base-select(
-        :items="ownersList",
-        v-model="employees.employee",
-        placeholder="Выберите сотрудника"
-        label="Сотрудник"
-      )
-      base-select(
-        :items="membersList",
-        v-model="members.person",
-        placeholder="Выберите клиента",
-        label="Клиент"
-      )
-    .flex.gap-x-4
-      base-input(
-        v-model="eventDate",
-        label="Дата",
-        type="date",
-        outlined
-      )
-      .flex.gap-x-2.items-center.justify-between
-        base-input(
-          type="time",
-          v-model="startTime",
-          label="Начало",
-          outlined
-        )
-        span.mt-4 —
-        base-input(
-          type="time",
-          v-model="endTime",
-          label="Конец",
-          outlined
-        )
-    q-btn.create-button(
-      v-if="!selectedEventData.id",
-      label="Создать событие",
-      no-caps,
-      color="primary",
-      padding="10px 22px",
-      :disabled="disabledCreateButton",
-      @click="sendEventData",
-    )
-    q-btn.update-button(
-      v-else,
-      label="Сохранить",
-      no-caps,
-      color="primary",
-      padding="10px 22px",
-      :disabled="disabledUpdateButton",
-      @click="updateEventData",
-    )
 </template>
 
 <script>
@@ -81,14 +76,18 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import * as moment from "moment/moment";
 import { statusesDictionary } from "../utils/statusesDictionary.js";
+import BaseModal from "@/components/base/BaseModal.vue";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "FormChangeEvent",
   components: {
+    BaseModal,
     BaseSelect,
     BaseInput,
     TheNotificationProvider,
   },
+  mixins: [v_model],
   emits: ["clear-selected-event-data", "close-change-form"],
   props: {
     closeForm: Function,
@@ -594,11 +593,7 @@ export default {
 
 <style lang="sass" scoped>
 .event-form
-  width: 634px
-  background-color: var(--default-white)
-  box-shadow: var(--default-shadow)
-  border-radius: 4px
-  z-index: 5
+  width: 550px
 
 .form-item
   border-radius: 4px