From cc4d01f9a61debcf1ce5f3e22a154b6b75319a3d Mon Sep 17 00:00:00 2001
From: Sviatoslav Bar <baterfild2011@gmail.com>
Date: Thu, 31 Oct 2024 19:26:13 +0200
Subject: [PATCH 1/2] feat/ added new transitions and styles to users page
 [WTEL-5305][WTEL-5306](https://webitel.atlassian.net/browse/WTEL-3392)

---
 package-lock.json                             |  51 ++++++--
 package.json                                  |   2 +-
 .../_shared/object-wrap/the-object-wrap.vue   |  18 +--
 .../users/components/opened-user-devices.vue  |   6 +-
 .../users/components/opened-user-general.vue  |   6 +-
 .../users/components/opened-user-license.vue  |   6 +-
 .../users/components/opened-user-roles.vue    |   6 +-
 .../components/opened-user-variables.vue      |   6 +-
 .../modules/users/components/opened-user.vue  |   4 +-
 .../modules/users/components/the-users.vue    | 116 ++++++++----------
 10 files changed, 118 insertions(+), 103 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5a71e5c4b..f731aaa9c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@vuelidate/validators": "^2.0.4",
         "@vueuse/core": "^11.0.3",
         "@webitel/flow-ui-sdk": "^0.1.14",
-        "@webitel/ui-sdk": "^24.10.49",
+        "@webitel/ui-sdk": "^24.10.56",
         "axios": "^1.7.7",
         "clipboard-copy": "^4.0.1",
         "cron-validator": "^1.3.1",
@@ -2588,9 +2588,9 @@
       }
     },
     "node_modules/@webitel/ui-sdk": {
-      "version": "24.10.49",
-      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.49.tgz",
-      "integrity": "sha512-v17ZkqDKJvkSoL9J2DIUZ2yU3UA+kttdCXIV06F0pa/Il7V9dsoVoI2msLk1Q/tx7RI2Siow8RRlebs6O/1ctA==",
+      "version": "24.10.56",
+      "resolved": "https://registry.npmjs.org/@webitel/ui-sdk/-/ui-sdk-24.10.56.tgz",
+      "integrity": "sha512-n51xamchqY88f1AaPdnv8KkbqjBkk633tIQwqvSICV3Gvm25Z9PyYaVQk1VeZu8egR+xzU1FT5p5D8Reg7bEFQ==",
       "dependencies": {
         "@floating-ui/vue": "^1.0.1",
         "@morev/vue-transitions": "^3.0.2",
@@ -2619,10 +2619,18 @@
         "vue-multiselect": "^3.0.0-beta.3",
         "vue-observe-visibility": "^2.0.0-alpha.1",
         "vue-router": "^4.1.6",
-        "webitel-sdk": "^24.8.2",
+        "webitel-sdk": "^24.8.5",
         "xlsx": "^0.18.5"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/@webitel/ui-sdk/node_modules/deep-equal": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -2654,6 +2662,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@webitel/ui-sdk/node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw=="
+    },
     "node_modules/@webitel/ui-sdk/node_modules/query-string": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.2.0.tgz",
@@ -2670,6 +2694,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@webitel/ui-sdk/node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -11227,9 +11262,9 @@
       }
     },
     "node_modules/webitel-sdk": {
-      "version": "24.8.3",
-      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.3.tgz",
-      "integrity": "sha512-NdRhJbCZZTg4JxxQCK6EgVLyeztO50tFn163dLHDhrb58reIECN8MKg7HPBkB8wghZhvBimKKDww6e/mQB+LdQ==",
+      "version": "24.8.5",
+      "resolved": "https://registry.npmjs.org/webitel-sdk/-/webitel-sdk-24.8.5.tgz",
+      "integrity": "sha512-OHqAYVzcAqUns3n8qrfP/oW1o7pQlC++MyEC+u2kOOE69krWEFlrnNPqEm3S0XnBzIQa9mAIlZ1v5y+13hCv7w==",
       "dependencies": {
         "@types/webrtc": "~0.0.41",
         "deep-copy": "1.4.2",
diff --git a/package.json b/package.json
index b61490b7f..e70c560d9 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.49",
+    "@webitel/ui-sdk": "^24.10.56",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
diff --git a/src/modules/_shared/object-wrap/the-object-wrap.vue b/src/modules/_shared/object-wrap/the-object-wrap.vue
index 8827d9d5c..7dce20ff9 100644
--- a/src/modules/_shared/object-wrap/the-object-wrap.vue
+++ b/src/modules/_shared/object-wrap/the-object-wrap.vue
@@ -4,26 +4,16 @@
       <wt-notifications-bar />
       <app-header />
       <div class="object-content-wrap">
-        <router-view v-slot="{ Component }">
-          <transition-slide
-            :offset="{
-              enter: ['-50%', 0],
-              leave: [0, 0]
-            }"
-            duration="200"
-            mode="out-in"
-            appear
-          >
-            <component :is="Component" />
-          </transition-slide>
-        </router-view>
+        <wt-route-transition>
+          <router-view />
+        </wt-route-transition>
       </div>
     </section>
   </main>
 </template>
 
 <script setup>
-import { TransitionSlide } from '@morev/vue-transitions';
+import WtRouteTransition from '@webitel/ui-sdk/src/components/on-demand/wt-route-transition/wt-route-transition.vue';
 import AppHeader from '../../_reusable/app-header/components/app-header.vue';
 </script>
 
diff --git a/src/modules/directory/modules/users/components/opened-user-devices.vue b/src/modules/directory/modules/users/components/opened-user-devices.vue
index 6a29d0c99..a638d9898 100644
--- a/src/modules/directory/modules/users/components/opened-user-devices.vue
+++ b/src/modules/directory/modules/users/components/opened-user-devices.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.devices.devices', 2) }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :disabled="disableUserInput"
         :label="t('objects.directory.users.defaultDevice')"
diff --git a/src/modules/directory/modules/users/components/opened-user-general.vue b/src/modules/directory/modules/users/components/opened-user-general.vue
index 81790e9a0..1fc89a03b 100644
--- a/src/modules/directory/modules/users/components/opened-user-general.vue
+++ b/src/modules/directory/modules/users/components/opened-user-general.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.generalInfo') }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-input
         :disabled="disableUserInput"
         :label="t('objects.name')"
diff --git a/src/modules/directory/modules/users/components/opened-user-license.vue b/src/modules/directory/modules/users/components/opened-user-license.vue
index b7644af6b..a507ce287 100644
--- a/src/modules/directory/modules/users/components/opened-user-license.vue
+++ b/src/modules/directory/modules/users/components/opened-user-license.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.license.license', 1) }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
diff --git a/src/modules/directory/modules/users/components/opened-user-roles.vue b/src/modules/directory/modules/users/components/opened-user-roles.vue
index d4394f0e0..17e01e544 100644
--- a/src/modules/directory/modules/users/components/opened-user-roles.vue
+++ b/src/modules/directory/modules/users/components/opened-user-roles.vue
@@ -1,11 +1,11 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.permissions.permissionsRole') }}
       </h3>
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <wt-select
         :close-on-select="false"
         :disabled="disableUserInput"
diff --git a/src/modules/directory/modules/users/components/opened-user-variables.vue b/src/modules/directory/modules/users/components/opened-user-variables.vue
index 3f93f198d..2637d1ac9 100644
--- a/src/modules/directory/modules/users/components/opened-user-variables.vue
+++ b/src/modules/directory/modules/users/components/opened-user-variables.vue
@@ -1,7 +1,7 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
+    <header class="opened-card-header">
+      <h3 class="opened-card-header__title">
         {{ t('objects.directory.users.variables') }}
       </h3>
       <wt-icon-action
@@ -10,7 +10,7 @@
         @click="addVariable"
       />
     </header>
-    <div class="object-input-grid">
+    <div class="opened-card-input-grid">
       <div class="variables">
         <div
           v-for="(variable, key) in itemInstance.variables"
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 88cb2b3d4..87ad704c4 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -1,5 +1,6 @@
 <template>
   <wt-page-wrapper
+    class="table-page"
     :actions-panel="!!currentTab.filters"
   >
     <template #header>
@@ -23,7 +24,7 @@
 
     <template #main>
       <form
-        class="main-container"
+        class="opened-card-form"
         @submit.prevent="save"
       >
         <wt-tabs
@@ -33,6 +34,7 @@
         />
         <router-view v-slot="{ Component }">
           <component
+            class="opened-card-tabs__tab"
             :is="Component"
             :namespace="cardNamespace"
             :v="v$"
diff --git a/src/modules/directory/modules/users/components/the-users.vue b/src/modules/directory/modules/users/components/the-users.vue
index e79e13764..1827b5c0f 100644
--- a/src/modules/directory/modules/users/components/the-users.vue
+++ b/src/modules/directory/modules/users/components/the-users.vue
@@ -1,7 +1,7 @@
 <template>
   <wt-page-wrapper
+    class="users table-page"
     :actions-panel="false"
-    class="users"
   >
     <template #header>
       <wt-page-header
@@ -23,12 +23,12 @@
         @close="closeDelete"
       />
 
-      <section class="main-section__wrapper">
-        <header class="content-header">
-          <h3 class="content-title">
+      <section class="table-section">
+        <header class="table-title">
+          <h3 class="table-title__title">
             {{ t('objects.directory.users.allUsers') }}
           </h3>
-          <div class="content-header__actions-wrap">
+          <div class="table-title__actions-wrap">
             <filter-search
               :namespace="filtersNamespace"
               name="search"
@@ -65,20 +65,8 @@
           class="dummy-wrapper"
         />
         <div class="table-wrapper">
-          <div
-            style="display:contents;"
-            v-if="dataList.length && !isLoading"
-          >
-          <transition-slide
-            :offset="{
-              enter: ['-5%', 0],
-              leave: [0, 0]
-            }"
-            duration="200"
-            mode="out-in"
-            appear
-          >
-          <wt-table
+          <wt-table-transition v-if="dataList.length && !isLoading">
+            <wt-table
             :selected="selected"
             :data="dataList"
             :grid-actions="hasEditAccess || hasDeleteAccess"
