From e34d13614e6ec89e79ed9b7c6670f480945640c1 Mon Sep 17 00:00:00 2001
From: Daria Golova <danalis969@gmail.com>
Date: Mon, 31 Oct 2022 17:35:11 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB?=
 =?UTF-8?q?=D0=B0=20baseInput?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/base/BaseSelect.vue            | 71 +++++++--------
 src/pages/calendar/TheCalendar.vue            |  2 +-
 .../components/CalendarFormAddEvent.vue       | 87 +++++++++----------
 3 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/src/components/base/BaseSelect.vue b/src/components/base/BaseSelect.vue
index 2cf1768..cf4365e 100644
--- a/src/components/base/BaseSelect.vue
+++ b/src/components/base/BaseSelect.vue
@@ -1,38 +1,40 @@
 <template lang="pug">
-  .flex.box-border.w-full.container.items-center.cursor-pointer(
+  .flex.box-border.container.items-center.cursor-pointer.relative(
     @click="openSelect"
     :class="{border: styleBorder, 'py-2.5 px-4':!forNetworks, 'justify-center':forNetworks, 'justify-between':!forNetworks}"
-    :style="{ minWidth : widthSelect + 'px'}"
     )
-    .relative.flex.flex-col
-      .not-italic.select.cursor-pointer.w-full(v-if="!forNetworks") {{optionData}}
-        .absolute.options(
-          v-show="isSelectOpen"
-          :id="id"
-          class="left-[-18px]"
-          :style="{ minWidth : widthSelect + 'px'}"
-          )
-          .not-italic.option.pl-4.py-1(
-            v-for="responsible in listData"
-            @click="(e) => chooseOption(e)"
-            :key="responsible"
-            :id="responsible"
-            ) {{responsible}}
-      .flex.not-italic.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
+    .flex.mr-2
+      input.text-base.select.cursor-pointer(
+          :size="sizeInput"
+          v-if="!forNetworks"
+          v-model="optionData"
+          :placeholder="placeholder"
+          disabled
+        ) 
+    .absolute.options.top-12.left-0(
+      v-show="isSelectOpen"
+      :id="id"
+      )
+      .option.px-4.py-1(
+        v-for="responsible in listData"
+        @click="(e) => chooseOption(e)"
+        :key="responsible"
+        :id="responsible"
+        ) {{responsible}}
+      .flex.select.cursor-pointer.w-full.text-xl.items-center.networks(v-if="forNetworks" :class="optionData")
         .absolute.options.top-5(
           v-show="isSelectOpen"
           class="left-[-11px]"
-          :id="id"
-          :style="{ minWidth : widthSelect + 'px'}")
-          .flex.not-italic.option.justify-center.py-1.text-xl(
+          :id="id")
+          .flex.option.justify-center.py-1.text-xl(
             v-for="responsible in listData"
             @click="chooseOption"
             :key="responsible.network"
             :id="responsible.network"
             :class="responsible.icon"
             )
-    .select-form-separator.cursor-pointer(v-if="withSeparator")
-    .text-sm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
+    .select-form-separator.cursor-pointer.mr-6px(v-if="separator")
+    .text-xsm.ml-2.pt-1.icon-down-arrow.icon.text-center(v-if="!forNetworks" :class="{ open: isSelectOpen}")
 </template>
 
 <script>
@@ -43,14 +45,16 @@ export default {
     styleBorder: {
       default: false,
     },
-    widthSelect: Number,
-    withSeparator: {
-      default: false,
-    },
+    separator: Boolean,
     optionData: String,
     listData: Array,
     chooseOption: Function,
     forNetworks: Boolean,
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    sizeInput: Number,
   },
   data() {
     return {
@@ -69,6 +73,7 @@ export default {
 .container
   border-radius: 4px
   width: fit-content
+  color: var(--font-dark-blue-color)
   background-color: var(--bg-ligth-blue-color)
   &.border
     background-color: var(--default-white)
@@ -77,25 +82,25 @@ export default {
   appearance: none
   border: none
   outline: none
-  color: var(--font-black-color-1)
   background-color: var(--font-black-color-0)
   &::-webkit-calendar-picker-indicator
     display: none
     -webkit-appearance: none
   &.networks
     color: var(--font-dark-blue-color)
+  &::placeholder
+    color: var(--font-black-color-1)
 .options
   z-index: 3
-  width: max-content
   background-color: var(--default-white)
-  border: 2px solid var(--border-light-grey-color)
-  border-top: none
-  border-radius: 0 0 4px 4px
+  border-radius: 4px
+  box-shadow: var(--default-shadow)
+  width: 100%
 .option
   color: var(--font-black-color)
-  border-bottom: 1px solid var(--border-light-grey-color)
   &:hover
     background-color: var(--btn-blue-color)
+    color: var(--default-white)
 .select-form-separator
   background-color: var(--btn-blue-color-3)
   height: 24px
@@ -103,8 +108,6 @@ export default {
   border-radius: 1px
 .icon
   color: var(--font-dark-blue-color)
-  &:hover
-    color: var(--btn-blue-color)
   &.open
     transform: rotate(180deg)
 </style>
diff --git a/src/pages/calendar/TheCalendar.vue b/src/pages/calendar/TheCalendar.vue
index 7311702..f54cb7e 100644
--- a/src/pages/calendar/TheCalendar.vue
+++ b/src/pages/calendar/TheCalendar.vue
@@ -33,7 +33,7 @@ export default {
       calendarLayout: "",
       currentDate: moment(),
       timeInformation: {
-        dayStartTime: "0:00",
+        dayStartTime: "00:00",
         dayEndTime: "20:00",
       },
       eventsData: [],
diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index e1f81b3..22caec6 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -2,66 +2,61 @@
   .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.absolute.right-2.bottom-14
     .flex.flex-col.gap-y-2
       .flex.justify-between.pt-2
-        span.not-italic.text-xs.opacity-40.leading-3 Ответственный
+        span.text-xs.opacity-40.font-bold.leading-3 Ответственный
         .icon-cancel.close-icon.text-xs.cursor-pointer(@click="closeForm")
-      base-select.ba-sel(
-        width="205px"
+      base-select(
+        :size-input="responsibleInputSize"
         :option-data="eventData.responsible"
         :list-data="listResponsible"
         :choose-option="chooseOptionResponsible"
+        placeholder="Выберите ответственного"
+        separator
       )
     .flex.flex-col.gap-y-2
-      span.not-italic.text-xs.opacity-40.leading-3 Основная информация
+      span.text-xs.opacity-40.font-bold.leading-3 Основная информация
       .flex.gap-x-4.items-center
         .icon-time.text-xl.icon
         .flex.gap-x-2.items-center
-          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.no-italic.text-base.cursor-text(v-model="eventData.timeEvent.firstTime" type="time" min="08:00" max="18:00")
+          .time-input.flex.gap-x-2.px-4.py-2.items-center
+            input.item-input.text-base.cursor-text(
+                v-model="eventData.timeEvent.firstTime"
+                placeholder ="11:00"
+              )
           span —
-          .form-item.flex.gap-x-2.px-4.py-2.items-center
-            input.item-input.no-italic.text-base.cursor-text(v-model="eventData.timeEvent.secondTime" type="time" min="08:00" max="18:00")
+          .time-input.flex.gap-x-2.px-4.py-2.items-center
+            input.item-input.text-base.cursor-text(
+                v-model="eventData.timeEvent.secondTime"
+                placeholder ="12:30"
+              )
       .flex.gap-x-4.items-center
         .icon-person.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.cursor-text.no-italic.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
-    //- .flex.flex-col.gap-y-2(class='additional-information')
-      //- .flex.gap-x-4.items-center
-      //-   span.not-italic.text-xs.opacity-40.leading-3 Дополнительная информация
-      //-   button-plus(id="addInfo" @click="(e)=>addFriendInfo(e)")
-      //-   base-button(
-            left-icon="icon-plus"
-            rounded secondary
-            :size="24"
-            :icon-left-size="10"
-            id="addInfo"
-            @click="(e)=>addFriendInfo(e)")
-      //- .flex.gap-x-4.items-center(v-for="(info, index) in listFriendInfo" :key="index")
-      //-   span.ml-1 {{info}}
-      //-   .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-      //-     input.item-input.cursor-pointer.no-italic.text-base(v-model="eventData.friendInfo[info]" type="text" placeholder="Что-то важное")
+          input.item-input.cursor-text.text-base(v-model="eventData.eventClient" type="text" placeholder="ФИО клиента")
     .flex.flex-col.gap-y-2
-      span.not-italic.text-xs.opacity-40.leading-3 Вид события
+      span.text-xs.opacity-40.font-bold.leading-3 Вид события
       base-select(
-        width="118px"
+        :size-input="kindEventSize"
         :option-data="eventData.kindEvent"
         :list-data="kindEvents"
         :choose-option="chooseOptionTypeEvent"
+        placeholder="Вид события"
+        separator
       )
     .flex.flex-col.gap-y-2
       .flex.gap-x-4.items-center
-        span.not-italic.text-xs.opacity-40.leading-3 Контакты
+        span.text-xs.opacity-40.font-bold.leading-3 Контакты
         base-button(
         left-icon="icon-plus"
         rounded secondary
         :size="24"
         :icon-left-size="10"
         id="addContact"
-        @click="(e)=>addFriendInfo(e)")
+        @click="(e)=>addContact(e)")
       .flex.gap-x-4.items-center(v-for="(contact, index) in listContacts" :key="index")
         .icon-mail.text-xl.icon
         .form-item.cursor-pointer.flex.gap-x-2.px-4.py-2.items-center
-          input.item-input.cursor-text.no-italic.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
-    base-button.styled-button.not-italic.text-base.font-semibold(
+          input.item-input.cursor-text.text-base(v-model="eventData.contacts[contact]" type="text" placeholder="E-mail")
+    base-button.styled-button.text-base.font-semibold(
     :size="40"
     @click="closeForm"
     ) Создать событие
@@ -81,18 +76,18 @@ export default {
   },
   data() {
     return {
-      listFriendInfo: [1],
       listContacts: [1],
+      responsibleInputSize: 22,
+      kindEventSize: 10,
       kindEvents: ["Встреча", "Планерка", "Интервью", "Важная работа"],
       eventData: {
-        responsible: "Выберите ответственного",
+        responsible: "",
         eventClient: "",
         timeEvent: {
-          firstTime: "11:00",
-          secondTime: "12:30",
+          firstTime: "",
+          secondTime: "",
         },
-        // friendInfo: {},
-        kindEvent: "Вид события",
+        kindEvent: "",
         contacts: {},
       },
     };
@@ -100,16 +95,15 @@ export default {
   methods: {
     chooseOptionResponsible(e) {
       this.eventData.responsible = e.target.id;
+      this.responsibleInputSize = this.eventData.responsible
+        .split(" ")
+        .join("").length;
     },
     chooseOptionTypeEvent(e) {
       this.eventData.kindEvent = e.target.id;
+      this.kindEventSize = this.eventData.kindEvent.split(" ").join("").length;
     },
-    addFriendInfo(e) {
-      if (e.currentTarget.id === "addInfo") {
-        this.listFriendInfo.push(
-          this.listFriendInfo[this.listFriendInfo.length - 1] + 1
-        );
-      }
+    addContact(e) {
       if (e.currentTarget.id === "addContact") {
         this.listContacts.push(
           this.listContacts[this.listContacts.length - 1] + 1
@@ -121,8 +115,6 @@ export default {
 </script>
 
 <style lang="sass" scoped>
-.ba-sel
-  color: red
 .event-form
   height: fit-content
   min-width: 448px
@@ -133,7 +125,7 @@ export default {
 
 .form-item
   border-radius: 4px
-  width: fit-content
+  width: 344px
   background-color: var(--bg-ligth-blue-color)
 
 .item-input
@@ -148,6 +140,11 @@ export default {
   &::placeholder
     color: var(--font-black-color-1)
 
+.time-input
+  width: 72px
+  border-radius: 4px
+  background-color: var(--bg-ligth-blue-color)
+
 .icon
   width: 24px
   height: 24px