refactor: users refactor to compositions api in progress [WTEL-3392]

package.json

@@ -14,12 +14,13 @@
   },
   "type": "module",
   "dependencies": {
+    "@morev/vue-transitions": "^3.0.2",
     "@vue/compat": "^3.5.1",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
     "@webitel/flow-ui-sdk": "^0.1.14",
-    "@webitel/ui-sdk": "^24.10.5",
+    "@webitel/ui-sdk": "^24.10.56",
     "axios": "^1.7.7",
     "clipboard-copy": "^4.0.1",
     "cron-validator": "^1.3.1",
@@ -53,6 +54,7 @@
     "vite": "5.4.3",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-svg-sprite": "^0.5.2",
+    "vite-plugin-vue-devtools": "^7.4.5",
     "vitest": "^2.0.5",
     "vue-color": "^2.8.1"
   }

src/app/components/app.vue

@@ -1,21 +1,20 @@
 <template>
   <!--  :class="$i18n.locale" root element class to control fonts on each locale  -->
-  <router-view :class="$i18n.locale" />
+  <router-view :class="locale" />
 </template>
 
-<script>
-export default {
-  name: 'App',
-  created() {
-    this.setLanguage();
-  },
-  methods: {
-    setLanguage() {
-      const lang = localStorage.getItem('lang');
-      if (lang) this.$i18n.locale = lang;
-    },
-  },
-};
+<script setup>
+import { computed, provide } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+
+const store = useStore();
+
+const darkMode = computed(() => store.getters['appearance/DARK_MODE']);
+
+provide('darkMode', darkMode);
+
+const { locale } = useI18n();
 </script>
 
 <style>

src/app/css/main.scss

@@ -115,3 +115,29 @@ $srollbar-border-radius: 4px;
 .value-pair-wrap {
   position: relative;
 }
