adata-ui 0.1.50 → 0.1.53

package/src/components/Header/Header.vue

@@ -1,85 +1,184 @@
 <template>
-  <header class="a-header" :class="[{'bordered': isBordered}, {'fixed': isFixed}]">
-    <div class="container">
-      <div class="a-header__left">
-        <a class="logo" :href="main[mode]">
-          <svg class="adata-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 166 48">
-            <path d="M62.926 38.22v-28h10.316c10.342 0 15.511 4.55 15.508 13.652 0 4.36-1.41 7.843-4.232 10.448-2.822 2.605-6.58 3.907-11.276 3.904l-10.316-.004zm6.56-22.868v17.752h3.248c2.839 0 5.069-.82 6.69-2.46 1.622-1.64 2.43-3.873 2.424-6.7 0-2.667-.8-4.767-2.403-6.3-1.602-1.533-3.853-2.297-6.752-2.292h-3.206zM118.5 38.22h-7.131l-2.079-6.228H98.958l-2.079 6.228h-7.093l10.598-28h7.775l10.341 28zm-10.723-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.162c-.07.83-.24 1.649-.508 2.44l-3.168 9.492h7.451zm31.833-11.796h-8.316V38.22h-6.557V15.352h-8.274v-5.136h23.147v5.136zM166 38.22h-7.143l-2.079-6.228h-10.349l-2.05 6.228h-7.106l10.598-28h7.776l10.353 28zm-10.719-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.163c-.069.83-.239 1.649-.507 2.44l-3.168 9.492h7.451zM24.553 15.252h-.163c-.069.83-.24 1.649-.507 2.44L20.715 27.2h7.45l-3.126-9.412a12.02 12.02 0 01-.486-2.536z"></path>
-            <path d="M44.905 0H4.99a5.091 5.091 0 00-3.528 1.406A4.71 4.71 0 000 4.8v38.4a4.71 4.71 0 001.461 3.394A5.091 5.091 0 004.99 48h39.916a5.091 5.091 0 003.528-1.406 4.71 4.71 0 001.462-3.394V4.8a4.71 4.71 0 00-1.462-3.394A5.091 5.091 0 0044.905 0zM31.737 38.26l-2.079-6.232H19.305l-2.05 6.232h-7.097l10.598-28h7.776l10.353 28h-7.148z"></path>
-          </svg>
-        </a>
-        <div class="menu" v-if="subheaderItems.length > 0">
-          <a v-for="(item, index) in subheaderItems"
-               :key="index"
-               class="menu__wrapper menu__items"
-               :class="{active: item.key === activeTabKey}"
-               :href="item[mode]"
-          >
-            {{ item.name }}
+  <header :class="{ sticky: isSticky }">
+    <InfoHeader
+        :weather="weather"
+        :currencies="currencies"
+        :system-message="systemMessage"
+        :requestCount="requestCount"
+        :daysRemaining="daysRemaining"
+        :is-open-notification="isOpenNotification"
+        :is-authenticated="isAuthenticated"
+        @closeNotification="closeNotification"
+    />
+    <div class="header" :class="{ bordered: isBordered }">
+      <div class="container">
+        <div class="header__left">
+          <a class="logo" :href="main[mode]">
+            <svg
+              class="adata-logo"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 166 48"
+            >
+              <path
+                d="M62.926 38.22v-28h10.316c10.342 0 15.511 4.55 15.508 13.652 0 4.36-1.41 7.843-4.232 10.448-2.822 2.605-6.58 3.907-11.276 3.904l-10.316-.004zm6.56-22.868v17.752h3.248c2.839 0 5.069-.82 6.69-2.46 1.622-1.64 2.43-3.873 2.424-6.7 0-2.667-.8-4.767-2.403-6.3-1.602-1.533-3.853-2.297-6.752-2.292h-3.206zM118.5 38.22h-7.131l-2.079-6.228H98.958l-2.079 6.228h-7.093l10.598-28h7.775l10.341 28zm-10.723-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.162c-.07.83-.24 1.649-.508 2.44l-3.168 9.492h7.451zm31.833-11.796h-8.316V38.22h-6.557V15.352h-8.274v-5.136h23.147v5.136zM166 38.22h-7.143l-2.079-6.228h-10.349l-2.05 6.228h-7.106l10.598-28h7.776l10.353 28zm-10.719-11.072l-3.127-9.416a11.94 11.94 0 01-.486-2.516h-.163c-.069.83-.239 1.649-.507 2.44l-3.168 9.492h7.451zM24.553 15.252h-.163c-.069.83-.24 1.649-.507 2.44L20.715 27.2h7.45l-3.126-9.412a12.02 12.02 0 01-.486-2.536z"
+              ></path>
+              <path
+                d="M44.905 0H4.99a5.091 5.091 0 00-3.528 1.406A4.71 4.71 0 000 4.8v38.4a4.71 4.71 0 001.461 3.394A5.091 5.091 0 004.99 48h39.916a5.091 5.091 0 003.528-1.406 4.71 4.71 0 001.462-3.394V4.8a4.71 4.71 0 00-1.462-3.394A5.091 5.091 0 0044.905 0zM31.737 38.26l-2.079-6.232H19.305l-2.05 6.232h-7.097l10.598-28h7.776l10.353 28h-7.148z"
+              ></path>
+            </svg>
           </a>
