@webitel/ui-sdk 0.1.13 → 0.1.100

package/src/components/organisms/wt-app-header/wt-app-navigator.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="wt-app-navigator" v-clickaway="close">
+    <wt-icon-btn
+      class="wt-app-navigator__btn"
+      :class="{'active': isOpened}"
+      :tooltip="$t('webitelUI.appNavigator.title')"
+      icon="app-navigator"
+      @click="isOpened = !isOpened"
+    ></wt-icon-btn>
+    <transition name="fade">
+      <nav
+        class="wt-app-navigator__nav-wrapper"
+        v-show="isOpened"
+      >
+        <h3 class="wt-app-navigator__nav-title">
+          {{ $t('webitelUI.appNavigator.title') }}
+        </h3>
+        <ul class="wt-app-navigator__nav">
+
+          <li
+            v-if="formattedApps[WebitelApplications.AGENT]"
+            class="wt-app-navigator__card"
+            :class="{'active': formattedApps[WebitelApplications.AGENT].currentApp }"
+          >
+            <a
+              class="wt-app-navigator__card__link"
+              :href="formattedApps[WebitelApplications.AGENT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AGENT]}`)"
+              target="_blank"
+            >
+              <img
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
+                :alt="`${[WebitelApplications.AGENT]}-pic`"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.SUPERVISOR]"
+            class="wt-app-navigator__card"
+            :class="{'active': formattedApps[WebitelApplications.SUPERVISOR].currentApp }"
+          >
+            <a
+              class="wt-app-navigator__card__link"
+              :href="formattedApps[WebitelApplications.SUPERVISOR].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.SUPERVISOR]}`)"
+              target="_blank"
+            >
+              <img
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
+                :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.HISTORY]"
+            class="wt-app-navigator__card"
+            :class="{'active': formattedApps[WebitelApplications.HISTORY].currentApp }"
+          >
+            <a
+              class="wt-app-navigator__card__link"
+              :href="formattedApps[WebitelApplications.HISTORY].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.HISTORY]}`)"
+              target="_blank"
+            >
+              <img
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
+                :alt="`${[WebitelApplications.HISTORY]}-pic`"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="false && formattedApps[WebitelApplications.AUDIT]"
+            class="wt-app-navigator__card"
+            :class="{'active': formattedApps[WebitelApplications.AUDIT].currentApp }"
+          >
+            <a
+              class="wt-app-navigator__card__link"
+              :href="formattedApps[WebitelApplications.AUDIT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AUDIT]}`)"
+              target="_blank"
+            >
+              <img
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+                :alt="`${[WebitelApplications.AUDIT]}-pic`"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.ADMIN]"
+            class="wt-app-navigator__card"
+            :class="{'active': formattedApps[WebitelApplications.ADMIN].currentApp }"
+          >
+            <a
+              class="wt-app-navigator__card__link"
+              :href="formattedApps[WebitelApplications.ADMIN].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ADMIN]}`)"
+              target="_blank"
+            >
+              <img
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
+                :alt="`${[WebitelApplications.ADMIN]}-pic`"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.ANALYTICS]"
+            class="wt-app-navigator__card"
+            :class="{'active': formattedApps[WebitelApplications.ANALYTICS].currentApp }"
+          >
+            <a
+              class="wt-app-navigator__card__link"
+              :href="formattedApps[WebitelApplications.ANALYTICS].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ANALYTICS]}`)"
+              target="_blank"
+            >
+              <img
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
+                :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
+              >
+            </a>
+          </li>
+
+        </ul>
+      </nav>
+    </transition>
+  </div>
+</template>
+
+<script>
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
+
+export default {
+  name: 'wt-app-navigator',
+  data: () => ({
+    WebitelApplications,
+    isOpened: false,
+  }),
+
+  props: {
+    currentApp: {
+      type: String,
+    },
+    apps: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  computed: {
+    formattedApps() {
+      return this.apps.reduce((apps, app) => ({
+        ...apps,
+        [app.name]: {
+          ...app,
+          currentApp: this.currentApp === app.name,
+        },
+      }), {});
+    },
+  },
+
+  methods: {
+    close() {
+      this.isOpened = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-app-navigator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-left: var(--wt-app-header-content-gap);
+  z-index: var(--wt-app-header-content-z-index);
+}
+
+// dropdown part
+.wt-app-navigator__nav-wrapper {
+  @extend %wt-scrollbar;
+  position: absolute;
+  top: 100%; // icon
+  right: 0;
+  max-height: var(--wt-app-navigator-max-height);
+  padding: var(--wt-app-header-content-gap);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+  overflow: auto;
+}
+
+.wt-app-navigator__nav-title {
+  @extend %typo-strong-lg;
+  text-align: center;
+  text-transform: uppercase;
+  margin-bottom: var(--wt-app-header-content-gap);
+}
+
+// ul with li apps
+.wt-app-navigator__nav {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--wt-app-header-content-gap);
+}
+
+.wt-app-navigator__card {
+  width: var(--wt-app-navigator-item-size);
+  height: var(--wt-app-navigator-item-size);
+  box-sizing: border-box;
+  border: var(--wt-app-navigator-item-border);
+  border-color: var(--wt-app-navigator-item-border-color);
+  border-radius: var(--border-radius);
+  transition: var(--transition);
+
+  &.active, &:hover {
+    border-color: var(--wt-app-navigator-item-border-color--hover);
+  }
+}
+
+// a tag
+.wt-app-navigator__card__link {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+}
+
+// img inside a
+.wt-app-navigator__card__img {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/src/components/organisms/wt-app-header/wt-header-actions.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="wt-header-actions">
+    <wt-icon-btn
+      class="wt-header-actions__btn"
+      :class="{'active': isOpened}"
+      :tooltip="$t('webitelUI.headerActions.account')"
+      icon="account"
+      @click="isOpened = !isOpened"
+      v-clickaway="close"
+    ></wt-icon-btn>
+    <transition name="fade">
+    <section class="wt-header-actions__panel-wrapper" v-show="isOpened">
+      <header class="wt-header-actions__header" v-if="isHeader">
+        <h3
+          class="wt-header-actions__name">{{ userName }}</h3>
+        <p
+          class="wt-header-actions__account">{{ userAccount }}</p>
+      </header>
+      <ul class="wt-header-actions__actions-wrapper">
+        <li class="wt-header-actions__action">
+          <a
+            class="wt-header-actions__action__link"
+            href="https://docs.webitel.com/display/WEP/Webitel+Elastic+Platform"
+            target="_blank"
+            @click="close"
+          >
+            <wt-icon icon="docs" size="sm"></wt-icon>
+            <span>{{$t('webitelUI.headerActions.docs')}}</span>
+          </a>
+        </li>
+        <li class="wt-header-actions__action">
+          <a
+            class="wt-header-actions__action__link"
+            @click.prevent="settings"
+          >
+            <wt-icon icon="settings" size="sm"></wt-icon>
+            <span>{{$t('webitelUI.headerActions.settings')}}</span>
+          </a>
+        </li>
+        <li class="wt-header-actions__action wt-header-actions__action--logout">
+          <a
+            class="wt-header-actions__action__link"
+            @click.prevent="logout"
+          >
+            <wt-icon icon="logout" size="sm" color="danger"></wt-icon>
+            <span>{{$t('webitelUI.headerActions.logout')}}</span>
+          </a>
+        </li>
+      </ul>
+      <footer class="wt-header-actions__footer" v-if="isFooter">
+        <p class="wt-header-actions__build__version">
+          {{ buildVersion }}
+        </p>
+      </footer>
+    </section>
+    </transition>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'wt-header-actions',
+    data: () => ({
+      isOpened: false,
+    }),
+    props: {
+      user: {
+        type: Object,
+        default: () => ({}),
+      },
+      buildInfo: {
+        type: Object,
+      },
+    },
+
+    computed: {
+      isHeader() {
+        return !!(this.userName || this.userAccount);
+      },
+      isFooter() {
+        return this.buildInfo;
+      },
+      userName() {
+        return this.user.name || this.user.username;
+      },
+      userAccount() {
+        return this.user.preferredUsername || this.user.account;
+      },
+      buildVersion() {
+        return `${this.$t('webitelUI.headerActions.buildVersion')}: v${this.buildInfo.release}-${this.buildInfo.build}`;
+      },
+    },
+
+    methods: {
+      settings() {
+        this.$emit('settings');
+        this.close();
+      },
+
+      logout() {
+        this.$emit('logout');
+        this.close();
+      },
+
+      close() {
+        this.isOpened = false;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-header-actions {
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-left: var(--wt-app-header-content-gap);
+    z-index: var(--wt-app-header-content-z-index);
+  }
+
+  .wt-header-actions__panel-wrapper {
+    @extend %typo-body-md;
+    position: absolute;
+    top: 100%; // icon
+    right: 0;
+    min-width: var(--wt-header-actions-min-width);
+    margin-top: var(--wt-app-header-content-panel-margin);
+    background: var(--wt-app-header-content-bg-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    transition: var(--transition);
+  }
+
+  .wt-header-actions__header, .wt-header-actions__footer {
+    padding: var(--wt-app-header-content-gap);
+  }
+
+  .wt-header-actions__name {
+    @extend %typo-body-lg;
+    white-space: nowrap;
+  }
+
+  .wt-header-actions__account {
+    @extend %typo-body-lg;
+    white-space: nowrap;
+  }
+
+  .wt-header-actions__action {
+    display: flex;
+
+    &:hover {
+      background: var(--wt-header-actions-action-bg-color--hover);
+    }
+
+    .wt-header-actions__action__link {
+      @extend %typo-body-md;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: var(--wt-header-actions-action-link-padding);
+      cursor: pointer;
+
+      .wt-icon {
+        margin-right: 10px;
+      }
+    }
+
+    &--logout .wt-header-actions__action__link {
+      color: var(--false-color);
+    }
+  }
+
+  .wt-header-actions__build__version {
+    @extend %typo-body-sm;
+    white-space: nowrap;
+  }
+</style>

package/src/components/organisms/wt-error-page/__tests__/wt-error-page.spec.js

@@ -0,0 +1,17 @@
+import { shallowMount } from '@vue/test-utils';
+import ErrorPage from '../wt-error-page.vue';
+
+describe('Error Page', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(ErrorPage, { propsData: { type: '' } });
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('renders a component with 404 type', () => {
+    const wrapper = shallowMount(ErrorPage, { propsData: { type: '404' } });
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('renders a component with 403 type', () => {
+    const wrapper = shallowMount(ErrorPage, { propsData: { type: '403' } });
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/organisms/wt-error-page/wt-error-page.vue

@@ -0,0 +1,104 @@
+<template>
+  <section class="wt-error-page">
+    <article class="wt-error-page__wrapper">
+      <img
+        class="wt-error-page__img"
+        :src="errorPic.src"
+        :alt="errorPic.alt"
+      >
+      <h2
+        class="wt-error-page__title">{{ errorTitle }}</h2>
+      <p class="wt-error-page__text">{{ errorText }}</p>
+      <wt-button
+        class="wt-error-page__action"
+        @click="$emit('back')"
+      >{{ $t('webitelUI.errorPages.goBack') }}
+      </wt-button>
+    </article>
+  </section>
+</template>
+
+<script>
+import pic403 from '../../../assets/components/organisms/wt-error-page/403.svg';
+import pic404 from '../../../assets/components/organisms/wt-error-page/404.svg';
+
+export default {
+  name: 'wt-error-page',
+  props: {
+    type: {
+      type: String,
+      required: true,
+      options: ['403', '404'],
+    },
+  },
+  computed: {
+    errorPic() {
+      switch (this.type) {
+        case '403':
+          return { src: pic403, alt: 'Forbidden pic' };
+        case '404':
+          return { src: pic404, alt: 'Not found pic' };
+        default:
+          return '';
+      }
+    },
+    errorTitle() {
+      switch (this.type) {
+        case '403':
+          return this.$t('webitelUI.errorPages.page403.title');
+        case '404':
+          return this.$t('webitelUI.errorPages.page404.title');
+        default:
+          return '';
+      }
+    },
+    errorText() {
+      switch (this.type) {
+        case '403':
+          return this.$t('webitelUI.errorPages.page403.text');
+        case '404':
+          return this.$t('webitelUI.errorPages.page404.text');
+        default:
+          return '';
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-error-page {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100vw;
+  min-height: 100vh;
+  padding: 90px;
+  background: var(--main-color);
+
+  &__wrapper {
+    text-align: center;
+    color: var(--text-contrast-color);
+  }
+
+  &__img {
+    max-width: 65vw;
+    width: 778px;
+    user-select: none;
+  }
+
+  &__title {
+    text-transform: uppercase;
+    margin-top: 69px;
+  }
+
+  &__text {
+    margin-top: 21px;
+  }
+
+  &__action {
+    margin-top: 40px;
+  }
+}
+</style>

package/src/components/organisms/wt-filters-panel-wrapper/__tests__/wt-filters-panel-wrapper.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils';
+import FiltersPanelWrapper from '../wt-filters-panel-wrapper.vue';
+
+describe('Filters Panel Wrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(FiltersPanelWrapper);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('emits "reset" event at wt-table-actions "filterReset" event', () => {
+    const wrapper = shallowMount(FiltersPanelWrapper);
+    wrapper.findComponent({ name: 'wt-table-actions' })
+    .vm.$emit('input', 'filterReset');
+    expect(wrapper.emitted().reset).toBeTruthy();
+  });
+  it(`toggles "filters-panel-wrapper--opened" class at
+   wt-table-actions "settings" event`, async () => {
+    const wrapper = shallowMount(FiltersPanelWrapper);
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(false);
+    wrapper.findComponent({ name: 'wt-table-actions' })
+    .vm.$emit('input', 'settings');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.classes().includes('filters-panel-wrapper--opened')).toBe(true);
+  });
+});