fix(refactor): add services/adapters/useCases

users-manage/src/adapters/adapterOfServices/Services.js

@@ -0,0 +1,95 @@
+import {get, post, put, remove} from './apiHelpers.js'
+import {convertList} from '@helpers/adapter/adapter.js'
+
+const config = {
+  id: "id",
+  created_at: "created_at",
+  updated_at: "updated_at",
+  deleted_at: "deleted_at",
+  name: "name",
+  port: "port",
+  proxy_ip: "proxy_ip",
+  internet_uri: "internet_uri",
+  description: "description",
+  is_online: "is_online",
+  site_ip: "device_ip",
+}
+
+class Services {
+
+  /**
+   *
+   * @param {String} apiAddr - path to service
+   */
+
+  constructor(apiAddr) {
+    this.apiAddr = apiAddr
+    this.config = config
+  }
+
+  /**
+   *
+   * @returns {Array<Object>} res.data - all services
+   */
+
+  async getServices() {
+    const res = await get(`${this.apiAddr}/servers`)
+    return convertList(res.data, {config: this.config})
+  }
+
+  /**
+   *
+   * @param {Object} payload - add new service
+   * @returns {Object} newService - added new service
+   */
+
+  async createService(payload) {
+    let newService = []
+    const updatedPort = parseFloat(payload.port)
+    const updatedService = {...convertObject(payload, {config: servConfig}), port: updatedPort}
+    await post(`${this.apiAddr}/servers`, updatedService).then(res => {
+      newService = convertObject(res.value, {config: this.config})
+    }).catch(err => {
+      console.log('err', err)
+    })
+    return newService
+  }
+
+  /**
+   *
+   * @param {Object} payload - edit params in selected service
+   * @returns {Object} resService - updated service with edited params
+   */
+
+  async updateService(payload) {
+    let resService = []
+    const updatedPort = parseFloat(payload.port)
+    const updatedService = {...convertObject(payload, {config: servConfig}), port: updatedPort}
+    if (payload.id) {
+      await put(`${this.apiAddr}/servers`, updatedService, payload.id).then(res => {
+        resService = convertObject(res.value, {config: this.config})
+      }).catch(err => {
+        console.log('err', err)
+      })
+    }
+    return resService
+  }
+
+  /**
+   *
+   * @param {Number} id - id selected service for remove
+   * @returns {Number} deletedServiceId - id removed service
+   */
+
+  async deleteService(id) {
+    let deletedServiceId = null
+    await remove(`${this.apiAddr}/servers`, id).then((res) => {
+      deletedServiceId = res.id
+    }).catch(err => {
+      console.log('err', err)
+    })
+    return deletedServiceId
+  }
+}
+
+export default Services

users-manage/src/adapters/adapterOfServices/apiHelpers.js

@@ -0,0 +1,39 @@
+import axios from "axios";
+
+const post = async (path, data, onError) => {
+  return await axios.post(path, data)
+    .then(r => r.data)
+    .catch(error => {
+      onError && onError(error)
+      console.error('Error post request:', error)
+    })
+}
+
+
+const get = async (path) => {
+  return await axios.get(path)
+    .catch(error => {
+      console.error('Error get request:', error)
+    })
+}
+
+const put = async (path, data, id, onError) => {
+  return await axios.put(`${path}/${id}`, data)
+    .then(r => r.data)
+    .catch(error => {
+      onError && onError(error)
+      console.error('Error put request:', error)
+    })
+}
+
+const remove = async (path, id, onError) => {
+  return await axios.delete(`${path}/${id}`)
+    .then(r => r.data)
+    .catch(error => {
+      onError && onError(error)
+      console.error('Error delete request:', error)
+    })
+}
+
+
+export {get, post, put, remove}

users-manage/src/adapters/adapterOfUsers/StaticData.js

@@ -0,0 +1,28 @@
+const devUsersList = [
+  {
+    "id": 1,
+    "first_name": "Leanne",
+    "last_name": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+    "is_active": true
+  },
+  {
+    "id": 2,
+    "first_name": "Leanne",
+    "last_name": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+    "is_active": true
+  },
+  {
+    "id": 3,
+    "first_name": "Leanne",
+    "last_name": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+    "is_active": true
+  },
+]
+
+export {devUsersList}

