@webitel/ui-sdk 24.12.13 → 24.12.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.13",
+  "version": "24.12.15",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -173,6 +173,6 @@
   },
   "engines": {
     "npm": "10.9.0",
-    "node": "v22.11.0"
+    "node": "v22.12.0"
   }
 }

package/src/components/index.js

@@ -68,6 +68,8 @@ import WtTooltip from './wt-tooltip/wt-tooltip.vue';
 import WtNavigationMenu
   from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue';
 import WtStartPage from './on-demand/wt-start-page/components/wt-start-page.vue';
+import WtSelectionPopup
+  from './on-demand/wt-selection-popup/wt-selection-popup.vue';
 
 const Components = {
   WtActionBar,
@@ -135,6 +137,7 @@ const Components = {
   WtExpansionPanel,
   WtNavigationMenu,
   WtStartPage,
+  WtSelectionPopup,
 };
 
 export default Components;

package/src/components/on-demand/wt-selection-popup/wt-selection-popup.vue

@@ -0,0 +1,158 @@
+<template>
+  <wt-popup
+    class="wt-selection-popup"
+    overflow
+    size="sm"
+    v-bind="$attrs"
+    @close="close"
+  >
+    <template #title>
+      {{ title }}
+    </template>
+    <template #main>
+      <ul class="wt-selection-popup__options">
+        <li
+          v-for="(option, key) of options"
+          :key="key"
+          :class="{'active': option.value === selected.value }"
+          class="wt-selection-popup__item-wrapper"
+          @click="selectOption(option)"
+        >
+          <slot
+            :option="option"
+            name="option"
+          >
+            <wt-icon
+              v-if="option.icon"
+              :icon="option.icon"
+              size="sm"
+            />
+            <h4 class="wt-selection-popup__item-header">
+              {{ option.title }}
+            </h4>
+            <p
+              v-if="option.description"
+              class="popup-options__item-text">
+              {{ option.description }}
+            </p>
+            <wt-tooltip>
+              <template #activator>
+                <wt-icon-btn
+                  v-if="option.description"
+                  color="info"
+                  icon="rounded-info"
+                />
+              </template>
+              {{ option.description }}
+            </wt-tooltip>
+          </slot>
+        </li>
+      </ul>
+      <!--Slot for displaying specific template styling-->
+      <slot name="after-section" />
+    </template>
+
+    <template #actions>
+      <wt-button
+        :disabled="!selected"
+        @click="add"
+      >
+        {{ t('reusable.create') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >
+        {{ t('reusable.close') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps({
+
+  /**
+   * Popup title
+   */
+
+  title: {
+    type: String,
+  },
+
+  /**
+   * Selected value. The scheme repeats attribute `option` from `options`
+   */
+
+  selected: {
+    type: Object,
+  },
+
+  /**
+   * All displayed values. Should have following schema: `{ value: '', title: '', description: '', icon: ''}`
+   */
+
+  options: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['change', 'add', 'close']);
+
+const { t } = useI18n();
+
+function add() {
+  emit('add', props.selected);
+}
+
+function close() {
+  emit('close');
+}
+
+function selectOption(option) {
+  emit('change', option);
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../css/main.scss';
+
+.wt-selection-popup {
+  &__options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
+
+  &__item-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-xs);
+    cursor: pointer;
+    transition: var(--transition);
+    border: 1px solid var(--text-main-color);
+    border-radius: var(--border-radius);
+
+    &:hover,
+    &.active {
+      border: 1px solid var(--primary-color);
+    }
+
+    .wt-icon {
+      margin-right: var(--spacing-xs);
+    }
+
+    .wt-tooltip {
+      margin-left: auto;
+    }
+  }
+
+  &__item-header {
+    @extend %typo-subtitle-2;
+  }
+}
+</style>

package/src/locale/en/en.js

@@ -77,6 +77,7 @@ export default {
     step: 'Step { count }',
     more: 'More',
     read: 'Read',
+    create: 'Create',
   },
   // yak zhe ya zaebalsya povtoriaty odni i ti sami slova!!!!
   vocabulary: {

package/src/locale/ru/ru.js

@@ -77,6 +77,7 @@ export default {
     step: 'Шаг { count }',
     more: 'Больше',
     read: 'Читать',
+    create: 'Создать',
   },
   vocabulary: {
     language: 'Язык',

package/src/locale/ua/ua.js

@@ -78,6 +78,7 @@ export default {
     step: 'Крок { count }',
     more: 'Більше',
     read: 'Читати',
+    create: 'Створити',
   },
   vocabulary: {
     language: 'Мова',

package/src/modules/ObjectPermissions/_internals/components/permissions-tab-role-popup.vue

@@ -7,8 +7,8 @@
 
     <wt-popup
       :shown="shown"
-      size="sm"
       overflow
+      size="sm"
       @close="close"
     >
       <template #title>
@@ -24,13 +24,13 @@
       </template>
       <template #actions>
         <wt-button @click="save(grantee)">
-          {{ t('objects.add') }}
+          {{ t('reusable.add') }}
         </wt-button>
         <wt-button
           color="secondary"
           @click="close"
         >
-          {{ t('objects.close') }}
+          {{ t('reusable.close') }}
         </wt-button>
       </template>
     </wt-popup>

package/src/modules/ObjectPermissions/components/permissions-tab.vue

@@ -1,19 +1,17 @@
 <template>
   <section
     v-if="access.read"
-    class="permissions-tab"
+    class="table-page"
   >
-    <header class="content-header">
-      <h3 class="content-title">
-        {{ $t('access.operations') }}
+    <header class="table-title">
+      <h3 class="table-title__title">
+        {{ t('access.operations') }}
       </h3>
-      <div class="content-header__actions-wrap">
-        <!--        TODO replace wt-table-actions -->
-        <!--        <wt-table-actions-->
-        <!--          :icons="['refresh']"-->
-        <!--          @input="(event) => event === 'refresh' && loadData()"-->
-        <!--        >-->
-        <!--        </wt-table-actions>-->
+      <div class="table-title__actions-wrap">
+        <wt-action-bar
+          :include="[IconAction.REFRESH]"
+          @click:refresh="loadData"
+        />
         <role-popup
           v-if="props.access.add"
           :namespace="tableNamespace"
@@ -23,81 +21,67 @@
 
     <wt-loader v-show="isLoading" />
 
-    <!--    TODO -->
-    <!--    <wt-dummy-->
-    <!--      v-if="dummy && !isLoading"-->
-    <!--      :dark-mode="darkMode"-->
-    <!--      :src="dummy.src"-->
-    <!--      :text="dummy.text && t(dummy.text)"-->
-    <!--      class="dummy-wrapper"-->
-    <!--    />-->
-
-    <div class="table-wrapper">
-      <div
-        v-if="dataList.length && !isLoading"
-        style="display:contents;"
-      >
-        <!--        TODO -->
-        <!--        <transition-slide-->
-        <!--          :offset="{-->
-        <!--              enter: ['-5%', 0],-->
-        <!--              leave: [0, 0]-->
-        <!--            }"-->
-        <!--          duration="200"-->
-        <!--          mode="out-in"-->
-        <!--          appear-->
-        <!--        >-->
-        <wt-table
-          :data="localizedDataList"
-          :grid-actions="access.edit"
-          :headers="headers"
-          :selectable="false"
-          sortable
-          @sort="sort"
-        >
-          <template #grantee="{ item }">
-            <role-column
-              :role="item.grantee"
-            />
-          </template>
-
-          <template #read="{ item }">
-            <wt-select
-              :clearable="false"
-              :disabled="!access.edit"
-              :options="accessOptions"
-              :value="item.access.r"
-              @input="changeAccessMode({ item, ruleName: 'r', mode: $event })"
-            />
-          </template>
-
-          <template #edit="{ item }">
-            <wt-select
-              :clearable="false"
-              :disabled="!access.edit"
-              :options="accessOptions"
-              :value="item.access.w"
-              @input="changeAccessMode({ item, ruleName: 'w', mode: $event })"
-            />
-          </template>
-
-          <template #delete="{ item }">
-            <wt-select
-              :clearable="false"
-              :disabled="!access.edit"
-              :options="accessOptions"
-              :value="item.access.d"
-              @input="changeAccessMode({ item, ruleName: 'd', mode: $event })"
-            />
-          </template>
-          <template #actions="{ item }">
-            <wt-icon-action
-              action="delete"
-              @click="changeAccessMode({ item, ruleName: 'r', mode: { id: AccessMode.FORBIDDEN }})"
-            />
-          </template>
-        </wt-table>
-        <!--        </transition-slide>-->
+    <wt-empty
+      v-show="showEmpty"
+      :image="imageEmpty"
+      :text="textEmpty"
+    />
+
+    <div class="table-section__table-wrapper">
+      <div>
+        <wt-table-transition
+          v-if="dataList.length && !isLoading">
+          <wt-table
+            :data="localizedDataList"
+            :grid-actions="access.edit"
+            :headers="headers"
+            :selectable="false"
+            sortable
+            @sort="sort"
+          >
+            <template #grantee="{ item }">
+              <role-column
+                :role="item.grantee"
+              />
+            </template>
+
+            <template #read="{ item }">
+              <wt-select
+                :clearable="false"
+                :disabled="!access.edit"
+                :options="accessOptions"
+                :value="item.access.r"
+                @input="changeAccessMode({ item, ruleName: 'r', mode: $event })"
+              />
+            </template>
+
+            <template #edit="{ item }">
+              <wt-select
+                :clearable="false"
+                :disabled="!access.edit"
+                :options="accessOptions"
+                :value="item.access.w"
+                @input="changeAccessMode({ item, ruleName: 'w', mode: $event })"
+              />
+            </template>
+
+            <template #delete="{ item }">
+              <wt-select
+                :clearable="false"
+                :disabled="!access.edit"
+                :options="accessOptions"
+                :value="item.access.d"
+                @input="changeAccessMode({ item, ruleName: 'd', mode: $event })"
+              />
+            </template>
+            <template #actions="{ item }">
+              <wt-icon-action
+                action="delete"
+                @click="changeAccessMode({ item, ruleName: 'r', mode: { id: AccessMode.FORBIDDEN }})"
+              />
+            </template>
+          </wt-table>
+        </wt-table-transition>
       </div>
       <filter-pagination
         :namespace="filtersNamespace"
@@ -108,8 +92,6 @@
 </template>
 
 <script setup>
-// TODO: класи, даммі, транзішен таблички. WTEL-3392
-
 import { computed, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
@@ -119,6 +101,8 @@ import { useTableFilters } from '../../Filters/composables/useTableFilters.js';
 import RoleColumn from '../_internals/components/permissions-role-row.vue';
 import RolePopup from '../_internals/components/permissions-tab-role-popup.vue';
 import { AccessMode } from '../_internals/enums/AccessMode.enum.js';
+import IconAction from '../../../enums/IconAction/IconAction.enum.js';
+import { useTableEmpty } from '../../../modules/TableComponentModule/composables/useTableEmpty.js';
 
 const props = defineProps({
   /**
@@ -154,7 +138,7 @@ const {
   isNext,
   error,
 
-  loadData, // TODO: use for refresh button
+  loadData,
   sort,
   onFilterEvent,
 } = useTableStore(`${props.namespace}/permissions`);
@@ -197,11 +181,11 @@ onUnmounted(() => {
   flushSubscribers();
 });
 
-// TODO
-// const { dummy } = useDummy({
-//   namespace,
-//   hiddenText: true,
-// });
+const {
+  showEmpty,
+  image: imageEmpty,
+  text: textEmpty,
+} = useTableEmpty({ dataList, error, isLoading });
 
 const accessOptions = computed(() => {
   return Object.values(AccessMode).map((mode) => ({

package/src/modules/TableComponentModule/composables/useTableEmpty.js

@@ -83,7 +83,7 @@ export const useTableEmpty = ({ dataList, filters, error, isLoading }, overrides
     if (!emptyState?.value) return null;
 
     if (error.value) return EmptyCause.ERROR;
-    if (filters.value) {
+    if (filters?.value) {
       const uncheckedFilters = ['page', 'size', 'sort', 'fields'];
       const filtersApplied = Object.entries(filters.value).some(
         ([filterValue, filterName]) =>