Merge pull request #146 from dderbentsov/UC-64

WIP Изменила стиль кнопок, расставила запятые
2022-11-21 19:00:26 +03:00
parent e182844074 733c4c536d
commit e706ed92dd
13 changed files with 106 additions and 99 deletions
--- 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>
--- 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
--- 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>
--- 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
--- 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>
--- 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>
--- 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
--- 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>
--- 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
--- 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,
--- 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>
--- 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>
--- 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>