@webitel/ui-sdk 0.1.6 → 0.1.7-vue3

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>

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

@@ -0,0 +1,134 @@
+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',
+    sort: null,
+  },
+  {
+    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);
+  });
+});

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

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTableDeleteAction from '../table-cells/wt-table-delete-action.vue';
+
+describe('WtTableDeleteAction', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTableDeleteAction);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

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

@@ -0,0 +1,9 @@
+import { shallowMount } from '@vue/test-utils';
+import WtTableEditAction from '../table-cells/wt-table-edit-action.vue';
+
+describe('WtTableEditAction', () => {
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtTableEditAction);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/components/organisms/wt-table/_internals/getSortOrder.js

@@ -0,0 +1,12 @@
+const getNextSortOrder = (sort) => {
+  switch (sort) {
+    case 'asc':
+      return 'desc';
+    case 'desc':
+      return null;
+    default:
+      return 'asc';
+  }
+};
+
+export default getNextSortOrder;

package/src/components/organisms/wt-table/table-cells/wt-table-delete-action.vue

@@ -0,0 +1,21 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        icon="bucket"
+        @click="$emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.table.tableCells.deleteActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'wt-table-delete-action',
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/components/organisms/wt-table/table-cells/wt-table-edit-action.vue

@@ -0,0 +1,22 @@
+<template>
+  <wt-tooltip>
+    <template v-slot:activator>
+      <wt-icon-btn
+        class="table-action"
+        icon="edit"
+        @click="$emit('click')"
+      ></wt-icon-btn>
+    </template>
+    {{ $t('webitelUI.table.tableCells.editActionHint') }}
+  </wt-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'wt-table-edit-action',
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,252 @@
+<template>
+  <div class="wt-table">
+    <table class="wt-table__table">
+      <thead class="wt-table__head">
+      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__head">
+        <th v-if="selectable" class="wt-table__th wt-table__th--checkbox">
+          <wt-checkbox
+            :selected="isAllSelected"
+            @change="selectAll"
+          ></wt-checkbox>
+        </th>
+        <th
+          v-for="(col, key) of dataHeaders"
+          :key="key"
+          :class="[
+           {'wt-table__th--sortable': isColSortable(col)},
+           `wt-table__th--sort-${col.sort}`,
+        ]"
+          class="wt-table__th"
+          @click="sort(col)"
+        >
+          <div class="wt-table__th__text">{{ col.text }}</div>
+          <wt-icon
+            v-if="sortable"
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--asc"
+            icon="sort-arrow-up"
+            size="sm"
+          ></wt-icon>
+          <wt-icon
+            v-if="sortable"
+            class="wt-table__th__sort-arrow wt-table__th__sort-arrow--desc"
+            icon="sort-arrow-down"
+            size="sm"
+          ></wt-icon>
+        </th>
+        <th v-if="gridActions" class="wt-table__th__actions">
+          <slot name="actions-header"></slot>
+        </th>
+      </tr>
+      </thead>
+
+      <tbody class="wt-table__body">
+      <tr
+        v-for="(row, dataKey) of data"
+        :key="dataKey"
+        :class="`wt-table__tr__${row.id || dataKey}`"
+        :style="columnsStyle"
+        class="wt-table__tr wt-table__tr__body"
+      >
+        <td v-if="selectable" class="wt-table__td wt-table__td--checkbox">
+          <wt-checkbox
+            v-model="row._isSelected"
+          ></wt-checkbox>
+        </td>
+
+        <td
+          v-for="(col, headerKey) of dataHeaders"
+          :key="headerKey"
+          class="wt-table__td"
+        >
+          <slot :index="dataKey" :item="row" :name="col.value">
+            <div>{{ row[col.value] }}</div>
+          </slot>
+        </td>
+
+        <td v-if="gridActions" class="wt-table__td__actions">
+          <slot :index="dataKey" :item="row" name="actions"></slot>
+        </td>
+      </tr>
+      </tbody>
+
+      <tfoot v-if="isTableFooter" class="wt-table__foot">
+      <tr :style="columnsStyle" class="wt-table__tr wt-table__tr__foot">
+        <!--        empty checkbox column -->
+        <th v-if="selectable" class="wt-table__th__checkbox"></th>
+        <td
+          v-for="(col, headerKey) of dataHeaders"
+          :key="headerKey"
+          class="wt-table__td"
+        >
+          <slot :header="col" :index="headerKey" :name="`${col.value}-footer`"></slot>
+        </td>
+      </tr>
+      </tfoot>
+    </table>
+  </div>
+</template>
+
+<script>
+import getNextSortOrder from './_internals/getSortOrder';
+
+export default {
+  name: 'wt-table',
+  props: {
+    headers: {
+      type: Array,
+      default: () => [],
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    sortable: {
+      type: Boolean,
+      default: false,
+    },
+    selectable: {
+      type: Boolean,
+      default: true,
+    },
+    gridActions: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data: () => ({}),
+
+  computed: {
+    isAllSelected() {
+      return this.data.every((item) => item._isSelected);
+    },
+
+    dataHeaders() {
+      return this.headers
+                 .filter((header) => header.show === undefined || header.show);
+    },
+
+    columnsStyle() {
+      let gridTemplateColumns = '';
+      if (this.selectable) gridTemplateColumns += '24px '; // checkbox
+
+      const defaultColumnWidth = 'minmax(140px, 1fr)';
+      this.dataHeaders.forEach((header) => {
+        gridTemplateColumns += ` ${(header.width || defaultColumnWidth).trim()}`;
+      });
+
+      if (this.gridActions) gridTemplateColumns += ` ${'112px'}`; // actions
+      return `grid-template-columns: ${gridTemplateColumns}`;
+    },
+
+    isTableFooter() {
+      return Object.keys(this.$scopedSlots).some((slotName) => slotName.includes('-footer'));
+    },
+  },
+
+  methods: {
+    sort(col) {
+      if (!this.isColSortable(col)) return;
+      const nextSort = getNextSortOrder(col.sort);
+      this.$emit('sort', col, nextSort);
+    },
+    isColSortable({ sort }) {
+      /*       --sortable = sortable && col.sort === undefined cause there may be some columns we don't want to sort
+            strict check for  === undefined is used because col.sort = null is sort order too (actualu, without sort)
+            so we need to check if this property is present
+    */
+      return this.sortable && sort !== undefined;
+    },
+    selectAll() {
+      const { isAllSelected } = this;
+      // eslint-disable-next-line no-param-reassign,no-return-assign
+      this.data.forEach((item) => item._isSelected = !isAllSelected);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wt-table {
+  overflow: auto;
+}
+
+.wt-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.wt-table__head {
+  display: block;
+  box-sizing: border-box;
+  border: var(--table-head-border);
+  border-color: var(--table-head-border-color);
+  border-radius: var(--border-radius);
+}
+
+//.wt-table__head {
+//  display: block;
+//}
+
+.wt-table__tr {
+  display: grid;
+  padding: var(--table-row-padding);
+  transition: var(--transition);
+  grid-template-columns: repeat(auto-fit, var(--table-col-min-width));
+  grid-column-gap: var(--table-column-gap);
+
+  &:nth-child(2n) {
+    background: var(--table-secondary-color);
+  }
+}
+
+.wt-table__th,
+.wt-table__td {
+  @extend %typo-body-1;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  max-width: 100%;
+  height: fit-content;
+  min-height: var(--table-min-height);
+  padding: 0;
+  word-break: break-all;
+  overflow-wrap: break-word;
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+  }
+}
+
+.wt-table__th {
+  font-weight: normal;
+
+  &--sortable {
+    cursor: pointer;
+
+    &:hover ::v-deep .wt-icon__icon {
+      fill: var(--icon-color--hover);
+    }
+  }
+
+  .wt-table__th__sort-arrow {
+    display: none;
+    margin-left: var(--table-head-sort-arrow-margin);
+  }
+
+  &--sort-asc .wt-table__th__sort-arrow--asc {
+    display: block;
+  }
+
+  &--sort-desc .wt-table__th__sort-arrow--desc {
+    display: block;
+  }
+}
+
+.wt-table__foot {
+  border-color: var(--table-head-border-color);
+  border-top: var(--table-head-border);
+}
+</style>

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

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