users-manage/src/adapters/adapterOfUsers/Users.js

@@ -0,0 +1,206 @@
+import {get, post, put, remove} from './apiHelpers.js'
+import {convertList} from '@helpers/adapter/adapter.js'
+import {devUsersList} from './StaticData.js'
+
+/**
+ * Интерфейс пользователя
+ * @typedef {Object} User
+ * @param {Number}  id
+ */
+
+class Users {
+  /**
+   * Класс управления роутерами
+   * @param {String} apiAddr - path to service
+   * @param {Object | undefined} adapter_config - oldKey: newKey
+   * @param {Object | undefined} params - Конфиг настроек
+   * @param {'prod' | 'test'} params.mode - Конфиг настроек
+   */
+  constructor(apiAddr, adapter_config = {}, params = {mode: 'prod'}) {
+    this.apiAddr = apiAddr
+    this.config  = adapter_config
+    this.mode    = params.mode
+  }
+
+  /**
+   *
+   * @param {Object} params - Конфиг настроек
+   * @param {'prod' | 'dev'} params.mode - Конфиг настроек
+   * @returns {Promise<*[]> | *[]}
+   */
+  async getUsers(params) {
+    if (params.mode === "dev") {
+      return devUsersList
+    }
+    let res = await get(`${this.apiAddr}/users`)
+    let updatedUsers = convertList(res.data, {config: this.config})
+    return updatedUsers
+  }
+
+  /**
+   *
+   * @param {Number} id - Сервис id, если id не указан, отображается список всех роутеров
+   * @param {'dev' | 'prod'} mode - Сервис id, если id не указан, отображается список всех роутеров
+   * @returns {Promise<*[]>}
+   */
+  async getUsersBySiteId(id, mode) {
+    if (mode === "dev") {
+      return devUsersList
+    }
+    let res = await get(`${this.apiAddr}/users/by_server/${id}`)
+    let updatedUsers = convertList(res.data, {config: this.config})
+    return updatedUsers
+  }
+
+  /**
+   *
+   * @param {User} userData
+   * @returns {Promise<void>}
+   */
+  async createUser(userData) {
+    const newUser = await post(`${this.apiAddr}/users`, userData)
+    return newUser
+  }
+
+  /**
+   *
+   * @param {User} userData
+   * @returns {Promise<void>}
+   */
+  async updateUser(userData) {
+    const updatedUserData = {...userData}
+    delete updatedUserData.id
+    const newUser = await put(`${this.apiAddr}/users/${userData.id}`, updatedUserData)
+    return newUser
+  }
+
+  /**
+   *
+   * @param {Number} userId - Сервис id, если id не указан, отображается список всех роутеров
+   * @returns {Promise<*[]>}
+   */
+  async removeUser(userId) {
+    const removedUser = await remove(`${this.apiAddr}/users/${userId}`)
+    return removedUser
+  }
+
+
+  /**
+   * Функция запускает список запросов к апишке и логает ответы
+   * @returns {Promise<String>}
+   */
+  async test() {
+    console.log("_______START TEST_______")
+
+    const allUsers = await this.getUsers()
+    console.log("allUsers", allUsers)
+    const serverUser = await this.getUserById(1)
+    console.log("getUserById 1", serverUser)
+    const newUser = await this.createUser({
+      "server_id": 1,
+      "path": "/",
+      "role": 1,
+      "description": "tests swagger",
+      "deepness": 6,
+      "order": 0,
+      "is_cb_on": true,
+      "cb_request_limit": 100,
+      "cb_min_requests": 100,
+      "cb_error_threshold_percentage": 0.35,
+      "cb_interval_duration": 2000000,
+      "cb_open_state_timeout": 1000000
+    })
+    console.log("newUser", newUser)
+    const updatedUser = await this.updateUser({
+      "path": "/updated_path/",
+      "description": "updated_description",
+      "id": newUser.id
+    })
+    console.log("updatedUser", updatedUser)
+    const removedUser = await this.removeUser(newUser.id)
+    console.log("removedUser", removedUser)
+
+    const newUser1 = await this.createUser({
+      "server_id": 1,
+      "path": "/",
+      "role": 1,
+      "description": "tests swagger",
+      "deepness": 6,
+      "order": 0,
+      "is_cb_on": true,
+      "cb_request_limit": 100,
+      "cb_min_requests": 100,
+      "cb_error_threshold_percentage": 0.35,
+      "cb_interval_duration": 2000000,
+      "cb_open_state_timeout": 1000000
+    })
+    const newUser2 = await this.createUser({
+      "server_id": 1,
+      "path": "/",
+      "role": 1,
+      "description": "tests swagger",
+      "deepness": 6,
+      "order": 0,
+      "is_cb_on": true,
+      "cb_request_limit": 100,
+      "cb_min_requests": 100,
+      "cb_error_threshold_percentage": 0.35,
+      "cb_interval_duration": 2000000,
+      "cb_open_state_timeout": 1000000
+    })
+    const newUser3 = await this.createUser({
+      "server_id": 1,
+      "path": "/",
+      "role": 1,
+      "description": "tests swagger",
+      "deepness": 6,
+      "order": 0,
+      "is_cb_on": true,
+      "cb_request_limit": 100,
+      "cb_min_requests": 100,
+      "cb_error_threshold_percentage": 0.35,
+      "cb_interval_duration": 2000000,
+      "cb_open_state_timeout": 1000000
+    })
+
+    const actions = [
+      {
+        ...newUser1,
+        action: "update",
+        "path": "/updated_path2/",
+        "description": "updated_description2",
+      }, {
+        ...newUser2,
+        action: "update",
+        "path": "/updated_path3/",
+        "description": "updated_description3",
+      }, {
+        ...newUser3,
+        action: "remove"
+      },
+      {
+        action: "create",
+        "server_id": 1,
+        "path": "/lalalala/lalalal",
+        "role": 1,
+        "description": "new_route_created",
+        "deepness": 6,
+        "order": 0,
+        "is_cb_on": true,
+        "cb_request_limit": 100,
+        "cb_min_requests": 100,
+        "cb_error_threshold_percentage": 0.35,
+        "cb_interval_duration": 2000000,
+        "cb_open_state_timeout": 1000000
+      }
+    ]
+
+    const mutationsList = await this.updateGroupUsers(actions)
+    console.log("mutationsList", mutationsList)
+    console.log("________END TEST________")
+
+    return "ok"
+  }
+}
+
+export default Users

