@webitel/ui-sdk 0.1.2 → 0.1.3-vue3

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

@@ -1,122 +1,142 @@
 <template>
   <footer class="wt-pagination">
     <div class="wt-pagination__size">
-      <div class="wt-pagination__size-text">{{$t('webitelUI.pagination.sizeText')}}</div>
+      <div class="wt-pagination__size-text">{{ $t('webitelUI.pagination.sizeText') }}</div>
       <wt-input
-        class="wt-pagination__size-input"
+        :number-max="1000"
+        :number-min="1"
         :value="size"
+        class="wt-pagination__size-input"
         type="number"
-        :number-min="1"
-        :number-max="1000"
-        @input="changeSize"
+        @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.native="goPrev"
-      ></wt-icon-btn>
-      <wt-icon-btn
-        class="wt-pagination__page-control"
-        :icon="'arrow-right'"
-        :tooltip="$t('webitelUI.pagination.next')"
-        :disabled="!next"
-        @click.native="goNext"
-      ></wt-icon-btn>
+      <wt-tooltip>
+        <template v-slot:activator>
+          <wt-icon-btn
+            :disabled="!prev"
+            class="wt-pagination__page-control"
+            icon="arrow-left"
+            @click="goPrev"
+          ></wt-icon-btn>
+        </template>
+        {{ $t('webitelUI.pagination.prev') }}
+      </wt-tooltip>
+      <wt-tooltip>
+        <template v-slot:activator>
+          <wt-icon-btn
+            :disabled="!next"
+            class="wt-pagination__page-control"
+            icon="arrow-right"
+            @click="goNext"
+          ></wt-icon-btn>
+        </template>
+        {{ $t('webitelUI.pagination.next') }}
+      </wt-tooltip>
     </div>
   </footer>
 </template>
 
 <script>
-  import debounce from '../../../scripts/debounce';
+import debounce from '../../../scripts/debounce';
 