+          <div class="menu" v-if="headerItems.length > 0">
+            <a
+              v-for="(item, index) in headerItems"
+              :key="index"
+              class="menu__wrapper menu__items"
+              :class="{ active: item.key === activeTabKey }"
+              :href="item[mode]"
+            >
+              {{ item.name }}
+            </a>
+          </div>
         </div>
-      </div>
-      <div class="a-header__right">
-        <slot name="chooseCountry"></slot>
-        <Profile
-            v-bind:profileDropDown="profileDropDown"
+        <div class="header__right">
+          <slot name="chooseCountry"></slot>
+          <Profile
+            :profileDropDown="profileDropDown"
             :mode="mode"
             :isAuthenticated="isAuthenticated"
-            :requestCount="requestCount"
-            :daysRemaining="daysRemaining"
             :email="email"
             :loginUrl="loginUrl"
             :activeTabKey="activeTabKey"
-            @showBalanceModal="(val) => { $emit('showBalanceModal', val) }"
-            @setShowModal="(val) => { $emit('setShowModal', val) }"
+            @showBalanceModal="
+              (val) => {
+                $emit('showBalanceModal', val);
+              }
+            "
+            @setShowModal="
+              (val) => {
+                $emit('setShowModal', val);
+              }
+            "
             @logout="$emit('logout')"
-            @setIsReplenishModal="(val) => { $emit('setIsReplenishModal', val) }"
-        />
-        <div class="menu_mobile--switcher" @click="changeValue">
-          <!-- icon_hamburger -->
-          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 4h20v2H2V4zm0 14h20v2H2v-2zm0-7h20v2H2v-2z"
-                  fill="#2C3E50"></path>
-          </svg>
+            @setIsReplenishModal="
+              (val) => {
+                $emit('setIsReplenishModal', val);
+              }
+            "
+          />
+          <div class="menu_mobile--switcher" @click="changeValue">
+            <!-- icon_hamburger -->
+            <svg
+              width="24"
+              height="24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M2 4h20v2H2V4zm0 14h20v2H2v-2zm0-7h20v2H2v-2z"
+                fill="#2C3E50"
+              ></path>
+            </svg>
+          </div>
         </div>
       </div>
-    </div>
-    <MobileToggle v-slot="{ animationClass }">
-      <div
+      <MobileToggle v-slot="{ animationClass }">
+        <div
           class="menu_mobile"
           :class="animationClass"
-          v-show="subheaderItems.length > 0 && isOpen"
-      >
-        <div @click.stop="changeValue" class="mobile-table-head">
-          <!-- close_hamburger -->
-          <svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <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>
-        <a
-            v-for="(item, index) in subheaderItems"
-            :key="index"
-            class="menu_mobile-wrapper"
-            :class="{'active-burger-tab': item.key === activeTabKey}"
-            :href="item[mode]"
+          v-show="headerItems.length > 0 && isOpen"
         >