+
+.wt-page-wrapper__main {
+  min-height: 0;
+
+  .table-wrapper {
+    min-height: 0;
+    gap: var(--spacing-sm);
+
+    .wt-table__head {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    .wt-pagination {
+      margin-top: auto;
+    }
+  }
+
+  .wt-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

src/app/locale/i18n.js

@@ -1,8 +1,8 @@
 import { createI18n } from 'vue-i18n';
-import en from './en/en';
-import kz from './kz/kz';
-import ru from './ru/ru';
-import ua from './ua/ua';
+import en from './en/en.js';
+import kz from './kz/kz.js';
+import ru from './ru/ru.js';
+import ua from './ua/ua.js';
 
 const messages = {
   en,
@@ -12,7 +12,8 @@ const messages = {
 };
 
 export default new createI18n({
-  locale: 'en',
+  // legacy: false,
+  locale: localStorage.getItem('lang'),
   fallbackLocale: 'en',
   allowComposition: true,
   messages,

src/app/store/store.js

@@ -9,8 +9,16 @@ import routing from '../../modules/routing/store/routing';
 import system from '../../modules/system/store/system';
 import userinfo from '../../modules/userinfo/store/userinfo';
 
-export default createStore({
+const store = createStore({
   strict: false,
+  state: {
+    router: null,
+  },
+  mutations: {
+    SET_ROUTER: (state, router) => {
+      state.router = router;
+    },
+  },
   modules: {
     userinfo,
     directory,
@@ -23,3 +31,7 @@ export default createStore({
     appearance,
   },
 });
+
+window.store = store;
+
+export default store;

src/main.js

@@ -68,6 +68,7 @@ const createVueInstance = () => {
   let config = {};
   try {
     setTokenFromUrl();
+    store.commit('SET_ROUTER', router);
 
     config = await fetchConfig();
     await initSession();

src/modules/_shared/object-wrap/the-object-wrap.vue

@@ -4,41 +4,40 @@
       <wt-notifications-bar />
       <app-header />
       <div class="object-content-wrap">
-        <router-view />
+        <router-view v-slot="{ Component }">
+          <wt-route-transition>
+            <component :is="Component" />
+          </wt-route-transition>
+        </router-view>
       </div>
     </section>
   </main>
 </template>
 
-<script>
+<script setup>
+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';
-
-export default {
-  name: 'ModuleWrap',
-  components: { AppHeader },
-};
 </script>
 
 <style lang="scss" scoped>
 // outer wrap of module- page
 .object-wrap {
   display: flex;
   width: 100%;
-  min-height: 100%;
+  height: 100%;
 }
 
 // main content itself, without nav but with main header
 .object {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  max-width: 100%;
-  min-height: 100%;
   background: var(--wt-page-wrapper-background-color);
 }
 
 .object-content-wrap {
   display: flex;
   flex-grow: 1;
+  min-height: 0;
 }
 </style>

src/modules/directory/modules/license/store/_internals/headers.js

@@ -1,4 +1,4 @@
-import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
+import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters.js';
 
 export default [
   {

src/modules/directory/modules/users/api/contacts.js

@@ -1,3 +1,3 @@
-import { contacts } from '@webitel/ui-sdk/src/api/crm/index.js';
+import { contacts } from '@webitel/ui-sdk/src/api/clients/index.js';
 
 export default contacts;

src/modules/directory/modules/users/components/opened-user-devices.vue

@@ -1,66 +1,80 @@
 <template>
   <section>
-    <header class="content-header">
-      <h3 class="content-title">
-        {{ $tc('objects.directory.devices.devices', 2) }}
+    <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')"
+        :label="t('objects.directory.users.defaultDevice')"
         :options="itemInstance.devices"
         :value="itemInstance.device"
         required
         track-by="id"
-        @input="setItemProp({ prop: 'device', value: $event })"
-        @reset="setItemProp({ prop: 'device', value: {} })"
+        @input="setItemProp({ path: 'device', value: $event })"
+        @reset="setItemProp({ path: 'device', value: {} })"
       />
       <div>
         <wt-select
           :close-on-select="false"
           :disabled="disableUserInput"
-          :label="$tc('objects.directory.devices.devices', 2)"
+          :label="t('objects.directory.devices.devices', 2)"
           :search-method="loadDropdownOptionsList"
           :value="itemInstance.devices"
           multiple
-          @input="setItemProp({ prop: 'devices', value: $event })"
+          @input="setItemProp({ path: 'devices', value: $event })"
         />
         <div class="hint-link__wrap">
-          <span>{{ $t('objects.directory.users.deviceNotFound') }} </span>
+          <span>{{ t('objects.directory.users.deviceNotFound') }} </span>
           <adm-item-link
               class="hint-link__link"
               id="new"
               :route-name="RouteNames.DEVICES"
           >
-            {{ $t('objects.directory.users.createNewDevice') }}
+            {{ t('objects.directory.users.createNewDevice') }}
           </adm-item-link>
         </div>
       </div>
     </div>
   </section>
 </template>
 
-<script>
-import ItemLinkMixin from '../../../../../app/mixins/baseMixins/baseTableMixin/itemLinkMixin.js';
-import openedTabComponentMixin
-  from '../../../../../app/mixins/objectPagesMixins/openedObjectTabMixin/openedTabComponentMixin';
-import DevicesAPI from '../../devices/api/devices';
+<script setup>
+import { useCardStore } from '@webitel/ui-sdk/src/store/new/index.js';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useAccessControl } from '@webitel/ui-sdk/src/composables/useAccessControl/useAccessControl.js';
+import RouteNames from '../../../../../app/router/_internals/RouteNames.enum.js';
+import DevicesAPI from '../../devices/api/devices.js';
 
-export default {
-  name: 'OpenedUserDevices',
-  mixins: [openedTabComponentMixin, ItemLinkMixin],
-  methods: {
-    async loadDropdownOptionsList(params) {
-      const fields = ['id', 'name', 'hotdesk'];
-      const response = await DevicesAPI.getLookup({
-        ...params,
-        fields,
-      });
-      response.items = response.items.filter((item) => !item.hotdesk);
-      return response;
-    },
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
   },
+  v: {
+    type: Object,
+    required: true,
+  },
+});
+
+const store = useStore();
+const { t } = useI18n();
+
+const { disableUserInput } = useAccessControl();
+
+const { itemInstance, setItemProp } = useCardStore(props.namespace);
+
+const loadDropdownOptionsList = async (params) => {
+  const fields = ['id', 'name', 'hotdesk'];
+  const response = await DevicesAPI.getLookup({
+    ...params,
+    fields,
+  });
+  response.items = response.items.filter((item) => !item.hotdesk);
+  return response;
 };
 </script>