@@ -87,53 +75,52 @@
             @update:selected="setSelected"
             @sort="sort"
           >
-            <template #name="{ item }">
-              <adm-item-link
-                :id="item.id"
-                :route-name="RouteNames.USERS"
-              >
-                {{ item.name }}
-              </adm-item-link>
-            </template>
-            <template #status="{ item }">
-              <user-status :presence="item.presence" />
-            </template>
-            <template #username="{ item }">
-              {{ item.username }}
-            </template>
-            <template #extensions="{ item }">
-              {{ item.extension }}
-            </template>
-            <template #DnD="{ item }">
-              <wt-switcher
-                :disabled="!hasEditAccess"
-                :value="getDND(item.presence)"
-                @change="setDND({item, value: $event})"
-              />
-            </template>
-            <template #actions="{ item }">
-              <adm-item-link
-                v-if="hasEditAccess"
-                :id="item.id"
-                :route-name="RouteNames.USERS">
-
+              <template #name="{ item }">
+                <adm-item-link
+                  :id="item.id"
+                  :route-name="RouteNames.USERS"
+                >
+                  {{ item.name }}
+                </adm-item-link>
+              </template>
+              <template #status="{ item }">
+                <user-status :presence="item.presence" />
+              </template>
+              <template #username="{ item }">
+                {{ item.username }}
+              </template>
+              <template #extensions="{ item }">
+                {{ item.extension }}
+              </template>
+              <template #DnD="{ item }">
+                <wt-switcher
+                  :disabled="!hasEditAccess"
+                  :value="getDND(item.presence)"
+                  @change="setDND({item, value: $event})"
+                />
+              </template>
+              <template #actions="{ item }">
+                <adm-item-link
+                  v-if="hasEditAccess"
+                  :id="item.id"
+                  :route-name="RouteNames.USERS">
+
+                  <wt-icon-action
+                    action="edit"
+                  />
+                </adm-item-link>
                 <wt-icon-action
