From 733c4c536dd7c4206b596dd594b777a90526a6ea Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 21 Nov 2022 18:56:11 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B0=20=D1=81=D1=82=D0=B8=D0=BB=D1=8C=20=D0=BA=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=BF=D0=BE=D0=BA,=20=D1=80=D0=B0=D1=81=D1=81=D1=82?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=B8=D0=BB=D0=B0=20=D0=B7=D0=B0=D0=BF=D1=8F=D1=82?=
 =?UTF-8?q?=D1=8B=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseButton.vue            |  8 +--
 src/components/base/BaseInput.vue             |  3 +-
 src/pages/calendar/TheCalendar.vue            | 56 +++++++++----------
 .../components/CalendarBackground.vue         |  2 +-
 .../components/CalendarClockColumn.vue        |  4 +-
 .../calendar/components/CalendarColumn.vue    | 24 ++++----
 .../CalendarColumnHeaderCheckbox.vue          |  2 +-
 .../calendar/components/CalendarEventCard.vue | 12 ++--
 .../CalendarEventDescriptionCard.vue          |  2 +-
 .../components/CalendarFormAddEvent.vue       |  6 +-
 .../components/CalendarLayoutSwitch.vue       |  4 +-
 .../calendar/components/CalendarSchedule.vue  | 48 ++++++++--------
 .../clients/components/ClientsTableHat.vue    | 34 ++++++-----
 13 files changed, 106 insertions(+), 99 deletions(-)

diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index 7790cc5..07c0363 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -3,20 +3,20 @@
     :disabled="disabled",
     :class="{'rounded': rounded, 'outlined': outlined, 'outlined-red': outlinedRed, 'secondary': secondary, 'confirm': confirm, 'added': added}"
     :style="{height: size + 'px', minWidth: size + 'px'}"
-    )
+  )
     .button-container
       span.icon-container(
         :class="leftIcon",
         v-if="leftIcon",
         :style="{fontSize: iconLeftSize + 'px'}"
-        )
+      )
       slot
       .split(v-if="split")
       span.icon-container(
         :class="rightIcon",
-        v-if="rightIcon"
+        v-if="rightIcon",
         :style="{fontSize: iconRightSize + 'px', marginLeft: marginLeftIcon + 'px'}"
-        )
+      )
 </template>
 
 <script>
