Merge pull request #208 from dderbentsov/UC-165

WIP Добавлено открытие формы от двойного клика

src/pages/calendar/TheCalendar.vue

@@ -4,7 +4,7 @@
       :url="url",
       :team-data="employeesData",
       :open-form-create="openFormCreateEvent",
-      :event-status="eventStatus",
+      :event-statuses="eventStatuses",
       @width="changeWidth",
     )
     calendar-schedule(
@@ -14,7 +14,7 @@
       :time-information="timeInformation",
       :events-data="eventsData",
       :sidebar-width="sidebarWidth",
-      :event-status="eventStatus",
+      :event-statuses="eventStatuses",
       :change-form-was-closed="changeFormWasClosed",
       @previous-date="switchPreviousDate",
       @next-date="switchNextDate",
@@ -22,7 +22,8 @@
       @open-change-form="openFormCreateEvent",
       @reset-change-form="resetChangeFormState",
       @selected-event="writeEventData",
-      @delete-event="openModal"
+      @delete-event="openModal",
+      @dblclick="openFormCreateEvent"
     )
     transition(name="form")
       calendar-form-add-event(
@@ -30,7 +31,7 @@
         :close-form="closeFormCreateEvent",
         :owners-data="employeesData",
         :selected-event-data="selectedEvent",
-        :event-status="eventStatus",
+        :event-statuses="eventStatuses",
         :time-information="timeInformation",
         @clear-selected-event-data="clearSelectedEvent",
         @close-change-form="setChangeFormState"
@@ -40,7 +41,7 @@
       title="Удаление события"
     ) 
       calendar-delete-modal(
-        :event-types="eventStatus",
+        :event-statuses="eventStatuses",
         :owner-event="selectedEvent",
         :close-modal="changeShowModal",
         @update-events="fetchEventsData"
@@ -82,7 +83,7 @@ export default {
       employeesData: [],
       isOpenForm: false,
       changeFormWasClosed: false,
-      eventStatus: [
+      eventStatuses: [
         {
           id: 0,
           label: "Планируется прием",

src/pages/calendar/components/CalendarColumn.vue

@@ -19,7 +19,7 @@
           :key="event.id + index",
           :id="event.id",
           :ownerEvent="event",
-          :event-status="eventStatus",
+          :event-statuses="eventStatuses",
           :style="eventCardPosition(event.start, event.end)",
           :change-form-was-closed="changeFormWasClosed",
           @selected-event="transmitEventData",
@@ -45,7 +45,7 @@ export default {
     dayEvents: Array,
     dayEndTime: Number,
     dayStartTime: Number,
-    eventStatus: Array,
+    eventStatuses: Array,
     changeFormWasClosed: Boolean,
     scheduleBodyRef: Node,
     url: String,

src/pages/calendar/components/CalendarDeleteModal.vue

@@ -4,7 +4,7 @@
     .card-container
       calendar-event-description-card(
         disabled,
-        :event-types="eventTypes",
+        :event-statuses="eventStatuses",
         :owner-event="ownerEvent"
       )
     .flex.gap-x-3.mt-6.font-semibold
@@ -35,7 +35,7 @@ export default {
   },
   props: {
     ownerEvent: Object,
-    eventTypes: {
+    eventStatuses: {
       type: Array,
       default() {
         return [];

src/pages/calendar/components/CalendarEventCard.vue

@@ -25,7 +25,7 @@
       calendar-event-description-card(
         v-if="isOpenDescriptionCard",
         :owner-event="ownerEvent",
-        :event-status="eventStatus",
+        :event-statuses="eventStatuses",
         @selected-event="transmitEventData",
         @close-description-card="closeDescriptionCard",
         @delete-event="transmitDeleteEvent",
@@ -41,7 +41,7 @@ export default {
   props: {
     changeFormWasClosed: Boolean,
     ownerEvent: Object,
-    eventStatus: {
+    eventStatuses: {
       type: Array,
       default() {
         return [];
@@ -102,59 +102,59 @@ export default {
     },
     themeColors() {
       switch (this.ownerEvent.status) {
-        case this.eventStatus[1].value:
+        case this.eventStatuses[1].value:
           return {
             "--bg-color": "var(--bg-event-grey-color-0)",
-            "--bg-active": this.eventStatus[1].color,
+            "--bg-active": this.eventStatuses[1].color,
             "--bg-hover": "var(--bg-event-grey-color-1)",
             "--font-color": "var(--font-black-color)",
             "--font-active-color": "var(--default-white)",
-            "--count-color": this.eventStatus[1].color,
+            "--count-color": this.eventStatuses[1].color,
           };
-        case this.eventStatus[2].value:
+        case this.eventStatuses[2].value:
           return {
             "--bg-color": "var(--bg-event-yellow-color-0)",
-            "--bg-active": this.eventStatus[2].color,
+            "--bg-active": this.eventStatuses[2].color,
             "--bg-hover": "var(--bg-event-yellow-color-1)",
             "--font-color": "var(--font-black-color)",
             "--font-active-color": "var(--font-black-color)",
             "--count-color": "var(--font-black-color)",
           };
-        case this.eventStatus[3].value:
+        case this.eventStatuses[3].value:
           return {
             "--bg-color": "var(--bg-event-orange-color-0)",
-            "--bg-active": this.eventStatus[3].color,
+            "--bg-active": this.eventStatuses[3].color,
             "--bg-hover": "var(--bg-event-orange-color-1)",
             "--font-color": "var(--font-black-color)",
             "--font-active-color": "var(--font-black-color)",
             "--count-color": "var(--font-black-color)",
           };
-        case this.eventStatus[4].value:
+        case this.eventStatuses[4].value:
           return {
             "--bg-color": "var(--bg-event-blue-color-0)",
-            "--bg-active": this.eventStatus[4].color,
+            "--bg-active": this.eventStatuses[4].color,
             "--bg-hover": "var(--bg-event-blue-color-1)",
             "--font-color": "var(--font-black-color)",
             "--font-active-color": "var(--default-white)",
-            "--count-color": this.eventStatus[4].color,
+            "--count-color": this.eventStatuses[4].color,
           };
-        case this.eventStatus[5].value:
+        case this.eventStatuses[5].value:
           return {
             "--bg-color": "var(--bg-event-green-color-0)",
-            "--bg-active": this.eventStatus[5].color,
+            "--bg-active": this.eventStatuses[5].color,
             "--bg-hover": "var(--bg-event-green-color-1)",
             "--font-color": "var(--font-black-color)",
             "--font-active-color": "var(--default-white)",
-            "--count-color": this.eventStatus[5].color,
+            "--count-color": this.eventStatuses[5].color,
           };
-        case this.eventStatus[6].value:
+        case this.eventStatuses[6].value:
           return {
             "--bg-color": "var(--bg-event-red-color-0)",
-            "--bg-active": this.eventStatus[6].color,
+            "--bg-active": this.eventStatuses[6].color,
             "--bg-hover": "var(--bg-event-red-color-1)",
             "--font-color": "var(--font-black-color)",
             "--font-active-color": "var(--default-white)",
-            "--count-color": this.eventStatuss[6].color,
+            "--count-color": this.eventStatuses[6].color,
           };
         default:
           return {

src/pages/calendar/components/CalendarEventDescriptionCard.vue

@@ -31,7 +31,7 @@ export default {
   name: "CalendarEventDescriptionCard",
   props: {
     ownerEvent: Object,
-    eventStatus: {
+    eventStatuses: {
       type: Array,
       default() {
         return [];
@@ -57,35 +57,35 @@ export default {
     },
     typeColor() {
       switch (this.ownerEvent.status) {
-        case this.eventStatus[1].value:
+        case this.eventStatuses[1].value:
           return {
             "--bg-color": "var(--bg-event-grey-color-0)",
-            "--font-color": this.eventStatus[1].color,
+            "--font-color": this.eventStatuses[1].color,
           };
-        case this.eventStatus[2].value:
+        case this.eventStatuses[2].value:
           return {
             "--bg-color": "var(--bg-event-yellow-color-0)",
             "--font-color": "var(--font-black-color)",
           };
-        case this.eventStatus[3].value:
+        case this.eventStatuses[3].value:
           return {
             "--bg-color": "var(--bg-event-orange-color-0)",
             "--font-color": "var(--font-black-color)",
           };
-        case this.eventStatus[4].value:
+        case this.eventStatuses[4].value:
           return {
             "--bg-color": "var(--bg-event-blue-color-0)",
-            "--font-color": this.eventStatus[4].color,
+            "--font-color": this.eventStatuses[4].color,
           };
-        case this.eventStatus[5].value:
+        case this.eventStatuses[5].value:
           return {
             "--bg-color": "var(--bg-event-green-color-0)",
-            "--font-color": this.eventStatus[5].color,
+            "--font-color": this.eventStatuses[5].color,
           };
-        case this.eventStatus[6].value:
+        case this.eventStatuses[6].value:
           return {
             "--bg-color": "var(--bg-event-red-color-0)",
-            "--font-color": this.eventStatus[6].color,
+            "--font-color": this.eventStatuses[6].color,
           };
         default:
           return {

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -3,26 +3,33 @@
     v-click-outside="clearForm"
   )
     .flex.justify-between
-      span.title.text-xl.font-bold {{!selectedEventData.id ? "Назначение события" : "Изменение события"}}
+      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
       .flex.flex-col.gap-y-2
-        span.text-xs.opacity-40.font-bold.leading-3 Вид события
+        span.text-xxs.opacity-40.font-bold.leading-3 Статус приема
         base-custom-select.select(
-          v-model="kind",
+          v-if="selectedEventData.id"
-          :items="eventStatus",
+          v-model="status",
-          placeholder="Вид события"
+          :items="eventStatuses",
+          placeholder="Статус приема"
+        )
+        base-input(
+          v-else,
+          disabled,
+          v-model:value="status.label"
         )
       .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Сотрудник
+        span.text-xxs.opacity-40.font-bold Сотрудник
         base-custom-select.select(
           :items="ownersList",
           v-model="employees.employee",
           placeholder="Выберите сотрудника"
         )
+        
       .flex.flex-col(class="gap-y-1.5")
-        span.text-sm Клиент
+        span.text-xxs.opacity-40.font-bold Клиент
         base-custom-select.select(
           :items="membersList",
           v-model="members.person",
@@ -32,18 +39,18 @@
       .flex.gap-x-4
         .flex.gap-x-2
           .flex.flex-col(class="gap-y-1.5")
-            span.text-xs.opacity-40.font-bold.leading-3 Дата
+            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Дата
             base-input-date.select(v-model:value="eventDate")
         .flex.gap-x-2.items-center
           .flex.flex-col(class="gap-y-1.5")
-            span.text-xs.opacity-40.font-bold.leading-3 Начало
+            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Начало
             base-input-time.item-input.text-base.select(
               v-model:value="startTime",
               :width-input="72"
             )
           span.mt-4 —
           .flex.flex-col(class="gap-y-1.5")
-            span.text-xs.opacity-40.font-bold.leading-3 Конец
+            span.text-xxs.opacity-40.font-bold.leading-3.font-bold Конец
             base-input-time.item-input.text-base.select(
               v-model:value="endTime",
               :width-input="72"
@@ -73,6 +80,7 @@ import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 import BaseButton from "@/components/base/BaseButton";
 import * as moment from "moment/moment";
+import { statusesDictionary } from "../utils/statusesDictionary.js";
 export default {
   name: "FormChangeEvent",
   components: {
@@ -99,7 +107,7 @@ export default {
         return {};
       },
     },
-    eventStatus: {
+    eventStatuses: {
       type: Array,
       default() {
         return [];
@@ -116,13 +124,14 @@ export default {
     return {
       EMPLOYEE_TYPE: "owner",
       MEMBER_TYPE: "primary",
+      EVENT_KIND: "Прием",
       eventData: {},
       startTime: "",
       endTime: "",
       members: {},
       employees: {},
       eventDate: "",
-      kind: "",
+      status: {},
       id: null,
       ifClearedForm: true,
       membersData: [],
@@ -170,7 +179,7 @@ export default {
         this.endTime &&
         this.members.person.label &&
         this.employees.employee.label &&
-        this.kind.label
+        this.status.label
       ) {
         return false;
       }
@@ -183,7 +192,7 @@ export default {
         this.eventDate === start.format("YYYY-MM-DD") &&
         this.startTime === start.format("HH:mm") &&
         this.endTime === end.format("HH:mm") &&
-        this.kind.label === this.selectedEventData.kind &&
+        this.status.label === this.selectedEventData.status &&
         this.employees.employee.id ===
           this.personId(this.selectedEventData.employees, "employee") &&
         this.members.person.id ===
@@ -258,14 +267,14 @@ export default {
         role: this.MEMBER_TYPE,
       };
     },
-    eventKind() {
+    eventStatus() {
-      return this.selectedEventData.kind
+      return this.selectedEventData.status
         ? {
-            label: this.selectedEventData.kind,
+            label: statusesDictionary[this.selectedEventData.status],
             id: null,
           }
         : {
-            label: "",
+            label: statusesDictionary["PLANNED"],
             id: null,
           };
     },
@@ -274,6 +283,11 @@ export default {
     },
   },
   methods: {
+    findStatus(value) {
+      return Object.keys(statusesDictionary).find(
+        (key) => statusesDictionary[key] === value
+      );
+    },
     checkTimeLimits(eventTime, scheduleTime, timeType) {
       if (timeType === "start")
         return (
@@ -354,7 +368,8 @@ export default {
       this.eventData = {
         start: this.mergeDate(this.eventDate, this.startTime),
         end: this.mergeDate(this.eventDate, this.endTime),
-        kind: this.kind.label,
+        status: this.findStatus(this.status.label),
+        kind: this.EVENT_KIND,
         employees: [
           this.findPerson(this.ownersData, this.employees, "employee"),
         ],
@@ -375,7 +390,7 @@ export default {
         this.eventData = {
           start: this.mergeDate(this.eventDate, this.startTime),
           end: this.mergeDate(this.eventDate, this.endTime),
-          kind: this.kind.label,
+          status: this.findStatus(this.status.label),
           employees: [
             this.findPerson(this.ownersData, this.employees, "employee"),
           ],
@@ -498,7 +513,7 @@ export default {
       handler(newDate) {
         if (newDate) {
           this.id = this.eventId;
-          this.kind = this.eventKind;
+          this.status = this.eventStatus;
           this.employees = this.eventEmployee;
           this.members = this.eventMember;
         }
@@ -561,7 +576,7 @@ export default {
 
 .select
   height: 40px
-  border: 2px solid var(--border-light-grey-color)
+  border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
 
 .update-button

src/pages/calendar/components/CalendarSchedule.vue

@@ -25,7 +25,7 @@
           :day-start-time="validateStartTime",
           :day-end-time="validateEndTime",
           :style="columnSize",
-          :event-status="eventStatus",
+          :event-statuses="eventStatuses",
           :change-form-was-closed="changeFormWasClosed",
           @selected-event="transmitEventData",
           @reset-change-form="transmitResetChangeForm",
@@ -97,7 +97,7 @@ export default {
         return [];
       },
     },
-    eventStatus: {
+    eventStatuses: {
       type: Array,
       default() {
         return [];

src/pages/calendar/components/CalendarSidebar.vue

@@ -19,7 +19,7 @@
           @click="openFormCreate",
           v-else
         ) Создать событие
-        calendar-sidebar-event(:is-open="isOpen", :event-status="eventStatus")
+        calendar-sidebar-event(:is-open="isOpen", :event-statuses="eventStatuses")
         calendar-sidebar-teammate(:team-data="teamData", :is-open="isOpen", :url="url")
         .button-wrapper.flex.justify-center.mb-23px
           base-button(
@@ -47,7 +47,7 @@ export default {
   props: {
     teamData: Array,
     openFormCreate: Function,
-    eventStatus: Array,
+    eventStatuses: Array,
     url: String,
   },
   data() {

src/pages/calendar/components/CalendarSidebarEvent.vue

@@ -3,7 +3,7 @@
     .flex.flex-col.items-center(v-if="!isOpen")
       base-button(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary)
       .flex.flex-col.gap-y-2.items-center.mt-4
-        .event.flex.items-center.justify-center(v-for="event in eventStatus" :key="event.id")
+        .event.flex.items-center.justify-center(v-for="event in eventStatuses" :key="event.id")
           .event-type(:style="{ background: event.color }")
     .flex.flex-col.gap-y-4.w-full(v-else)
       .flex.items-center.justify-between
@@ -16,7 +16,7 @@
           secondary
         )
       .flex.flex-col.gap-y-2
-        .relative.flex.items-center.gap-x-3.h-8(v-for="event in eventStatus")
+        .relative.flex.items-center.gap-x-3.h-8(v-for="event in eventStatuses")
           input.custom-input.py-2.pl-6.h-full.not-italic.font-medium.text-xxs(
             :placeholder="event.label"
             :key="event.id"
@@ -34,7 +34,7 @@ export default {
   },
   props: {
     isOpen: Boolean,
-    eventStatus: Array,
+    eventStatuses: Array,
   },
 };
 </script>