-                  action="edit"
+                  v-if="hasDeleteAccess"
+                  action="delete"
+                  class="table-action"
+                  @click="askDeleteConfirmation({
+                    deleted: [item],
+                    callback: () => deleteData(item),
+                  })"
                 />
-              </adm-item-link>
-              <wt-icon-action
-                v-if="hasDeleteAccess"
-                action="delete"
-                class="table-action"
-                @click="askDeleteConfirmation({
-                  deleted: [item],
-                  callback: () => deleteData(item),
-                })"
-              />
-            </template>
-          </wt-table>
-          </transition-slide>
-          </div>
+              </template>
+            </wt-table>
+          </wt-table-transition>
           <filter-pagination
             :namespace="filtersNamespace"
             :next="isNext"
@@ -148,6 +135,7 @@
 import { TransitionSlide } from '@morev/vue-transitions';
 import DeleteConfirmationPopup from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue';
 import { useDeleteConfirmationPopup } from '@webitel/ui-sdk/src/modules/DeleteConfirmationPopup/composables/useDeleteConfirmationPopup';
+import WtTableTransition from '@webitel/ui-sdk/src/components/on-demand/wt-table-transition/wt-table-transition.vue';
 import FilterPagination from '@webitel/ui-sdk/src/modules/Filters/components/filter-pagination.vue';
 import FilterSearch from '@webitel/ui-sdk/src/modules/Filters/components/filter-search.vue';
 import { useTableFilters } from '@webitel/ui-sdk/src/modules/Filters/composables/useTableFilters.js';