users-manage/src/adapters/adapterOfUsers/apiHelpers.js

@@ -0,0 +1,39 @@
+import axios from "axios";
+
+const post = async (path, data, onError) => {
+  return await axios.post(path, data)
+    .then(r => r.data)
+    .catch(error => {
+      onError && onError(error)
+      console.error('Error post request:', error)
+    })
+}
+
+
+const get = async (path) => {
+  return await axios.get(path)
+    .catch(error => {
+      console.error('Error get request:', error)
+    })
+}
+
+const put = async (path, data, id, onError) => {
+  return await axios.put(`${path}/${id}`, data)
+    .then(r => r.data)
+    .catch(error => {
+      onError && onError(error)
+      console.error('Error put request:', error)
+    })
+}
+
+const remove = async (path, id, onError) => {
+  return await axios.delete(`${path}/${id}`)
+    .then(r => r.data)
+    .catch(error => {
+      onError && onError(error)
+      console.error('Error delete request:', error)
+    })
+}
+
+
+export {get, post, put, remove}

users-manage/src/components/2_molecules/Tabulator/VTabulator.vue

@@ -11,9 +11,8 @@ import {
 
 import {TabulatorFull as Tabulator} from 'tabulator-tables';
 
-
-import localization from "./localization";
 import { is, sort, mergeDeepRight } from "ramda";
+import localization from "./localization";
 import Pagination from "./VTabulatorPagination.vue";
 
 export default {

users-manage/src/components/2_molecules/Tabulator/helper.js

@@ -181,13 +181,14 @@ const link = (col) => ({
 const render = (col) => ({
   ...col,
   formatter: (cell, _, onRendered) => {
-
     onRendered(function () {
       if (`${col.render}`.includes("{{") && `${col.render}`.includes("}}")) {
         let record = cell.getRow().getData();
         cell.getElement().innerHTML = Handlebars.compile(col.render)(
           {...record, __record__: record}
         );
+      } else if (typeof col.render === "function") {
+        cell.getElement().innerHTML = col.render(cell.getRow().getData(), cell.getRow());
       }
     });
   },
@@ -213,6 +214,7 @@ let sorter = (a, b) => {
 const prepCol = (col) =>
   cond([
     [() => is(String, col.render), () => render(col)],
+    [() => is(Function, col.render), () => render(col)],
     [equals("link"), () => link(col)],
     [T, always(col)],
   ])(col.mode);

users-manage/src/components/3_organisms/UsersManager/UsersManager.vue

@@ -40,7 +40,7 @@ export default {
     :class="`${gridCols}`"
   >
     <ModuleContainer>
-      <ManagerTitle>
+      <ManagerTitle class="mb-4">
         <template #title>
           <span>Список пользователей</span>
         </template>

users-manage/src/components/3_organisms/UsersManager/UsersManagerUsersTable.vue

@@ -1,10 +1,20 @@
 <script>
-// import VTabulator from '@molecules/Tabulator/VTabulator.vue';
+import VTabulator from '@molecules/Tabulator/VTabulator.vue';
 
 export default {
   name: 'UsersManagerUsersTable',
-  components: {},
+  components: {VTabulator},
+  props: {
+    usersList: {
+      type: Array,
+      default: () => []
+    },
+  },
   data() {
+    const editItem = (item) =>  this.editItem(item);
+
+    const deleteItem = (item) =>  this.deleteItem(item);
+
     return {
       columns: [
         {
@@ -14,33 +24,49 @@ export default {
           sorter: "number",
         },
         {
-          field: "name",
-          title: "Name",
-          width: 200,
+          field: "first_name",
+          title: "First Name",
+          width: 150,
           sorter: "string",
         },
         {
-          field: "age",
-          title: "Age",
-          width: 100,
-          sorter: "number",
+          field: "last_name",
+          title: "Last Name",
+          width: 150,
+          sorter: "string",
         },
-      ],
-      dataSource: [{
-        id: 1,
-        name: "Adnrew",
-        age: 15
-      }, {
-        id: 2,
-        name: "Micheal",
-        age: 22
-      }, {
-        id: 3,
-        name: "Sara",
-        age: 32
-      }]
+        {
+          field: "role",
+          title: "Role",
+          width: 150,
+          sorter: "string",
+        },
+        {
+          title: "Actions",
+          formatter: (cell) => {
+            return `<button @click="editItem(${cell.getRow().getIndex()})">Edit</button>
+                  <button @click="deleteItem(${cell.getRow().getIndex()})">Delete</button>`;
+          },
+          cellClick: function(e, cell) {
+            // Handle the click event and call Vue methods
+            const action = e.target.textContent.toLowerCase();
+            if (action === 'edit') {
+              editItem(cell.getRow().getData());
+            } else if (action === 'delete') {
+              deleteItem(cell.getRow().getData());
+            }
+          },
+        }],
     }
   },
+  methods: {
+    editItem(item) {
+      console.log('Edit item:', item);
+    },
+    deleteItem(item) {
+      console.log('Delete item:', item);
+    },
+  },
 }
 </script>
 
@@ -49,7 +75,10 @@ export default {
     class="flex flex-col max-h-[70vh] mb-14"
   >
     <div>
-      users table
+      <VTabulator
+        :dataSource="usersList"
+        :columns="columns"
+      />
     </div>
   </div>
 </template>

users-manage/src/components/5_pages/SitesManagerPage/SitesManagerPage.vue

@@ -1,12 +1,39 @@
 <script>
-import PageHeader from "@atoms/AppPageHeader.vue"
-import SiteList from "@organisms/SiteList/SiteList.vue"
-import SiteManager from "@organisms/UsersManager/UsersManager.vue"
 import {mapActions, mapGetters} from 'vuex'
+import {useStore}               from '@store/index.js'
+
+import AdapterOfServices    from '@adapters/adapterOfServices/Services'
+import AdapterOfUsers       from '@adapters/adapterOfUsers/Users'
+import ServiceOfUsers       from '@services/serviceOfUsers/Users.js'
+import ServiceOfServices    from '@services/serviceOfServices/Services.js'
+import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
+
+import PageHeader               from "@atoms/AppPageHeader.vue"
+import SiteList                 from "@organisms/SiteList/SiteList.vue"
+import SiteManager              from "@organisms/UsersManager/UsersManager.vue"
 
 export default {
   name: 'SitesManagerPage',
   components: {SiteManager, SiteList, PageHeader},
+  setup() {
+    const url = import.meta.env.VITE_API_URL
+
+    const adapterOfServices = new AdapterOfServices(url)
+    const adapterOfUsers    = new AdapterOfUsers(url)
+
+    const store = useStore()
+
+    const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
+    const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+    const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
+
+    return {serviceOfUsers, serviceOfServices, caseOfUsersInService}
+  },
+  data() {
+    return {
+    }
+  },
   computed: {
     ...mapGetters('services', ["sites", "routes", "newRoute", "selectedSiteState"]),
   },
@@ -28,7 +55,13 @@ export default {
 <template>
   <div class="p-6">
     <PageHeader class="me-2 mb-6" />
-    <SiteList :selectSite="selectSite" />
-    <SiteManager v-if="selectedSiteState === 'active'" />
+    <SiteList
+      :serviceOfUsers="serviceOfServices"
+      :caseOfUsersInService="caseOfUsersInService"
+    />
+    <SiteManager
+      v-if="selectedSiteState === 'active'"
+      :serviceOfUsers="serviceOfUsers"
+    />
   </div>
 </template>

users-manage/src/helpers/Users/Users.js

@@ -8,6 +8,14 @@ import {devUsersList} from './StaticData.js'
  * @param {Number}  id
  */
 
+const adapter_config = {
+  id: 'id',
+  first_name: 'first_name',
+  last_name: 'last_name',
+  email: 'email',
+  role: 'role',
+  is_active: 'is_active'
+}
 class Users {
   /**
    * Класс управления роутерами
@@ -16,7 +24,7 @@ class Users {
    * @param {Object | undefined} params - Конфиг настроек
    * @param {'prod' | 'test'} params.mode - Конфиг настроек
    */
-  constructor(apiAddr, adapter_config = {}, params = {mode: 'prod'}) {
+  constructor(apiAddr, params = {mode: 'prod'}) {
     this.apiAddr = apiAddr
     this.config  = adapter_config
     this.mode    = params.mode

users-manage/src/services/serviceOfServices/Services.js

@@ -0,0 +1,14 @@
+class ServiceOfServices {
+  constructor(adapterOfServices, store) {
+    this.adapterOfServices = adapterOfServices
+    this.store = store
+  }
+
+  async fetchUsersList() {
+    const services = await this.adapterOfServices.getServices()
+    await this.store.dispatch('services/saveServices', services)
+    return services
+  }
+}
+
+export default ServiceOfServices

users-manage/src/services/serviceOfUsers/Users.js

@@ -0,0 +1,6 @@
+class UsersOfServices {
+  constructor() {
+  }
+}
+
+export default UsersOfServices

users-manage/src/store/modules/users/index.js

@@ -1,14 +1,7 @@
 import Users from '@helpers/Users/Users.js';
 
 const path = import.meta.env.VITE_API_ADDR
-const UsersService = new Users(path, {
-  id: 'id',
-  first_name: 'first_name',
-  last_name: 'last_name',
-  email: 'email',
-  role: 'role',
-  is_active: 'is_active'
-})
+const UsersService = new Users(path)
 
 const initState = {
   usersList: [],
@@ -36,7 +29,7 @@ const actions = {
     commit('setComponentState', 'active')
   },
   resetStore: ({state}) => {
-    Object.entries(initState).forEach(([k,v]) => {
+    Object.entries(initState).forEach(([k, v]) => {
       state[k] = v
     })
   },

users-manage/src/useCases/CaseOfUsersInService.js

@@ -0,0 +1,9 @@
+class UsersInService {
+  constructor(serviceOfUsers, serviceOfServices) {
+    this.serviceOfUsers = serviceOfUsers
+    this.serviceOfServices = serviceOfServices
+  }
+
+}
+
+export default UsersInService

users-manage/tests/adapters/Services.test.js

@@ -0,0 +1,11 @@
+import {describe, expect, test} from "vitest";
+import AdapterOfServices from '@adapters/adapterOfServices/Services'
+
+
+describe('tests for AdapterOfServices', () => {
+  test('init', () => {
+    const adapterOfServices = new AdapterOfServices('http://localhost:8080', {})
+
+    expect(adapterOfServices).toBeDefined()
+  })
+})

users-manage/tests/adapters/Users.test.js

@@ -0,0 +1,11 @@
+import {describe, expect, test} from "vitest";
+import AdapterOfUsers from '@adapters/adapterOfUsers/Users'
+
+
+describe('test for AdapterOfUsers', () => {
+  test('init', () => {
+    const adapterOfUsers = new AdapterOfUsers('http://localhost:8080')
+
+    expect(adapterOfUsers).toBeDefined()
+  })
+})

users-manage/tests/services/serviceOfServices.test.js

@@ -0,0 +1,62 @@
+import {describe, vi, expect, test, beforeEach} from "vitest";
+import ServiceOfServices from '@services/serviceOfServices/Services.js'
+import {createStore} from 'vuex'
+
+class AdapterOfServices {
+  constructor() {
+  }
+
+  async getServices() {
+    return [{id: 1, name: 'service1'}, {id: 2, name: 'service2'}]
+  }
+}
+
+const services = {
+  namespaced: true,
+  state: {
+    services: [],
+  },
+  mutations: {
+    setServices(state, services) {
+      state.services = services
+    },
+  },
+  actions: {
+    resetStore({state}) {
+      state.services = []
+    },
+    saveServices({commit}, services) {
+      commit('setServices', services)
+    }
+  },
+}
+
+describe('tests for ServiceOfServices', () => {
+  const adapterOfServices = new AdapterOfServices()
+
+  const store = createStore({
+    modules: {
+      services,
+    },
+  })
+
+  beforeEach( async() => {
+    await store.dispatch('services/resetStore')
+  })
+
+  test('init', () => {
+    const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+    expect(serviceOfServices).toBeDefined()
+  })
+
+  test('test of fetchServicesList', async () => {
+    const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+    await serviceOfServices.fetchUsersList()
+
+    const usersList = store.getters['services/servicesList']
+
+    expect(usersList).toEqual([{id: 1, name: 'service1'}, {id: 2, name: 'service2'}])
+  })
+})

users-manage/tests/services/serviceOfUsers.test.js

@@ -0,0 +1,18 @@
+import {describe, vi, expect, test} from "vitest";
+import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
+
+class AdapterOfUsers {
+  constructor() {
+  }
+}
+
+describe('test for ServiceOfUsers', () => {
+  test('init', () => {
+    const adapterOfUsers = new AdapterOfUsers()
+
+    const serviceOfUsers = new ServiceOfUsers(adapterOfUsers)
+
+    expect(serviceOfUsers).toBeDefined()
+  })
+})
+

users-manage/tests/useCases/CaseOfUsersInService.test.js

@@ -0,0 +1,106 @@
+import {describe, vi, expect, test, beforeEach} from "vitest";
+import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
+import {createStore} from 'vuex'
+
+class ServiceOfUsers {
+  constructor(adapter, store) {
+    this.adapter = adapter
+    this.store = store
+  }
+}
+
+class ServiceOfServices {
+  constructor(adapter, store) {
+    this.adapter = adapter
+    this.store = store
+  }
+}
+
+class AdapterOfUsers {
+  constructor() {
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  async getUsersListByServiceId(serviceId) {
+    return [{id: 1, name: 'user1'}, {id: 2, name: 'user2'}]
+  }
+}
+
+class AdapterOfServices {
+  constructor() {
+  }
+}
+
+describe('tests for caseOfUsersInService', () => {
+  const store = createStore({
+    modules: {
+      services: {
+        namespaced: true,
+        state: {
+          services: [],
+        },
+        mutations: {
+          setServices(state, services) {
+            state.services = services
+          },
+        },
+        actions: {
+          resetStore({state}) {
+            state.services = []
+          },
+          saveServices({commit}, services) {
+            commit('setServices', services)
+          }
+        },
+      },
+      users: {
+        namespaced: true,
+        state: {
+          siteUsersList: [],
+        },
+        mutations: {
+          setSiteUsersList(state, users) {
+            state.users = users
+          },
+        },
+        actions: {
+          resetStore({state}) {
+            state.siteUsersList = []
+          },
+          saveUsers({commit}, users) {
+            commit('setSiteUsersList', users)
+          }
+        },
+      },
+    },
+  })
+
+  const adapterOfUsers    = new AdapterOfUsers()
+  const adapterOfServices = new AdapterOfServices()
+
+  const serviceOfUsers    = new ServiceOfUsers(adapterOfUsers, store)
+  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+  beforeEach( async() => {
+    await store.dispatch('services/resetStore')
+    await store.dispatch('users/resetStore')
+  })
+
+  test('init', () => {
+    const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
+
+    expect(caseOfUsersInService).toBeDefined()
+  })
+
+  // test('selectServiceAndFetchRoutes', async () => {
+  //   const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
+  //
+  //   await caseOfUsersInService.selectServiceAndFetchRoutes(1)
+  //
+  //   const selectedService = store.getters['services/selectedService']
+  //   const usersList       = store.getters['users/siteUsersList']
+  //
+  //   expect(selectedService).toEqual({id: 1, name: 'service1'})
+  //   expect(usersList).toEqual([{id: 1, name: 'user1'}, {id: 2, name: 'user2'}])
+  // })
+})

users-manage/tests/views/1_atoms/AppPageHeader.test.js

@@ -12,5 +12,3 @@ describe("tests AppPageHeader component", () => {
     expect(wrapper.exists()).toBe(true)
   })
 })
-
-

users-manage/tests/views/2_molecules/Tabulator.test.js

@@ -7,7 +7,7 @@ describe("tests VTabulator component", () => {
 
   vi.mock('tabulator-tables', () => {
 
-    const Tabulator = vi.fn(() => {
+    const tabulator = vi.fn(() => {
       return {
         getHtml: () => {
           return '<div>test</div>'
@@ -17,7 +17,7 @@ describe("tests VTabulator component", () => {
 
     return {
       __esModule: true,
-      TabulatorFull: Tabulator
+      TabulatorFull: tabulator
     }
   })
 

users-manage/tests/views/3_organisms/UsersManager.test.js

@@ -17,6 +17,13 @@ describe("tests SitesManagerPage component mounted with vuex", () => {
     },
   })
 
+  vi.mock('tabulator-tables', () => {
+    const mockTabulator = vi.fn().mockImplementation(() => ({
+      // Mock implementation details
+    }));
+    return { TabulatorFull: mockTabulator }; // Adjust based on what you're trying to mock
+  });
+
   beforeEach(async () => {
     store.dispatch('users/resetStore')
     store.dispatch('services/resetStore')
@@ -47,12 +54,13 @@ describe("tests SitesManagerPage component mounted with vuex", () => {
 
   test('test UsersManager mounted with vuex', async () => {
     const wrapper = mount(UsersManager, {
-      shallow: true,
       global: {
         plugins: [store]
       }
     })
 
+    console.log(wrapper.html())
+
     const componentState = wrapper.vm.componentState
     const gridCols = wrapper.vm.gridCols
     expect(componentState).toBe('view')

users-manage/tests/views/5_pages/SitesList.test.js

@@ -8,7 +8,8 @@ import axios from "axios";
 
 vi.mock('axios')
 
-describe("tests SitesManagerPage component mounted with vuex", () => {
+
+describe("tests App mounted with vuex", () => {
   const store = createStore({
     plugins: [],
     modules: {
@@ -17,6 +18,8 @@ describe("tests SitesManagerPage component mounted with vuex", () => {
     },
   })
 
+
+
   const mockData = [
     {
       "id": 1,
@@ -32,7 +35,6 @@ describe("tests SitesManagerPage component mounted with vuex", () => {
     data: mockData,
   })
 
-
   test('tests App mounted with vuex', async () => {
     const wrapper = mount(Sites, {
       shallow: true,

users-manage/vite.config.js

@@ -16,6 +16,9 @@ export default defineConfig({
       '@organisms': fileURLToPath(new URL('./src/components/3_organisms', import.meta.url)),
       '@pages': fileURLToPath(new URL('./src/components/5_pages', import.meta.url)),
       '@router': fileURLToPath(new URL('/src/router/index.js', import.meta.url)),
+      '@adapters': fileURLToPath(new URL('/src/adapters', import.meta.url)),
+      '@services': fileURLToPath(new URL('/src/services', import.meta.url)),
+      '@useCases': fileURLToPath(new URL('/src/useCases', import.meta.url)),
     }
   },
   test: {