Merge branch 'master' into UC-36

2022-10-31 20:52:07 +03:00
parent d838a3187e 7d80861d70
commit 5e7fb5208a
20 changed files with 633 additions and 116 deletions
--- 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: [],
--- 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
--- a/src/pages/calendar/components/CalendarSidebar.vue
+++ b/src/pages/calendar/components/CalendarSidebar.vue
@@ -11,8 +11,9 @@
        .flex.flex-col.items-center.gap-y-2.justify-center
          base-button.mb-2(left-icon="icon-plus", rounded, :size="24", :icon-left-size="10", secondary )
          .team-card(v-for="teammate in teamData" :key="teammate.id")
-            BaseAvatar(:size="32")
-              img(:src="avatar" alt="Team member")
+            base-avatar(:size="32")
+              img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
+              span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
      .sidebar-content.items-center.flex.flex-col.gap-y-8.px-4.py-19px(v-else)
        base-button(right-icon="icon-plus", split, :size="40", :icon-right-size="10", @click="openFormCreate" ) Создать событие
        .flex.items-center.flex-col.gap-y-4
@@ -35,8 +36,9 @@
              v-for="teammate in teamData"
              :key="teammate.id")
              .flex.items-center
-                BaseAvatar(:size="32")
-                  img(:src="avatar" alt="Team member")
+                base-avatar(:size="32")
+                  img(:src="teammate.avatar" alt="Team member" v-if="teammate.avatar")
+                  span(v-if="!teammate.avatar") {{`${teammate.last_name[0]}${teammate.first_name[0]}`}}
                .flex.ml-2.not-italic.font-medium.text-xxs {{ changeName(teammate.last_name, teammate.first_name, teammate.patronymic) }}
              span.icon-change-place.cursor-pointer.w-5.flex.items-center.justify-center.w-6.h-6
      .button-wrapper.flex.justify-center.mb-23px
@@ -44,10 +46,6 @@
 </template>

 <script>
-import BaseButtonPlus from "../../../components/base/buttons/BaseButtonPlus.vue";
-import BaseOpenButton from "../../../components/base/buttons/BaseOpenButton.vue";
-import BaseCreateButton from "../../../components/base/buttons/BaseCreateButton.vue";
-import img from "../../../assets/images/team-member.svg";
 import BaseButton from "@/components/base/BaseButton";
 import BaseAvatar from "@/components/base/BaseAvatar";

@@ -55,9 +53,6 @@ export default {
  name: "CalendarSidebar",
  components: {
    BaseButton,
-    BaseButtonPlus,
-    BaseOpenButton,
-    BaseCreateButton,
    BaseAvatar,
  },
  props: {
@@ -77,7 +72,6 @@ export default {
      isOpen: false,
      turnButton: "180deg",
      maxLengthLastName: 13,
-      avatar: img,
    };
  },
  computed: {
@@ -101,6 +95,9 @@ export default {
        width: this.widthSidebarClose,
      };
    },
+    defaultName(last, first) {
+      return `${last[0]}${first[0]}`;
+    },
  },
  methods: {
    changeSize() {
@@ -113,13 +110,13 @@ export default {
    },
    changeName(lastName, fitstName, patronymic) {
      return lastName.length > this.maxLengthLastName
-        ? lastName.slice(0, this.maxLengthLastName) + "... "
-        : lastName +
-            " " +
-            fitstName.slice(0, 1) +
+        ? lastName.slice(0, this.maxLengthLastName) +
+            "... " +
+            fitstName[0] +
            "." +
-            patronymic.slice(0, 1) +
-            ".";
+            patronymic[0] +
+            "."
+        : lastName + " " + fitstName[0] + "." + patronymic[0] + ".";
    },
  },
 };
--- a/src/pages/login/TheLogin.vue
+++ b/src/pages/login/TheLogin.vue
@@ -0,0 +1,63 @@
+<template lang="pug">
+  .login-wrapper.flex
+    .left-col.flex.flex-col.items-center.relative
+      .logo-wrapper.absolute.left-12.top-12
+        img.logo-img(src="@/assets/images/logoText.svg" alt="logoText")
+      .login-panel.flex.flex-col.justify-center.gap-y-10
+        .flex.flex-col.gap-y-2
+          .text-welcome.flex.not-italic.font-bold.text-5xl Добро пожаловать!
+          .text-under.flex.not-italic.font-medium.text-base(
+            :style="{color: this.colorUnderText}") Очень рады вас видеть. Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
+        .flex.flex-col.gap-y-5
+          .flex.flex-col.gap-y-6
+            .flex Логин
+            base-input(placeholder="Введите ваш логин")
+          .flex.flex-col.gap-y-6
+            .flex Пароль
+            base-input(type="password" placeholder="Введите ваш пароль")
+          .flex.items-center.gap-x-11
+            input.w-4.h-4.checkbox.cursor-pointer(type="checkbox" @change="(e) => check(e)")
+            .flex Запомнить меня
+        base-button.font-semibold(:size="48") Войти в аккаунт
+      .absolute.left-12.bottom-12 2022 © Астра 
+    .right-col.flex.items-center.justify-center.relative
+      img.logo-img.absolute.z-10(src="@/assets/images/bigLogo.svg" alt="bigLogo")
+      img.logo-img.absolute.z-10.absolute.left-0.bottom-0(src="@/assets/images/ellipseBottom.svg" alt="ellipseBottom")
+      img.logo-img.absolute.z-10.absolute.right-0.top-0(src="@/assets/images/ellipseTop.svg" alt="ellipseTop")
+      img.logo-img.opacity-10(src="@/assets/images/dots.svg" alt="Logo")
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseButton from "@/components/base/BaseButton";
+export default {
+  name: "TheLogin",
+  components: { BaseInput, BaseButton },
+  data() {
+    return {
+      colorUnderText: "var(--font-grey-color)",
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.left-col
+  padding: 329px 185px
+  background-color: var(--default-white)
+  height: 1080px
+  width: 812px
+.logo-wrapper
+  width: 89.28px
+  height: 74.64px
+.login-panel
+  width: 444px
+  height: 422px
+.text-welcome
+  letter-spacing: 0.02em
+  color: var(--font-dark-blue-color)
+.right-col
+  height: 1080px
+  width: 1105px
+  background-color: var(--font-dark-blue-color)
+</style>