diff --git a/src/components/base/BaseInput.vue b/src/components/base/BaseInput.vue
index b55c3f1..2e0ff6b 100644
--- a/src/components/base/BaseInput.vue
+++ b/src/components/base/BaseInput.vue
@@ -50,10 +50,11 @@ export default {
 .right
   order: 1
 .input-wrapper
-  border: 2px solid var(--border-light-grey-color)
+  border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
   background-color: var(--default-white)
   color: var(--font-black-color)
+  height: 40px
 .date
   background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
   &::-webkit-calendar-picker-indicator
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index f3e1f2f..58272d0 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -1,46 +1,46 @@
 <template lang="pug">
   .calendar-container.flex
     calendar-sidebar(
-      @width="changeWidth"
-      :team-data="employeesData"
-      :open-form-create="openFormCreateEvent"
+      @width="changeWidth",
+      :team-data="employeesData",
+      :open-form-create="openFormCreateEvent",
       :event-types="eventTypes"
     )
     calendar-schedule(
-      :owners-data="employeesData"
-      :current-date="currentDate"
-      :time-information="timeInformation"
-      :events-data="eventsData"
-      :members-data="membersData"
-      :sidebar-width="sidebarWidth"
-      :event-types="eventTypes"
-      :change-form-was-closed="changeFormWasClosed"
-      @previous-date="switchPreviousDate"
-      @next-date="switchNextDate"
-      @selected-layout="changeCalendarLayout"
-      @open-change-form="openFormCreateEvent"
-      @reset-change-form="resetChangeFormState"
-      @selected-event="writeEventData"
+      :owners-data="employeesData",
+      :current-date="currentDate",
+      :time-information="timeInformation",
+      :events-data="eventsData",
+      :members-data="membersData",
+      :sidebar-width="sidebarWidth",
+      :event-types="eventTypes",
+      :change-form-was-closed="changeFormWasClosed",
+      @previous-date="switchPreviousDate",
+      @next-date="switchNextDate",
+      @selected-layout="changeCalendarLayout",
+      @open-change-form="openFormCreateEvent",
+      @reset-change-form="resetChangeFormState",
+      @selected-event="writeEventData",
       @delete-event="openModal"
     )
     calendar-form-add-event(
-      v-if="isOpenForm"
-      :close-form="closeFormCreateEvent"
-      :owners-data="employeesData"
-      :members-data="membersData"
-      :selected-event-data="selectedEvent"
-      :event-types="eventTypes"
-      @clear-selected-event-data="clearSelectedEvent"
+      v-if="isOpenForm",
+      :close-form="closeFormCreateEvent",
+      :owners-data="employeesData",
+      :members-data="membersData",
+      :selected-event-data="selectedEvent",
+      :event-types="eventTypes",
+      @clear-selected-event-data="clearSelectedEvent",
       @close-change-form="setChangeFormState"
     )
     base-modal(
-      v-model="showModal"
+      v-model="showModal",
       title="Удаление события"
     ) 
       calendar-delete-modal(
-        :event-types="eventTypes"
-        :owner-event="selectedEvent"
-        :close-modal="changeShowModal"
+        :event-types="eventTypes",
+        :owner-event="selectedEvent",
+        :close-modal="changeShowModal",
         @update-events="fetchEventsData"
       )
 </template>
diff --git a/src/pages/calendar/components/CalendarBackground.vue b/src/pages/calendar/components/CalendarBackground.vue
index 881aaea..9c87afc 100644
--- a/src/pages/calendar/components/CalendarBackground.vue
+++ b/src/pages/calendar/components/CalendarBackground.vue
@@ -5,7 +5,7 @@
     .flex.flex-col
       .line-wrapper
         .line.flex.items-center(
-          v-for="hour in timeCoil"
+          v-for="hour in timeCoil",
           :key="hour"
         )
           .middle-line
diff --git a/src/pages/calendar/components/CalendarClockColumn.vue b/src/pages/calendar/components/CalendarClockColumn.vue
index acd2f8a..0441973 100644
--- a/src/pages/calendar/components/CalendarClockColumn.vue
+++ b/src/pages/calendar/components/CalendarClockColumn.vue
@@ -1,8 +1,8 @@
 <template lang="pug">
   .calendar-clock-column.flex.flex-col.items-end.gap-y-43.pb-5.px-3
     span.text-base(
-      v-for="hour in timeCoil"
-      :key="hour"
+      v-for="hour in timeCoil",
+      :key="hour",
       :class="currentHourStyle(hour)"
     ) {{ hour }}
 </template>
diff --git a/src/pages/calendar/components/CalendarColumn.vue b/src/pages/calendar/components/CalendarColumn.vue
index 3605f3f..a1795a1 100644
--- a/src/pages/calendar/components/CalendarColumn.vue
+++ b/src/pages/calendar/components/CalendarColumn.vue
@@ -4,8 +4,8 @@
       .flex.items-center
         base-avatar.mr-2(:size="32", :color="ownerData.color")
           img(
-            :src="ownerData.avatar"
-            alt="Team member"
+            :src="ownerData.avatar",
+            alt="Team member",
             v-if="ownerData.avatar"
           )
           span(v-if="!ownerData.avatar") {{ defaultAvatar }}
@@ -14,16 +14,16 @@
       column-header-checkbox
     .body.pl-1
       calendar-event-card(
-        v-for="event in dayEvents"
-        :key="event.id"
-        :id="event.id"
-        :ownerEvent="event"
-        :event-types="eventTypes"
-        :style="eventCardPosition(event.start, event.end)"
-        :change-form-was-closed="changeFormWasClosed"
-        @selected-event="transmitEventData"
-        @reset-change-form="transmitResetChangeForm"
-        @delete-event="transmitDeleteEvent"
+        v-for="event in dayEvents",
+        :key="event.id",
+        :id="event.id",
+        :ownerEvent="event",
+        :event-types="eventTypes",
+        :style="eventCardPosition(event.start, event.end)",
+        :change-form-was-closed="changeFormWasClosed",
+        @selected-event="transmitEventData",
+        @reset-change-form="transmitResetChangeForm",
+        @delete-event="transmitDeleteEvent",
         :schedule-body-ref="scheduleBodyRef"
       )
 </template>
diff --git a/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue b/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
index ec3f0ea..8ec28e7 100644
--- a/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
+++ b/src/pages/calendar/components/CalendarColumnHeaderCheckbox.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
   div.icon-wrap.flex.items-center.justify-center.cursor-pointer.py-1.px-2(
-    :class="{disable: !isChecked}"
+    :class="{disable: !isChecked}",
     @click="changeState"
   )
     .icon-doc-ok.text-xxl
diff --git a/src/pages/calendar/components/CalendarEventCard.vue b/src/pages/calendar/components/CalendarEventCard.vue
index 66e5996..08d87e2 100644
--- a/src/pages/calendar/components/CalendarEventCard.vue
+++ b/src/pages/calendar/components/CalendarEventCard.vue
@@ -22,12 +22,12 @@
           ul
             li.mt-2(v-for="elem in descriptionColumns.rightColumn" :key="elem") {{ elem }}
     calendar-event-description-card(
-      v-if="isOpenDescriptionCard"
-      :owner-event="ownerEvent"
-      :event-types="eventTypes"
-      @selected-event="transmitEventData"
-      @close-description-card="closeDescriptionCard"
-      @delete-event="transmitDeleteEvent"
+      v-if="isOpenDescriptionCard",
+      :owner-event="ownerEvent",
+      :event-types="eventTypes",
+      @selected-event="transmitEventData",
+      @close-description-card="closeDescriptionCard",
+      @delete-event="transmitDeleteEvent",
       :schedule-body-ref="scheduleBodyRef"
     )
   </template>
diff --git a/src/pages/calendar/components/CalendarEventDescriptionCard.vue b/src/pages/calendar/components/CalendarEventDescriptionCard.vue
index 4396f95..6d55024 100644
--- a/src/pages/calendar/components/CalendarEventDescriptionCard.vue
+++ b/src/pages/calendar/components/CalendarEventDescriptionCard.vue
@@ -2,7 +2,7 @@
   .wrapper.px-4.pt-14px.pb-4.font-medium.cursor-auto(
     :style="{...typeColor, ...position, ...constantWidth}",
     v-click-outside="close",
-    :class="{'shadow': !disabled}"
+    :class="{'shadow': !disabled}",
     ref="descriptionCard"
   )
     .flex.justify-between.items-center.mb-2
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index 7ba8f2f..aaa51a4 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -10,8 +10,8 @@
       .flex.flex-col.gap-y-2
         span.text-xs.opacity-40.font-bold.leading-3 Вид события
         base-custom-select.select(
-          v-model="kind"
-          :items="kindEvents"
+          v-model="kind",
+          :items="kindEvents",
           placeholder="Вид события"
         )
       .flex.flex-col(class="gap-y-1.5")
@@ -52,7 +52,7 @@
       v-if="!selectedEventData.id",
       :size="40",
       :disabled="disabledCreateButton",
-      @click="sendEventData"
+      @click="sendEventData",
     ) Создать событие
     base-button.update-button.text-base.font-semibold(
       v-else,
diff --git a/src/pages/calendar/components/CalendarLayoutSwitch.vue b/src/pages/calendar/components/CalendarLayoutSwitch.vue
index 2ea652a..bbffe37 100644
--- a/src/pages/calendar/components/CalendarLayoutSwitch.vue
+++ b/src/pages/calendar/components/CalendarLayoutSwitch.vue
@@ -1,11 +1,11 @@
 <template lang="pug">
   .layout-switch-wrapper.inline-block
     button#day.py-2.px-3(
-      :class="dayLayoutState"
+      :class="dayLayoutState",
       @click="changeSelectedLayout"
     ) День
     button#week.py-2.px-3(
