adata-ui 0.1.52 → 0.1.53

package/src/components/Header/InfoHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="info">
     <transition name="fade">
-      <div class="info-notification" v-if="showNotification">
+      <div class="info-notification" v-if="isOpenNotification">
         <div class="container">
           <div class="info-notification__wrapper">
             <div class="info-notification__content">
@@ -21,87 +21,38 @@
         </div>
       </div>
     </transition>
-    <div class="info-header" v-if="!showNotification">
+    <div class="info-header" v-if="!isOpenNotification">
       <div class="container">
         <div class="info-header__list">
           <div class="info-header__item">
-            <div class="info-header__item-elem first-elem">
-              <svg id="rate" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="2" y="4" width="12" height="7.50184" stroke="#2C3E50" stroke-linejoin="round"/>
-                <path d="M7 5.99902H9" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M7 7.50586H9" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
-                <path d="M8 9.99902L8 7.50563" stroke="#2C3E50" stroke-linecap="round" stroke-linejoin="round"/>
-              </svg>
-              <p>Курс валют</p>
-            </div>
-            <div class="info-header__item-elem">
-              <div class="info-header__inner-item">
-                <svg id="dollar" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M5.59863 9.40234C5.59863 9.01497 5.47559 8.69596 5.22949 8.44531C4.9834 8.1901 4.57324 7.96224 3.99902 7.76172C3.4248 7.55664 2.97819 7.36751 2.65918 7.19434C1.59733 6.62467 1.06641 5.78158 1.06641 4.66504C1.06641 3.90853 1.29655 3.28646 1.75684 2.79883C2.21712 2.3112 2.84147 2.02181 3.62988 1.93066V0.44043H4.72363V1.94434C5.5166 2.05827 6.12956 2.39551 6.5625 2.95605C6.99544 3.51204 7.21191 4.23665 7.21191 5.12988H5.55762C5.55762 4.55566 5.42773 4.10449 5.16797 3.77637C4.91276 3.44368 4.56413 3.27734 4.12207 3.27734C3.68457 3.27734 3.34277 3.39583 3.09668 3.63281C2.85059 3.86979 2.72754 4.20931 2.72754 4.65137C2.72754 5.04785 2.84831 5.36686 3.08984 5.6084C3.33594 5.84538 3.75065 6.07096 4.33398 6.28516C4.91732 6.49935 5.37533 6.69759 5.70801 6.87988C6.04069 7.06217 6.32096 7.27181 6.54883 7.50879C6.77669 7.74121 6.95215 8.01009 7.0752 8.31543C7.19824 8.62077 7.25977 8.97852 7.25977 9.38867C7.25977 10.1589 7.02279 10.7832 6.54883 11.2617C6.07943 11.7402 5.42318 12.0228 4.58008 12.1094V13.4424H3.49316V12.1162C2.59082 12.016 1.89583 11.6924 1.4082 11.1455C0.92513 10.5986 0.683594 9.87402 0.683594 8.97168H2.34473C2.34473 9.5459 2.48828 9.99023 2.77539 10.3047C3.06706 10.6191 3.47721 10.7764 4.00586 10.7764C4.52539 10.7764 4.9196 10.651 5.18848 10.4004C5.46191 10.1497 5.59863 9.81706 5.59863 9.40234Z" fill="#2C3E50"/>
-                </svg>
-                <p v-if="currency">{{ currency.sell }}</p>
-<!--                <svg id="arrow-up" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">-->
-<!--                  <path d="M3 9.5L8 6L13 9.5" stroke="#00B92D" stroke-linecap="round" stroke-linejoin="round"/>-->
-<!--                </svg>-->
-              </div>
-              <div class="info-header__inner-item">
-                <svg id="dollar" width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M5.59863 9.40234C5.59863 9.01497 5.47559 8.69596 5.22949 8.44531C4.9834 8.1901 4.57324 7.96224 3.99902 7.76172C3.4248 7.55664 2.97819 7.36751 2.65918 7.19434C1.59733 6.62467 1.06641 5.78158 1.06641 4.66504C1.06641 3.90853 1.29655 3.28646 1.75684 2.79883C2.21712 2.3112 2.84147 2.02181 3.62988 1.93066V0.44043H4.72363V1.94434C5.5166 2.05827 6.12956 2.39551 6.5625 2.95605C6.99544 3.51204 7.21191 4.23665 7.21191 5.12988H5.55762C5.55762 4.55566 5.42773 4.10449 5.16797 3.77637C4.91276 3.44368 4.56413 3.27734 4.12207 3.27734C3.68457 3.27734 3.34277 3.39583 3.09668 3.63281C2.85059 3.86979 2.72754 4.20931 2.72754 4.65137C2.72754 5.04785 2.84831 5.36686 3.08984 5.6084C3.33594 5.84538 3.75065 6.07096 4.33398 6.28516C4.91732 6.49935 5.37533 6.69759 5.70801 6.87988C6.04069 7.06217 6.32096 7.27181 6.54883 7.50879C6.77669 7.74121 6.95215 8.01009 7.0752 8.31543C7.19824 8.62077 7.25977 8.97852 7.25977 9.38867C7.25977 10.1589 7.02279 10.7832 6.54883 11.2617C6.07943 11.7402 5.42318 12.0228 4.58008 12.1094V13.4424H3.49316V12.1162C2.59082 12.016 1.89583 11.6924 1.4082 11.1455C0.92513 10.5986 0.683594 9.87402 0.683594 8.97168H2.34473C2.34473 9.5459 2.48828 9.99023 2.77539 10.3047C3.06706 10.6191 3.47721 10.7764 4.00586 10.7764C4.52539 10.7764 4.9196 10.651 5.18848 10.4004C5.46191 10.1497 5.59863 9.81706 5.59863 9.40234Z" fill="#2C3E50"/>
-                </svg>
-                <p v-if="currency">{{ currency.buy }}</p>
+            <template v-if="currencies" >
+              <div v-for="(currency, index) in currencies" :key="index" class="info-header__item-elem">
+                <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=""/>
+                <div class="info-header__inner-item">
+                  <span class="info-header__result">{{ 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 class="info-header__inner-item">
+                  <span class="info-header__result">{{ 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>
-<!--              <div class="info-header&#45;&#45;inner-item">-->
-<!--                 <svg id="ruble" width="10" height="14" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">-->
-<!--                    <path d="M5.49869 7.85079H3.66439V9.16671H2.22884V7.85079H1.06104V6.69437H2.22884V6.08484H1.06104V4.92842H2.22884V0.872437H5.40185C6.31711 0.872437 7.04818 1.11169 7.59505 1.59021C8.14193 2.06492 8.41536 2.69725 8.41536 3.48718C8.41536 4.29231 8.15522 4.92463 7.63493 5.38416C7.11464 5.83988 6.39117 6.07345 5.46452 6.08484H3.66439V6.69437H5.49869V7.85079ZM3.66439 4.92842H5.37907C5.89556 4.92842 6.29053 4.8088 6.56396 4.56954C6.8374 4.33028 6.97412 3.97329 6.97412 3.49857C6.97412 3.07323 6.8393 2.72573 6.56966 2.4561C6.30382 2.18646 5.93544 2.04594 5.46452 2.03455H3.66439V4.92842Z" fill="#2C3E50"/>-->
-<!--                 </svg>-->
-<!--                <p>5.92</p>-->
-<!--              <svg id="arrow-down" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">-->
-<!--                <path d="M3 6.5L8 10L13 6.5" stroke="#FF2E43" stroke-linecap="round" stroke-linejoin="round"/>-->
-<!--              </svg>-->
-<!--              </div>-->
-            </div>
+            </template>
           </div>
-<!--            <div class="info-header__item">-->
-<!--              <div class="info-header__item-elem first-elem">-->
-<!--            <svg id="sun" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">-->
-<!--              <path d="M8.99995 12.7777C11.0864 12.7777 12.7777 11.0864 12.7777 8.99995C12.7777 6.91354 11.0864 5.22217 8.99995 5.22217C6.91354 5.22217 5.22217 6.91354 5.22217 8.99995C5.22217 11.0864 6.91354 12.7777 8.99995 12.7777Z" stroke="#2C3E50" stroke-miterlimit="10"/>-->
-<!--              <path d="M9 1V3.22222" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
-<!--              <path d="M9 14.7778V17.0001" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
-<!--              <path d="M17.0001 9H14.7778" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
-<!--              <path d="M3.22222 9H1" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
-<!--              <path d="M14.6669 3.33337L13.1113 4.88893" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
-<!--              <path d="M4.88905 13.1111L3.3335 14.6666" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
-<!--              <path d="M14.6669 14.6666L13.1113 13.1111" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
-<!--              <path d="M4.88905 4.88893L3.3335 3.33337" stroke="#2C3E50" stroke-miterlimit="10" stroke-linecap="round"/>-->
-<!--            </svg>-->
-<!--                <p>Погода</p>-->
-<!--              </div>-->
-<!--              <div class="info-header__item-elem">-->
-<!--                <div class="info-header&#45;&#45;inner-item weather">-->
-<!--                  <span>Алматы </span>-->
-<!--                  <p>+29 С</p>-->
-<!--                </div>-->
-<!--                <div class="info-header&#45;&#45;inner-item weather">-->
-<!--                  <span>Нур-Султан </span>-->
-<!--                  <p>+29 С</p>-->
-<!--                </div>-->
-<!--              </div>-->
-<!--            </div>-->
-          <div v-if="isAuthenticated" class="info-header__item last-header-item">
+          <div v-if="isAuthenticated" class="info-header__item">
             <div class="info-header__item-elem">
-              <svg id="clock" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M6.93821 13.2567C10.4279 13.2567 13.2568 10.4277 13.2568 6.93809C13.2568 3.44843 10.4279 0.619507 6.93821 0.619507C3.44855 0.619507 0.619629 3.44843 0.619629 6.93809C0.619629 10.4277 3.44855 13.2567 6.93821 13.2567Z" stroke="#2C3E50" stroke-miterlimit="100"/>
-                <path d="M6.93799 3.46899V6.93802L11.1504 9.292" stroke="#2C3E50" stroke-miterlimit="100" stroke-linecap="round"/>
-              </svg>
               <div class="info-header__inner-item">
-                <p>Cуточный лимит запросов:
-                  <span>{{ requestCount }}</span>
-                </p>
+                <span class="info-header__title">Cуточный лимит запросов:</span>
+                <span class="info-header__result info-header__result_circled">{{ requestCount }}</span>
               </div>
+              <div class="divider"></div>
               <div class="info-header__inner-item">
-                <p>остаток дней:
-                  <span>{{ daysRemaining }}</span>
-                </p>
+                <span class="info-header__title">остаток дней:</span>
+                <span class="info-header__result info-header__result_circled">{{ daysRemaining }}</span>
               </div>
             </div>
           </div>
@@ -128,80 +79,36 @@ export default {
       type: Boolean,
       default: false
     },
-  },
-  data() {
-    return {
-      showNotification: false,
-      systemMessage: null,
-      currency: null,
-      timer: null,
-    }
-  },
-  created() {
-    this.fetchCurrency();
-  },
-  mounted() {
-    this.timer = setTimeout(this.fetchNotification, 3000);
-  },
-  watch: {
-    showNotification() {
-      if(!this.showNotification) {
-        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.showNotification = true;
-        }
-
-      } catch(e) {
-        console.log(e.message)
-      }
+    isOpenNotification: {
+      type: Boolean,
+      default: false
     },
-    async fetchCurrency() {
-      try {
-        const response = await fetch('https://users.adtdev.kz/api/v1/information/currency');
-        const { data } = await response.json();
-
-        if(data.USD) {
-          this.currency = data.USD;
-        }
-
-      } catch(e) {
-        console.log(e.message)
-      }
+    weather: {
+      type: Array,
+      default: () => []
     },
-    async fetchWeather() {
-      try {
-        const response = await fetch('https://users.adtdev.kz/api/v1/information/weather');
-        const result = await response.json();
-
-        if(result) {
-          console.log(result);
-        }
-
-      } catch(e) {
-        console.log(e.message)
-      }
+    currencies: {
+      type: Array,
+      default: () => []
     },
-    closeNotification() {
-      this.showNotification = !this.showNotification
+    systemMessage:{
+      type: String,
+      default: ''
     },
   },
+  methods: {
+    closeNotification() {
+      this.$emit("closeNotification", this.isOpenNotification)
+    }
+  }
+
 }
 </script>
 
 <style scoped lang="scss">
 .info {
   position: relative;
-  @media (min-width: 850px) {
+  @media (min-width: 1025px) {
     height: 30px;
   }
   &-notification {
@@ -213,7 +120,7 @@ export default {
     background: #007AFF;
     padding: 7px 0;
     font-size: 14px;
-    @media(max-width: 850px) {
+    @media(max-width: 1025px) {
       position: relative;
       height: 30px;
     }
@@ -237,9 +144,27 @@ export default {
     background: #FFFFFF;
     padding: 7px 0;
     border-bottom: 0.5px solid rgba(189, 199, 206, 0.5);
-    @media (max-width: 850px) {
+    @media (max-width: 1025px) {
       display: none;
     }
+    &__title {
+      font-weight: 500;
+      font-size: 12px;
+      line-height: 14px;
+      color: #2C3E50;
+    }
+    &__result {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 14px;
+      color: #2C3E50;
+      &_circled {
+        color: #ffffff;
+        padding: 4px 12px;
+        background: #007AFF;
+        border-radius: 100px;
+      }
+    }
     &__list {
       display: flex;
       justify-content: space-between;
@@ -248,50 +173,33 @@ export default {
     &__item {
       display: flex;
       align-items: center;
-      gap: 15px;
+      gap: 20px;
       &-elem {
         display: flex;
         align-items: center;
-      }
-      .first-elem {
-        font-weight: 700;
-        font-size: 10px;
-        gap: 5px;
+        gap: 7px;
       }
     }
     &__inner-item {
       display: flex;
       align-items: center;
+      gap: 8px;
       font-size: 12px;
-      &:after {
-        content: "";
-        background: #2C3E50;
-        width: 1px;
-        height: 10px;
-        margin: 0 10px;
-        transform: rotate(20deg);
-      }
-      &:last-child:after {
-        content: none;
-      }
-      &.weather {
-        span {
-          font-weight: 600;
-          font-size: 10px;
-          padding-right: 3px;
-        }
-      }
     }
     .last-header-item {
       .info-header__inner-item:nth-child(2) {
         margin-left: 5px;
       }
-      span {
-        font-weight: 700;
-        color: #2c3e50;
-      }
     }
   }
+
+  .divider {
+    background: #2C3E50;
+    width: 1px;
+    height: 10px;
+    margin: 0 10px;
+    transform: rotate(20deg);
+  }
 }
 
 .fade-enter-active,

package/src/components/Table/ATable.vue

@@ -0,0 +1,117 @@
+<template>
+  <table class="a-table">
+    <thead>
+      <tr>
+        <th v-for="(col, i) in cols" :key="i">{{ col.name }}</th>
+      </tr>
+    </thead>
+    <tbody v-for="(row, i) in rows" :key="i">
+      <tr>
+        <td v-for="col in cols" :key="col.key" :data-label="`${col.name}`">
+          <slot :name="'key-' + col.key" :row="row">
+            {{ row[col.key] || defaultEmpty }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  props: {
+    cols: {
+      type: Array,
+      default: () => [],
+    },
+    rows: {
+      type: Array,
+      default: () => [],
+    },
+    defaultEmpty: {
+      type: [String, Number],
+      default: "Нет данных",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.a-table {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+
+  @media screen and (max-width: 850px) {
+    border: 0;
+  }
+
+  thead {
+    background: rgba(189, 199, 206, 0.3);
+
+    @media screen and (max-width: 850px) {
+      display: none;
+    }
+
+    tr {
+      display: flex;
+
+      th {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+        padding: 20px 16px;
+        font-size: 12px;
+        font-weight: normal;
+        word-break: break-word;
+
+        @media screen and (max-width: 850px) {
+          justify-content: flex-start;
+        }
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      display: flex;
+      border-bottom: 1px solid #ccc;
+
+      @media screen and (max-width: 850px) {
+        flex-direction: column;
+        margin: 10px;
+        padding: 10px 0;
+        border: 0;
+        background: rgba(189, 199, 206, 0.3);
+      }
+
+      td {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+        padding: 20px 16px;
+        word-break: break-word;
+        font-size: 12px;
+        font-weight: normal;
+        text-align: left;
+
+        @media screen and (max-width: 850px) {
+          flex-direction: column;
+          row-gap: 4px;
+          justify-content: flex-start;
+          padding: 8px 16px;
+        }
+
+        &:before {
+          @media screen and (max-width: 850px) {
+            content: attr(data-label);
+            display: flex;
+            align-items: left;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/Table/Table.stories.js

@@ -0,0 +1,15 @@
+import ATable from "./ATable.vue";
+
+export default {
+  title: "Table",
+  component: ATable,
+  template: "<a-table></a-table>",
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { ATable },
+  props: Object.keys(argTypes),
+  template: "<a-table v-bind='$props'></a-header>",
+});
+
+export const BaseTable = Template.bind({});

package/src/components/index.js

@@ -1,4 +1,5 @@
 import Vue from "vue";
+import ACheckbox from "./Checkbox/ACheckbox";
 import AButton from "./Button/AButton";
 import ATextField from "./TextField/TextField";
 import APasswordField from "./PasswordField/PasswordField";
@@ -7,8 +8,10 @@ import AHeader from "./Header/Header";
 import AFooter from "./Footer/Footer";
 import ASearchTextField from "./SearchTextField/SearchTextField";
 import AMailTo from "./MailTo/MailTo";
+import ATable from "./Table/ATable";
 
 const Components = {
+  ACheckbox,
   AButton,
   ATextField,
   APasswordField,
@@ -17,6 +20,7 @@ const Components = {
   AFooter,
   ASearchTextField,
   AMailTo,
+  ATable,
 };
 
 Object.keys(Components).forEach((name) => {

package/src/configs/profileDropDown.js

@@ -54,6 +54,13 @@ export const profileDropDown = [
                 dev: "https://pk.adtdev.kz/profile/browsing-history",
                 staging: "https://pk.adada.kz/profile/browsing-history",
                 prod: "https://pk.adata.kz/profile/browsing-history"
+            },
+            {
+                id: 10,
+                name: "Мои отчеты",
+                dev: "https://pk.adtdev.kz/profile/my-reports",
+                staging: "https://pk.adada.kz/profile/my-reports",
+                prod: "https://pk.adata.kz/profile/my-reports"
             }
         ],
         disabled: false