From 129d58fb9b5a778e55daac451197d15db47c0bf9 Mon Sep 17 00:00:00 2001
From: Sviatoslav Bar <baterfild2011@gmail.com>
Date: Fri, 1 Nov 2024 12:05:20 +0200
Subject: [PATCH 2/2] feat/ fixes according to comments
 [WTEL-5305][WTEL-5306](https://webitel.atlassian.net/browse/WTEL-3392)

---
 src/modules/_shared/object-wrap/the-object-wrap.vue       | 8 +++++---
 .../directory/modules/users/components/opened-user.vue    | 2 +-
 .../directory/modules/users/components/the-users.vue      | 2 +-
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/modules/_shared/object-wrap/the-object-wrap.vue b/src/modules/_shared/object-wrap/the-object-wrap.vue
index 7dce20ff9..5c6a816e7 100644
--- a/src/modules/_shared/object-wrap/the-object-wrap.vue
+++ b/src/modules/_shared/object-wrap/the-object-wrap.vue
@@ -4,9 +4,11 @@
       <wt-notifications-bar />
       <app-header />
       <div class="object-content-wrap">
-        <wt-route-transition>
-          <router-view />
-        </wt-route-transition>
+        <router-view v-slot="{ Component }">
+          <wt-route-transition>
+            <component :is="Component" />
+          </wt-route-transition>
+        </router-view>
       </div>
     </section>
   </main>
diff --git a/src/modules/directory/modules/users/components/opened-user.vue b/src/modules/directory/modules/users/components/opened-user.vue
index 87ad704c4..bab682dbf 100644
--- a/src/modules/directory/modules/users/components/opened-user.vue
+++ b/src/modules/directory/modules/users/components/opened-user.vue
@@ -1,6 +1,6 @@
 <template>
   <wt-page-wrapper
-    class="table-page"
+    class="opened-card"
     :actions-panel="!!currentTab.filters"
   >
     <template #header>
diff --git a/src/modules/directory/modules/users/components/the-users.vue b/src/modules/directory/modules/users/components/the-users.vue
index 1827b5c0f..b5451730d 100644
--- a/src/modules/directory/modules/users/components/the-users.vue
+++ b/src/modules/directory/modules/users/components/the-users.vue
@@ -1,6 +1,6 @@
 <template>
   <wt-page-wrapper
-    class="users table-page"
+    class="table-page users"
     :actions-panel="false"
   >
     <template #header>