-      :class="weekLayoutState"
+      :class="weekLayoutState",
       @click="changeSelectedLayout"
     ) Неделя
 </template>
diff --git a/src/pages/calendar/components/CalendarSchedule.vue b/src/pages/calendar/components/CalendarSchedule.vue
index bdb57d7..d10b2d8 100644
--- a/src/pages/calendar/components/CalendarSchedule.vue
+++ b/src/pages/calendar/components/CalendarSchedule.vue
@@ -1,55 +1,55 @@
 <template lang="pug">
   .schedule.mx-2.pb-22px(
-    ref="schedule"
+    ref="schedule",
     :style="scheduleWidth"
   )
     calendar-header(
-      :current-date="currentDate"
-      :is-current-date="isCurrentDate"
-      @previous-date="previousDate"
-      @next-date="nextDate"
+      :current-date="currentDate",
+      :is-current-date="isCurrentDate",
+      @previous-date="previousDate",
+      @next-date="nextDate",
       @selected-layout="selectedLayout"
     )
     .schedule-body(
-      @scroll="changeScrollingState"
+      @scroll="changeScrollingState",
       ref="scheduleBody"
     )
       .hiding-container.fixed(v-if="isScrolling")
       .column-wrapper.flex.ml-20(:style="columnWrapperWidth")
         calendar-column(
-          v-for="(owner, index) in filteredOwners"
-          :key="owner.id"
-          :owner-data="owner"
-          :day-events="filterEventsByOwner(owner)"
-          :day-start-time="validateStartTime"
-          :day-end-time="validateEndTime"
-          :style="columnSize"
-          :event-types="eventTypes"
-          :change-form-was-closed="changeFormWasClosed"
-          @selected-event="transmitEventData"
-          @reset-change-form="transmitResetChangeForm"
-          @delete-event="transmitDeleteEvent"
+          v-for="(owner, index) in filteredOwners",
+          :key="owner.id",
+          :owner-data="owner",
+          :day-events="filterEventsByOwner(owner)",
+          :day-start-time="validateStartTime",
+          :day-end-time="validateEndTime",
+          :style="columnSize",
+          :event-types="eventTypes",
+          :change-form-was-closed="changeFormWasClosed",
+          @selected-event="transmitEventData",
+          @reset-change-form="transmitResetChangeForm",
+          @delete-event="transmitDeleteEvent",
           :schedule-body-ref="$refs.scheduleBody"
         )
       .flex.w-full.relative
         .time-coil-wrapper.left-0.-mt-12.pt-9
           calendar-clock-column(
-            :timeCoil="timeCoil"
-            :current-time="currentTime"
-            :is-current-date="isCurrentDate"
+            :timeCoil="timeCoil",
+            :current-time="currentTime",
+            :is-current-date="isCurrentDate",
             :day-end-time="validateEndTime"
           )
           .time-circle-indicator.left-74px(
-            v-if="isShownIndicator"
+            v-if="isShownIndicator",
             :style="circleIndicatorLocation"
           )  
         span.time-line-indicator.block.left-20(
-          v-if="isShownIndicator"
+          v-if="isShownIndicator",
           :style="lineIndicatorLocation"
         )
         .flex(:class="calendarBackgroundWidth")
           calendar-background(
-            :time-coil="timeCoil"
+            :time-coil="timeCoil",
             :owners-count="ownersCount"
           )
 </template>
