From 253ac045ef7b367cd4db48d11be570f0993e1b0f Mon Sep 17 00:00:00 2001
From: megavrilinvv <vastre@rambler.ru>
Date: Tue, 8 Nov 2022 19:01:23 +0300
Subject: [PATCH] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D1=81=D1=82=D0=B8=D0=BB=D1=8C=20=D0=B2=D1=81=D0=BF=D0=BB=D1=8B?=
 =?UTF-8?q?=D0=B2=D0=B0=D1=8E=D1=89=D0=B5=D0=B3=D0=BE=20=D0=BE=D0=BA=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=B4=D0=BB=D1=8F=20=D0=B8=D0=B2=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=D0=BE=D0=B2,=20=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8=20loginPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/CalendarFormAddEvent.vue       | 159 +++++++-----------
 src/pages/login/TheLogin.vue                  |  22 ++-
 2 files changed, 74 insertions(+), 107 deletions(-)

diff --git a/src/pages/calendar/components/CalendarFormAddEvent.vue b/src/pages/calendar/components/CalendarFormAddEvent.vue
index a8bb3ff..f733907 100644
--- a/src/pages/calendar/components/CalendarFormAddEvent.vue
+++ b/src/pages/calendar/components/CalendarFormAddEvent.vue
@@ -1,102 +1,75 @@
 <template lang="pug">
   .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.text-xs.opacity-40.font-bold.leading-3 Ответственный
-        .icon-cancel.close-icon.text-xs.cursor-pointer(@click="clearForm")
-      base-select.select(
-        v-if="!selectedEventData.employees",
-        :items="ownersList",
-        v-model="employees.employee",
-        placeholder="Выберите ответственного",
-        separator
-        border-none
-      )  
-      base-input(
-        v-else,
-        v-model:value="employeeName",
-        :width-input="72",
-        disabled,
-        border-none
-      )
-    .flex.flex-col.gap-y-2
-      span.text-xs.opacity-40.font-bold.leading-3 Основная информация
-      .flex.gap-x-4.items-center
-        .flex.gap-x-2.items-center
-          base-input-date(v-model:value="eventDate")
-      .flex.items-center
-        .flex.gap-x-2.items-center
-          base-input-time.item-input.text-base.cursor-text(
-            v-model:value="startTime",
-            :width-input="72"
-          )
-          span —
-          base-input-time.item-input.text-base.cursor-text(
-            v-model:value="endTime",
-            :width-input="72"
-          )
-      .flex.gap-x-4.items-center
-        .icon-person.text-xl.icon
+    .flex.justify-between
+      span.title.text-xl.font-bold Назначение события
+      .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 Вид события
+        base-select.select(
+          v-model="kind"
+          :items="kindEvents"
+          placeholder="Вид события"
+          :style="{width: '570px'}"
+        )
+      .flex.flex-col(class="gap-y-1.5")
+        span.text-sm Сотрудник
+        base-select.select(
+          v-if="!selectedEventData.employees",
+          :items="ownersList",
+          v-model="employees.employee",
+          placeholder="Выберите сотрудника",
+          border-none
+        )  
+        base-input(
+          v-else,
+          v-model:value="employeeName",
+          :width-input="570",
+          disabled,
+          border-none
+        )
+      .flex.flex-col(class="gap-y-1.5")
+        span.text-sm Клиент
         base-select.select(
           v-if="!selectedEventData.members",
           :items="membersList",
           v-model="members.person",
-          placeholder="Выберите ответственного",
-          separator
-          border-none
-        )
+          placeholder="Выберите клиента",
+        )  
         base-input(
           v-else,
           v-model:value="memberName",
           disabled,
           :width-input="346"
           border-none
-       )
-    .flex.flex-col.gap-y-2
-      span.text-xs.opacity-40.font-bold.leading-3 Вид события
-      base-select.select(
-        v-model="kind"
-        :items="kindEvents"
-        placeholder="Вид события"
-        separator
-        border-none
-        :style="kindSelectWidth"
-      )
-    .flex.flex-col.gap-y-2
-      .flex.gap-x-4.items-center
-        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)=>addContact(e)"
         )
-      .flex.gap-x-4.items-center(
-        v-for="(contact, index) in listContacts"
-        :key="index"
-      )
-        .icon-mail.text-xl.icon
-        .form-item.flex.gap-x-2.items-center
-          base-input(
-            border-none
-            v-model="contacts"
-            placeholder="E-mail"
-            :width-input="72"
-          )
+    .flex.flex-col.gap-y-8
+      .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 Дата
+            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 Начало
+            base-input-time.item-input.text-base.cursor-text.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 Конец
+            base-input-time.item-input.text-base.cursor-text.select(
+              v-model:value="endTime",
+              :width-input="72"
+            )
     base-button.create-button.text-base.font-semibold(
       v-if="!selectedEventData.id",
       :size="40",
       :disabled="disabledCreateButton",
       @click="sendEventData"
     ) Создать событие
-    base-button.update-button.text-base.font-semibold(
-      v-else,
-      :size="40",
-      :disabled="disabledUpdateButton",
-      @click="updateEventData",
-    ) Сохранить
 </template>
 
 <script>
