adata-ui 0.1.4 → 0.1.8

package/src/components/Header/Profile.vue

@@ -0,0 +1,806 @@
+<template>
+  <div class="profile" :class="{ active: active }">
+    <div v-click-outside="() => {active = false}">
+      <div class="profile__inner">
+        <div class="requests__link" v-if="requestCount !== null && isAuthenticated">
+          Суточный лимит запросов:
+          <span>
+              {{ requestCount }} {{ (daysRemaining === null || daysRemaining === '-') ? '' : `(${daysRemaining})` }}
+            </span>
+        </div>
+        <div class="profile__item" @click="active = !active">
+          <div v-show="isAuthenticated" class="profile__item-link">
+            <span class="desktop">{{ email }}</span>
+            <svg width="18" height="18" fill="#25476AFF" class="desktop arrow-svg" :class="{ rotate: active }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+              <path fill="none" d="M0 0h16v16H0z"></path>
+              <path fill="none" d="M3 6.5L8 10l5-3.5" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+          </div>
+          <div v-show="isAuthenticated" class="profile__item-link">
+            <svg width="18" height="18" fill="#25476AFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="user">
+              <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M15.5 8a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm-1.023 4.344a5 5 0 10-4.954 0C5.757 13.417 3 16.874 3 20.974V21h1.543v-.026c0-4.106 3.339-7.435 7.457-7.435 4.119 0 7.457 3.329 7.457 7.435V21H21v-.026c0-4.1-2.757-7.557-6.523-8.63z"
+                    fill="#2C3E50"></path>
+            </svg>
+          </div>
+          <a :href="loginUrl" class="sign" v-show="!isAuthenticated">
+            <svg width="18" height="18" fill="#25476AFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="desktop">
+              <path fill="#fff" d="M0 0h16v16H0z" stroke="none"></path>
+              <path d="M8 10l2-2.054L8.077 6" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
+              <path d="M6 4.1V2h8v12H6v-1.65M9 8H2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
+            </svg>
+            <svg width="18" height="18" fill="#25476AFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="user">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M13 7.94L17.06 12 13 16.06 11.94 15l3-3-3-3L13 7.94z" fill="#2C3E50"></path>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 2.25h13.5v19.5H8.25v-4.5h1.5v3h10.5V3.75H9.75v3h-1.5v-4.5z" fill="#2C3E50"></path>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 11.25h13.5v1.5H2.25v-1.5z" fill="#2C3E50"></path>
+            </svg>
+            <span class="sign_text">Вход</span>
+          </a>
+        </div>
+      </div>
+      <SlideToggle v-slot="{ animationClass }">
+        <div
+            class="profile-menu"
+            v-if="isAuthenticated"
+            v-show="active"
+            :class="animationClass"
+        >
+          <div class="profile-menu__inner">
+            <div class="profile-menu__items" v-if="listDropDown.length">
+              <div v-for="(elem, index) in listDropDown" :key="index">
+                <div :class="elem.link ? 'profile-menu__balance-link': 'profile-menu__links'"
+                     class="gray-text"
+                     v-if="elem.url"
+                     @click="handleClick(elem.url, elem.name)">
+                  <div>
+                    {{ elem.name }}
+                  </div>
+                  <span
+                      v-if="elem.link"
+                      @click="setShowModal(true)"
+                      class="profile-menu__balance"
+                  >
+                      {{ elem.link }}
+                    </span>
+                </div>
+                <div v-if="elem.children" @click="rotateItem(index)" class="gray-text profile-menu__item">
+                  <div class="profile-menu__item__children">{{ elem.name }}
+                    <span v-if="elem.children.length > 0">
+                       <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg" :class="{'rotated': elem.opened}">
+                          <path d="M1 1.5L6 6.5L11 1.5" stroke="#69797D" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round"/>
+                        </svg>
+                    </span>
+                  </div>
+                  <SlideToggle v-slot="{ animationClass }" :class="animationClass">
+                    <div v-if="elem.opened">
+                      <template v-for="(child, idx) in elem.children">
+                        <div
+                            class="profile-menu__item__child"
+                            :key="idx + 'link'"
+                            v-if="child.url"
+                            @click="handleClick(child.url, child.name)"
+                        >
+                          <span>
+                            <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+                              <circle cx="2" cy="2" r="2" fill="#2C3E50"/>
+                            </svg>
+                            {{ child.name }}
+                          </span>
+                        </div>
+                      </template>
+                    </div>
+                  </SlideToggle>
+                </div>
+              </div>
+            </div>
+            <div class="exit" @click="logout">
+              <svg width="18" height="18" fill="#25476AFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                <path d="M11 10l2-2.054L11.077 6M10 11.9V14H2V2h8v1.65M12 8H5" stroke-miterlimit="10"
+                      stroke-linecap="round" stroke-linejoin="round"></path>
+              </svg>
+              Выход
+            </div>
+          </div>
+        </div>
+      </SlideToggle>
+      <MobileToggle v-slot="{ animationClass }">
+        <div v-show="isAuthenticated && active" class="mobile-table" :class="animationClass">
+          <div class="mobile-table-head">
+            <p>Профиль пользователя</p>
+            <!-- close_hamburger-->
+            <svg @click.stop="active = !active" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="close_hamburger">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M4.414 18.142L18.556 4l1.415 1.414L5.828 19.556l-1.414-1.414z"
+                    fill="#2C3E50"></path>
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.414 4l14.142 14.142-1.414 1.414L4 5.414 5.414 4z"
+                    fill="#2C3E50"></path>
+            </svg>
+          </div>
+          <div class="profile-menu-mobile">
+            <div class="profile-menu-mobile__inner">
+              <div class="profile-menu-mobile__items" v-if="listDropDown.length > 0">
+                <div v-for="(elem, index) in listDropDown" :key="index" class="bb">
+                  <div
+                      @click="handleClick(elem.url, elem.name)"
+                      v-if="elem.url"
+                      :class="elem.link ? 'profile-menu-mobile__balance-link': 'profile-menu-mobile__links'"
+                  >
+                    <div v-if="!elem.link" class="button-inner">
+                      <div>{{ elem.name }}</div>
+                      <!-- arrow_right -->
+                      <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M2.108.59L9.318 9l-7.21 8.41L.59 16.108 6.683 9 .59 1.892 2.108.59z" fill="#2C3E50"></path>
+                      </svg>
+                    </div>
+                    <div v-if="elem.link" class="profile-menu-mobile__balance-items">
+                      <div class="profile-menu-mobile__balance-items__upper-text">
+                        {{ elem.name.substr(0, 15) }}
+                      </div>
+                      <div class="profile-menu-mobile__balance__bot-text">
+                        {{ elem.name.substr(15) }}
+                      </div>
+                    </div>
+                    <span
+                        v-if="elem.link"
+                        @click="$emit('showBalanceModal', true)"
+                        class="profile-menu-mobile__balance"
+                    >
+                        {{ elem.link }}
+                      </span>
+                  </div>
+                  <div v-if="elem.children" @click="rotateItem(index)" class="profile-menu-mobile__links">
+                    <div class="button-inner">
+                      <div>{{ elem.name }}</div>
+                      <!-- arrow_right -->
+                      <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 18">
+                        <path fill-rule="evenodd" clip-rule="evenodd"
+                              d="M2.108.59L9.318 9l-7.21 8.41L.59 16.108 6.683 9 .59 1.892 2.108.59z" fill="#2C3E50"></path>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="exit-mob" @click="logout">
+              <!-- exit-black-->
+              <svg width="18" height="18" fill="#25476AFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="arrow-svg">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                      d="M17.7501 7.93933L21.8108 12L17.7501 16.0607L16.6895 15L19.6895 12L16.6895 8.99999L17.7501 7.93933Z"
+                      fill="#2C3E50"></path>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 2.25H2V21.75H15.5V17.25H14V20.25H3.5V3.75H14V6.75H15.5V2.25Z"
+                      fill="#2C3E50"></path>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M7 11.25L20.5 11.25L20.5 12.75L7 12.75L7 11.25Z"
+                      fill="#2C3E50"></path>
+              </svg>
+              Выход
+            </div>
+          </div>
+        </div>
+      </MobileToggle>
+      <MobileToggle v-slot="{ animationClass }">
+        <div
+            v-show="someMobileOpened.length > 0 && chosenElem && chosenElem.children.length > 0"
+            :class="animationClass"
+            class="mobile-table"
+        >
+          <div class="mobile-table-head mobile-table-head-chosen">
+            <div @click="chosenElem.opened = false">
+              <!-- arrow_right -->
+              <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" class="rotated" viewBox="0 0 10 18">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                      d="M2.108.59L9.318 9l-7.21 8.41L.59 16.108 6.683 9 .59 1.892 2.108.59z" fill="#2C3E50"></path>
+              </svg>
+            </div>
+            <p>{{ chosenElem.name }}</p>
+          </div>
+          <div
+              class="profile-menu-mobile"
+          >
+            <div class="profile-menu-mobile__inner">
+              <div class="profile-menu-mobile__items" v-if="chosenElem.children.length > 0">
+                <div v-for="(elem, index) in chosenElem.children" :key="index" class="bb">
+                  <div @click="handleClick(elem.url, elem.name)"
+                       v-if="elem.url"
+                       :class="elem.link ? 'profile-menu-mobile__balance-link': 'profile-menu-mobile__links'">
+                    <div class="button-inner">
+                      <div>{{ elem.name }}</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="exit-mob" @click="logout">
+              <!-- exit-black-->
+              <svg width="18" height="18" fill="#25476AFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="arrow-svg">
+                <path fill-rule="evenodd" clip-rule="evenodd"
+                      d="M17.7501 7.93933L21.8108 12L17.7501 16.0607L16.6895 15L19.6895 12L16.6895 8.99999L17.7501 7.93933Z"
+                      fill="#2C3E50"></path>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 2.25H2V21.75H15.5V17.25H14V20.25H3.5V3.75H14V6.75H15.5V2.25Z"
+                      fill="#2C3E50"></path>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M7 11.25L20.5 11.25L20.5 12.75L7 12.75L7 11.25Z"
+                      fill="#2C3E50"></path>
+              </svg>
+              Выход
+            </div>
+          </div>
+        </div>
+      </MobileToggle>
+    </div>
+  </div>
+</template>
+
+<script>
+import SlideToggle from "../transitions/SlideToggle";
+import vClickOutside from "v-click-outside";
+import MobileToggle from "../transitions/VerticalMobileToggle";
+
+export default {
+  directives: {
+    clickOutside: vClickOutside.directive,
+  },
+  props: {
+    isDev: {
+      type: Boolean,
+      default: false
+    },
+    profileDropDown: {
+      type: Array,
+      required: true,
+    },
+    isAuthenticated: {
+      type: Boolean,
+      default: false
+    },
+    requestCount: {
+      type: Number,
+      default: null
+    },
+    daysRemaining: {
+      type: String,
+      default: null
+    },
+    email: {
+      type: String,
+      default: ""
+    },
+    loginUrl: {
+      type: String,
+      default: "",
+      required: true
+    }
+  },
+  components: {
+    SlideToggle,
+    MobileToggle
+  },
+  data() {
+    return {
+      active: false,
+      listDropDown: [],
+      chosenElem: {
+        children: []
+      }
+    };
+  },
+  mounted() {
+    if (this.profileDropDown && this.profileDropDown.length > 0) {
+      this.listDropDown = [...this.profileDropDown]
+    }
+  },
+  computed: {
+    someMobileOpened() {
+      return this.listDropDown.filter(el => el.opened && el.children.length > 0);
+    }
+  },
+  methods: {
+    setShowModal(bool) {
+      this.$emit("setShowModal", bool);
+    },
+    logout() {
+      this.$emit("logout");
+    },
+    handleClick(url, name) {
+      if (name.includes('Текущий')) {
+        window.open(this.toAdtdev(url), "_self");
+        this.$emit("setIsReplenishModal", true);
+      } else {
+        window.open(this.toAdtdev(url), "_self");
+      }
+      this.active = false;
+      if (this.chosenElem) this.chosenElem.opened = false;
+    },
+    rotateItem(index) {
+      this.chosenElem = this.listDropDown[index];
+      this.$set(this.listDropDown[index], 'opened', !this.listDropDown[index].opened)
+    },
+    toAdtdev(url) {
+      return this.isDev ? url.replace("adata", "adtdev") : url;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+a {
+  text-decoration: none;
+  background-color: transparent;
+}
+
+svg {
+  transition: all .3s linear;
+}
+
+svg.rotated {
+  transform: rotate(180deg);
+}
+
+.gray-text {
+  font-size: 12px;
+  line-height: 14px;
+  font-weight: 400;
+  color: #2c3e50;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+
+.profile {
+  position: relative;
+
+  &__inner {
+    padding: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  &__item {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0;
+    padding: 8px 0;
+    white-space: nowrap;
+    cursor: pointer;
+
+    &-link {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      &:first-child {
+        @media (max-width: 1025px) {
+          display: none;
+        }
+      }
+      &:nth-child(2) {
+        display: none;
+        @media (max-width: 1025px) {
+          display: flex;
+        }
+      }
+    }
+
+    span {
+      white-space: nowrap;
+      margin: 0 7px;
+    }
+
+    .arrow-svg {
+      transition: all 0.3s;
+      vertical-align: middle;
+      width: 16px;
+      height: 16px;
+      transform: rotate(0deg);
+
+
+      &.rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .profile-menu {
+    width: 368px;
+    height: 100%;
+    position: absolute;
+    right: 0;
+    top: 100%;
+    background-color: #fff;
+    box-shadow: 0px 3px 6px #959cb140;
+    border-radius: 2px;
+    z-index: 10000;
+    @media (max-width: 1025px) {
+      display: none;
+    }
+
+    &__items {
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 400;
+      color: #2c3e50;
+      cursor: pointer;
+
+      div:not(:last-child) > a > .gray-text {
+        border-bottom: 0.5px solid #BDC7CE;
+      }
+
+      div:not(:last-child) > .gray-text {
+        border-bottom: 0.5px solid #BDC7CE;
+
+        & + div {
+          padding: 10px 16px;
+        }
+      }
+
+      div > .gray-text:not(.profile-menu__balance-link):not(.profile-menu__links) {
+        padding: 0;
+
+        a {
+          color: #2c3e50;
+
+          &:visited {
+            color: #2c3e50;
+          }
+        }
+      }
+    }
+
+    &__item__child {
+      padding: 0 16px 0 32px;
+      height: 40px;
+      display: flex;
+      border-top: 0.5px solid #BDC7CE;
+      align-items: center;
+
+      &:hover {
+        background: #2C3E500C;
+      }
+
+      span {
+        display: flex;
+        align-items: center;
+
+        svg {
+          margin-right: 5px;
+
+          path {
+            fill: #2C3E500C !important;
+          }
+        }
+      }
+    }
+
+    &__item__children {
+      padding: 0 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 40px;
+      &:hover {
+        background: #2C3E500C;
+      }
+    }
+
+    &__balance-link {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 40px;
+      padding: 0 16px;
+
+      &:hover {
+        background: #2c3e500d;
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #eef0f5;
+      }
+    }
+
+    &__balance {
+      font-size: 14px;
+      color: #007aff;
+      white-space: nowrap;
+    }
+
+    &__links {
+      display: flex;
+      align-items: center;
+      align-content: center;
+      height: 40px;
+      padding: 0 16px;
+
+      &:hover {
+        background: #2c3e500d;
+      }
+
+      &:not(:last-child) {
+        border-bottom: 1px solid #eef0f5;
+      }
+    }
+  }
+}
+
+.exit {
+  background: #69797D;
+  height: 40px;
+  border-radius: 0 0 2px 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    background: #9da3ac;
+    color: #fff;
+  }
+
+  &:hover svg {
+    stroke: #fff;
+    background: #9da3ac;
+  }
+
+  svg {
+    margin-right: 8px;
+    background: #69797D;
+    fill: none !important;
+    stroke: #fff;
+    transition: all 0s;
+  }
+
+  &:active {
+    background: #0055bb;
+    color: #fff;
+  }
+
+  &:active svg {
+    stroke: #fff;
+    background: #0055bb;
+  }
+
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 16px;
+  color: #fff;
+}
+
+.sign {
+  height: 40px;
+  border-radius: 0 0 2px 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    svg {
+      stroke: #71757a !important;
+    }
+
+    span {
+      color: #71757a;
+    }
+  }
+
+  &:active {
+    svg {
+      stroke: #9da3ac !important;
+    }
+
+    span {
+      color: #9da3ac;
+    }
+  }
+
+  svg {
+    margin-right: 8px;
+    fill: none !important;
+    stroke: #2c3e50 !important;
+    @media(max-width: 1025px) {
+      stroke: none !important;
+      margin-right: 24px;
+
+    }
+  }
+
+  span {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 16px;
+    color: #2c3e50;
+    margin: 0 0;
+  }
+}
+
+.requests {
+  &__link {
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 400;
+    padding: 12px;
+    color: var(--newColor);
+    white-space: nowrap;
+    margin: 0 6px 0 0;
+    @media (max-width: 1025px) {
+      display: none;
+    }
+
+    svg {
+      vertical-align: middle;
+      width: 20px;
+      height: 20px;
+      margin-right: 4px;
+      margin-bottom: 2px;
+    }
+
+    span {
+      color: #2c3e50;
+      font-weight: 600;
+    }
+  }
+}
+
+.user {
+  display: none;
+  @media(max-width: 1025px) {
+    width: 24px;
+    height: 24px;
+    margin-right: 24px;
+    display: flex;
+  }
+}
+
+.exit-mobile {
+  display: none;
+  @media(max-width: 1025px) {
+    display: block;
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+
+
+  }
+}
+
+.mobile-table {
+  display: none;
+  @media (max-width: 1025px) {
+    display: block;
+  }
+
+  &-head {
+    padding: 0 16px;
+    background: #F4F4F4;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 40px;
+
+    p {
+      font-weight: 600;
+      font-size: 17px;
+      line-height: 19px;
+      color: #2C3E50;
+    }
+
+    svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    &-chosen {
+      position: relative;
+
+      & > div {
+        position: absolute;
+      }
+
+      p {
+        text-align: center;
+        width: 100%;
+      }
+    }
+  }
+}
+
+.profile-menu-mobile {
+  height: 100%;
+
+  .bb > a, .bb > a:visited {
+    color: #000;
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    height: 72%;
+  }
+
+  &__links, &__item {
+    padding: 0 16px;
+    height: 52px;
+    border: 1px solid #9DA3AC;
+    border-bottom: none;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+  }
+
+  &__balance-link {
+    padding: 0 16px;
+    height: 52px;
+    border: 1px solid #9DA3AC;
+    border-bottom: none;
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__balance {
+    color: #1E88E5;
+    font-size: 16px;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+
+    &-items {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      &__upper-text {
+        font-weight: normal;
+        font-size: 10px;
+        line-height: 14px;
+        color: #69797D;
+        margin-bottom: 4px;
+      }
+
+      &__bot-text {
+        font-weight: 600;
+        font-size: 12px;
+        line-height: 16px;
+        color: #2C3E50;
+      }
+    }
+  }
+}
+
+.exit-mob {
+  background: #FFCD33;
+  border-radius: 2px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: normal;
+  font-size: 16px;
+  line-height: 16px;
+  color: #2c3e50;
+  margin: 16px 16px 0;
+
+  svg {
+    margin-right: 8px;
+    fill: none !important;
+  }
+}
+
+.bb {
+  &:last-child {
+    border-bottom: 1px solid #9DA3AC;
+  }
+}
+
+.button-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.sign_text {
+  @media (max-width: 1025px) {
+    display: none;
+  }
+}
+</style>