@webitel/ui-sdk 0.1.13 → 0.1.100

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

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPageWrapper from '../wt-page-wrapper.vue';
+
+describe('WtPageWrapper', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPageWrapper);
+    expect(wrapper.classes('wt-page-wrapper')).toBe(true);
+  });
+
+  it('renders page wrapper header via header slot', () => {
+    const content = 'Page Wrapper header';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { header: content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__header').text()).toBe(content);
+  });
+
+  it('renders page wrapper actions panel via actions panel slot', () => {
+    const content = 'Page Wrapper actions panel content';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { 'actions-panel': content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__actions-panel').text()).toBe(content);
+  });
+
+  it('renders page wrapper main content via main slot', () => {
+    const content = 'Page Wrapper main';
+    const wrapper = shallowMount(WtPageWrapper, {
+      slots: { main: content },
+    });
+    expect(wrapper.find('.wt-page-wrapper__main').text()).toBe(content);
+  });
+});

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

@@ -0,0 +1,60 @@
+<template>
+  <section class="wt-page-wrapper">
+    <div class="wt-page-wrapper__header">
+      <slot name="header"></slot>
+    </div>
+    <div class="wt-page-wrapper__actions-panel" v-if="actionsPanel">
+      <slot name="actions-panel"></slot>
+    </div>
+    <div class="wt-page-wrapper__main">
+      <slot name="main"></slot>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'wt-page-wrapper',
+  props: {
+    actionsPanel: {
+      type: Boolean,
+      default: true,
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-page-wrapper {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding: var(--page-wrapper-padding);
+}
+
+.wt-page-wrapper__header,
+.wt-page-wrapper__actions-panel,
+.wt-page-wrapper__main {
+  box-sizing: border-box;
+  background: var(--main-primary-color);
+  border-radius: var(--border-radius);
+}
+
+.wt-page-wrapper__header,
+.wt-page-wrapper__actions-panel {
+  margin-bottom: var(--page-wrapper-section-margin);
+}
+
+.wt-page-wrapper__actions-panel {
+  padding: var(--page-wrapper-padding);
+}
+
+.wt-page-wrapper__main {
+  flex: 1;
+  display: flex;
+  width: 100%;
+  padding: var(--page-wrapper-main-section-padding);
+}
+
+</style>

package/src/components/organisms/wt-pagination/__tests__/WtPagination.spec.js

@@ -0,0 +1,38 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPagination from '../wt-pagination.vue';
+
+describe('WtPagination', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPagination);
+    expect(wrapper.classes('wt-pagination')).toBe(true);
+  });
+
+  it('debounces size change event when debounce prop is true', async (done) => {
+    const props = {
+      size: '10',
+      debounce: true,
+      debounceDelay: 100,
+    };
+    const wrapper = shallowMount(WtPagination, {
+      props,
+    });
+    props.size = '20';
+    wrapper.setProps(props);
+    expect(wrapper.emitted().change).toBeFalsy();
+    await setTimeout(() => {
+      expect(wrapper.emitted().change[0].length).toBe(1);
+      done();
+    }, 1000);
+  });
+
+  it('changes pages at icon btn click', async () => {
+    const wrapper = shallowMount(WtPagination, {
+      props: { isNext: true, page: 2 },
+    });
+    const pageControls = wrapper.findAll('.wt-pagination__page-control');
+    pageControls.at(0).vm.$emit('click');
+    pageControls.at(1).vm.$emit('click');
+    expect(wrapper.emitted().prev.length).toBe(1);
+    expect(wrapper.emitted().next.length).toBe(1);
+  });
+});

package/src/components/organisms/wt-pagination/wt-pagination.vue

