@webitel/ui-sdk 24.12.29 → 24.12.34

package/src/components/wt-tooltip/wt-tooltip.vue

@@ -28,7 +28,14 @@
 </template>
 
 <script setup>
-import { autoPlacement, autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/vue';
+import {
+  autoPlacement,
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useFloating,
+} from '@floating-ui/vue';
 import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import debounce from '../../scripts/debounce.js';
 import { useTooltipTriggerSubscriptions } from './_internals/useTooltipTriggerSubscriptions.js';
@@ -103,7 +110,11 @@ const { floatingStyles } = useFloating(activator, floating, {
   TOGGLE BECAUSE OF PERFORMANCE ISSUES, RELATED TO USAGE OF AUTO_UPDATE OF POSITIONS
   */
   whileElementsMounted: autoUpdate, // https://floating-ui.com/docs/vue#anchoring
-  middleware: [shift(), offset(4), props.placement === 'auto' ? autoPlacement() : flip()],
+  middleware: [
+    shift(),
+    offset(4),
+    props.placement === 'auto' ? autoPlacement() : flip(),
+  ],
 });
 
 useTooltipTriggerSubscriptions({

package/src/components/wt-tree-table/_variables.scss

@@ -0,0 +1,19 @@
+:root {
+  --wt-tree-table-col-min-witdh: var(--table-col-min-width);
+
+  --wt-tree-table-head-sort-arrow-margin: var(--table-head-sort-arrow-margin);
+  --wt-tree-table-head-border: var(--table-head-border);
+
+  --wt-tree-table-min-height: var(--table-min-height);
+  --wt-tree-table-column-gap: var(--table-column-gap);
+  --wt-tree-table-row-padding: var(--table-row-padding);
+
+  --wt-tree-table-head-border-color: var(--wt-table-head-border-color);
+  --wt-tree-table-head-background-color: var(--wt-table-head-background-color);
+  --wt-tree-table-primary-color: var(--wt-table-primary-color);
+  --wt-tree-table-zebra-color: var(--wt-table-zebra-color);
+}
+
+:root.theme--dark {
+  --wt-tree-table-head-border-color: var(--wt-table-head-border-color);
+}

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

@@ -0,0 +1,323 @@
+<template>
+  <div class="wt-tree-table">
+    <table class="wt-tree-table-wrapper">
+      <thead class="wt-tree-table-head">
+        <tr class="wt-tree-table-tr wt-tree-table-tr-head">
+          <th
+            v-for="(col, key) of dataHeaders"
+            :key="key"
+            :class="[
+              {
+                'wt-tree-table-th--sortable': isColSortable(col),
+              },
+              `wt-tree-table-th--sort-${col.sort}`,
+            ]"
+            :style="col.width ? `min-width:${col.width}` : ''"
+            class="wt-tree-table-th"
+            @click="sort(col)"
+          >
+            <div class="wt-tree-table-th__content">
+              <div v-if="key === 0 && selectable">
+                <wt-checkbox :selected="isAllSelected" @change="selectAll" />
+              </div>
+              <div class="wt-tree-table-th__text">
+                {{ col.text }}
+              </div>
+              <wt-icon
+                v-if="sortable"
+                class="wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--asc"
+                icon="sort-arrow-up"
+                size="sm"
+              />
+              <wt-icon
+                v-if="sortable"
+                class="wt-tree-table-th-sort-arrow wt-tree-table-th-sort-arrow--desc"
+                icon="sort-arrow-down"
+                size="sm"
+              />
+            </div>
+          </th>
+          <th v-if="gridActions" class="wt-tree-table-th__actions">
+            <div class="wt-tree-table-th__content">
+              <slot name="actions-header" />
+            </div>
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="wt-tree-table-body">
+        <wt-tree-table-row
+          v-for="(row, dataKey) of data"
+          :key="dataKey"
+          :row-position="dataKey"
+          :data-headers="dataHeaders"
+          :data="row"
+          :selectable="selectable"
+          :children-prop="childrenProp"
+          :selected-elements="selectedElements"
+          @update:selected="handleSelection($event.data, $event.select)"
+        >
+          <template #actions="{ item }">
+            <slot name="actions" :item="item" />
+          </template>
+          <template
+            v-for="(col, headerKey) of dataHeaders"
+            :key="headerKey"
+            #[col.value]="{ item }"
+          >
+            <slot :index="dataKey" :item="item" :name="col.value">
+              {{ item[col.value] }}
+            </slot>
+          </template>
+        </wt-tree-table-row>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, withDefaults } from "vue";
+import { useWtTable } from "../../composables/useWtTable/useWtTable.ts";
+import { getNextSortOrder } from "../../scripts/sortQueryAdapters";
+import type { TableHeader } from "../wt-table/types/table-header.js";
+import WtTreeTableRow from "../wt-tree-table-row/wt-tree-table-row.vue";
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 'Accepts list of header objects. Draws text depending on "text" property, looks for data values through "value", "show" boolean controls visibility of a column (if undefined, all visible by default). ' Column width is calculated by "width" param. By default, sets minmax(150px, 1fr). '
+     */
+    headers: TableHeader[];
+    /**
+     * 'List of data, represented by table. '
+     */
+    data: Record<string, any>[];
+    /**
+     * 'If true, draws sorting arrows and sends sorting events at header click. Draws a sorting arrow by "sort": "asc"/"desc" header value. '
+     */
+    sortable?: boolean;
+    /**
+     * 'If true, draws row selection checkboxes. Checkbox toggles data object _isSelected property. It's IMPORTANT to set this property before sending data to table. '
+     */
+    selectable?: boolean;
+    selected: any[];
+    /**
+     * 'If true, reserves space for 3 icon actions in the last column. Accessible by "actions" slot. '
+     */
+    gridActions?: boolean;
+    /**
+     * 'It's a key in data object, which contains children array. '
+     */
+    childrenProp: string;
+  }>(),
+  {
+    sortable: false,
+    selectable: true,
+    gridActions: true,
+  },
+);
+
+const emit = defineEmits(["sort", "update:selected"]);
+
+const checkHasChildItems = (item: Record<string, any>) => {
+  return item[props.childrenProp] && Array.isArray(item[props.childrenProp]);
+};
+
+const getSelectedValue = (items: Record<string, any>[]) => {
+  const selected = [];
+
+  const pushSelectedElement = (item: Record<string, any>) => {
+    if (item._isSelected) {
+      return [item];
+    }
+
+    if (checkHasChildItems(item)) {
+      item[props.childrenProp].forEach(pushSelectedElement);
+    }
+  };
+
+  items.forEach(pushSelectedElement);
+
+  return selected;
+};
+
+const getAllNestedElements = (item: Record<string, any>) => {
+  const nested = [];
+
+  const pushElement = (item: Record<string, any>) => {
+    nested.push(item);
+
+    if (checkHasChildItems(item)) {
+      item[props.childrenProp].forEach(pushElement);
+    }
+  };
+
+  item.forEach(pushElement);
+
+  return nested;
+};
+
+const selectedElements = computed<Record<string, any>[]>(() => {
+  // _isSelected for backwards compatibility
+  return props.selected || getSelectedValue(props.data);
+});
+
+const isAllSelected = computed(() => {
+  return (
+    selectedElements.value.length === getAllNestedElements(props.data).length &&
+    getAllNestedElements(props.data).length > 0
+  );
+});
+
+const { tableHeaders: dataHeaders } = useWtTable({
+  headers: props.headers,
+});
+
+const isColSortable = ({ sort }: TableHeader) => {
+  /*       --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 props.sortable && sort !== undefined;
+};
+
+const sort = (col: TableHeader) => {
+  if (!isColSortable(col)) return;
+  const nextSort = getNextSortOrder(col.sort);
+  emit("sort", col, nextSort);
+};
+
+const changeSelectItem = (items: Record<string, any>[], selected: boolean) => {
+  items.forEach((item) => {
+    item._isSelected = selected;
+
+    if (checkHasChildItems(item)) {
+      // Change selected for all nested elements
+      changeSelectItem(item[props.childrenProp], selected);
+    }
+  });
+};
+
+const selectAll = () => {
+  if (props.selected) {
+    emit("update:selected", isAllSelected.value ? [] : [...getAllNestedElements(props.data)]);
+  } else {
+    // for backwards compatibility
+
+    // https://webitel.atlassian.net/browse/WTEL-4634
+    // Value for _isSelected must be assigned explicitly.
+    // Because allSelected recomputes after each change
+
+    if (isAllSelected.value) {
+      changeSelectItem(props.data, false);
+    } else {
+      changeSelectItem(props.data, true);
+    }
+  }
+};
+
+const handleSelection = (row, select) => {
+  if (props.selected) {
+    if (select) {
+      emit("update:selected", [...selectedElements.value, row]);
+    } else {
+      emit(
+        "update:selected",
+        selectedElements.value.filter((item) => item !== row),
+      );
+    }
+  } else {
+    // for backwards compatibility
+    row._isSelected = !row._isSelected;
+  }
+};
+</script>
+
+<style lang="scss">
+@import "./variables.scss";
+</style>
+
+<style lang="scss" scoped>
+@import "../../../src/css/main.scss";
+
+.wt-tree-table {
+  @extend %wt-scrollbar;
+  overflow: auto;
+
+  &-head {
+    border: var(--wt-tree-table-head-border);
+    border-color: var(--wt-tree-table-head-border-color);
+    border-radius: var(--border-radius);
+    background: var(--wt-tree-table-head-background-color);
+  }
+}
+
+.wt-tree-table-wrapper {
+  width: 100%;
+  border-collapse: collapse;
+
+  .wt-tree-table-tr-wrapper {
+    background: var(--wt-tree-table-primary-color);
+
+    &:nth-child(2n) {
+      background: var(--wt-tree-table-zebra-color);
+    }
+  }
+}
+
+.wt-tree-table-th,
+.wt-tree-table-td {
+  @extend %typo-body-1;
+  height: fit-content;
+  min-height: var(--wt-tree-table-min-height);
+  padding: var(--spacing-xs);
+  word-break: break-all;
+  overflow-wrap: break-word;
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: var(--spacing-xs);
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+  }
+
+  &__text {
+    text-wrap: nowrap;
+  }
+}
+
+.wt-tree-table-th {
+  font-weight: normal;
+
+  &--sortable {
+    cursor: pointer;
+
+    &:hover :deep .wt-icon__icon {
+      fill: var(--icon-active-color);
+    }
+  }
+
+  .wt-tree-table-th-sort-arrow {
+    display: none;
+    margin-left: var(--wt-tree-table-head-sort-arrow-margin);
+  }
+
+  &--sort-asc .wt-tree-table-th-sort-arrow--asc {
+    display: block;
+  }
+
+  &--sort-desc .wt-tree-table-th-sort-arrow--desc {
+    display: block;
+  }
+}
+
+.wt-tree-table-foot {
+  border-color: var(--wt-tree-table-head-border-color);
+  border-top: var(--wt-tree-table-head-border-color);
+}
+</style>

package/src/components/wt-tree-table-row/wt-tree-table-row.vue

@@ -0,0 +1,171 @@
+<template>
+  <tr class="wt-tree-table-row" :class="[{ 'wt-tree-table-row--alternate': rowPosition % 2 }]">
+    <td v-for="(col, headerKey) of dataHeaders" :key="headerKey" class="wt-tree-table-td">
+      <div class="wt-tree-table-td__content">
+        <div v-if="!headerKey" class="wt-tree-table-td__icon-wrapper">
+          <div
+            v-for="treeLine in lineCount"
+            :key="treeLine"
+            class="wt-tree-table-row__tree-space"
+          ></div>
+          <!-- This two empty icons need to create space for nested elements -->
+          <wt-icon-btn
+            v-if="!data[childrenProp] && nestingLevel"
+            :class="{ hidden: !data[childrenProp] }"
+            :icon="collapsed ? 'tree-expand' : 'tree-collapse'"
+            @click="collapsed = !collapsed"
+          />
+          <wt-checkbox
+            v-if="selectable"
+            :selected="isSelectedRow"
+            @change="
+              $emit('update:selected', {
+                data,
+                select: $event,
+              })
+            "
+          />
+          <wt-icon-btn
+            v-if="data[childrenProp]"
+            :icon="collapsed ? 'tree-expand' : 'tree-collapse'"
+            @click="collapsed = !collapsed"
+          />
+        </div>
+        <slot :index="rowPosition" :item="data" :name="col.value">
+          {{ data[col.value] }}
+        </slot>
+      </div>
+    </td>
+
+    <td v-if="gridActions" class="wt-tree-table-td__actions">
+      <div class="wt-tree-table-td__content">
+        <slot :index="rowPosition" :item="data" name="actions" />
+      </div>
+    </td>
+  </tr>
+
+  <template v-if="!collapsed">
+    <wt-tree-table-row
+      v-for="(child, index) in data[childrenProp]"
+      :key="index"
+      :row-position="rowPosition"
+      :data-headers="dataHeaders"
+      :data="child"
+      :selectable="selectable"
+      :selected-elements="selectedElements"
+      :children-prop="childrenProp"
+      :nesting-level="childLevel"
+      @update:selected="
+        $emit('update:selected', {
+          data: $event.data,
+          select: $event.select,
+        })
+      "
+    >
+      <template v-for="(col, headerKey) of dataHeaders" :key="headerKey" #[col.value]="{ item }">
+        <slot :index="rowPosition" :item="item" :name="col.value">
+          <div>{{ item[col.value] }}</div>
+        </slot>
+      </template>
+      <template #actions="{ item }">
+        <slot :index="rowPosition" :item="item" name="actions" />
+      </template>
+    </wt-tree-table-row>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import WtCheckbox from "../wt-checkbox/wt-checkbox.vue";
+import WtIconBtn from "../wt-icon-btn/wt-icon-btn.vue";
+import type { TableHeader } from "../wt-table/types/table-header.ts";
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * 'It's a data what pass to display row.
+     */
+    data: Record<string, unknown>;
+    /**
+     * 'It's a number of position row in table.
+     */
+    rowPosition: number;
+    /**
+     * 'It's a key in data object, which contains children array. '
+     */
+    childrenProp: string;
+    selectable?: boolean;
+    selectedElements: Record<string, any>[];
+    dataHeaders: TableHeader[];
+    gridActions?: boolean;
+    /**
+     * 'It's a nesting level of row. 0 - root row, 1 - first level of nesting, etc.'
+     */
+    nestingLevel?: number;
+  }>(),
+  {
+    selectable: false,
+    gridActions: true,
+    nestingLevel: 0,
+  },
+);
+
+defineEmits(["update:selected"]);
+
+const collapsed = ref(true);
+const lineCount = computed(() => {
+  return props.nestingLevel;
+});
+const childLevel = computed(() => {
+  return props.nestingLevel + 1;
+});
+
+const isSelectedRow = computed(() => {
+  return props.selectedElements.includes(props.data);
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../../src/css/main.scss";
+
+.wt-tree-table-td {
+  @extend %typo-body-1;
+  height: fit-content;
+  min-height: var(--wt-tree-table-min-height);
+  padding: var(--spacing-xs);
+  word-break: break-all;
+  overflow-wrap: break-word;
+
+  &__actions {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    gap: var(--spacing-xs);
+  }
+
+  &__icon-wrapper {
+    display: flex;
+    margin-right: var(--spacing-xs);
+    align-items: flex-start;
+  }
+
+  &__content {
+    display: flex;
+    align-items: flex-start;
+    text-wrap: nowrap;
+  }
+}
+
+.wt-tree-table-row {
+  background: var(--wt-tree-table-primary-color);
+
+  &__tree-space {
+    width: var(--icon-md-size);
+    height: var(--icon-md-size);
+  }
+
+  &--alternate {
+    background: var(--wt-tree-table-zebra-color);
+  }
+}
+</style>

package/src/composables/useAccessControl/useAccessControl.js

@@ -6,10 +6,18 @@ export const useAccessControl = () => {
   const store = useStore();
   const route = useRoute();
 
-  const hasReadAccess = computed(() => store.getters['userinfo/HAS_READ_ACCESS']({ route }));
-  const hasCreateAccess = computed(() => store.getters['userinfo/HAS_CREATE_ACCESS']({ route }));
-  const hasEditAccess = computed(() => store.getters['userinfo/HAS_EDIT_ACCESS']({ route }));
-  const hasDeleteAccess = computed(() => store.getters['userinfo/HAS_DELETE_ACCESS']({ route }));
+  const hasReadAccess = computed(() =>
+    store.getters['userinfo/HAS_READ_ACCESS']({ route }),
+  );
+  const hasCreateAccess = computed(() =>
+    store.getters['userinfo/HAS_CREATE_ACCESS']({ route }),
+  );
+  const hasEditAccess = computed(() =>
+    store.getters['userinfo/HAS_EDIT_ACCESS']({ route }),
+  );
+  const hasDeleteAccess = computed(() =>
+    store.getters['userinfo/HAS_DELETE_ACCESS']({ route }),
+  );
 
   const hasSaveActionAccess = computed(() => {
     if (route.params.id === 'new') return hasEditAccess.value;

package/src/composables/useCachedInterval/useCachedInterval.js

@@ -2,14 +2,18 @@ import { onBeforeUnmount } from 'vue';
 import preventHiddenPageCallsDecorator from '../../scripts/preventHiddenPageCallsDecorator.js';
 
 // eslint-disable-next-line import/prefer-default-export
-export const useCachedInterval = ({ timeout, localStorageKey = 'auto-refresh' }) => {
+export const useCachedInterval = ({
+  timeout,
+  localStorageKey = 'auto-refresh',
+}) => {
   let interval = null;
 
   onBeforeUnmount(() => {
     if (interval) clearInterval(interval);
   });
   const subscribe = (callback) => {
-    const _timeout = timeout || +localStorage.getItem(localStorageKey) || 5 * 60 * 1000;
+    const _timeout =
+      timeout || +localStorage.getItem(localStorageKey) || 5 * 60 * 1000;
     callback();
     interval = setInterval(preventHiddenPageCallsDecorator(callback), _timeout);
   };

package/src/composables/useCachedItemInstanceName/useCachedItemInstanceName.js

@@ -1,7 +1,10 @@
 import get from 'lodash/get.js';
 import { onMounted, ref, watch } from 'vue';
 
-export const useCachedItemInstanceName = (itemInstance, { namePath = 'name' } = {}) => {
+export const useCachedItemInstanceName = (
+  itemInstance,
+  { namePath = 'name' } = {},
+) => {
   const name = ref('');
 
   const updateName = () => {

package/src/composables/useCard/useCardComponent.js

@@ -5,7 +5,8 @@ import { useRoute, useRouter } from 'vue-router';
 import { useCachedItemInstanceName } from '../useCachedItemInstanceName/useCachedItemInstanceName.js';
 
 export const useCardComponent = (params) => {
-  const { id,
+  const {
+    id,
     itemInstance,
     invalid,
 
@@ -13,7 +14,8 @@ export const useCardComponent = (params) => {
     addItem,
     updateItem,
     setId,
-    resetState } = params;
+    resetState,
+  } = params;
 
   const router = useRouter();
   const route = useRoute();
@@ -27,7 +29,9 @@ export const useCardComponent = (params) => {
   });
 
   const saveText = computed(() => {
-    return isNew.value || itemInstance.value._dirty ? t('reusable.save') : t('reusable.saved');
+    return isNew.value || itemInstance.value._dirty
+      ? t('reusable.save')
+      : t('reusable.saved');
   });
 
   const redirectToEdit = () => {
@@ -61,7 +65,7 @@ export const useCardComponent = (params) => {
     }
   }
 
-  function initialize(){
+  function initialize() {
     onMounted(() => {
       initializeCard();
     });
@@ -71,7 +75,6 @@ export const useCardComponent = (params) => {
     });
   }
 
-
   return {
     id,
     itemInstance,
@@ -83,7 +86,5 @@ export const useCardComponent = (params) => {
     save,
     initializeCard,
     initialize,
-  }
-}
-
-
+  };
+};

package/src/composables/useCard/useCardTabs.js

@@ -6,7 +6,10 @@ export const useCardTabs = (tabs) => {
   const route = useRoute();
 
   const currentTab = computed(() => {
-    return tabs?.value.find(({ pathName }) => route.name === pathName) || tabs?.value[0];
+    return (
+      tabs?.value.find(({ pathName }) => route.name === pathName) ||
+      tabs?.value[0]
+    );
   });
 
   function changeTab(tab) {
@@ -24,5 +27,5 @@ export const useCardTabs = (tabs) => {
     currentTab,
 
     changeTab,
-  }
-}
+  };
+};