-          {{ item.name }}
-        </a>
-      </div>
-    </MobileToggle>
+          <div class="menu-wrapper">
+            <div @click.stop="changeValue" class="mobile-table-head">
+            <!-- close_hamburger -->
+            <svg
+              width="18"
+              height="18"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <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="menu__link">
+             <a
+                 v-for="(item, index) in headerItems"
+                 :key="index"
+                 class="menu_mobile-wrapper"
+                 :class="{ 'active-burger-tab': item.key === activeTabKey }"
+                 :href="item[mode]"
+             >
+               {{ item.name }}
+             </a>
+           </div>
+          </div>
+          <div class="menu-mobile__info">
+            <div class="menu-mobile__info-header">
+              <span>Валюта</span>
+              <span>Покупка</span>
+              <span>Продажа</span>
+            </div>
+            <div class="menu-mobile__info-body">
+              <div v-for="(currency, index) in currencies" :key="index" class="menu-mobile__info-row">
+                <div class="menu-mobile__info-column">
+                  <img v-if="currency.currency === 'USD'" src="@/assets/icons/dollor.svg" alt=""/>
+                  <img v-if="currency.currency === 'EUR'" src="@/assets/icons/euro.svg" alt=""/>
+                  <img v-if="currency.currency === 'RUB'" src="@/assets/icons/ruble.svg" alt=""/>
+                  <span>{{ currency.currency }}</span>
+                </div>
+                <div class="menu-mobile__info-column">
+                  <span>{{ currency.buy }}</span>
+                  <img v-if="currency.buy_state === 'DOWN'" src="@/assets/icons/arrow-down.svg" alt=""/>
+                  <img v-else src="@/assets/icons/arrow-up.svg" alt=""/>
+                </div>
+                <div class="menu-mobile__info-column">
+                  <span>{{ currency.sell }}</span>
+                  <img v-if="currency.sell_state === 'DOWN'" src="@/assets/icons/arrow-down.svg" alt=""/>
+                  <img v-else src="@/assets/icons/arrow-up.svg" alt=""/>
+                </div>
+              </div>
+            </div>
+            <div class="menu-mobile__info-footer">
+              <div class="menu-mobile__info-footer-item">
+                <span class="menu-mobile__info-footer-title">Cуточный лимит запросов:</span>
+                <span class="menu-mobile__info-footer-circle">{{ requestCount }}</span>
+              </div>
+              <div class="menu-mobile__info-footer-item">
+                <span class="menu-mobile__info-footer-title">Остаток дней:</span>
+                <span class="menu-mobile__info-footer-circle">{{ daysRemaining }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </MobileToggle>
+    </div>
   </header>
 </template>
 
 <script>
+import { profileDropDown } from "../../configs/profileDropDown";
+
 import Profile from "./Profile";
-import { profileDropDown } from "../../configs/profileDropDown"
 import MobileToggle from "../transitions/VerticalMobileToggle";
+import InfoHeader from "./InfoHeader";
 
 export default {
   components: {
+    InfoHeader,
     Profile,
     MobileToggle,
   },
@@ -88,123 +187,196 @@ export default {
       type: String,
       required: true,
       validator: function (value) {
-        return ['prod', 'dev', 'staging'].indexOf(value) !== -1
-      }
+        return ["prod", "dev", "staging"].indexOf(value) !== -1;
+      },
     },
     isAuthenticated: {
       type: Boolean,
-      default: false
+      default: false,
     },
     isBordered: {
       type: Boolean,
-      default: false
+      default: false,
     },
-    isFixed: {
+    isSticky: {
       type: Boolean,
-      default: false
+      default: false,
     },
     requestCount: {
-      type: Number,
-      default: null
+      type: [String, Number],
+      default: null,
     },
     daysRemaining: {
-      type: String,
-      default: null
+      type: [String, Number],
+      default: null,
     },
     email: {
       type: String,
-      default: ""
+      default: "",
     },
     loginUrl: {
       type: String,
       default: "",
-      required: true
+      required: true,
     },
     activeTabKey: {
       type: String,
       default: "",
-      required: true
+      required: true,
     },
     balance: {
       type: Number,
-      default: 0
-    }
+      default: 0,
+    },
   },
   data() {
     return {
       profileDropDown,
       main: {
-        dev: 'https://adtdev.kz',
-        prod: 'https://adata.kz',
-        staging: 'https://adada.kz'
+        dev: "https://adtdev.kz",
+        prod: "https://adata.kz",
+        staging: "https://adada.kz",
       },
-      subheaderItems: [
+      headerItems: [
         {
           id: 1,
           name: "Контрагенты",
-          dev: 'https://pk.adtdev.kz',
-          prod: 'https://pk.adata.kz',
-          staging: 'https://pk.adada.kz',
-          key: 'counterparty'
+          dev: "https://pk.adtdev.kz",
+          prod: "https://pk.adata.kz",
+          staging: "https://pk.adada.kz",
+          key: "counterparty",
         },
         {
           id: 2,
           name: "Тендеры",
-          dev: 'https://tender.adtdev.kz',
-          prod: 'https://tender.adata.kz',
-          staging: 'https://tender.adada.kz',
-          key: 'tenders'
+          dev: "https://tender.adtdev.kz",
+          prod: "https://tender.adata.kz",
+          staging: "https://tender.adada.kz",
+          key: "tenders",
         },
         {
           id: 3,
           name: "Работа",
-          dev: 'https://work.adtdev.kz',
-          prod: 'https://work.adata.kz',
-          staging: 'https://work.adada.kz',
-          key: 'work'
+          dev: "https://work.adtdev.kz",
+          prod: "https://work.adata.kz",
+          staging: "https://work.adada.kz",
+          key: "work",
         },
         {
           id: 4,
           name: "Штрафы",
-          dev: 'https://avto.adtdev.kz',
-          prod: 'https://avto.adata.kz',
-          staging: 'https://avto.adada.kz',
-          key: 'fines'
+          dev: "https://avto.adtdev.kz",
+          prod: "https://avto.adata.kz",
+          staging: "https://avto.adada.kz",
+          key: "fines",
         },
         {
           id: 5,
           name: "Маркетинг",
-          dev: 'https://marketing.adtdev.kz',
-          prod: 'https://marketing.adata.kz',
-          staging: 'https://marketing.adada.kz',
-          key: 'marketing'
-        }
+          dev: "https://marketing.adtdev.kz",
+          prod: "https://marketing.adata.kz",
+          staging: "https://marketing.adada.kz",
+          key: "marketing",
+        },
       ],
-      isOpen: false
+      isOpen: false,
+      weather: null,
+      currencies: null,
+      systemMessage: null,
+      timer: null,
+      isOpenNotification: false,
     };
   },