diff --git a/src/pages/clients/components/ClientsTableHat.vue b/src/pages/clients/components/ClientsTableHat.vue
index c0e9aa9..5516d03 100644
--- a/src/pages/clients/components/ClientsTableHat.vue
+++ b/src/pages/clients/components/ClientsTableHat.vue
@@ -2,18 +2,28 @@
   .flex.justify-between.w-full.h-fit
     .flex.gap-2.w-fit.h-fit
       .input
-        base-input(:with-icon="true", icon-position="left", v-model:value="searchClient")
+        base-input(
+          :with-icon="true",
+          icon-position="left",
+          v-model:value="searchClient",
+          placeholder="Введите фамилию"
+        )
           .icon-search
-      button.filter-button.flex.items-center.justify-center.box-border(
-        class="px-2.5"
-        @click="searchLastName"
-      )
-        .icon-filter.text-xl.leading-4
-      button.filter-button.flex.items-center.justify-center.px-10px(@click="resetLastName") Очистить  
-    clients-table-header-actions(v-if="!!isOpenActions" :is-selected-one="isOpenActions===1")
+      base-button(
+        outlined,
+        @click="searchLastName",
+        :size=40
+      ) Поиск
+      base-button(
+        v-if="searchClient.length > 0",
+        secondary,
+        @click="resetLastName",
+        :size=40
+      ) Очистить
+    clients-table-header-actions(v-if="!!isOpenActions", :is-selected-one="isOpenActions===1")
     .flex.w-fit.h-fit.gap-x-2
-      base-button(left-icon="icon-download" :icon-left-size="16" :size="40" :outlined="true")
-      base-button(left-icon="icon-plus" :icon-left-size="13" :size="40" @click="openForm")
+      base-button(left-icon="icon-download", :icon-left-size="16", :size="40", :outlined="true")
+      base-button(left-icon="icon-plus", :icon-left-size="13", :size="40", @click="openForm")
         span.font-semibold Создать
 </template>
 
@@ -53,8 +63,4 @@ export default {
 <style lang="sass" scoped>
 .input
   width: 280px
-  height: fit-content
-.filter-button
-  border-radius: 4px
-  border: 2px solid var(--border-light-grey-color)
 </style>