@@ -0,0 +1,134 @@
+<template>
+  <footer class="wt-pagination">
+    <div class="wt-pagination__size">
+      <div class="wt-pagination__size-text">{{ $t('webitelUI.pagination.sizeText') }}</div>
+      <wt-input
+        class="wt-pagination__size-input"
+        :value="size"
+        type="number"
+        :number-min="1"
+        :number-max="1000"
+        @input="inputHandler"
+      ></wt-input>
+    </div>
+    <div class="wt-pagination__page-controls">
+      <wt-icon-btn
+        class="wt-pagination__page-control"
+        icon="arrow-left"
+        :tooltip="$t('webitelUI.pagination.prev')"
+        :disabled="!prev"
+        @click="goPrev"
+      ></wt-icon-btn>
+      <wt-icon-btn
+        class="wt-pagination__page-control"
+        icon="arrow-right"
+        :tooltip="$t('webitelUI.pagination.next')"
+        :disabled="!next"
+        @click="goNext"
+      ></wt-icon-btn>
+    </div>
+  </footer>
+</template>
+
+<script>
+import debounce from '../../../scripts/debounce';
+
+export default {
+  name: 'wt-pagination',
+  props: {
+    size: {
+      type: [String, Number],
+    },
+    next: {
+      type: Boolean,
+      default: false,
+    },
+    prev: {
+      type: Boolean,
+      default: false,
+    },
+    debounce: {
+      type: Boolean,
+      default: false,
+    },
+    debounceDelay: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  model: {
+    prop: 'size',
+    event: 'change',
+  },
+
+  watch: {
+    size(value) {
+      this.changeSize(value);
+    },
+  },
+
+  data: () => ({
+    defaultSize: '10',
+  }),
+
+  created() {
+    if (this.debounce) this.changeSize = debounce(this.changeSize, this.debounceDelay);
+  },
+
+  methods: {
+    inputHandler(value) {
+      const size = (value > 0 && value <= 1000)
+        ? value
+        : this.defaultSize;
+      this.$emit('input', size);
+      this.changeSize(size);
+    },
+    changeSize(value) {
+      this.$emit('change', value);
+    },
+    goNext() {
+      this.$emit('next');
+    },
+    goPrev() {
+      this.$emit('prev');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-pagination {
+  @extend %typo-body-md;
+
+  display: inline-flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.wt-pagination__size {
+  display: flex;
+  align-items: center;
+  margin-right: var(--pagination-margin-right);
+}
+
+.wt-pagination__size-text {
+  margin-right: var(--pagination-size-text-margin-right);
+}
+
+.wt-pagination__size-input {
+  width: var(--pagination-size-input-width);
+}
+
+.wt-pagination__page-controls {
+  display: flex;
+  align-items: center;
+}
+
+.wt-pagination__page-control {
+  margin-left: var(--pagination-page-controls-margin);
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+</style>

package/src/components/organisms/wt-player/__tests__/WtPlayer.spec.js

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtPlayer from '../wt-player.vue';
+
+describe('WtPlayer', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtPlayer);
+    expect(wrapper.classes('wt-player')).toBe(true);
+  });
+});

package/src/components/organisms/wt-player/wt-player.vue

@@ -0,0 +1,139 @@
+<template>
+  <aside class="wt-player">
+    <audio
+      id="wt-player__player"
+      ref="audio"
+      :src="src"
+      :autoplay="autoplay"
+      controls
+      v-on="listeners"
+    ></audio>
+
+    <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
+    <wt-icon-btn
+      class="wt-player__close-icon"
+      ref="close-icon"
+      icon="close"
+      @click="$emit('close')"
+    ></wt-icon-btn>
+  </aside>
+</template>
+
+<script>
+import Plyr from 'plyr';
+
+export default {
+  name: 'wt-player',
+  props: {
+    src: {},
+    autoplay: {
+      type: Boolean,
+      default: true,
+    },
+    loop: {
+      type: Boolean,
+      default: false,
+    },
+    download: {
+      type: [String, Function, Boolean],
+      default: () => (url) => url.replace('/stream', '/download'),
+    },
+  },
+  data: () => ({
+    player: null,
+  }),
+
+  watch: {
+    src() {
+      this.setupDownload();
+    },
+    download() {
+      this.setupDownload();
+    },
+  },
+
+  mounted() {
+    this.setupPlayer();
+  },
+
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+      };
+    },
+  },
+
+  methods: {
+    setupPlayer() {
+      const baseURL = this.$baseURL || process.env.BASE_URL;
+      if (this.player) this.player.restart();
+      const controls = ['play-large', 'play', 'progress', 'current-time',
+        'mute', 'volume', 'captions', 'settings', 'pip',
+        'airplay', 'fullscreen'];
+      if (this.download) controls.push('download');
+      this.player = new Plyr('#wt-player__player', {
+        autoplay: this.autoplay,
+        loadSprite: false,
+        iconUrl: `${baseURL}img/plyr.svg`,
+        controls,
+        loop: {
+          active: this.loop,
+        },
+      });
+      this.appendCloseIcon();
+    },
+    setupDownload() {
+      if (!this.download) this.setupPlayer();
+      else if (typeof this.download === 'string') {
+        this.player.download = this.download;
+      } else if (typeof this.download === 'function') {
+        this.player.download = this.download(this.src);
+      }
+    },
+    appendCloseIcon() {
+      const plyrControls = this.$refs.audio.plyr?.elements?.controls;
+      const closeIcon = this.$refs['close-icon'].$el;
+      if (plyrControls) {
+        plyrControls.append(closeIcon);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import "~plyr/src/sass/plyr.scss";
+
+.wt-player {
+  @extend %typo-body-md;
+  position: sticky;
+  bottom: 60px;
+
+  .plyr {
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+  }
+
+  &__close-icon {
+    transform: translate(var(--player-close-icon-transform-translate-x),
+      var(--player-close-icon-transform-translate-y));
+  }
+
+  .plyr__control:hover, {
+    background: var(--main-option-hover-color);
+    color: var(--text-primary-color);
+  }
+
+  //.plyr__control[role='menuitemradio']::before,
+  //.plyr__control[role='menuitemradio']:hover::before {
+  //  border: 2px solid var(--main-secondary-color);
+  //  background: var(--main-primary-color);
+  //}
+  //
+  //.plyr__control[role='menuitemradio']::after {
+  //  background: var(--main-secondary-color);
+  //}
+}
+
+</style>

package/src/components/organisms/wt-status-select/__tests__/WtStatusSelect.spec.js

@@ -0,0 +1,25 @@
+import { shallowMount } from '@vue/test-utils';
+import WtStatusSelect from '../wt-status-select.vue';
+import WtSelect from '../../../molecules/wt-select/wt-select.vue';
+
+describe('WtStatusSelect', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtStatusSelect, {
+      stubs: { WtSelect },
+    });
+    expect(wrapper.classes('wt-status-select')).toBe(true);
+  });
+
+  it('correctly represents duration', () => {
+    const wrapper = shallowMount(WtStatusSelect, {
+      stubs: { WtSelect },
+    });
+    expect(wrapper.vm.duration).toBe('00:00:00');
+
+    // wrapper.setProps({ statusDuration: 1 });
+    // expect(wrapper.vm.duration).toBe('00:00:01');
+    //
+    // wrapper.setProps({ statusDuration: '01' });
+    // expect(wrapper.vm.duration).toBe('00:00:01');
+  });
+});