+
+  created() {
+    this.fetchCurrencies();
+    this.fetchWeather()
+  },
   mounted() {
     this.setBalance(this.balance);
+    this.timer = setTimeout(this.fetchNotification, 3000);
+  },
+  watch: {
+    balance(newBalance) {
+      this.setBalance(newBalance);
+    },
+    isOpenNotification() {
+      if(!this.isOpenNotification) {
+        clearTimeout(this.timer);
+      }
+    }
   },
   methods: {
+    async fetchNotification() {
+      try {
+        const response = await fetch('https://users.adtdev.kz/api/v1/system-messages/active-list/?module_name=counterparty');
+        const { data } = await response.json();
+
+        if (data.details.length) {
+          this.systemMessage = data.details[0].message;
+          this.isOpenNotification = true;
+        }
+
+      } catch(e) {
+        console.log(e.message)
+      }
+    },
+    async fetchCurrencies() {
+      try {
+        const response = await fetch('https://users.adata.kz/api/v1/information/currency');
+        const { data } = await response.json();
+
+        if(data.currencies) {
+          this.currencies = data.currencies;
+        }
+
+      } catch(e) {
+        console.log(e.message)
+      }
+    },
+    async fetchWeather() {
+      try {
+        const response = await fetch('https://users.adata.kz/api/v1/information/weather');
+        const { data } = await response.json();
+
+        if(data.cities) {
+          this.weather = data.cities;
+        }
+
+      } catch(e) {
+        console.log(e.message)
+      }
+    },
+    closeNotification(option) {
+      this.isOpenNotification = !option
+    },
     changeValue() {
-      this.isOpen = !this.isOpen
-      this.$emit('menuOpen', this.isOpen)
+      this.isOpen = !this.isOpen;
+      this.$emit("menuOpen", this.isOpen);
     },
     setBalance(balance) {
       if (balance !== 0) {
-        this.profileDropDown[2].name = 'Текущий баланс: ' + this.thousandSeparator(balance) + ' ₸';
+        this.profileDropDown[2].name =
+            "Текущий баланс: " + this.thousandSeparator(balance) + " ₸";
       }
     },
     thousandSeparator(val) {
-      return val ?  val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " "): '';
+      return val ? val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ") : "";
+    },
+    defineIconState(name) {
+      return name === "DOWN" ? "@/assets/icons/arrow-down.svg" : "@/assets/icons/arrow-up.svg";
+    },
+    defineIconEntity(name) {
+      switch (name) {
+        case 'USD':
+          return "@/assets/icons/dollor.svg";
+        case 'EUR':
+          return "@/assets/icons/euro.svg";
+        case 'RUB':
+          return "@/assets/icons/ruble.svg";
+      }
     },
   },