@@ -139,7 +112,6 @@ export default {
   },
   data() {
     return {
-      listContacts: [1],
       kindEvents: [
         {
           id: 1,
@@ -161,7 +133,6 @@ export default {
       EMPLOYEE_TYPE: "owner",
       MEMBER_TYPE: "primary",
       eventData: {},
-      contacts: [],
       startTime: "",
       endTime: "",
       members: {},
@@ -201,7 +172,6 @@ export default {
               elem.first_name,
               elem.patronymic
             ),
-            contacts: elem.contacts,
           });
         });
         return filteredArray;
@@ -294,20 +264,8 @@ export default {
     eventId() {
       return this.selectedEventData.id ? this.selectedEventData.id : "";
     },
-    kindSelectWidth() {
-      return {
-        width: this.kind ? `${this.kind.length * 9 + 86}px` : "180px",
-      };
-    },
   },
   methods: {
-    addContact(e) {
-      if (e.currentTarget.id === "addContact") {
-        this.listContacts.push(
-          this.listContacts[this.listContacts.length - 1] + 1
-        );
-      }
-    },
     trimOwnerName(lastName, firsName, patronymic) {
       return `${lastName} ${firsName[0]}.${patronymic[0]}.`;
     },
@@ -418,9 +376,9 @@ export default {
 <style lang="sass" scoped>
 .event-form
   height: fit-content
-  min-width: 448px
-  background-color: var(--bg-ligth-blue-color)
-  box-shadow: -4px -4px 16px rgba(9, 10, 21, 0.25), 4px 4px 16px rgba(9, 10, 21, 0.25)
+  width: 634px
+  background-color: var(--default-white)
+  box-shadow: var(--default-shadow)
   border-radius: 4px
   z-index: 5
 
@@ -459,10 +417,15 @@ export default {
   color: var(--font-dark-blue-color)
   &:hover
     color: var(--btn-blue-color)
+
 .create-button
   width: 183px
+
 .select
   height: 40px
+  border: 2px solid var(--border-light-grey-color)
+  border-radius: 4px
+
 .update-button
   width: 132px
 </style>
diff --git a/src/pages/login/TheLogin.vue b/src/pages/login/TheLogin.vue
index 0c753a4..86e3a9b 100644
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -12,19 +12,19 @@
           .flex.flex-col.gap-y-6px
             .flex.non-italic.font-semibold.text-xss Логин
             base-input.h-12.font-medium(
-            :style="{borderColor: !this.authorized ? this.redColor : ''}"
+            :style="{borderColor: wrongData ? this.redColor : ''}"
             v-model:value="user.username"
             type="text"
             placeholder="Введите ваш логин")
           .flex.flex-col.gap-y-6px.relative
             .flex.non-italic.font-semibold.text-xss Пароль
             base-input.h-12(
-            :style="{borderColor: this.authorized ? '' : this.redColor}"
+            :style="{borderColor: wrongData ? this.redColor : ''}"
             v-model:value="user.password"
             :type="changeType"
             placeholder="Введите ваш пароль")
             img.absolute.z-10.right-4.bottom-14px.cursor-pointer(:src="changeIcon", alt="eyePassword", @click="changeView")
-          span.font-medium(:style="{color: this.redColor}", v-show="!authorized") Неверный логин или пароль
+          span.font-medium(:style="{color: this.redColor}", v-show="wrongData") Неверный логин или пароль
           .flex.items-center.gap-x-11px
             input.w-4.h-4.checkbox.cursor-pointer(@click="persist", type="checkbox")
             .flex.non-italic.font-medium.base Запомнить меня
@@ -38,7 +38,6 @@ import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton";
 import viewPasswordIcon from "@/assets/icons/eye.svg";
 import hidePasswordIcon from "@/assets/icons/openEye.svg";
-import loginBackground from "@/assets/images/loginBG.svg";
 
 import logoMark from "@/assets/images/logoMark.svg";
 export default {
@@ -50,7 +49,6 @@ export default {
       isView: false,
       viewPassword: viewPasswordIcon,
       hidePassword: hidePasswordIcon,
-      loginBackground,
       logoMark,
       authorized: true,
       user: { username: "", password: "" },
@@ -58,6 +56,9 @@ export default {
     };
   },
   computed: {
+    wrongData() {
+      return !this.authorized && !this.user.username && !this.user.password;
+    },
     changeIcon() {
       return !this.isView ? this.viewPassword : this.hidePassword;
     },
@@ -67,6 +68,11 @@ export default {
     disabledButton() {
       return this.user.username && this.user.password ? false : true;
     },
+    showBorder() {
+      return !this.authorized && !this.user.username && !this.user.password
+        ? true
+        : false;
+    },
   },
   methods: {
     changeView() {
@@ -88,10 +94,8 @@ export default {
             return result.json();
           } else {
             this.authorized = false;
-            if (!this.authorized) {
-              this.user.username = "";
-              this.user.password = "";
-            }
+            this.user.username = "";
+            this.user.password = "";
           }
         })
         .then((token) => {