package/src/components/organisms/wt-status-select/_internals/StatusOptions.lookup.js

@@ -0,0 +1,24 @@
+import AgentStatus from '../../../../enums/AgentStatus/AgentStatus.enum';
+
+export default [
+  {
+    locale: 'webitelUI.statusSelect.online',
+    color: 'success',
+    value: AgentStatus.ONLINE,
+  },
+  {
+    locale: 'webitelUI.statusSelect.pause',
+    color: 'primary',
+    value: AgentStatus.PAUSE,
+  },
+  {
+    locale: 'webitelUI.statusSelect.offline',
+    color: 'disabled',
+    value: AgentStatus.OFFLINE,
+  },
+  {
+    locale: 'webitelUI.statusSelect.breakOut',
+    color: 'break-out',
+    value: AgentStatus.BREAK_OUT,
+  },
+];

package/src/components/organisms/wt-status-select/wt-status-select.vue

@@ -0,0 +1,110 @@
+<template>
+  <wt-select
+    class="wt-status-select"
+    :value="selectedOption"
+    :options="availableOptions"
+    track-by="value"
+    :clearable="false"
+    :searchable="false"
+    @input="inputHandler"
+  >
+    <template slot="singleLabel" slot-scope="{ option }">
+      <wt-indicator
+        :color="option.color"
+        :text="duration"
+      ></wt-indicator>
+    </template>
+    <template slot="option" slot-scope="{ option }">
+      <wt-indicator
+        :color="option.color"
+        :text="option.text"
+      ></wt-indicator>
+    </template>
+  </wt-select>
+</template>
+
+<script>
+import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
+import convertDuration from '../../../scripts/convertDuration';
+import StatusOptions from './_internals/StatusOptions.lookup';
+
+export default {
+  name: 'wt-status-select',
+  props: {
+    status: {
+      type: String,
+      default: AgentStatus.OFFLINE,
+    },
+    statusDuration: {
+      type: [String, Number],
+      default: 0,
+    },
+    options: {
+      type: Array,
+    },
+  },
+  model: {
+    prop: 'status',
+    event: 'change',
+  },
+  computed: {
+    selectedOption() {
+      return this.statusOptions.find((option) => option.value === this.status);
+    },
+    statusOptions() {
+      return this.options ? this.options
+        : StatusOptions.map((opt) => ({
+          ...opt,
+          text: this.$t(opt.locale),
+        }));
+    },
+    availableOptions() {
+     return this.statusOptions.reduce((options, opt) => {
+       // PAUSE option is always passed
+       if ((this.status === opt.value && opt.value !== AgentStatus.PAUSE)
+       || opt.value === AgentStatus.BREAK_OUT) { // skip breakout option
+         return options;
+       }
+       return [...options, opt];
+     }, []);
+    },
+    duration() {
+      /* The check commented below limits the display of time in the status to 8 characters.
+      Accordingly, if the agent is in the status of 100 hours (100: 00: 00),
+      then this time will be displayed as NaN:NaN:NaN */
+
+      // if (typeof this.statusDuration === 'string' && this.statusDuration.length === 8) return this.statusDuration;
+      if (typeof this.statusDuration === 'string') return this.statusDuration;
+      if (this.statusDuration !== undefined) {
+        return convertDuration(this.statusDuration);
+      }
+      return this.selectedOption.text;
+    },
+  },
+  methods: {
+    inputHandler(value) {
+      this.$emit('change', value.value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-select ::v-deep {
+  box-shadow: var(--box-shadow);
+
+  .multiselect__tags {
+    padding: var(--status-select-select-tags-padding);
+    border: none;
+  }
+
+  .multiselect__content-wrapper {
+    border: none;
+
+    .multiselect__option--highlight {
+      color: var(--status-select--hover-color);
+      background: var(--status-select-bg--hover-color);
+    }
+  }
+}
+</style>

package/src/components/organisms/wt-table/__tests__/WtTable.spec.js

@@ -0,0 +1,133 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTable from '../wt-table.vue';
+import WtCheckbox from '../../../molecules/wt-checkbox/wt-checkbox.vue';
+
+const headers = [
+  {
+    text: 'heading 1',
+    value: 'h1',
+  },
+  {
+    text: 'heading2',
+    value: 'h2',
+  },
+  {
+    text: 'heading 3',
+    value: 'h3',
+  },
+];
+const data = [
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  },
+  {
+    h1: 'value 1',
+    h2: 'value 2',
+    h3: 'value 3',
+    _isSelected: false,
+  }];
+
+describe('WtTable', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTable);
+    expect(wrapper.classes('wt-table')).toBe(true);
+  });
+
+  it('renders table data rows', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+      },
+    });
+    expect(wrapper.findAll('.wt-table__tr__body').length).toBe(data.length);
+  });
+
+  it('renders table headers', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+        selectable: false,
+        gridActions: false,
+      },
+    });
+    expect(wrapper.findAll('.wt-table__tr__head th').length).toBe(headers.length);
+  });
+
+  it('do not renders table footer by default', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+      },
+    });
+    expect(wrapper.find('.wt-table__foot').exists()).toBe(false);
+  });
+
+  it('renders table footer if footer slot is passed', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+      },
+      scopedSlots: {
+        'data-footer': '',
+      },
+    });
+    expect(wrapper.find('.wt-table__foot').isVisible()).toBe(true);
+  });
+
+  it('emits sort event at header click when sortable is true', () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+        sortable: true,
+      },
+    });
+    wrapper.find('.wt-table__th--sortable').trigger('click');
+    expect(wrapper.emitted().sort.pop()).toBeTruthy();
+  });
+
+  it('draws sort arrow, if a column is sorted', () => {
+    headers[0].sort = 'asc';
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+        sortable: true,
+      },
+    });
+    expect(wrapper
+      .find('.wt-table__th--sortable .wt-table__th__sort-arrow')
+      .exists()).toBe(true);
+  });
+
+  it('selects all rows at header checkbox click', async () => {
+    const wrapper = shallowMount(WtTable, {
+      propsData: {
+        headers,
+        data,
+        selectable: true,
+      },
+    });
+    wrapper.findComponent(WtCheckbox).vm.$emit('change');
+    expect(data.every((item) => item._isSelected)).toBe(true);
+  });
+});