-  watch: {
-    balance(newBalance) {
-      this.setBalance(newBalance);
-    }
-  }
 };
 </script>
 
@@ -216,27 +388,25 @@ export default {
   padding: 0;
 }
 
-.a-header {
-  width: 100vw;
+.sticky {
+  position: sticky;
+  z-index: 1000;
+  top: 0;
+}
+
+.header {
   background: #ffffff;
   max-height: 62px;
   height: 62px;
   display: flex;
   align-items: center;
   @media (max-width: 1025px) {
-    border-bottom: 1px solid #2C3E5026;
+    border-bottom: 1px solid #2c3e5026;
     height: 40px;
   }
 
   &.bordered {
-    border-bottom: 1px solid #2C3E5026;
-  }
-
-  &.fixed {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    left: 0;
+    border-bottom: 1px solid #2c3e5026;
   }
 
   & > .container {
@@ -295,7 +465,7 @@ export default {
         }
 
         &:hover {
-          color: #9DA3AC;
+          color: #9da3ac;
           cursor: pointer;
         }
       }
@@ -310,7 +480,7 @@ export default {
         height: 26px;
         display: block;
         fill: #2c3e50;
-        @media(max-width: 1025px) {
+        @media (max-width: 1025px) {
           width: 77px;
           height: 24px;
         }
@@ -330,7 +500,9 @@ export default {
     }
 
     @media (max-width: 1025px) {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
       .mobile-table-head {
         padding: 11px 16px;
         display: flex;
@@ -338,7 +510,7 @@ export default {
         background: #2c3e500d;
       }
       &-wrapper {
-        border-top: 1px solid #9DA3AC4C;
+        border-top: 1px solid #9da3ac4c;
         padding: 14px 16px;
         font-weight: 600;
         font-size: 16px;
@@ -347,7 +519,7 @@ export default {
         display: block;
 
         &:last-child {
-          border-bottom: 1px solid #9DA3AC4C;
+          border-bottom: 1px solid #9da3ac4c;
         }
 
         &.active-burger-tab {
@@ -361,6 +533,72 @@ export default {
       }
     }
   }
+
+  .menu-mobile__info {
+    &-header {
+      background: rgba(189, 199, 206, 0.2);
+      padding: 4px 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      span {
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 20px;
+        color: #666C72;
+      }
+    }
+    &-body {
+      padding: 8px 16px 16px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      gap: 12px;
+    }
+    &-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &-column {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      span {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: #2C3E50;
+      }
+    }
+    &-footer {
+      background: rgba(189, 199, 206, 0.2);
+      padding: 8px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      &-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      &-title {
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: #2C3E50;
+      }
+      &-circle {
+        color: #ffffff;
+        padding: 4px 12px;
+        background: #007AFF;
+        border-radius: 100px;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+      }
+    }
+  }
 }
 
 </style>