-  export default {
-    name: 'wt-pagination',
-    props: {
-      size: {
-        type: [String, Number],
-        required: true,
-      },
-      next: {
-        type: Boolean,
-        required: true,
-      },
-      prev: {
-        type: Boolean,
-        required: true,
-      },
+export default {
+  name: 'wt-pagination',
+  props: {
+    size: {
+      type: [String, Number],
+    },
+    next: {
+      type: Boolean,
+      default: false,
+    },
+    prev: {
+      type: Boolean,
+      default: false,
     },
-    model: {
-      prop: 'size',
-      event: 'change',
+    debounce: {
+      type: Boolean,
+      default: false,
     },
+    debounceDelay: {
+      type: Number,
+      default: 1000,
+    },
+  },
+  model: {
+    prop: 'size',
+    event: 'change',
+  },
 
-    watch: {
-      value() {
-        this.changeSize.call(this);
-      },
+  watch: {
+    size(value) {
+      this.changeSize(value);
     },
+  },
 
-    data: () => ({
-      defaultSize: '10',
-    }),
+  data: () => ({
+    defaultSize: '10',
+  }),
 
-    created() {
-      this.changeSize = debounce(this.changeSize);
-    },
+  created() {
+    if (this.debounce) this.changeSize = debounce(this.changeSize, this.debounceDelay);
+  },
 
-    methods: {
-      changeSize(value) {
-        const size = (value > 0 && value <= 1000)
-          ? value
-          : this.defaultSize;
-        this.$emit('change', size);
-      },
-      goNext() {
-        this.$emit('next');
-      },
-      goPrev() {
-        this.$emit('prev');
-      },
+  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;
+.wt-pagination {
+  @extend %typo-body-1;
 
-    display: inline-flex;
-    align-items: center;
-    margin-left: auto;
-  }
+  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 {
+  display: flex;
+  align-items: center;
+  margin-right: var(--pagination-gap);
+}
 
-  .wt-pagination__size-text {
-    margin-right: var(--pagination-size-text-margin-right);
-  }
+.wt-pagination__size-text {
+  margin-right: var(--pagination-gap);
+}
 
-  .wt-pagination__size-input {
-    width: var(--pagination-size-input-width);
-  }
+.wt-pagination__size-input {
+  width: var(--pagination-size-input-width);
+}
 
-  .wt-pagination__page-controls {
-    display: flex;
-    align-items: center;
-  }
+.wt-pagination__page-controls {
+  display: flex;
+  align-items: center;
+}
+
+.wt-pagination__page-control {
+  margin-left: var(--pagination-gap);
 
-  .wt-pagination__page-control {
-    margin-left: var(--pagination-page-controls-margin);
-    &:first-child {
-      margin-left: 0;
-    }
+  &: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', () => {
+  xit('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,203 @@
+<template>
+  <aside
+    class="wt-player"
+    :class="[`wt-player--position-${position}`]"
+  >
+    <component
+      :is="playerType"
+      class="wt-player__player"
+      ref="player"
+      :src="src"
+      :autoplay="autoplay"
+      controls
+      v-on="listeners"
+    ></component>
+
+    <!-- The "wt-icon-btn" component is append in to "audio" element by "setCloseIcon" method-->
+    <wt-icon-btn
+      v-if="closable"
+      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'),
+    },
+    mime: {
+      type: String,
+      default: 'audio',
+    },
+    // plyr-specific options
+    resetOnEnd: {
+      type: Boolean,
+      default: false,
+    },
+    invertTime: {
+      type: Boolean,
+      default: true,
+    },
+    // plyr is caching volume settings so we should reset them at init
+    resetVolume: {
+      type: Boolean,
+      default: false,
+    },
+    closable: {
+      type: Boolean,
+      default: true,
+    },
+    position: {
+      type: String,
+      default: 'sticky',
+    },
+  },
+  data: () => ({
+    player: null,
+  }),
+
+  watch: {
+    src() {
+      this.setupDownload();
+    },
+    download() {
+      this.setupDownload();
+    },
+  },
+
+  mounted() {
+    this.setupPlayer();
+  },
+
+  computed: {
+    listeners() {
+      return {
+        ...this.$listeners,
+      };
+    },
+    playerType() {
+      return this.mime.includes('video') ? 'video' : 'audio';
+    },
+  },
+
+  methods: {
+    async setupPlayer() {
+      await this.$nextTick(); // test is failing to render component if element is passed to Plyr as Vue $ref
+      const baseURL = this.$baseURL || process.env.BASE_URL;
+      if (this.player) this.player.destroy();
+      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(this.$refs.player, {
+      // this.player = new Plyr('.wt-player__player', {
+        autoplay: this.autoplay,
+        loadSprite: false,
+        resetOnEnd: this.resetOnEnd,
+        invertTime: this.invertTime,
+        iconUrl: `${baseURL}img/plyr.svg`,
+        controls,
+        loop: {
+          active: this.loop,
+        },
+      });
+
+      if (this.resetVolume) this.makeVolumeReset();
+      if (this.download) this.setupDownload();
+
+      if (this.closable) this.appendCloseIcon();
+      this.$emit('initialized', this.player);
+    },
+    makeVolumeReset() {
+      this.player.volume = 1;
+      this.player.muted = false;
+    },
+    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.player.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-2;
+  bottom: 60px;
+
+  &--position {
+    &-sticky {
+      position: sticky;
+    }
+    &-relative {
+      position: relative;
+      bottom: unset;
+    }
+    &-static {
+      position: static;
+    }
+  }
+
+  .plyr {
+    max-width: 100%; // prevents <video> container overflow
+    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(--accent-secondary-color);
+    color: var(--text-primary-color);
+  }
+
+  .plyr__control--overlaid svg {
+    left: 0; // reset plyr style for video "play" button icon
+  }
+
+  //.plyr__control[role='menuitemradio']::before,
+  //.plyr__control[role='menuitemradio']:hover::before {
+  //  border: 2px solid var(--secondary-color);
+  //  background: var(--main-color);
+  //}
+  //
+  //.plyr__control[role='menuitemradio']::after {
+  //  background: var(--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,130 @@
+<template>
+  <wt-select
+    class="wt-status-select"
+    :value="selectedOption"
+    :options="availableOptions"
+    track-by="value"
+    :clearable="false"
+    :searchable="false"
+    @input="inputHandler"
+  >
+    <template v-slot:singleLabel="{ option }">
+      <wt-indicator
+        :color="option.color"
+        :text="duration"
+      ></wt-indicator>
+    </template>
+    <template v-slot:option="{ 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,
+    },
+    // size: {
+    //   type: String,
+    //   default: 'md',
+    //   options: ['sm', 'md'],
+    // },
+  },
+  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-status-select.wt-select ::v-deep {
+  box-shadow: var(--elevation-5);
+
+  .multiselect {
+    min-height: 0;
+  }
+
+  .multiselect__tags {
+    min-height: 0;
+    padding: var(--status-select-padding);
+    border: none;
+  }
+
+  .multiselect__select {
+    top: 0;
+    right: 0;
+  }
+
+  .multiselect__content-wrapper {
+    border: none;
+
+    .multiselect__option {
+      min-height: 0;
+      padding: 0;
+      color: var(--status-select-option-color);
+    }
+
+    .multiselect__option--highlight {
+      background: var(--status-select-bg--hover-color);
+    }
+  }
+}
+</style>