@webitel/ui-sdk 0.1.7 → 0.1.8-vue3

package/src/components/organisms/wt-app-header/__tests__/WtHeaderActions.spec.js

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import WtHeaderActions from '../wt-header-actions.vue';
+
+describe('WtHeaderActions', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtHeaderActions);
+    expect(wrapper.classes('wt-header-actions')).toBe(true);
+  });
+
+  it('renders user data', () => {
+    const user = {
+      name: 'user nanme',
+      account: 'acc@ou.nt',
+    };
+    const wrapper = shallowMount(WtHeaderActions, {
+      propsData: { user },
+    });
+    expect(wrapper.find('.wt-header-actions__name').text()).toBe(user.name);
+    expect(wrapper.find('.wt-header-actions__account').text()).toBe(user.account);
+  });
+});

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

@@ -0,0 +1,24 @@
+<template>
+  <header class="wt-app-header">
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+  export default {
+    name: 'wt-app-header',
+  };
+</script>
+
+<style lang="scss" scoped>
+  .wt-app-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--wt-app-header-content-gap);
+    min-height: var(--wt-app-header-min-height); // fixed height because anything can be put inside slot, so padding won't work properly
+    padding: var(--wt-app-header-padding);
+    box-sizing: border-box;
+    background: var(--header-color);
+  }
+</style>

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

@@ -0,0 +1,249 @@
+<template>
+  <div v-clickaway="close" class="wt-app-navigator">
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          :class="{'active': isOpened}"
+          class="wt-app-navigator__btn"
+          icon="app-navigator"
+          @click="isOpened = !isOpened"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.appNavigator.title') }}
+    </wt-tooltip>
+
+    <transition name="fade">
+      <nav
+        v-show="isOpened"
+        class="wt-app-navigator__nav-wrapper"
+      >
+        <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="{'active': formattedApps[WebitelApplications.AGENT].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.AGENT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AGENT]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.AGENT]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-agent.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.SUPERVISOR]"
+            :class="{'active': formattedApps[WebitelApplications.SUPERVISOR].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.SUPERVISOR].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.SUPERVISOR]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.SUPERVISOR]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-supervisor.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.HISTORY]"
+            :class="{'active': formattedApps[WebitelApplications.HISTORY].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.HISTORY].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.HISTORY]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.HISTORY]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-history.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="false && formattedApps[WebitelApplications.AUDIT]"
+            :class="{'active': formattedApps[WebitelApplications.AUDIT].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.AUDIT].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.AUDIT]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.AUDIT]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-audit.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.ADMIN]"
+            :class="{'active': formattedApps[WebitelApplications.ADMIN].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.ADMIN].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ADMIN]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.ADMIN]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-admin.svg"
+              >
+            </a>
+          </li>
+
+          <li
+            v-if="formattedApps[WebitelApplications.ANALYTICS]"
+            :class="{'active': formattedApps[WebitelApplications.ANALYTICS].currentApp }"
+            class="wt-app-navigator__card"
+          >
+            <a
+              :href="formattedApps[WebitelApplications.ANALYTICS].href"
+              :title="$t(`webitelUI.appNavigator.${[WebitelApplications.ANALYTICS]}`)"
+              class="wt-app-navigator__card__link"
+              target="_blank"
+            >
+              <img
+                :alt="`${[WebitelApplications.ANALYTICS]}-pic`"
+                class="wt-app-navigator__card__img"
+                src="../../../assets/components/organisms/wt-app-header/app-navigator/app-analytics.svg"
+              >
+            </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;
+  z-index: var(--wt-app-header-content-z-index);
+  display: flex;
+  align-items: center;
+}
+
+// dropdown part
+.wt-app-navigator__nav-wrapper {
+  @extend %wt-scrollbar;
+  position: absolute;
+  top: 100%; // icon
+  right: 0;
+  overflow: auto;
+  max-height: var(--wt-app-navigator-max-height);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  padding: var(--wt-app-header-content-gap);
+  transition: var(--transition);
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--elevation-10);
+}
+
+.wt-app-navigator__nav-title {
+  @extend %typo-subtitle-1;
+  margin-bottom: var(--wt-app-header-content-gap);
+  text-align: center;
+  text-transform: uppercase;
+}
+
+// ul with li apps
+.wt-app-navigator__nav {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--wt-app-navigator-item-gap);
+}
+
+.wt-app-navigator__card {
+  box-sizing: border-box;
+  width: var(--wt-app-navigator-item-size);
+  height: var(--wt-app-navigator-item-size);
+  transition: var(--transition);
+  border: var(--wt-app-navigator-item-border);
+  border-color: var(--wt-app-navigator-item-border-color);
+  border-radius: var(--border-radius);
+
+  &.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,183 @@
+<template>
+  <div class="wt-header-actions">
+    <wt-tooltip>
+      <template v-slot:activator>
+        <wt-icon-btn
+          v-clickaway="close"
+          :class="{'active': isOpened}"
+          class="wt-header-actions__btn"
+          icon="account"
+          @click="isOpened = !isOpened"
+        ></wt-icon-btn>
+      </template>
+      {{ $t('webitelUI.headerActions.account') }}
+    </wt-tooltip>
+
+    <transition name="fade">
+      <section v-show="isOpened" class="wt-header-actions__panel-wrapper">
+        <header v-if="isHeader" class="wt-header-actions__header">
+          <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"></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"></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 color="danger" icon="logout"></wt-icon>
+              <span>{{ $t('webitelUI.headerActions.logout') }}</span>
+            </a>
+          </li>
+        </ul>
+        <footer v-if="isFooter" class="wt-header-actions__footer">
+          <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;
+  z-index: var(--wt-app-header-content-z-index);
+  display: flex;
+  align-items: center;
+}
+
+.wt-header-actions__panel-wrapper {
+  position: absolute;
+  top: 100%; // icon
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wt-header-actions-content-sections-gap);
+  min-width: var(--wt-header-actions-min-width);
+  margin-top: var(--wt-app-header-content-panel-margin);
+  padding: var(--wt-header-actions-padding);
+  transition: var(--transition);
+  border-radius: var(--border-radius);
+  background: var(--wt-app-header-content-bg-color);
+  box-shadow: var(--elevation-10);
+}
+
+.wt-header-actions__name {
+  @extend %typo-subtitle-1;
+  white-space: nowrap;
+}
+
+.wt-header-actions__account {
+  @extend %typo-body-1;
+  white-space: nowrap;
+}
+
+.wt-header-actions__action {
+  display: flex;
+  transition: var(--transition);
+
+  &:hover {
+    background: var(--wt-header-actions-action-bg-color--hover);
+  }
+
+  .wt-header-actions__action__link {
+    @extend %typo-body-1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: var(--wt-header-actions-action-link-padding);
+    cursor: pointer;
+
+    .wt-icon {
+      margin-right: var(--wt-header-actions-action-link-padding);
+    }
+  }
+
+  &--logout .wt-header-actions__action__link {
+    color: var(--false-color);
+  }
+}
+
+.wt-header-actions__build__version {
+  @extend %typo-caption;
+  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);
+  });
+});