Merge pull request 'move_users' (#5) from move_users into master

28c13c00ec
movied users from old project to new project anover repository, updated tests, cleared warns and errors in tests

users-manage/Makefile

@@ -42,6 +42,12 @@ prehook:
 	@chmod +x $(HOOK_PATH)
 	@echo "Pre-push hook set successfully."
 
+add:
+ifeq ($(pack),)
+	$(error mn is not set)
+endif
+	yarn add "../repo/${pack}/"
+
 push:
 ifeq ($(commit),)
 	$(error mn is not set)

users-manage/package.json

@@ -15,6 +15,7 @@
     "lint_fix": "yarn eslint './**/*.{js,vue}' --fix"
   },
   "dependencies": {
+    "3-class-complex-assistants": "../repo/3-class-complex-assistants/",
     "axios": "^1.6.7",
     "flowbite": "^2.3.0",
     "flowbite-vue": "^0.1.2",

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

@@ -1,32 +1,45 @@
 import {get, post, put, remove} from './apiHelpers.js'
 import {convertList, convertObject} from '@helpers/adapter/adapter.js'
+import {Logger} from '3-class-complex-assistants'
+import moment from 'moment/moment.js'
 
 const config = {
   id: "id",
-  created_at: "created_at",
+  created_at: "createdAt",
-  updated_at: "updated_at",
+  updated_at: "updatedAt",
-  deleted_at: "deleted_at",
+  deleted_at: "deletedAt",
   name: "name",
   port: "port",
-  proxy_ip: "proxy_ip",
+  proxy_ip: "proxyIp",
-  internet_uri: "internet_uri",
+  internet_uri: "internetUri",
   description: "description",
-  is_online: "is_online",
+  is_online: "isOnline",
-  site_ip: "device_ip",
+  site_ip: "deviceIp",
 }
 
 const configToServer = {
   id: "id",
-  created_at: "created_at",
+  createdAt: "created_at",
-  updated_at: "updated_at",
+  updatedAt: "updated_at",
-  deleted_at: "deleted_at",
+  deletedAt: "deleted_at",
   name: "name",
   port: "port",
-  proxy_ip: "proxy_ip",
+  proxyIp: "proxy_ip",
-  internet_uri: "internet_uri",
+  internetUri: "internet_uri",
   description: "description",
-  is_online: "is_online",
+  isOnline: "is_online",
-  device_ip: "site_ip",
+  deviceIp: "site_ip",
+}
+
+const loggerInfo = {
+  "loggerLevel": 1,
+  "serviceName": "users-manage",
+  "port":         5173,
+  "datetime":     moment().format("YYYY-MM-DDTHH:mm:ss"),
+}
+
+const callbackError = (error) => {
+  return console.err(error)
 }
 
 class Services {
@@ -40,6 +53,7 @@ class Services {
     this.apiAddr = apiAddr
     this.config = config
     this.configToServer = configToServer
+    this.loggerConfig = {...loggerInfo, callFunc: callbackError, isPushToServer: true}
   }
 
   /**
@@ -59,13 +73,14 @@ class Services {
    */
 
   async createService(payload) {
+    const logger = new Logger(this.loggerConfig)
     let newService = []
     const updatedPort = parseFloat(payload.port)
     const updatedService = {...convertObject(payload, {config: this.configToServer}), port: updatedPort}
     await post(`${this.apiAddr}/servers`, updatedService).then(res => {
       newService = convertObject(res.value, {config: this.config})
     }).catch(err => {
-      console.log('err', err)
+      logger.error(err)
     })
     return newService
   }
@@ -77,6 +92,7 @@ class Services {
    */
 
   async updateService(payload) {
+    const logger = new Logger(this.loggerConfig)
     let resService = []
     const updatedPort = parseFloat(payload.port)
     const updatedService = {...convertObject(payload, {config: this.configToServer}), port: updatedPort}
@@ -84,7 +100,7 @@ class Services {
       await put(`${this.apiAddr}/servers`, updatedService, payload.id).then(res => {
         resService = convertObject(res.value, {config: this.config})
       }).catch(err => {
-        console.log('err', err)
+        logger.error(err)
       })
     }
     return resService
@@ -97,11 +113,12 @@ class Services {
    */
 
   async deleteService(id) {
+    const logger = new Logger(this.loggerConfig)
     let deletedServiceId = null
     await remove(`${this.apiAddr}/servers`, id).then((res) => {
       deletedServiceId = res.id
     }).catch(err => {
-      console.log('err', err)
+      logger.error(err)
     })
     return deletedServiceId
   }

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

@@ -1,27 +1,43 @@
 const devUsersList = [
   {
     "id": 1,
-    "first_name": "Leanne",
+    "serviceId": [1, 3],
-    "last_name": "Graham",
+    "firstName": "Leanne 1",
+    "lastName": "Graham",
     "email": "test@mail.ru",
     "role": "admin",
-    "is_active": true
   },
   {
     "id": 2,
-    "first_name": "Leanne",
+    "serviceId": [1],
-    "last_name": "Graham",
+    "firstName": "Leanne 2",
+    "lastName": "Graham",
     "email": "test@mail.ru",
     "role": "admin",
-    "is_active": true
   },
   {
     "id": 3,
-    "first_name": "Leanne",
+    "serviceId": [2, 3],
-    "last_name": "Graham",
+    "firstName": "Leanne 3",
+    "lastName": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+  },
+  {
+    "id": 4,
+    "serviceId": [3],
+    "firstName": "Leanne 4",
+    "lastName": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+  },
+  {
+    "id": 5,
+    "serviceId": [4, 5],
+    "firstName": "Leanne 5",
+    "lastName": "Graham",
     "email": "test@mail.ru",
     "role": "admin",
-    "is_active": true
   },
 ]
 

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

@@ -8,12 +8,22 @@ import {devUsersList} from './StaticData.js'
  * @param {Number}  id
  */
 
-const adapter_config = {
+const adapterConfig = {
   id: "id",
   first_name: "firstName",
   last_name: "lastName",
   email: "email",
   role: "role",
+  service_id: "serviceId",
+}
+
+const serverConfig = {
+  id: "id",
+  firstName: "first_name",
+  lastName: "last_name",
+  email: "email",
+  role: "role",
+  serviceId: "service_id",
 }
 
 class Users {
@@ -25,7 +35,8 @@ class Users {
    */
   constructor(apiAddr, params = {mode: 'prod'}) {
     this.apiAddr = apiAddr
-    this.config  = adapter_config
+    this.config  = adapterConfig
+    this.serverConfig  = serverConfig
     this.mode    = params.mode
   }
 
@@ -52,7 +63,7 @@ class Users {
    */
   async getUsersByServiceId(id, mode) {
     if (mode === "dev") {
-      return devUsersList
+      return devUsersList.filter((user) => user.serviceId.includes(id))
     }
     let res = await get(`${this.apiAddr}/users/by_server/${id}`)
     let updatedUsers = convertList(res.data, {config: this.config})
@@ -65,7 +76,7 @@ class Users {
    * @returns {Promise<Object>}
    */
   async createUser(userData) {
-    const newUser = await post(`${this.apiAddr}/users`, userData)
+    const newUser = await post(`${this.apiAddr}/users`, convertObject(userData, {config: this.serverConfig}))
     return convertObject(newUser, {config: this.config})
   }
 
@@ -77,7 +88,7 @@ class Users {
   async updateUser(userData) {
     const updatedUserData = {...userData}
     delete updatedUserData.id
-    const newUser = await put(`${this.apiAddr}/users/${userData.id}`, updatedUserData)
+    const newUser = await put(`${this.apiAddr}/users/${userData.id}`, convertObject(updatedUserData, {config: this.serverConfig}))
     return convertObject(newUser, {config: this.config})
   }
 

users-manage/src/components/1_atoms/AppPageHeader.vue

@@ -2,15 +2,16 @@
 import {mapGetters} from 'vuex'
 export default {
   name: 'AppPageHeader',
-  inject: ['serviceOfServices'],
+  props: {
+    serviceOfServices: {
+      type: Object,
+      default: () => {}
+    },
+  },
   computed: {
     ...mapGetters('services', ['selectedService']),
   },
   methods: {
-    saveData: function () {
-      console.log('saveData')
-      return  this.serviceOfServices.isSaveServices(true)
-    },
   }
 }
 </script>
@@ -25,17 +26,9 @@ export default {
         <i class="ri-reply-line" />
         На главную
       </a>
-      <button 
-        :class="`w-fit text-white font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mx-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 ${!selectedSite ? 'bg-blue-200' : 'bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300'}`"
-        :disabled="!selectedSite"
-        @click="saveData"
-      >
-        <i class="ri-save-line cursor-pointer" /> 
-        Сохранить изменения
-      </button>
     </div>
     <div class="flex">
-      Версия 0.0.1
+      Версия 0.9.0
     </div>
   </div>
 </template>

users-manage/src/components/1_atoms/NewServiceButton.vue

@@ -1,9 +1,13 @@
 <script>
+import {mapGetters} from 'vuex'
 
 export default {
-  name: 'NewSiteButton',
+  name: 'NewServiceButton',
-  inject: ['serviceOfServices'],
   props: {
+    serviceOfServices: {
+      type: Object,
+      default: () => {}
+    },
     name: {
       default: "",
       type: String
@@ -17,8 +21,12 @@ export default {
       type: Object
     }
   },
+  computed: {
+    ...mapGetters('services', ['selectedService']),
+  },
   methods: {
     addNewServiceLayout() {
+      if (this.selectedService?.id === -1) return
       this.serviceOfServices.addNewServiceLayout()
     }
   }

users-manage/src/components/1_atoms/VButton.vue

@@ -5,7 +5,11 @@ export default {
     color: {
       type: String,
       default: 'purple'
-    }
+    },
+    disable: {
+      type: Boolean,
+      default: false
+    },
   },
 }
 </script>
@@ -13,7 +17,8 @@ export default {
 <template>
   <button
     type="button"
-    :class="`rounded-md bg-${color}-700 hover:bg-fuchsia-700 transition-all cursor-pointer text-white p-2`"
+    :class="`rounded-md bg-${color}-700 hover:bg-fuchsia-700 transition-all text-white p-2 ${disable ? 'opacity-50 cursor-auto' : 'cursor-pointer'}`"
+    :disabled="disable"
   >
     <slot />
   </button>

users-manage/src/components/1_atoms/VDoubleSwitch.vue

@@ -2,7 +2,6 @@
 export default {
   name: 'VDoubleSwitch',
   components: {
-    // Button,
   },
   props: {
     machine: {

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

@@ -72,7 +72,15 @@ export default {
     withTablefy: {
       type: Boolean,
       default: true
-    }
+    },
+    layout: {
+      type: String,
+      default: "fitDataFill"
+    },
+    responsiveLayout: {
+      type: String,
+      default: "collapse"
+    },
   },
   data() {
     return {
@@ -111,7 +119,8 @@ export default {
         locale: "ru",
         langs: localization(),
         height: this.height || "250px",
-        responsiveLayout: "collapse",
+        layout: this.layout,
+        responsiveLayout: this.responsiveLayout,
         placeholder: "Нет записей",
         movableColumns: true,
         autoResize: false,

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

@@ -291,9 +291,6 @@ const makedFiltering = (id, filterParams, selectedFilter, clearFilters) => {
       el.onchange = (e) => {
         if(e.target.value) {
           selectOptions[0].removeAttribute('selected')
-          console.log('e', e)
-          console.log('selectFilters[0]', selectFilters[0])
-          console.log('selectOptions[0][0]', selectOptions[0])
           selectedFilter(e.target.value)
         } else {
           clearFilters()
@@ -305,7 +302,6 @@ const makedFiltering = (id, filterParams, selectedFilter, clearFilters) => {
     buttonClearFilters.onclick = () => {
       clearFilters()
       selectOptions[0].setAttribute('selected', 'selected')
-      console.log('selectFilters[0]', selectFilters[0])
     }
   }
 }

users-manage/src/components/3_organisms/ServicesList/EditServiceCard.vue

@@ -1,13 +1,17 @@
-<!-- eslint-disable vue/prop-name-casing -->
 <script>
 import {mapGetters} from 'vuex'
 import Input from '@atoms/VInput.vue'
 import Textarea from '@atoms/VTextarea.vue'
 import VDoubleSwitch from '@atoms/VDoubleSwitch.vue'
+import VButton from '@atoms/VButton.vue'
+import { directive } from 'vue-tippy';
 
 export default {
   name: 'EditServiceCard',
-  components: {Input, Textarea, VDoubleSwitch},
+  directives: {
+    tippy: directive
+  },
+  components: {Input, Textarea, VDoubleSwitch, VButton},
   props: {
     id: {
       default: -1,
@@ -29,7 +33,10 @@ export default {
     },
     cancelEditService() {
       this.serviceOfServices.cancelSelectedService(this.id)
-    }
+    },
+    saveData: function () {
+      return  this.serviceOfServices.setIsSaveServices(true)
+    },
   }
 }
 </script>
@@ -43,16 +50,17 @@ export default {
         secondColor="#2563eb"
         firstTitle="Офлайн"
         secondTitle="Онлайн"
-        :isCheck="selectedService.is_online"
+        :isCheck="selectedService?.isOnline"
         position="col"
         labelClass="items-start pb-2"
-        switchClass="mt-1"
+        switchClass="switcher mt-1"
-        @switched="(e) => editData({key: 'is_online', value: e})"
+        @switched="(e) => editData({key: 'isOnline', value: e})"
       />
     </div>
     <Input
+      id="name"
       name="name"
-      :value="selectedService.name"
+      :value="selectedService?.name"
       inputClass="!w-[90%] py-2"
       placeholder="Указать путь"
       :onChange="editData"
@@ -60,6 +68,8 @@ export default {
     <div>
       <i
         v-tippy="{ content: 'закрыть сервис' }" 
+        name="closeButton"
+        test-id="closeButton"
         class="ri-close-line cursor-pointer"
         @click="cancelEditService"
       />
@@ -68,8 +78,9 @@ export default {
   <div class="flex items-center mb-2 w-full">
     <span class="mr-2 min-w-[80px]">Порт:</span>
     <Input
+      id="port"
       name="port"
-      :value="`${selectedService.port}`"
+      :value="`${selectedService?.port}`"
       inputClass="py-2"
       placeholder="Порт"
       :onChange="editData"
@@ -78,8 +89,9 @@ export default {
   <div class="flex items-center mb-2 w-full">
     <span class="mr-2 min-w-[80px]">IP proxy:</span>
     <Input
-      name="proxy_ip"
+      id="proxyIp"
-      :value="selectedService.proxy_ip"
+      name="proxyIp"
+      :value="selectedService?.proxyIp"
       inputClass="py-2"
       placeholder="IP proxy"
       :onChange="editData"
@@ -88,18 +100,31 @@ export default {
   <div class="flex items-center w-full mb-2">
     <span class="mr-2 min-w-[80px]">IP устр-ва:</span>
     <Input
-      name="device_ip"
+      id="deviceIp"
-      :value="selectedService.device_ip"
+      name="deviceIp"
+      :value="selectedService?.deviceIp"
       inputClass="py-2"
       placeholder="IP устройства"
       :onChange="editData"
     />
   </div>
   <Textarea
+    id="description"
     name="description"
-    :value="selectedService.description"
+    :value="selectedService?.description"
     textareaClass="py-2"
     placeholder="Описание..."
     :onChange="editData"
   />
+  <div class="flex justify-end items-center w-full mt-2">
+    <VButton 
+      :class="`w-fit text-white font-medium rounded-full text-sm px-5 py-1 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 ${!selectedService ? 'bg-blue-200' : 'bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300'}`"
+      :disable="!selectedService"
+      color="blue"
+      @click="saveData"
+    >
+      <i class="ri-save-line cursor-pointer" /> 
+      Сохранить
+    </VButton>
+  </div>
 </template>

users-manage/src/components/3_organisms/ServicesList/ServiceCard.vue

@@ -1,16 +1,28 @@
 <!-- eslint-disable vue/prop-name-casing -->
 <script>
-import {mapActions, mapGetters} from 'vuex'
+import {mapGetters} from 'vuex'
 import EditCard from './EditServiceCard.vue'
+import { directive } from 'vue-tippy';
 
 export default {
   name: 'ServiceCard',
+  directives: {
+    tippy: directive
+  },
   components: {EditCard},
   props: {
     serviceOfServices: {
       default: () => ({}),
       type: Object
     },
+    caseOfUsersInService: {
+      type: Object,
+      default: () => {}
+    },
+    uploadUsers: {
+      default: () => ([]),
+      type: Function
+    },
     id: {
       default: -1,
       type: Number
@@ -23,11 +35,11 @@ export default {
       default: "",
       type: String
     },
-    device_ip: {
+    deviceIp: {
       default: "",
       type: String
     },
-    proxy_ip: {
+    proxyIp: {
       default: "",
       type: String
     },
@@ -53,51 +65,38 @@ export default {
   },
   computed: {
     ...mapGetters('services', ["selectedService", "routes", 'isSaveData']),
-    __btnClass__() {
-      if (this.forcedBtnClass) return this.forcedBtnClass
-      return `${this.btnClass} cursor-pointer w-full bg-transparent hover:bg-primary text-primary font-semibold hover:text-white py-1 text-ssm px-4 border border-primary hover:border-transparent rounded-lg text-center transition_up`
-    }
   },
   watch: {
     isSaveData: function (newVal) {
-      console.log('newVal', newVal)
       if (newVal) {
         this.saveServiceData()
       }
     },
     isOnline: function (newVal) {
-      console.log('newVal', newVal)
       this.status = this.setStatus(newVal)
     }
   },
   mounted() {
   },
   methods: {
-    ...mapActions('services', ["saveservice", "createNewservice", 'removeservice', 'updateRoutesWithApi', 'closeRoutesList']),
-    ...mapActions('users', ["fetchUsersList"]),
-    toggle () {
-      this.open = !this.open
-      this.onToggle({isOpen: this.open})
-    },
     setStatus (isOnline) {
-      return isOnline ? {title: 'enable', color: 'bg-green-700'} : {title: 'disable', color: 'bg-red-700'}
+      return this.status = isOnline ? {title: 'enable', color: 'bg-green-700'} : {title: 'disable', color: 'bg-red-700'}
     },
     editService (service) {
-      this.serviceOfServices.selectService(service)
+      this.caseOfUsersInService.getUsersWithSelectService(service, 'dev')
-      // this.serviceOfServices.openRoutesList()
     },
     saveServiceData () {
       if (this.selectedService.id == -1) {
         const data = {
           name: this.selectedService.name,
           port: this.selectedService.port,
-          device_ip: this.selectedService.device_ip,
+          deviceIp: this.selectedService.deviceIp,
-          proxy_ip: this.selectedService.proxy_ip,
+          proxyIp: this.selectedService.proxyIp,
-          description: this.selectedService.description
+          description: this.selectedService.description,
+          isOnline: this.selectedService.isOnline,
         }
         this.serviceOfServices.createNewService(data)
       } else {
-        // this.updateRoutesWithApi(this.selectedService)
         this.serviceOfServices.saveService(this.selectedService)
       }
     },
@@ -136,12 +135,14 @@ export default {
           class="absolute flex flex-row top-0 right-0 p-3 bg-white rounded-lg shadow-lg z-10"
         >
           <button 
+            test-id="canelButton"
             class="flex items-center text-xs text-white bg-blue-700 p-1 mr-2 rounded-lg shadow"
             @click="deleteService(false)"
           >
             Отменить
           </button>
           <button
+            test-id="deletedButton"
             class="flex items-center p-1 text-xs text-white bg-slate-700 rounded-lg shadow"
             @click="serviceOfServices.removeService(id)"
           >
@@ -164,10 +165,10 @@ export default {
       </span>
     </div>
     <p class=" font-normal text-sm text-gray-700 dark:text-gray-400 mb-2 flex">
-      <span class="min-w-[80px] font-w-700 inline-block flex"> IP proxy:</span> {{ proxy_ip }}
+      <span class="min-w-[80px] font-w-700 inline-block flex"> IP proxy:</span> {{ proxyIp }}
     </p>
     <p class=" font-normal text-sm text-gray-700 dark:text-gray-400 mb-2 flex">
-      <span class="min-w-[80px] font-w-700 inline-block flex"> IP устр-ва:</span> {{ device_ip }}
+      <span class="min-w-[80px] font-w-700 inline-block flex"> IP устр-ва:</span> {{ deviceIp }}
     </p>
     <p class=" font-normal text-sm text-gray-700 dark:text-gray-400 mb-2 flex ">
       <span class="min-w-[80px] font-w-700 inline-block flex"> Описание:</span> <span

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

@@ -13,6 +13,14 @@ export default {
       type: Object,
       default: () => {}
     },
+    caseOfUsersInService: {
+      type: Object,
+      default: () => {}
+    },
+    uploadUsers: {
+      type: Function,
+      default: () => ([])
+    }
   },
   setup (props) {
     const {serviceOfServices} = toRefs(props)
@@ -44,12 +52,14 @@ export default {
       :id="service.id"
       :key="service.name"
       :serviceOfServices="serviceOfServices"
+      :caseOfUsersInService="caseOfUsersInService"
+      :uploadUsers="uploadUsers"
       :service="service"
       :name="service.name"
       :port="`${service.port}`"
-      :device_ip="service.device_ip"
+      :deviceIp="service.deviceIp"
-      :proxy_ip="service.proxy_ip"
+      :proxyIp="service.proxyIp"
-      :isOnline="service.is_online"
+      :isOnline="service.isOnline"
       :description="service.description"
     />
   </div>

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

@@ -8,7 +8,7 @@ export default {
 
 <template>
   <div
-    class="p-4 shadow-md rounded-md border border-slate-200"
+    class="w-fit p-4 shadow-md rounded-md border border-slate-200"
   >
     <slot />
   </div>

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

@@ -6,7 +6,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex items-center">
+  <div class="flex justify-between">
     <h2 class="text-xl font-w-500 mr-6">
       <slot name="title" />
     </h2>

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

@@ -0,0 +1,375 @@
+<script>
+import {mapGetters} from 'vuex'
+import Input from '@atoms/VInput.vue'
+import VButton from "@atoms/VButton.vue"
+import {generatePassword, isFullLengthPassword, equalPasswords, isRepeatPasswordEmpty} from './helpers/validation.js'
+
+export default {
+  name: 'UserEditor',
+  components: {Input, VButton},
+  props: {
+    id: {
+      default: -1,
+      type: Number
+    },
+    serviceOfUsers: {
+      default: () => ({}),
+      type: Object
+    },
+  },
+  data() {
+    return {
+      repeatPassword: '',
+      showNewPassword: false,
+      newPasswordType: 'password',
+      showRepeatPassword: false,
+      repeatPasswordType: 'password',
+      errorPassword: null,
+    }
+  },
+  computed: {
+    ...mapGetters('services', ["selectedService"]),
+    ...mapGetters('users', ['selectedUser']),
+  },
+  mounted() {
+  },
+  methods: {
+    editData (params) {
+      if (params.key === 'password') {
+        this.serviceOfUsers.setUserFields(params.key, params.value)
+        this.errorPassword = isFullLengthPassword(params.value)
+        if (this.errorPassword) return false
+        this.errorPassword = equalPasswords(params.value, this.repeatPassword)
+        if (this.errorPassword) return false
+      }
+      if (params.key === 'repeat_password') {
+        this.repeatPassword = params.value
+        this.errorPassword = equalPasswords(this.selectedUser.password, this.repeatPassword)
+        if (this.errorPassword) return false
+      }
+      this.serviceOfUsers.setUserFields(params.key, params.value)
+    },
+    saveUser() {
+      this.errorPassword = isRepeatPasswordEmpty(this.selectedUser.password, this.repeatPassword)
+      if (this.errorPassword) return false
+      this.selectedUser.id ? this.selectedUser.id === -1 ? this.serviceOfUsers.createUser(this.selectedService.id) : this.serviceOfUsers.updateUser() : ''
+      this.serviceOfUsers.setStatusUser('inactive')
+    },
+    getPassword () {
+      const pass = generatePassword()
+      this.serviceOfUsers.setUserFields('password', pass)
+      this.errorPassword = equalPasswords(pass, this.repeatPassword)
+    },
+    togglePass () {
+      this.showNewPassword = !this.showNewPassword
+      this.newPasswordType = this.showNewPassword ? 'text' : 'password'
+    },
+    toggleRepeatPass () {
+      this.showRepeatPassword = !this.showRepeatPassword
+      this.repeatPasswordType = this.showRepeatPassword ? 'text' : 'password'
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="grid gap-6 mb-6 md:grid-cols-2">
+    <div class="hidden">
+      <div class="relative hidden">
+        <Input
+          id="id"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          placeholder=""
+          name="id"
+          type="text"
+          value="1"
+          autocomplete="off"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="lastName"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Фамилия
+        </label>
+        <Input
+          id="lastName"
+          required=""
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="lastName"
+          type="text"
+          :value="selectedUser?.lastName"
+          InputClass="py-2"
+          placeholder="Фамилия"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="firstName"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Имя
+        </label>
+        <Input
+          id="firstName"
+          required=""
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="firstName"
+          type="text"
+          :value="selectedUser?.firstName"
+          autocomplete="off"
+          placeholder="Имя"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="secondName"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Отчество
+        </label>
+        <Input
+          id="secondName"
+          class="bg-gray-50 border border-gray-300  text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="secondName"
+          type="text"
+          :value="selectedUser?.secondName"
+          autocomplete="off"
+          placeholder="Отчество"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="email"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Почта
+        </label>
+        <Input
+          id="email"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="email"
+          type="mail"
+          :value="selectedUser?.email"
+          autocomplete="off"
+          placeholder="example@ya.ru"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="login"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Логин
+        </label>
+        <Input
+          id="login"
+          required=""
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="login"
+          type="login"
+          :value="selectedUser?.login"
+          autocomplete="off"
+          placeholder="Логин"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="position"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Должность
+        </label>
+        <Input
+          id="position"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="position"
+          type="text"
+          :value="selectedUser?.position"
+          autocomplete="off"
+          placeholder="Должность"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="phone"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Телефон
+        </label>
+        <Input
+          id="phone"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="phone"
+          type="tel"
+          :value="selectedUser?.phone"
+          autocomplete="off"
+          placeholder="123-45-678"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="company"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Компания
+        </label>
+        <Input
+          id="company"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="company"
+          type="text"
+          :value="selectedUser?.company"
+          autocomplete="off"
+          placeholder="Компания"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="col-span-2">
+      <div class="relative col-span-2">
+        <label
+          for="notes"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          notes
+        </label>
+        <Input
+          id="notes"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="notes"
+          type="text"
+          :value="selectedUser?.notes"
+          autocomplete="off"
+          placeholder="notes"
+          :onChange="editData"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="password"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Новый пароль
+        </label>
+        <Input
+          id="password"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="password"
+          :type="newPasswordType"
+          :value="selectedUser?.password"
+          autocomplete="off"
+          :placeholder="`${showNewPassword ? '' : '•••••••••'}`"
+          :onChange="editData"
+        />
+        <i
+          id="showPass"
+          ref="showPass"
+          class="cursor-pointer transition-all text-slate-500 hover:text-slate-800 absolute ri-eye-line bottom-[4px] right-[7px]"
+          :class="{'hidden': showNewPassword, '': !showNewPassword}"
+          @click="togglePass"
+        />
+        <i
+          id="hidePass"
+          ref="hidePass"
+          class="cursor-pointer transition-all text-slate-500 hover:text-slate-800 absolute ri-eye-off-line bottom-[4px] right-[7px]"
+          :class="{'hidden': !showNewPassword, '': showNewPassword}"
+          @click="togglePass"
+        />
+      </div>
+    </div><div class="">
+      <div class="relative ">
+        <label
+          for="repeat_password"
+          class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300 text-left "
+        >
+          Повторить пароль
+        </label>
+        <Input
+          id="repeatPassword"
+          ref="repeatPassword"
+          class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full py-1 pl-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 "
+          name="repeat_password"
+          :type="repeatPasswordType"
+          :value="repeatPassword"
+          autocomplete="off"
+          :placeholder="`${showRepeatPassword ? '' : '•••••••••'}`"
+          :onChange="editData"
+        />
+        <i
+          id="showRepeatPass"
+          ref="showRepeatPass"
+          class="cursor-pointer transition-all text-slate-500 hover:text-slate-800 absolute ri-eye-line bottom-[4px] right-[7px]"
+          :class="{'hidden': showRepeatPassword, '': !showRepeatPassword}"
+          @click="toggleRepeatPass"
+        />
+        <i
+          id="hideRepeatPass"
+          ref="hideRepeatPass"
+          class="cursor-pointer transition-all text-slate-500 hover:text-slate-800 absolute ri-eye-off-line bottom-[4px] right-[7px]"
+          :class="{'hidden': !showRepeatPassword, '': showRepeatPassword}"
+          @click="toggleRepeatPass"
+        />
+      </div>
+      <div
+        v-if="errorPassword"
+        class="text-red-500 text-xs mt-1"
+      >
+        {{ errorPassword }}
+      </div>
+    </div>
+  </div>
+  <div class="flex justify-between gap-6 mb-6">
+    <div>
+      <VButton
+        type="button"
+        class=""
+        color="blue"
+        @click="getPassword"
+      >
+        <i class="ri-key-2-line" />
+        Сгенерировать пароль
+      </VButton>
+    </div>
+    <div class="flex gap-4 justify-end">
+      <div>
+        <VButton
+          type="button"
+          class=""
+          color="purple"
+        >
+          <i class="ri-printer-line" />
+          Распечатать
+        </VButton>
+      </div>
+      <div>
+        <VButton
+          color="blue"
+          test-id="save-user"
+          :disable="errorPassword !== null"
+          @click="saveUser"
+        >
+          <i class="ri-save-line cursor-pointer" /> 
+          Сохранить
+        </VButton>
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,44 @@
+<script>
+import {mapGetters} from 'vuex'
+import {tableColumns} from './helpers/TableColumns'
+import VTabulator from '@molecules/Tabulator/VTabulator.vue';
+
+export default {
+  name: 'UsersForSelection',
+  components: {VTabulator},
+  props: {
+    id: {
+      type: Number,
+      default: null
+    },
+    caseOfUsersInService: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapGetters('users', ["usersWithoutService"])
+  },
+  methods: {
+    getColumns(addUser) {
+      return tableColumns({typeUsers: 'addUsers', addUser})
+    },
+    addUser(user) {
+      this.caseOfUsersInService.addUserToService(user.id)
+    },
+  }
+}
+</script>
+
+<template>
+  <div>
+    <VTabulator
+      :dataSource="usersWithoutService"
+      :columns="getColumns(addUser)"
+    />
+  </div>
+</template>

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

@@ -1,52 +1,66 @@
 <script>
-import ModuleContainer from "@organisms/UsersManager/UsersManagerContainer.vue";
+import ModuleContainer from "@organisms/UsersManager/Container.vue";
-import UsersTable from "@organisms/UsersManager/UsersManagerUsersTable.vue";
+import UsersTable from "@organisms/UsersManager/UsersTable.vue";
-import UsersEditor from "@organisms/UsersManager/UsersManagerUserEditor.vue";
+import UserEditor from "@organisms/UsersManager/UserEditor.vue";
-import ManagerTitle from "@organisms/UsersManager/UsersManagerTitle.vue";
+import UsersForSelecting from "@organisms/UsersManager/UsersForSelection.vue";
+import ManagerTitle from "@organisms/UsersManager/Title.vue";
 import VButton from "@atoms/VButton.vue";
 import {mapGetters} from 'vuex'
 
 export default {
   name: 'UsersManager',
-  components: {ModuleContainer, UsersTable, UsersEditor, ManagerTitle, VButton},
+  components: {ModuleContainer, UsersTable, UserEditor, UsersForSelecting, ManagerTitle, VButton},
   props: {
     serviceOfUsers: {
       type: Object,
       default: () => ({})
+    },
+    caseOfUsersInService: {
+      type: Object,
+      default: () => ({})
+    },
+    selectedService: {
+      type: Object,
+      default: () => ({})
     }
   },
   data() {
     return {
-      componentState: 'view' // view | create | select
     }
   },
   computed: {
-    ...mapGetters('users', ["usersList"]),
+    ...mapGetters('users', ['userStatus', 'usersWithService']),
-    gridCols() {
+  },
-      return this.componentState === 'view' ? 'grid-cols-1' : 'grid-cols-2'
+  watch: {
+    selectedService: function (newValue, oldValue) {
+      if (newValue.id !== oldValue.id) {
+        this.serviceOfUsers.setStatusUser('inactive')
       }
     },
+  },
   methods: {
     openUserPanelOfCreate() {
-      this.componentState = 'create'
+      this.serviceOfUsers.addNewUser()
+      this.serviceOfUsers.setStatusUser('create')
     },
     openUserPanelOfSelect() {
-      this.componentState = 'select'
+      this.serviceOfUsers.setStatusUser('select')
-      this.serviceOfUsers.fetchUsersOffSite()
+      this.serviceOfUsers.getUsersWithoutService(this.selectedService.id)
     },
     closeUserPanel() {
-      this.componentState = 'view'
+      this.serviceOfUsers.setStatusUser('inactive')
     }
   }
 }
 </script>
 
 <template>
+  <form>
     <div
-    class="grid grid-cols-12 gap-4"
+      class="w-full flex justify-between grow gap-4"
-    :class="`${gridCols}`"
+      :class="``"
     >
-    <ModuleContainer :class="[{'col-span-12': componentState === 'view', 'col-span-4': componentState !== 'view' }]">
+      <ModuleContainer>
         <ManagerTitle class="mb-4">
           <template #title>
             <span>Список пользователей</span>
@@ -56,27 +70,38 @@ export default {
               <VButton
                 color="blue"
                 test-id="toggle-new-user"
+                :disable="userStatus === 'create'"
                 @click="openUserPanelOfCreate"
               >
+                <i class="ri-user-add-line" />
                 Создать пользователя
               </VButton>
               <VButton
                 color="purple"
                 test-id="toggle-add-user"
+                :disable="userStatus === 'select'"
                 @click="openUserPanelOfSelect"
               >
+                <i class="ri-user-received-fill" />
                 Добавить существующего
               </VButton>
             </div>
           </template>
         </ManagerTitle>
-      <UsersTable :usersList="usersList" />
+        <UsersTable 
+          :users="usersWithService"
+          :serviceOfUsers="serviceOfUsers"
+          :caseOfUsersInService="caseOfUsersInService"
+        />
       </ModuleContainer>
       <ModuleContainer
-      v-if="componentState === 'create'"
+        v-if="userStatus === 'create'"
-      class="col-span-8"
+        class="w-full"
+      >
+        <ManagerTitle 
+          test-id="new-user-container" 
+          class="!justify-end gap-3"
         >
-      <ManagerTitle test-id="new-user-container">
           <template #title>
             <span>Создать пользователя</span>
           </template>
@@ -86,17 +111,47 @@ export default {
               color="gray"
               @click="closeUserPanel"
             >
+              <i class="ri-close-line" />
               Закрыть
             </VButton>
           </template>
         </ManagerTitle>
-      <UsersEditor />
+        <UserEditor :serviceOfUsers="serviceOfUsers" />
       </ModuleContainer>
       <ModuleContainer
-      v-if="componentState === 'select'"
+        v-if="userStatus === 'edit'"
-      class="col-span-8"
+        class="w-full"
+      >
+        <ManagerTitle 
+          test-id="edit-user-container" 
+          class="!justify-end gap-3"
+        >
+          <template #title>
+            <span>Редактировать пользователя</span>
+          </template>
+          <template #control>
+            <VButton
+              class="close-button"
+              color="gray"
+              @click="closeUserPanel"
+            >
+              <i class="ri-close-line" />
+              Закрыть
+            </VButton>
+          </template>
+        </ManagerTitle>
+        <UserEditor 
+          :serviceOfUsers="serviceOfUsers"
+        />
+      </ModuleContainer>
+      <ModuleContainer
+        v-if="userStatus === 'select'"
+        class="w-full col-span-8"
+      >
+        <ManagerTitle
+          test-id="select-user-container" 
+          class="!justify-end gap-3"
         >
-      <ManagerTitle>
           <template #title>
             <span>Выбрать пользователя</span>
           </template>
@@ -106,11 +161,13 @@ export default {
               color="gray"
               @click="closeUserPanel"
             >
+              <i class="ri-close-line" />
               Закрыть
             </VButton>
           </template>
         </ManagerTitle>
-      <UsersEditor />
+        <UsersForSelecting :caseOfUsersInService="caseOfUsersInService" />
       </ModuleContainer>
     </div>
+  </form>
 </template>

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

@@ -1,17 +0,0 @@
-<script>
-
-export default {
-  name: 'UsersManagerUserEditor',
-  components: {},
-  data() {
-    return {
-    }
-  },
-}
-</script>
-
-<template>
-  <div>
-    UsersManagerUserEditor
-  </div>
-</template>

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

@@ -1,101 +0,0 @@
-<script>
-import VTabulator from '@molecules/VTabulator/VTabulator.vue';
-
-export default {
-  name: 'UsersManagerUsersTable',
-  components: {VTabulator},
-  props: {
-    usersList: {
-      type: Array,
-      default: () => []
-    },
-  },
-  data() {
-    const editItem = (item)   =>  this.editItem(item)
-    const deleteItem = (item) =>  this.deleteItem(item)
-    return {
-      rerenderStep: 3,
-      columns: [
-        {
-          field: "id",
-          title: "ID",
-          width: 100,
-          sorter: "number",
-        },
-        {
-          field: "first_name",
-          title: "First Name",
-          width: 150,
-          sorter: "string",
-        },
-        {
-          field: "last_name",
-          title: "Last Name",
-          width: 150,
-          sorter: "string",
-        },
-        {
-          field: "role",
-          title: "Role",
-          width: 150,
-          sorter: "string",
-        },
-        {
-          title: "Actions",
-          formatter: (cell) => {
-            const record = cell.getRow().getData();
-            const id = record.id;
-            return `
-                    <button action="edit" class="text-white mr-2 text-xs bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900">
-                      <i action="edit" class="ri-pencil-line"></i>
-                    </button>
-                    <input action="toggle-remove" type="checkbox" id="remove-option-${id}" value="" class="hidden peer" required="">
-                    <label for="remove-option-${id}"  class="peer-checked:hidden cursor-pointer inline-text text-white text-xs bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
-                    >
-                        <i class="ri-delete-bin-line"></i>
-                    </label>
-                    <label action="remove" for="remove-option-${id}" class="hidden cursor-pointer mr-2 peer-checked:flex text-white text-xs bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
-                     >
-                        <i action="remove" class="ri-check-line"></i>
-                    </label>
-                    <label action="close-remove" for="remove-option-${id}" class="hidden cursor-pointer peer-checked:flex text-white text-xs bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-900">
-                        <i class="ri-close-line"></i>
-                    </label>
-
-
-`;
-          },
-          cellClick: function(e, cell) {
-            const action = e.target.getAttribute('action');
-            if (action === 'edit') {
-              editItem(cell.getRow().getData());
-            } else if (action === 'remove') {
-              deleteItem(cell.getRow().getData());
-            }
-          },
-        }],
-    }
-  },
-  methods: {
-    editItem(item) {
-      console.log('Edit item:', item);
-    },
-    deleteItem(item) {
-      console.log('Delete item:', item);
-    },
-  }
-}
-</script>
-
-<template>
-  <div
-    class="flex flex-col max-h-[70vh] mb-14"
-  >
-    <div>
-      <VTabulator
-        :dataSource="usersList"
-        :columns="columns"
-      />
-    </div>
-  </div>
-</template>

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

@@ -0,0 +1,58 @@
+<script>
+import {mapGetters} from 'vuex'
+import {tableColumns} from './helpers/TableColumns'
+import VTabulator from '@molecules/Tabulator/VTabulator.vue'
+
+export default {
+  name: 'UsersTable',
+  components: {VTabulator},
+  props: {
+    users: {
+      type: Array,
+      default: () => []
+    },
+    serviceOfUsers: {
+      type: Object,
+      default: () => ({})
+    },
+    caseOfUsersInService: {
+      type: Object,
+      default: () => ({})
+    },
+  },
+  computed: {
+    ...mapGetters('users', ['userStatus', 'selectedUser']),
+  },
+  mounted () {
+  },
+  methods: {
+    editUser(user) {
+      if (this.userStatus === 'edit') return
+      this.serviceOfUsers.setSelectedUser(user.id)
+      this.serviceOfUsers.setStatusUser('edit')
+    },
+    deleteUser(user) {
+      this.caseOfUsersInService.deleteUserFromService(user.id)
+      if (this.selectedUser?.id === user.id) {
+        this.serviceOfUsers.setStatusUser('select')
+      }
+    },
+    getColumns(editUser, deleteUser) {
+      return tableColumns({typeUsers: 'serviceUsers', editUser, deleteUser})
+    }
+  }
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col max-h-[70vh] mb-14"
+  >
+    <div>
+      <VTabulator
+        :dataSource="users"
+        :columns="getColumns(editUser, deleteUser)"
+      />
+    </div>
+  </div>
+</template>

users-manage/src/components/3_organisms/UsersManager/helpers/TableColumns.js

@@ -0,0 +1,100 @@
+const tableColumns = ({typeUsers, addUser, editUser, deleteUser}) => {
+  return [
+    {
+      field: "id",
+      title: "ID",
+      width: 100,
+      sorter: "number",
+    },
+    {
+      field: "firstName",
+      title: "Имя",
+      width: 150,
+      sorter: "string",
+    },
+    {
+      field: "lastName",
+      title: "Фамилия",
+      width: 150,
+      sorter: "string",
+    },
+    // {
+    //   field: "role",
+    //   title: "Роль",
+    //   width: 150,
+    //   sorter: "string",
+    // },
+    // {
+    //   field: "second_name",
+    //   title: "Отчество",
+    //   width: 150,
+    //   sorter: "string",
+    // },
+    // {
+    //   field: "email",
+    //   title: "email",
+    //   width: 150,
+    //   sorter: "string",
+    // },
+    // {
+    //   field: "position",
+    //   title: "Должность",
+    //   width: 150,
+    //   sorter: "string",
+    // },
+    // {
+    //   field: "notes",
+    //   title: "notes",
+    //   width: 150,
+    //   sorter: "string",
+    // },
+    {
+      title: "Actions",
+      width: `${typeUsers === 'serviceUsers' ? '135' : '70'}`,
+      formatter: (cell) => {
+        const record = cell.getRow().getData();
+        const id = record.id;
+        if (typeUsers === 'serviceUsers') {
+          return  `<button action="edit" class="text-white mr-2 text-xs bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900">
+          <i action="edit" class="ri-pencil-line" style="font-size: 16px"> </i>
+        </button>
+        <input action="toggle-remove" type="checkbox" id="remove-option-${id}" value="" class="hidden peer" required="">
+        <label for="remove-option-${id}"  class="peer-checked:hidden cursor-pointer inline-text text-white text-xs bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+        >
+            <i class="ri-user-unfollow-line" style="font-size: 16px"></i>
+        </label>
+        <label action="remove" for="remove-option-${id}" class="hidden cursor-pointer mr-2 peer-checked:flex text-white text-xs bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+          >
+            <i action="remove" class="ri-check-line" style="font-size: 16px"></i>
+        </label>
+        <label action="close-remove" for="remove-option-${id}" class="hidden cursor-pointer peer-checked:flex text-white text-xs bg-gray-700 hover:bg-gray-800 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-900">
+            <i class="ri-close-line" style="font-size: 16px"></i>
+        </label>`
+        }
+        
+        if (typeUsers === 'addUsers') {
+          return `<button action="add" class="text-white mr-2 text-xs bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-3 py-2 text-center mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-900">
+            <i action="add" class="ri-user-add-line" style="font-size: 16px"></i>
+          </button>`
+        }
+      },
+      cellClick: function(e, cell) {
+        const action = e.target.getAttribute('action');
+        switch (action) {
+        case 'add':
+          addUser(cell.getRow().getData());
+          break;
+        case 'edit':
+          editUser(cell.getRow().getData());
+          break;
+        case'remove':
+          deleteUser(cell.getRow().getData());
+          break;
+        }
+      },
+    }]
+}
+
+export { tableColumns }
+
+        

users-manage/src/components/3_organisms/UsersManager/helpers/validation.js

@@ -0,0 +1,23 @@
+const generatePassword = () => {
+  const chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+  const passLength = 8
+  let pass = ''
+  for (let i = 0; i <= passLength; i++) {
+    const randomNumber = Math.floor(Math.random() * chars.length)
+    pass += chars.substring(randomNumber, randomNumber + 1)
+  }
+  return pass
+}
+
+const equalPasswords = (password, repeatPassword) => {
+  return password !== repeatPassword ? 'Пароли не совпадают' : null
+}
+
+const isFullLengthPassword = (password) => {
+  return password.length < 8 ? 'Пароль должен быть не менее 8 символов' : null
+}
+
+const isRepeatPasswordEmpty = (password, repeatPassword) => {
+  return password && !repeatPassword ? 'Поле не может быть пустым' : null
+}
+export {generatePassword, isFullLengthPassword, equalPasswords, isRepeatPasswordEmpty}

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

@@ -1,6 +1,5 @@
 <script>
-import {computed} from 'vue'
+import {mapGetters} from 'vuex'
-import {mapActions, mapGetters} from 'vuex'
 import {useStore}               from '@store/index.js'
 
 import AdapterOfServices    from '@adapters/adapterOfServices/Services'
@@ -10,17 +9,12 @@ import ServiceOfServices    from '@services/serviceOfServices/Services.js'
 import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
 
 import PageHeader               from "@atoms/AppPageHeader.vue"
-import SiteList                 from "@organisms/ServicesList/ServicesList.vue"
+import ServicesList                 from "@organisms/ServicesList/ServicesList.vue"
-import SiteManager              from "@organisms/UsersManager/UsersManager.vue"
+import UsersManager              from "@organisms/UsersManager/UsersManager.vue"
 
 export default {
-  name: 'SitesManagerPage',
+  name: 'ServicesManagerPage',
-  components: {SiteManager, SiteList, PageHeader},
+  components: {UsersManager, ServicesList, PageHeader},
-  provide() {
-    return {
-      serviceOfServices: computed(() => this.serviceOfServices),
-    }
-  },
   setup() {
     const url = import.meta.env.VITE_API_ADDR
 
@@ -31,7 +25,6 @@ export default {
 
     const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
     const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
-    // serviceOfServices.fetchServicesList()
 
     const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
 
@@ -42,35 +35,30 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('services', ["sites", "routes", "newRoute", "selectedServiceState"]),
+    ...mapGetters('services', ["services", "routes", "newRoute", "selectedService"]),
   },
   mounted () {
-    // this.uploadServices()
   },
   methods: {
-    ...mapActions('services', ["uploadServices", "uploadAndSelectService"]),
-    ...mapActions('users', ["fetchUsersList"]),
-    async selectSite(siteId, mode = 'prod') {
-      await this.fetchUsersList({siteId, mode})
-      this.uploadAndSelectService(siteId)
-      return "ok"
-    }
   }
 }
 </script>
 
 <template>
   <div class="p-6">
-    <PageHeader class="me-2 mb-6" />
+    <PageHeader
-    <SiteList
+      :serviceOfServices="serviceOfServices"
+      class="me-2 mb-6"
+    />
+    <ServicesList
       :serviceOfServices="serviceOfServices"
       :caseOfUsersInService="caseOfUsersInService"
-      :selectSite="selectSite"
     />
-    <SiteManager
+    <UsersManager
-      v-if="selectedServiceState === 'active'"
+      v-if="selectedService"
       :serviceOfUsers="serviceOfUsers"
       :caseOfUsersInService="caseOfUsersInService"
+      :selectedService="selectedService"
     />
   </div>
 </template>

users-manage/src/router/index.js

@@ -1,16 +1,16 @@
 import {createRouter, createWebHistory} from "vue-router";
-import SitesManagerPage from "@pages/SitesManagerPage/SitesManagerPage.vue"
+import ServicesManagerPage from "@pages/ServicesManagerPage/ServicesManagerPage.vue"
 
 const routes = [
   {
     path: "/",
     name: "sites",
-    component: SitesManagerPage
+    component: ServicesManagerPage
   },
   {
     path: "/users/:mod",
     name: "users",
-    component: import("@pages/UserManage/ButtonModal.vue")
+    component: import("@pages/UserManage/index.vue")
   },
 ];
 

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

@@ -16,6 +16,7 @@ class ServiceOfServices {
   async addNewServiceLayout() {
     const newService = {"port": "", "name": "", id: -1}
     this.store.dispatch('services/addedNewServiceLayout', newService)
+    return newService
   }
 
   async createNewService(newService) {
@@ -28,6 +29,11 @@ class ServiceOfServices {
   }
 
   async selectService(service) {
+    const services = this.store.getters['services/services']
+    if (services[0]?.id === -1) {
+      const updatedServices = removedNewService(services)
+      this.store.dispatch('services/saveServices', updatedServices)
+    }
     this.store.dispatch('services/changeSelectedService', service)
   }
 
@@ -43,33 +49,36 @@ class ServiceOfServices {
 
   async editSelectedService(params) {
     const selectedService = this.store.getters['services/selectedService']
-    // console.log('selectedService', selectedService)
     selectedService[params.key] = params.value
     this.store.dispatch('services/editSelectedService', selectedService)
   }
 
-  async isSaveServices(event) {
+  async setIsSaveServices(event) {
     this.store.dispatch('services/changeIsSaveData', event)
+    return event
   }
 
-  async saveService(editService) {
+  async saveService(updateService) {
     this.store.commit('services/setIsSaveData', false)
     this.store.commit('services/setSelectedService', null)
-    const editedService = await this.adapterOfServices.updateService(editService)
+    const editedService = await this.adapterOfServices.updateService(updateService)
     const services = this.store.getters['services/services']
     const updatedServices = !isEmpty(editedService) ? updatedService(editedService, services) : services
-    // console.log('updatedServices', updatedServices)
     this.store.dispatch('services/saveService', updatedServices)
     return editedService
   }
 
   async removeService(id) {
-    const deletedSiteId = await this.adapterOfServices.deleteService(id)
+    const deletedServiceId = await this.adapterOfServices.deleteService(id)
     const services = this.store.getters['services/services']
-    const updatedServices = deletedSiteId ? deletedService(deletedSiteId, services) : null
+    const updatedServices = deletedServiceId ? deletedService(deletedServiceId, services) : null
     this.store.dispatch('services/saveService', updatedServices)
   }
 
+  async resetStore() {
+    this.store.dispatch('services/resetStore')
+  }
+
 }
 
 export default ServiceOfServices

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

@@ -1,31 +1,31 @@
-const addedService = (addedSite, sites) => {
+const addedService = (addedService, services) => {
-  const sitesWithoutNewSite = removedNewService(sites)
+  const servicesWithoutNewSite = removedNewService(services)
-  return [addedSite,...sitesWithoutNewSite]
+  return [addedService,...servicesWithoutNewSite]
 }
 
-const updatedService = (updatedSite, sites) => {
+const updatedService = (updatedService, services) => {
-  if (updatedSite.id) {
+  if (updatedService.id) {
-    const editIdx = sites.findIndex(service => service.id === updatedSite.id)
+    const editIdx = services.findIndex(service => service.id === updatedService.id)
-    const beforeEdit = sites.slice(0, editIdx)
+    const beforeEdit = services.slice(0, editIdx)
-    const afterEdit = sites.slice(editIdx + 1)
+    const afterEdit = services.slice(editIdx + 1)
-    const withEdit = [...beforeEdit, updatedSite]
+    const withEdit = [...beforeEdit, updatedService]
     return [...withEdit, ...afterEdit]
   }
 }
 
-const removedNewService = (sites) => {
+const removedNewService = (services) => {
-  if (sites.length > 0) {
+  if (services.length > 0) {
-    const firstSite = sites[0]
+    const firstSite = services[0]
     const isNewSite = firstSite.id === -1
-    sites = isNewSite ? sites.slice(1) : sites
+    services = isNewSite ? services.slice(1) : services
-    return sites
+    return services
   }
 }
 
-const deletedService = (deletedSiteId, sites) => {
+const deletedService = (deletedSiteId, services) => {
   if (deletedSiteId) {
-    const deleteIdx = sites.findIndex(service => service.id === deletedSiteId)
+    const deleteIdx = services.findIndex(service => service.id === deletedSiteId)
-    return sites.slice(0, deleteIdx).concat(sites.slice(deleteIdx + 1))
+    return services.slice(0, deleteIdx).concat(services.slice(deleteIdx + 1))
   }
 }
 

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

@@ -1,3 +1,5 @@
+import { addedUser, getUserById, updatedUser, usersWithThisService, usersWithoutThisService, addServiceIdToUser, deleteServiceIdFromUser } from "./helpers"
+
 class UsersOfServices {
   constructor(adapter, store) {
     this.adapter = adapter
@@ -6,34 +8,175 @@ class UsersOfServices {
 
   /**
    *
-   * @param {Array} users
+   * @param {String} mode
-   * @returns {Promise<Array>}
-   */
-  async saveSiteUsers(users) {
-    await this.store.dispatch('users/saveSiteUsers', users)
-    return users
-  }
-
-  /**
-   *
-   * @param {Array} users
-   * @returns {Promise<Array>}
-   */
-  async saveUsersWithoutSite(users) {
-    await this.store.dispatch('users/saveUsersWithoutSite', users)
-    return users
-  }
-
-  /**
-   *
-   * @param serviceId
    * @returns {Promise<void>}
    */
-  async fetchUsersByService(serviceId) {
+  async getUsers(mode) {
-    const users = await this.adapter.getUsersByServiceId(serviceId)
+    const users = await this.adapter.getUsers({mode})
-    await this.saveSiteUsers(users)
+    this.store.dispatch('users/updateUsers', users)
     return users
   }
+
+  /**
+   *
+   * @param {Number} serviceId
+   * @param {String} mode
+   * @returns {Promise<void>}
+   */
+  async getUsersByService(serviceId, mode) {
+    const users = await this.adapter.getUsers({mode})
+    const usersWithService = await this.adapter.getUsersByServiceId(serviceId, mode)
+    const usersWithoutService = usersWithoutThisService(serviceId, users)
+    this.store.dispatch('users/updateUsers', users)
+    this.store.dispatch('users/updateUsersWithService', usersWithService)
+    this.store.dispatch('users/updateUsersWithoutService', usersWithoutService)
+    return usersWithService
+  }
+
+  /**
+   *
+   * @param {Number} serviceId
+   * @returns {Promise<void>}
+   */
+  async getUsersWithoutService(serviceId) {
+    const users = this.store.getters['users/users']
+    const filteredUsers = usersWithoutThisService(serviceId, users)
+    this.store.dispatch('users/updateUsersWithoutService', filteredUsers)
+    return filteredUsers
+  }
+  
+
+  /**
+   *
+   * @returns {Promise<Object>}
+   */
+  async addNewUser() {
+    const newUser = {id: -1, firstName: '',lastName: '', role: '', email: '', password: '', serviceId: []}
+    this.store.dispatch('users/updateSelectedUser', newUser)
+    return newUser
+  }
+  
+  /**
+   *
+   * @returns {Promise<Object>}
+   */
+  async getSelectedUser() {
+    const selectedUser = this.store.getters['users/selectedUser']
+    return selectedUser
+  }
+
+  /**
+   *
+   * @param {Number} selectedUserId
+   * @returns {Promise<Object>}
+   */
+  async setSelectedUser(selectedUserId) {
+    const selectedUser = getUserById(selectedUserId, this.store.getters['users/users'])
+    this.store.dispatch('users/updateSelectedUser', selectedUser)
+    return selectedUser
+  }
+
+  /**
+   *
+   * @param {String} status
+   * @returns {Promise<String>}
+   */
+  async setStatusUser(status) {
+    this.store.dispatch('users/updateUserStatus', status)
+    return status
+  }
+
+  /**
+   *
+   * @param {Number} selectedUserId
+   * @param {Number} serviceId
+   * @returns {Promise<Object>}
+   */
+  async addUserToService(selectedUserId, serviceId) {
+    // const addedUser = await this.adapter.addUser(selectedUserId, serviceId) // Запрос на обновление пользователя с новым service_id
+    const users = this.store.getters['users/users']
+    const updatedUsers = addServiceIdToUser(selectedUserId, serviceId, users)
+    const usersWithService = usersWithThisService(serviceId, updatedUsers)
+    const usersWithoutService = usersWithoutThisService(serviceId, updatedUsers)
+    this.store.dispatch('users/updateUsers', updatedUsers)
+    this.store.dispatch('users/updateUsersWithService', usersWithService)
+    this.store.dispatch('users/updateUsersWithoutService', usersWithoutService)
+  }
+
+  /**
+   *
+   * @param {String} key - field name
+   * @param {Any} value - updated data for selected user, send to server
+   * @returns {Promise<Object>}
+   */
+  async setUserFields(key, value) {
+    const selectedUser = this.store.getters['users/selectedUser']
+    if (selectedUser) {
+      selectedUser[key] = value
+      this.store.dispatch('users/updateSelectedUser', selectedUser)
+      return selectedUser
+    }
+  }
+
+  /**
+   *
+   * @param {Number} serviceId - updated data for selected user, send to server
+   * @returns {Promise<Object>}
+   */
+  async createUser(serviceId) {
+    const selectedUser = this.store.getters['users/selectedUser']
+    if (selectedUser && selectedUser.id && selectedUser.id === -1) {
+      const users = this.store.getters['users/users']
+      const userData = {...selectedUser,
+        id: users.length + 1, // временно пока нет данных с сервера
+        serviceId: [serviceId],
+      }
+      // const createdUser = await this.adapter.createUser(userData) // Запрос на создание нового пользователя
+      // const updatedUsers = addedUser(createdUser, users)
+      const updatedUsers = addedUser(userData, users)
+      const usersWithService = usersWithThisService(serviceId, updatedUsers)
+      const usersWithoutService = usersWithoutThisService(serviceId, updatedUsers)
+      this.store.dispatch('users/updateUsers', updatedUsers)
+      this.store.dispatch('users/updateUsersWithService', usersWithService)
+      this.store.dispatch('users/updateUsersWithoutService', usersWithoutService)
+    }
+  }
+
+  /**
+   *
+   * @returns {Promise<Object>}
+   */
+  async updateUser() {
+    const selectedUser = this.store.getters['users/selectedUser']
+    if (selectedUser && selectedUser.id) {
+      // const updatedUser = await this.adapter.updateUser(selectedUser) // Запрос на обновление пользователя с новыми данными
+      const users = this.store.getters['users/usersWithService']
+      const updatedUsers = updatedUser(selectedUser, users)
+      this.store.dispatch('users/updateUsersWithService', updatedUsers)
+    }
+  }
+
+  /**
+   *
+   * @param {Number} selectedUserId
+   * @param {Number} serviceId
+   * @returns {Promise<Object>}
+   */
+  async deleteUserFromService(selectedUserId, serviceId) {
+    // const deletedUser = await this.adapter.addUser(selectedUserId, serviceId) // Запрос на обновление пользователя с новым service_id???
+    const users = this.store.getters['users/users']
+    const updatedUsers = deleteServiceIdFromUser(selectedUserId, serviceId, users)
+    const usersWithService = usersWithThisService(serviceId, updatedUsers)
+    const usersWithoutService = usersWithoutThisService(serviceId, updatedUsers)
+    this.store.dispatch('users/updateUsers', updatedUsers)
+    this.store.dispatch('users/updateUsersWithService', usersWithService)
+    this.store.dispatch('users/updateUsersWithoutService', usersWithoutService)
+  }
+
+  async resetStore() {
+    this.store.dispatch('users/resetStore')
+  }
+
 }
 
 export default UsersOfServices

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

@@ -0,0 +1,66 @@
+const addedUser = (newUser, users) => {
+  const usersWithoutNewSite = removedNewUser(users)
+  return [newUser,...usersWithoutNewSite]
+}
+
+const getUserById = (id, users) => {
+  return users.find(user => user.id === id)
+}
+
+const usersWithThisService = (serviceId, users) => {
+  return users.filter((user) => user.serviceId.includes(serviceId))
+}
+
+const usersWithoutThisService = (serviceId, users) => {
+  return users.filter((user) => {
+    return !user.serviceId.includes((serviceId))
+  })
+}
+
+const addServiceIdToUser = (selectedUserId, serviceId, users) => {
+  if (selectedUserId && serviceId) {
+    const editIdx = users.findIndex(user => user.id === selectedUserId)
+    const beforeEdit = users.slice(0, editIdx)
+    const afterEdit = users.slice(editIdx + 1)
+    const withEdit = [...beforeEdit, {...users[editIdx], serviceId: [...users[editIdx].serviceId, serviceId]}]
+    return [...withEdit, ...afterEdit]
+  }
+}
+
+const deleteServiceIdFromUser = (selectedUserId, serviceId, users) => {
+  if (selectedUserId && serviceId) {
+    const editIdx = users.findIndex(user => user.id === selectedUserId)
+    const beforeEdit = users.slice(0, editIdx)
+    const afterEdit = users.slice(editIdx + 1)
+    const withEdit = [...beforeEdit, {...users[editIdx], serviceId: users[editIdx].serviceId.filter((id) => id !== serviceId)}]
+    return [...withEdit, ...afterEdit]
+  }
+}
+
+const updatedUser = (updatedUser, users) => {
+  if (updatedUser.id) {
+    const editIdx = users.findIndex(user => user.id === updatedUser.id)
+    const beforeEdit = users.slice(0, editIdx)
+    const afterEdit = users.slice(editIdx + 1)
+    const withEdit = [...beforeEdit, updatedUser]
+    return [...withEdit, ...afterEdit]
+  }
+}
+
+const removedNewUser = (users) => {
+  if (users.length > 0) {
+    const firstUser = users[0]
+    const isNewUser = firstUser.id === -1
+    users = isNewUser ? users.slice(1) : users
+    return users
+  }
+}
+
+const deletedUser = (deletedUserId, users) => {
+  if (deletedUserId) {
+    const deleteIdx = users.findIndex(user => user.id === deletedUserId)
+    return users.slice(0, deleteIdx).concat(users.slice(deleteIdx + 1))
+  }
+}
+
+export { addedUser, getUserById, usersWithThisService, usersWithoutThisService, addServiceIdToUser, deleteServiceIdFromUser, updatedUser, removedNewUser, deletedUser }

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

@@ -1,6 +1,4 @@
 import routeOptions from './routeOptions.json'
-// import Services from '@helpers/Services/Services.js';
-// import {config} from './StaticData.js'
 import {isEmpty} from "ramda";
 
 const initState = {
@@ -20,7 +18,7 @@ const state = {
 
 const getters = {
   isSaveData:         (state) => state.isSaveData,
-  services:              (state) => state.newService ? [state.newService, ...state.services] : state.services,
+  services:              (state) => state.services,
   routes:             (state) => state.routes,
   routesLib:          (state) => state.routesLib,
   selectedServiceState:  (state) => state.selectedServiceState,
@@ -36,50 +34,37 @@ const mutations = {
   setServicesState: (state, payload) => state.servicesState = payload,
   setSelectedService: (state, payload) => state.selectedService = payload,
   setNewService: (state, payload) => state.newService = payload,
+  resetStore: (state) => {
+    for (let key in initState) {
+      state[key] = initState[key]
+    }
+  }
 };
 
-
 const actions = {
   addedNewServiceLayout: ({commit, getters}, newService) => {
-    console.log('newSevice', newService)
     commit('setServices', [newService,...getters.services])
     commit('setSelectedService', newService)
-    // commit('setRoutes', [])
-    // commit('setRoutesState', "active")
   },
   createNewService: async ({commit}, updatedServices) => {
     if (!isEmpty(updatedServices)) {
-      // const newService = updatedSites[0]
-      // const updatedRoutes = addedNewRoute(newService, state.routes)
-      // commit('setRoutes', updatedRoutes)
-      // dispatch('updateRoutesWithApi', newService)
       return commit('setServices', updatedServices)
     }
   },
-  breakeAddingSite: ({commit}) => {
-    commit('setSelectedService', null)
-  },
   changeSelectedService: async ({commit}, siteProps) => {
     commit('setSelectedService', siteProps)
   },
   editSelectedService: async ({commit}, selectedService) => {
-    // const selectedSite = getters.selectedSite
-    // selectedSite[payload.key] = payload.value
-    console.log('selectedService', selectedService)
     commit('setSelectedService', selectedService)
   },
   changeIsSaveData: ({commit}, payload) => {
     commit('setIsSaveData', payload)
   },
   saveServices: async ({commit}, services) => {
-    // const sites = await services.getServices()
     commit('setServices', services)
     commit('setServicesState', 'active')
-    console.log('services', services)
   },
   saveService: async ({commit}, updatedServices) => {
-    // commit('setIsSaveData', false)
-    // commit('setSelectedService', null)
     
     commit('setServices', updatedServices)
   },
@@ -89,22 +74,12 @@ const actions = {
       commit('setServices', updatedServices)
       commit('setNewService', null)
     } 
-    // commit('setRoutesState', "await")
   },
   removeService: async ({commit}, updatedSites) => {
-    // const deletedSiteId = await services.deleteService(id)
-    // const updatedSites = deletedSite(deletedSiteId, getters.sites)
     if (!isEmpty(updatedSites)) return commit('setServices', updatedSites)
   },
-
+  resetStore: ({commit}) => {
-  uploadAndSelectService: ({state}, id) => {
+    commit('resetStore')
-    state.selectedSite = state.services.find(site => site.id === id)
-    state.selectedSiteState = 'active'
-  },
-  resetStore: ({state}) => {
-    Object.entries(initState).forEach(([k,v]) => {
-      state[k] = v
-    })
   },
 };
 

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

@@ -1,11 +1,11 @@
-import Users from '@helpers/Users/Users.js';
-
-const path = import.meta.env.VITE_API_ADDR
-const UsersService = new Users(path)
-
 const initState = {
-  usersList: [],
+  userStatus: 'inactive',
-  componentState: 'disabled',
+
+  selectedUser: null,
+
+  users: [],
+  usersWithService: [],
+  usersWithoutService: [],
 };
 
 const state = {
@@ -13,20 +13,38 @@ const state = {
 };
 
 const getters = {
-  usersList:      (state) => state.usersList,
+  userStatus:  (state) => state.userStatus,
-  componentState: (state) => state.componentState
+  selectedUser: (state) => state.selectedUser,
+  users:      (state) => state.users,
+  usersWithService:      (state) => state.usersWithService,
+  usersWithoutService: (state) => state.usersWithoutService,
+  
 };
 
 const mutations = {
-  setUsersList:      (state, payload) => state.usersList = payload,
+  setUserStatus:  (state, payload) => state.userStatus = payload,
-  setComponentState: (state, payload) => state.componentState = payload
+  setSelectedUser: (state, payload) => state.selectedUser = payload,
+  setUsers:      (state, payload) => state.users = payload,
+  setUsersWithService: (state, payload) => state.usersWithService = payload,
+  setUsersWithoutService: (state, payload) => state.usersWithoutService = payload,
+  
 };
 
 const actions = {
-  fetchUsersList: async ({commit}, {siteId, mode}) => {
+  updateUsers: async ({commit}, users) => {
-    const usersList = await UsersService.getUsersBySiteId(siteId, mode)
+    commit('setUsers', users)
-    commit('setUsersList', usersList)
+  },
-    commit('setComponentState', 'active')
+  updateUserStatus: async ({commit}, userStatus) => {
+    commit('setUserStatus', userStatus)
+  },
+  updateSelectedUser: async ({commit}, selectedUser) => {
+    commit('setSelectedUser', selectedUser)
+  },
+  updateUsersWithService: async ({commit}, users) => {
+    commit('setUsersWithService', users)
+  },
+  updateUsersWithoutService: async ({commit}, users) => {
+    commit('setUsersWithoutService', users)
   },
   resetStore: ({state}) => {
     Object.entries(initState).forEach(([k, v]) => {

users-manage/src/useCases/CaseOfUsersInService.js

@@ -1,22 +1,56 @@
+import {Logger} from '3-class-complex-assistants'
+import moment from 'moment/moment.js'
+
+const loggerInfo = {
+  "loggerLevel": 1,
+  "serviceName": "users-manage",
+  "port":         5173,
+  "datetime":     moment().format("YYYY-MM-DDTHH:mm:ss"),
+}
+
+const callbackError = (error) => {
+  return console.err(error)
+}
+
 class UsersInService {
   constructor(serviceOfUsers, serviceOfServices) {
     this.serviceOfUsers = serviceOfUsers
     this.serviceOfServices = serviceOfServices
+    this.loggerConfig = {...loggerInfo, callFunc: callbackError, isPushToServer: true}
   }
 
-  async fetchUsersByService() {
+  async getUsersWithSelectService(selectedService, mode) {
-    const selectedService = this.serviceOfServices.getSelectedService()
+    await this.serviceOfServices.selectService(selectedService)
+    await this.serviceOfUsers.getUsersByService(selectedService.id, mode)
+  }
+
+  async addUserToService(userId) {
+    const logger = new Logger(this.loggerConfig)
+    const selectedService = await this.serviceOfServices.getSelectedService()
     if (!selectedService) {
-      console.error('fetchUsersByService: Service not found')
+      logger.error('addUserToService: Service not found')
-      return []
+      return {}
     }
-    this.serviceOfUsers.fetchUsersByService(selectedService.id)
+    if (!userId) {
+      logger.error('addUserToService: User not selected')
+      return {}
+    }
+    this.serviceOfUsers.addUserToService(userId, selectedService.id)
   }
   
-  async fetchUsersWithoutService() {
+  async deleteUserFromService(userId) {
-
+    const logger = new Logger(this.loggerConfig)
+    const selectedService = await this.serviceOfServices.getSelectedService()
+    if (!selectedService) {
+      logger.error('removeUserFromService: Service not found')
+      return {}
+    }
+    if (!userId) {
+      logger.error('removeUserFromService: User not selected')
+      return {}
+    }
+    this.serviceOfUsers.deleteUserFromService(userId, selectedService.id)
   }
-
 }
 
 export default UsersInService

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

@@ -44,7 +44,7 @@ describe('test for AdapterOfUsers', () => {
       data: apiUser,
     })
     
-    const user = await adapterOfUsers.createUser()
+    const user = await adapterOfUsers.createUser(appUser)
     expect(user).toEqual(appUser)
   })
 

users-manage/tests/mocks/services.js

@@ -0,0 +1,85 @@
+const defaultServices = [
+  {
+    "id": 1,
+    "created_at": "2024-03-06T17:31:31.948355541+03:00",
+    "updated_at": "2024-03-06T17:31:31.948355541+03:00",
+    "deleted_at": null,
+    "name": "jsonplaceholder.typicode.com",
+    "port": 9965,
+    "proxy_ip": "172.25.78.153",
+    "site_ip": "https://jsonplaceholder.typicode.com/",
+    "internet_uri": "localhost",
+    "description": "localhost",
+    "is_online": true
+  },
+  {
+    "id": 2,
+    "created_at": "2024-03-07T11:43:51.026265459+03:00",
+    "updated_at": "2024-03-07T13:35:12.506368972+03:00",
+    "deleted_at": null,
+    "name": "new 2",
+    "port": 4548,
+    "proxy_ip": "172.25.78.151",
+    "site_ip": "172.25.78.151",
+    "internet_uri": "",
+    "description": "new site 2",
+    "is_online": true
+  },
+  {
+    "id": 3,
+    "created_at": "2024-03-07T11:43:51.027148541+03:00",
+    "updated_at": "2024-03-07T13:35:24.919273428+03:00",
+    "deleted_at": null,
+    "name": "new 3",
+    "port": 2527,
+    "proxy_ip": "172.25.78.151",
+    "site_ip": "172.25.78.151",
+    "internet_uri": "",
+    "description": "new site 3...",
+    "is_online": true
+  }
+]
+
+const resServices = [
+  {
+    "id": 1,
+    "createdAt": "2024-03-06T17:31:31.948355541+03:00",
+    "updatedAt": "2024-03-06T17:31:31.948355541+03:00",
+    "deletedAt": null,
+    "name": "jsonplaceholder.typicode.com",
+    "port": 9965,
+    "proxyIp": "172.25.78.153",
+    "deviceIp": "https://jsonplaceholder.typicode.com/",
+    "internetUri": "localhost",
+    "description": "localhost",
+    "isOnline": true
+  },
+  {
+    "id": 2,
+    "createdAt": "2024-03-07T11:43:51.026265459+03:00",
+    "updatedAt": "2024-03-07T13:35:12.506368972+03:00",
+    "deletedAt": null,
+    "name": "new 2",
+    "port": 4548,
+    "proxyIp": "172.25.78.151",
+    "deviceIp": "172.25.78.151",
+    "internetUri": "",
+    "description": "new site 2",
+    "isOnline": true
+  },
+  {
+    "id": 3,
+    "createdAt": "2024-03-07T11:43:51.027148541+03:00",
+    "updatedAt": "2024-03-07T13:35:24.919273428+03:00",
+    "deletedAt": null,
+    "name": "new 3",
+    "port": 2527,
+    "proxyIp": "172.25.78.151",
+    "deviceIp": "172.25.78.151",
+    "internetUri": "",
+    "description": "new site 3...",
+    "isOnline": true
+  }
+]
+
+export { defaultServices, resServices }

users-manage/tests/mocks/users.js

@@ -14,4 +14,47 @@ const appUser = {
   role: 'user',
 }
 
-export {apiUser, appUser}
+const defaultUsers = [
+  {
+    "id": 1,
+    "serviceId": [1, 3],
+    "firstName": "Leanne 1",
+    "lastName": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+  },
+  {
+    "id": 2,
+    "serviceId": [1],
+    "firstName": "Leanne 2",
+    "lastName": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+  },
+  {
+    "id": 3,
+    "serviceId": [2, 3],
+    "firstName": "Leanne 3",
+    "lastName": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+  },
+  {
+    "id": 4,
+    "serviceId": [3],
+    "firstName": "Leanne 4",
+    "lastName": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+  },
+  {
+    "id": 5,
+    "serviceId": [4, 5],
+    "firstName": "Leanne 5",
+    "lastName": "Graham",
+    "email": "test@mail.ru",
+    "role": "admin",
+  },
+]
+
+export {apiUser, appUser, defaultUsers}

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

@@ -1,67 +1,232 @@
-import {describe, expect, test, beforeEach} from "vitest";
+import { expect, test, describe, vi, beforeEach} from "vitest"
+import AdapterOfServices from '@adapters/adapterOfServices/Services'
 import ServiceOfServices from '@services/serviceOfServices/Services.js'
+import {addedService, updatedService, removedNewService, deletedService} from '@services/serviceOfServices/helpers.js'
 import { createStore } from 'vuex'
+import {store as services} from "@/store/modules/services"
+import axios from "axios";
 
-class AdapterOfServices {
+vi.mock('axios')
-  constructor() {
-  }
 
-  async getServices() {
+const defaultServices = [
-    return [{id: 1, name: 'service1'}, {id: 2, name: 'service2'}]
+  {
-  }
+    "id": 1,
+    "created_at": "2024-03-06T17:31:31.948355541+03:00",
+    "updated_at": "2024-03-06T17:31:31.948355541+03:00",
+    "deleted_at": null,
+    "name": "jsonplaceholder.typicode.com",
+    "port": 9965,
+    "proxy_ip": "172.25.78.153",
+    "site_ip": "https://jsonplaceholder.typicode.com/",
+    "internet_uri": "localhost",
+    "description": "localhost",
+    "is_online": true
+  },
+  {
+    "id": 2,
+    "created_at": "2024-03-07T11:43:51.026265459+03:00",
+    "updated_at": "2024-03-07T13:35:12.506368972+03:00",
+    "deleted_at": null,
+    "name": "new 2",
+    "port": 4548,
+    "proxy_ip": "172.25.78.151",
+    "site_ip": "172.25.78.151",
+    "internet_uri": "",
+    "description": "new site 2",
+    "is_online": true
+  },
+  {
+    "id": 3,
+    "created_at": "2024-03-07T11:43:51.027148541+03:00",
+    "updated_at": "2024-03-07T13:35:24.919273428+03:00",
+    "deleted_at": null,
+    "name": "new 3",
+    "port": 2527,
+    "proxy_ip": "172.25.78.151",
+    "site_ip": "172.25.78.151",
+    "internet_uri": "",
+    "description": "new site 3...",
+    "is_online": true
   }
+]
 
-const services = {
+const resServices = [
-  namespaced: true,
+  {
-  state: {
+    "id": 1,
-    servicesList: [],
+    "createdAt": "2024-03-06T17:31:31.948355541+03:00",
+    "updatedAt": "2024-03-06T17:31:31.948355541+03:00",
+    "deletedAt": null,
+    "name": "jsonplaceholder.typicode.com",
+    "port": 9965,
+    "proxyIp": "172.25.78.153",
+    "deviceIp": "https://jsonplaceholder.typicode.com/",
+    "internetUri": "localhost",
+    "description": "localhost",
+    "isOnline": true
   },
-  mutations: {
+  {
-    setServicesList(state, services) {
+    "id": 2,
-      state.servicesList = services
+    "createdAt": "2024-03-07T11:43:51.026265459+03:00",
-    },
+    "updatedAt": "2024-03-07T13:35:12.506368972+03:00",
-  },
+    "deletedAt": null,
-  getters: {
+    "name": "new 2",
-    servicesList: state => {
+    "port": 4548,
-      return state.servicesList
+    "proxyIp": "172.25.78.151",
-    }
+    "deviceIp": "172.25.78.151",
-  },
+    "internetUri": "",
-  actions: {
+    "description": "new site 2",
-    resetStore({state}) {
+    "isOnline": true
-      state.servicesList = []
-    },
-    saveServices({commit}, services) {
-      commit('setServicesList', services)
-    }
   },
+  {
+    "id": 3,
+    "createdAt": "2024-03-07T11:43:51.027148541+03:00",
+    "updatedAt": "2024-03-07T13:35:24.919273428+03:00",
+    "deletedAt": null,
+    "name": "new 3",
+    "port": 2527,
+    "proxyIp": "172.25.78.151",
+    "deviceIp": "172.25.78.151",
+    "internetUri": "",
+    "description": "new site 3...",
+    "isOnline": true
   }
+]
 
-describe('tests for ServiceOfServices', () => {
+describe("tests services of services", () => {
-  const adapterOfServices = new AdapterOfServices()
-
   const store = createStore({
+    plugins: [],
     modules: {
-      services,
+      services
     },
   })
 
-  beforeEach( async() => {
+  beforeEach(() => {
-    await store.dispatch('services/resetStore')
+    store.dispatch('services/resetStore')
   })
 
-  test('init', () => {
+  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
   const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
 
-    expect(serviceOfServices).toBeDefined()
+  axios.get.mockResolvedValue({
+    data: defaultServices,
   })
 
-  test('test of fetchServicesList', async () => {
+  test('Upload services', async () => {
-    const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
 
-    await serviceOfServices.fetchServices()
+    const services = store.getters['services/services']
 
-    const usersList = store.getters['services/servicesList']
+    expect(services).toEqual([]) // empty services array of store
+
+    const uploadServices = await serviceOfServices.fetchServices()
+
+    expect(uploadServices).toEqual(resServices) // full services array of store
 
-    expect(usersList).toEqual([{id: 1, name: 'service1'}, {id: 2, name: 'service2'}])
   })
+
+  test('Added new service layout to services', async () => {
+    const expectedserviceData = {"port": "", "name": "", id: -1}
+
+    const newService = await serviceOfServices.addNewServiceLayout()
+
+    expect({newService}).toEqual({newService: expectedserviceData})
   })
+
+  test('Added new service to array services of service with func addedService', async () => {
+    const newService = {
+      id: 4,
+      created_at: "2024-03-07T11:43:51.027148541+03:00",
+      updated_at: "2024-03-07T13:35:24.919273428+03:00",
+      deleted_at: null,
+      name: 'test add new service',
+      port: 2534,
+      device_ip: '172.25.78.151',
+      proxy_ip: '172.25.78.151',
+      internet_uri: '',
+      description: 'test add new service description',
+      is_online: true
+    }
+
+    const updatedServices = addedService(newService, resServices)
+
+    expect(updatedServices[0].name).toEqual('test add new service')
+    expect(updatedServices[0].description).toEqual('test add new service description')
+    expect(updatedServices[0].port).toEqual(2534)
+  })
+
+  test('Set isSaveData - if need save service', async () => {
+
+    const isSaveData = false
+
+    expect(isSaveData).toEqual(false) // default value is false
+
+    const isSaveDataChanged = await serviceOfServices.setIsSaveServices(true)
+
+    expect(isSaveDataChanged).toEqual(true) // if need save service - true
+
+  })
+
+  test('Saving service after editing with func updateService', async () => {
+    
+    const selectedEditedService = 
+    {
+      "id": 3,
+      "created_at": "2024-03-07T11:43:51.027148541+03:00",
+      "updated_at": "2024-03-07T13:35:24.919273428+03:00",
+      "deleted_at": null,
+      "name": "edited test name",
+      "port": 5555,
+      "proxy_ip": "172.25.78.151",
+      "device_ip": "172.25.78.151",
+      "internet_uri": "",
+      "description": "edited description field",
+      "is_online": true
+    }
+
+    const updatedServices = updatedService(selectedEditedService, resServices)
+
+    const editedService = updatedServices.find(service => service.id === 3)
+
+    expect(editedService.name).toEqual('edited test name')
+    expect(editedService.port).toEqual(5555)
+    expect(editedService.description).toEqual('edited description field')
+
+  })
+
+  test('Updated services after deleting new service with only layout with func removedNewService', async () => {
+    
+    store.commit('services/setServices', resServices)
+
+    const newService = await serviceOfServices.addNewServiceLayout()
+
+    const servicesWithNewServiceLayout = addedService(newService, resServices)
+    const forDeleteService = servicesWithNewServiceLayout.find(service => service.id === -1)
+
+    expect(forDeleteService).toBeDefined() // before delete service
+
+    const updatedServices = removedNewService(servicesWithNewServiceLayout)
+
+    const deletedServiceStore = updatedServices.find(service => service.id === -1)
+
+    expect(deletedServiceStore).toBeUndefined() // after delete service
+
+  })
+
+  test('Updated services after deleting selected service with func deletedService', async () => {
+    
+    const deleteServiceId = 3
+    
+    const forDeleteService = resServices.find(service => service.id === 3)
+
+    expect(forDeleteService).toBeDefined() // before delete service
+
+    const updatedServices = deletedService(deleteServiceId, resServices)
+
+    const deletedServiceStore = updatedServices.find(service => service.id === 3)
+
+    expect(deletedServiceStore).toBeUndefined() // after delete service
+
+  })
+
+})
+
+

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

@@ -1,36 +1,203 @@
-import {describe, expect, test, beforeEach} from "vitest";
+import {expect, test, describe, vi, beforeEach} from "vitest"
+import AdapterOfUsers from '@adapters/adapterOfUsers/Users'
 import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
-import {adapterOfUsers, store} from './MockData.js'
+import {
-import {appUser} from '@mocks/users.js'
+  addedUser, 
+  getUserById,
+  usersWithThisService,
+  usersWithoutThisService,
+  addServiceIdToUser, 
+  deleteServiceIdFromUser, 
+  updatedUser, 
+  removedNewUser, 
+  deletedUser
+} from '@services/serviceOfUsers/helpers.js'
+import { createStore } from 'vuex'
+import {store as users} from "@/store/modules/users"
+import axios from "axios"
+import {defaultUsers} from "@mocks/users"
 
-describe('test for ServiceOfUsers', () => {
+vi.mock('axios')
+
+describe("tests services of users", () => {
+  const store = createStore({
+    plugins: [],
+    modules: {
+      users
+    },
+  })
+
+  beforeEach(() => {
+    store.dispatch('users/resetStore')
+  })
+
+  const adapterOfUsers = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
   const serviceOfUsers = new ServiceOfUsers(adapterOfUsers, store)
 
-  beforeEach( async() => {
+  axios.get.mockResolvedValue({
-    await store.dispatch('users/resetStore')
+    data: defaultUsers,
   })
 
-  test('init', () => {
+  test('Upload users by selected service', async () => {
-    expect(serviceOfUsers).toBeDefined()
+
+    const uploadUsers = await serviceOfUsers.getUsersByService(1, 'dev')
+
+    const expectedUsers = defaultUsers.filter(user => user.serviceId.includes(1))
+
+    expect(expectedUsers).toEqual(uploadUsers) // users array selected service
+
   })
 
-  test('saveSiteUsers', async () => {
+  test('Upload users without selected service', async () => {
-    await serviceOfUsers.saveSiteUsers([appUser])
+
-    const storeUsers = store.getters['users/siteUsers']
+    const uploadUsers = usersWithoutThisService(1, defaultUsers)
-    expect(storeUsers).toEqual([appUser])
+
+    const expectedUsers = defaultUsers.filter(user => !user.serviceId.includes(1))
+
+    expect(expectedUsers).toEqual(uploadUsers) // users array without selected service
+
   })
 
-  test('saveUsersWithoutSite', async () => {
+  test('Added new user layout to user editor', async () => {
-    await serviceOfUsers.saveUsersWithoutSite([appUser])
+    const newUser = {id: -1, firstName: '',lastName: '', role: '', email: '', password: '', serviceId: []}
-    const storeUsers = store.getters['users/usersWithoutSite']
+
-    expect(storeUsers).toEqual([appUser])
+    const expectUser = await serviceOfUsers.addNewUser()
+
+    expect({newUser: expectUser}).toEqual({newUser})
   })
 
-  test('fetchUsersByService', async () => {
+  test('Added user to array users of selected service', async () => {
-    const serviceId = 1
+
-    await serviceOfUsers.fetchUsersByService(serviceId)
+    const newUser = {
-    const storeUsers = store.getters['users/siteUsers']
+      "id": 6,
-    expect(storeUsers).toEqual([appUser])
+      "serviceId": [4, 5],
+      "first_name": "Leanne 5",
+      "last_name": "Graham",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    const updatedUsers = addedUser(newUser, defaultUsers)
+
+    const addedNewUser = updatedUsers.find(user => user.id === 6)
+
+    expect(addedNewUser).toEqual(newUser)
+  })
+  
+  test('Get user by id from array users', async () => {
+
+    const selectedIdUser = 3
+
+    const selectedUser = getUserById(selectedIdUser, defaultUsers)
+
+    expect(selectedUser.id).toEqual(selectedIdUser)
+  })
+
+  test('Filtered users of selected service', async () => {
+
+    const selectedIdService = 3
+
+    const usersWithSelectedService = usersWithThisService(selectedIdService, defaultUsers)
+
+    expect(usersWithSelectedService).toHaveLength(3)
+
+    usersWithSelectedService.map((user) => {
+      return expect(user.serviceId.includes(selectedIdService)).toBe(true)
     })
   })
 
+  test('Filtered users of not selected service', async () => {
+
+    const selectedIdService = 3
+
+    const usersWithSelectedService = usersWithoutThisService(selectedIdService, defaultUsers)
+
+    expect(usersWithSelectedService).toHaveLength(2)
+
+    usersWithSelectedService.map((user) => {
+      return expect(!user.serviceId.includes(selectedIdService)).toBe(true)
+    })
+  })
+
+  test('Added selected service to user with func addServiceIdToUser', async () => {
+
+    const updatedUsers = addServiceIdToUser(4, 2, defaultUsers)
+
+    const selectedUserWithoutService = defaultUsers.find(user => user.id === 4).serviceId.includes(2)
+    const selectedUserWithService = updatedUsers.find(user => user.id === 4).serviceId.includes(2)
+
+    expect(selectedUserWithoutService).toBe(false)
+    expect(selectedUserWithService).toBe(true)
+  })
+
+  test('Deleted user from array users of selected service with func deleteServiceIdFromUser', async () => {
+
+    const updatedUsers = deleteServiceIdFromUser(3, 2, defaultUsers)
+
+    const selectedUserWithoutService = defaultUsers.find(user => user.id === 3).serviceId.includes(2)
+    const selectedUserWithService = updatedUsers.find(user => user.id === 3).serviceId.includes(2)
+
+    expect(selectedUserWithoutService).toBe(true)
+    expect(selectedUserWithService).toBe(false)
+
+  })
+
+  test('Edited user updated in array users', async () => {
+    
+    const editerUser = 
+    {
+      "id": 3,
+      "serviceId": [2, 3],
+      "first_name": "Leanne 3 updated", // edited field
+      "last_name": "Graham updated", // edited field
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    const beforeEditUser = defaultUsers.find(user => user.id === 3)
+
+    expect(beforeEditUser.first_name).not.toEqual('Leanne 3 updated') // check that user was not edited
+    expect(beforeEditUser.last_name).not.toEqual('Graham updated') // check that user was not edited
+
+    const updatedUsers = updatedUser(editerUser, defaultUsers)
+
+    const getEditedUser = updatedUsers.find(user => user.id === 3)
+
+    expect(getEditedUser.first_name).toEqual('Leanne 3 updated') // check that user was edited
+    expect(getEditedUser.last_name).toEqual('Graham updated') // check that user was edited
+
+  })
+
+  test('Removed new user layout from array users', async () => {
+
+    const newUser = {id: -1, first_name: '',last_name: '', role: '', email: '', password: '', serviceId: []}
+
+    const updatedUsers = addedUser(newUser, defaultUsers)
+    const beforeDeleteUser = updatedUsers.find(user => user.id === -1)
+
+    expect(beforeDeleteUser).toBeDefined() // before delete user
+
+    const afterDeleteUser = removedNewUser(updatedUsers)
+    const deletedServiceStore = afterDeleteUser.find(service => service.id === -1)
+
+    expect(deletedServiceStore).toBeUndefined() // after delete user
+
+  })
+
+  test('Updated users after deleting selected user with func deletedUser', async () => {
+    
+    const deleteUserId = 3
+    
+    const forDeleteUser = defaultUsers.find(user => user.id === 3)
+
+    expect(forDeleteUser).toBeDefined() // before delete user
+
+    const updatedUsers = deletedUser(deleteUserId, defaultUsers)
+
+    const afterDeletingUser = updatedUsers.find(user => user.id === 3)
+
+    expect(afterDeletingUser).toBeUndefined() // after delete user
+
+  })
+
+})

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

@@ -1,96 +1,14 @@
 import {expect, test, describe, vi, beforeEach} from "vitest"
 import AdapterOfServices    from '@adapters/adapterOfServices/Services'
 import ServiceOfServices from '@services/serviceOfServices/Services.js'
+import {addedService, updatedService, removedNewService, deletedService} from '@services/serviceOfServices/helpers.js'
 import { createStore } from 'vuex'
 import {store as services} from "@/store/modules/services"
-import axios from "axios";
+import axios from "axios"
+import {defaultServices, resServices} from "@mocks/services"
 
 vi.mock('axios')
 
-const defaultServices = [
-  {
-    "id": 1,
-    "created_at": "2024-03-06T17:31:31.948355541+03:00",
-    "updated_at": "2024-03-06T17:31:31.948355541+03:00",
-    "deleted_at": null,
-    "name": "jsonplaceholder.typicode.com",
-    "port": 9965,
-    "proxy_ip": "172.25.78.153",
-    "site_ip": "https://jsonplaceholder.typicode.com/",
-    "internet_uri": "localhost",
-    "description": "localhost",
-    "is_online": true
-  },
-  {
-    "id": 2,
-    "created_at": "2024-03-07T11:43:51.026265459+03:00",
-    "updated_at": "2024-03-07T13:35:12.506368972+03:00",
-    "deleted_at": null,
-    "name": "new 2",
-    "port": 4548,
-    "proxy_ip": "172.25.78.151",
-    "site_ip": "172.25.78.151",
-    "internet_uri": "",
-    "description": "new site 2",
-    "is_online": true
-  },
-  {
-    "id": 3,
-    "created_at": "2024-03-07T11:43:51.027148541+03:00",
-    "updated_at": "2024-03-07T13:35:24.919273428+03:00",
-    "deleted_at": null,
-    "name": "new 3",
-    "port": 2527,
-    "proxy_ip": "172.25.78.151",
-    "site_ip": "172.25.78.151",
-    "internet_uri": "",
-    "description": "new site 3...",
-    "is_online": true
-  }
-]
-
-const resServices = [
-  {
-    "id": 1,
-    "created_at": "2024-03-06T17:31:31.948355541+03:00",
-    "updated_at": "2024-03-06T17:31:31.948355541+03:00",
-    "deleted_at": null,
-    "name": "jsonplaceholder.typicode.com",
-    "port": 9965,
-    "proxy_ip": "172.25.78.153",
-    "device_ip": "https://jsonplaceholder.typicode.com/",
-    "internet_uri": "localhost",
-    "description": "localhost",
-    "is_online": true
-  },
-  {
-    "id": 2,
-    "created_at": "2024-03-07T11:43:51.026265459+03:00",
-    "updated_at": "2024-03-07T13:35:12.506368972+03:00",
-    "deleted_at": null,
-    "name": "new 2",
-    "port": 4548,
-    "proxy_ip": "172.25.78.151",
-    "device_ip": "172.25.78.151",
-    "internet_uri": "",
-    "description": "new site 2",
-    "is_online": true
-  },
-  {
-    "id": 3,
-    "created_at": "2024-03-07T11:43:51.027148541+03:00",
-    "updated_at": "2024-03-07T13:35:24.919273428+03:00",
-    "deleted_at": null,
-    "name": "new 3",
-    "port": 2527,
-    "proxy_ip": "172.25.78.151",
-    "device_ip": "172.25.78.151",
-    "internet_uri": "",
-    "description": "new site 3...",
-    "is_online": true
-  }
-]
-
 describe("tests services store with vuex", () => {
   const store = createStore({
     plugins: [],
@@ -125,7 +43,7 @@ describe("tests services store with vuex", () => {
   })
 
   test('Added new service layout to services of store', async () => {
-    const expectedSiteData = {"port": "", "name": "", id: -1}
+    const expectedserviceData = {"port": "", "name": "", id: -1}
 
     await serviceOfServices.addNewServiceLayout()
 
@@ -138,11 +56,38 @@ describe("tests services store with vuex", () => {
         services
       }
     ).toEqual({
-      selectedService: expectedSiteData,
+      selectedService: expectedserviceData,
-      services: [expectedSiteData]
+      services: [expectedserviceData]
     })
   })
 
+  test('Added new service to services of store', async () => {
+    const newService = {
+      id: 4,
+      created_at: "2024-03-07T11:43:51.027148541+03:00",
+      updated_at: "2024-03-07T13:35:24.919273428+03:00",
+      deleted_at: null,
+      name: 'test add new service',
+      port: 2534,
+      device_ip: '172.25.78.151',
+      proxy_ip: '172.25.78.151',
+      internet_uri: '',
+      description: 'test add new service description',
+      is_online: true
+    }
+
+    store.commit('services/setServices', resServices)
+
+    const updatedServices = addedService(newService, store.getters['services/services'])
+    store.commit('services/setServices', updatedServices)
+
+    const services = store.getters['services/services']
+
+    expect(services[0].name).toEqual('test add new service')
+    expect(services[0].description).toEqual('test add new service description')
+    expect(services[0].port).toEqual(2534)
+  })
+
   test('Selected service - for edit fields values in this service', async () => {
     
     const editedService = 
@@ -168,6 +113,20 @@ describe("tests services store with vuex", () => {
 
   })
 
+  test('Set isSaveData - if need save service', async () => {
+
+    const isSaveData = store.getters['services/isSaveData']
+
+    expect(isSaveData).toEqual(false) // default value is false
+
+    await serviceOfServices.setIsSaveServices(true)
+
+    const isSaveDataChanged = store.getters['services/isSaveData']
+
+    expect(isSaveDataChanged).toEqual(true) // if need save service - true
+
+  })
+
   test('Edited fields values in selected service of store', async () => {
     
     const selectedForEditService = 
@@ -195,56 +154,166 @@ describe("tests services store with vuex", () => {
 
     const selectedService = store.getters['services/selectedService']
 
-    // console.log('Edited fields 4 test', selectedService)
-
     expect(selectedService.name).toEqual('edited test name')
     expect(selectedService.port).toEqual(5555)
     expect(selectedService.description).toEqual('edited description field')
 
   })
 
-  // test("test uploadAndSelectService function", async () => {
+  test('Updated services in store after editing selected service', async () => {
-  //   const mockData = [
-  //     {
-  //       "id": 1,
-  //       "created_at": "2024-02-22T17:08:37.715772388+03:00",
-  //       "updated_at": "2024-02-26T14:11:38.64094899+03:00",
-  //       "deleted_at": null,
-  //       "name": "jsonplaceholder.typicode.com",
-  //       "port": 9965,
-  //       "proxy_ip": "172.25.78.153",
-  //       "site_ip": "172.25.78.153",
-  //       "internet_uri": "localhost",
-  //       "description": "localhost",
-  //       "is_online": true
-  //     }
-  //   ]
     
-  //   axios.get.mockResolvedValue({
+    const editedService = 
-  //     data: mockData,
+    {
-  //   })
+      "id": 3,
+      "created_at": "2024-03-07T11:43:51.027148541+03:00",
+      "updated_at": "2024-03-07T13:35:24.919273428+03:00",
+      "deleted_at": null,
+      "name": "edited and updated test service",
+      "port": 3436,
+      "proxy_ip": "172.25.78.151",
+      "device_ip": "172.25.78.151",
+      "internet_uri": "",
+      "description": "edited and updated test service description",
+      "is_online": true
+    }
     
-  //   await store.dispatch('services/uploadSites')
+    store.commit('services/setServices', resServices)
-  //   store.dispatch('services/uploadAndSelectService', 1)
 
-  //   const selectedSite = store.getters['services/selectedSite']
+    const defaultServices = store.getters['services/services']
-  //   const selectedSiteState = store.getters['services/selectedSiteState']
+    const forEditService = defaultServices.find(service => service.id === 3)
 
-  //   expect(selectedSite).toEqual({
+    expect(forEditService.name).toEqual('new 3') // default value
-  //     "id": 1,
+    expect(forEditService.description).toEqual('new site 3...') // default value
-  //     "created_at": "2024-02-22T17:08:37.715772388+03:00",
+    expect(forEditService.port).toEqual(2527) // default value
-  //     "updated_at": "2024-02-26T14:11:38.64094899+03:00",
+
-  //     "deleted_at": null,
+    const updatedServices = updatedService(editedService, defaultServices)
-  //     "name": "jsonplaceholder.typicode.com",
+    store.commit('services/setServices', updatedServices)
-  //     "port": 9965,
+
-  //     "proxy_ip": "172.25.78.153",
+    const services = store.getters['services/services']
-  //     "device_ip": "172.25.78.153",
+    const editedServiceStore = services.find(service => service.id === 3)
-  //     "internet_uri": "localhost",
+
-  //     "description": "localhost",
+    expect(editedServiceStore.name).toEqual('edited and updated test service')
-  //     "is_online": true
+    expect(editedServiceStore.description).toEqual('edited and updated test service description')
-  //   })
+    expect(editedServiceStore.port).toEqual(3436)
-  //   expect(selectedSiteState).toEqual('active')
+
-  // })
+  })
+  
+  test('Canceled selected service in store', async () => {
+    
+    const selectedForEditService = 
+    {
+      "id": 3,
+      "created_at": "2024-03-07T11:43:51.027148541+03:00",
+      "updated_at": "2024-03-07T13:35:24.919273428+03:00",
+      "deleted_at": null,
+      "name": "new 3",
+      "port": 2527,
+      "proxy_ip": "172.25.78.151",
+      "device_ip": "172.25.78.151",
+      "internet_uri": "",
+      "description": "new site 3...",
+      "is_online": true
+    }
+    
+    await serviceOfServices.selectService(selectedForEditService)
+
+    const selectedService = store.getters['services/selectedService']
+
+    expect(selectedService.name).not.toBe(null) // Service is selected
+    expect(selectedService.id).toEqual(3) // Service is selected
+    expect(selectedService.name).toEqual('new 3') // Service is selected
+
+    await serviceOfServices.cancelSelectedService(3)
+
+    const cancelSelectedService = store.getters['services/selectedService']
+
+    expect(cancelSelectedService).toBe(null) // Canceled selected Service
+
+  })
+
+  test('Updated services in store after deleting new service with only layout', async () => {
+    
+    store.commit('services/setServices', resServices)
+
+    await serviceOfServices.addNewServiceLayout()
+
+    const servicesWithNewServiceLayout = store.getters['services/services']
+    const forDeleteService = servicesWithNewServiceLayout.find(service => service.id === -1)
+
+    expect(forDeleteService).toBeDefined() // before delete service
+
+    const updatedServices = removedNewService(servicesWithNewServiceLayout)
+    store.commit('services/setServices', updatedServices)
+
+    const services = store.getters['services/services']
+    const deletedServiceStore = services.find(service => service.id === -1)
+
+    expect(deletedServiceStore).toBeUndefined() // after delete service
+
+  })
+
+  test('Updated services in store after deleting selected service', async () => {
+    
+    const deleteServiceId = 3
+    
+    store.commit('services/setServices', resServices)
+
+    const defaultServices = store.getters['services/services']
+    const forDeleteService = defaultServices.find(service => service.id === 3)
+
+    expect(forDeleteService).toBeDefined() // before delete service
+
+    const updatedServices = deletedService(deleteServiceId, defaultServices)
+    store.commit('services/setServices', updatedServices)
+
+    const services = store.getters['services/services']
+    const deletedServiceStore = services.find(service => service.id === 3)
+
+    expect(deletedServiceStore).toBeUndefined() // after delete service
+
+  })
+  
+  test('Reset store', async () => {
+    
+    const selectedForEditService = 
+    {
+      "id": 3,
+      "created_at": "2024-03-07T11:43:51.027148541+03:00",
+      "updated_at": "2024-03-07T13:35:24.919273428+03:00",
+      "deleted_at": null,
+      "name": "new 3",
+      "port": 2527,
+      "proxy_ip": "172.25.78.151",
+      "device_ip": "172.25.78.151",
+      "internet_uri": "",
+      "description": "new site 3...",
+      "is_online": true
+    }
+    
+    await serviceOfServices.selectService(selectedForEditService)
+    
+    const selectedService = store.getters['services/selectedService']
+
+    expect(selectedService.name).not.toBe(null) // Service is selected
+    expect(selectedService.id).toEqual(3) // Service is selected
+    expect(selectedService.name).toEqual('new 3') // Service is selected
+
+    await serviceOfServices.addNewServiceLayout()
+
+    const services = store.getters['services/services']
+
+    expect(services.name).not.toStrictEqual([]) // Not empty services
+    expect(services[0].id).toEqual(-1) // New Service
+
+    await serviceOfServices.resetStore()
+
+    const resetSelectedService = store.getters['services/selectedService']
+    const resetServices = store.getters['services/services']
+
+    expect(resetSelectedService).toBe(null) // After reset store
+    expect(resetServices).toStrictEqual([]) // After reset store
+
+  })
 
 })
 

users-manage/tests/store/users.test.js

@@ -1,12 +1,14 @@
-import { expect, test, describe, vi, beforeEach} from "vitest";
+import {expect, test, describe, vi, beforeEach} from "vitest"
-
+import AdapterOfUsers from '@adapters/adapterOfUsers/Users'
+import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
 import { createStore } from 'vuex'
 import {store as users} from "@/store/modules/users"
-import axios from "axios";
+import axios from "axios"
+import {defaultUsers} from "@mocks/users"
 
 vi.mock('axios')
 
-describe("tests services store with vuex", () => {
+describe("tests users store with vuex", () => {
   const store = createStore({
     plugins: [],
     modules: {
@@ -18,37 +20,264 @@ describe("tests services store with vuex", () => {
     store.dispatch('users/resetStore')
   })
 
-  test('test fetchUsersList function', async () => {
+  const adapterOfUsers = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
-    const mockData = [
+  const serviceOfUsers = new ServiceOfUsers(adapterOfUsers, store)
-      {
-        "id": 1,
-        "first_name": "Leanne",
-        "last_name": "Graham",
-        "email": "test@mail.ru",
-        "role": "admin",
-        "is_active": true
-      }
-    ]
 
   axios.get.mockResolvedValue({
-      data: mockData,
+    data: defaultUsers,
   })
 
-    const expectedData = [
+  test('Upload Users', async () => {
+
+    const users = store.getters['users/users']
+
+    expect(users).toEqual([]) // empty users array of store
+
+    await serviceOfUsers.getUsers('dev')
+
+    const uploadUsers = store.getters['users/users']
+
+    expect(uploadUsers).not.toBe([]) // full services array of store
+    expect(uploadUsers.length).toBeGreaterThan(0) // full services array of store
+
+  })
+
+  test('Upload users with selected service to store', async () => {
+
+    await serviceOfUsers.getUsersByService(1, 'dev')
+
+    const expectedUsers = defaultUsers.filter(user => user.serviceId.includes(1))
+
+    const usersWithService = store.getters['users/usersWithService']
+
+    expect(expectedUsers).toEqual(usersWithService) // users array selected service
+
+  })
+  
+  test('Upload users withhout selected service to store', async () => {
+
+    await serviceOfUsers.getUsers('dev')
+    await serviceOfUsers.getUsersWithoutService(1)
+
+    const usersWithoutService = store.getters['users/usersWithoutService']
+
+    usersWithoutService.map(user => {
+      expect(user.serviceId).not.toBe(1)
+    })
+ 
+  })
+
+  test('Created and added new user layout to selected user in store', async () => {
+
+    const newUser = await serviceOfUsers.addNewUser()
+
+    const newUserStore = store.getters['users/selectedUser']
+
+    expect(newUserStore.id).toBe(-1) // new user layout check id
+    expect(newUserStore).toEqual(newUser) // new user layout equal
+ 
+  })
+
+  test('Get selected user from store', async () => {
+
+    await serviceOfUsers.addNewUser()
+    const selectedUser = await serviceOfUsers.getSelectedUser()
+
+    const selectedUserStore = store.getters['users/selectedUser']
+
+    expect(selectedUserStore).toEqual(selectedUser)
+ 
+  })
+
+  test('Set selected user in store', async () => {
+
+    await serviceOfUsers.getUsers('dev')
+    await serviceOfUsers.addNewUser()
+
+    const selectedNewUserStore = store.getters['users/selectedUser']
+
+    expect(selectedNewUserStore.id).toBe(-1) // new user layout check id
+
+    const updatedUser = await serviceOfUsers.setSelectedUser(3)
+    const updatedUserStore = store.getters['users/selectedUser']
+
+    expect(updatedUserStore.id).toBe(3) // updated user check id
+    expect(updatedUserStore).toEqual(updatedUser)
+ 
+  })
+
+  test('Set status user in store', async () => {
+
+    const defaultUserStatus = store.getters['users/userStatus']
+
+    expect(defaultUserStatus).toBe('inactive')
+
+    const updatedUserStatus = await serviceOfUsers.setStatusUser('active')
+    const updatedUserStatusStore = store.getters['users/userStatus']
+
+    expect(updatedUserStatus).toBe('active')
+    expect(updatedUserStatusStore).toEqual(updatedUserStatus)
+ 
+  })
+
+  test('Added user to users with selected service of store', async () => {
+    
+    await serviceOfUsers.getUsers('dev')
+    await serviceOfUsers.addUserToService(5, 2)
+
+    const usersWithServices = store.getters['users/usersWithService']
+
+    const userAddedService = usersWithServices.find(user => user.id === 5)
+
+    expect(userAddedService).toBeDefined()
+    expect(userAddedService.serviceId.includes(2)).toBe(true)
+
+  })
+
+  test('Editing fields values in selected user', async () => {
+    
+    const forEditUser = 
     {
-        "id": 1,
+      "id": 5,
-        "first_name": "Leanne",
+      "serviceId": [4, 5],
-        "last_name": "Graham",
+      "firstName": "Leanne 5",
+      "lastName": "Graham",
       "email": "test@mail.ru",
       "role": "admin",
-        "is_active": true
     }
-    ]
 
-    await store.dispatch('users/fetchUsersList', {siteId: 1, mode: "prod"})
+    await serviceOfUsers.getUsers('dev')
-    const sites = store.getters['users/usersList']
+
+    const users = store.getters['users/users']
+    const userBeforeEdit = users.find(user => user.id === 5)
+
+    expect(userBeforeEdit).toEqual(forEditUser)
+
+    await serviceOfUsers.setSelectedUser(5)
+
+    await serviceOfUsers.setUserFields("firstName", "Leanne 5 edited")
+    await serviceOfUsers.setUserFields("lastName","Graham edited")
+
+    const editedUser = store.getters['users/selectedUser']
+
+    expect(editedUser.firstName).toEqual("Leanne 5 edited")
+    expect(editedUser.lastName).toEqual("Graham edited")
+
+    await serviceOfUsers.setUserFields("firstName", "Leanne 5") // return to default value
+    await serviceOfUsers.setUserFields("lastName", "Graham") // return to default value
+
+  })
+
+  test('Deleted user from users with selected service of store', async () => {
+    
+    await serviceOfUsers.getUsers('dev')
+    await serviceOfUsers.deleteUserFromService(5, 4)
+
+    const usersWithServices = store.getters['users/usersWithService']
+    const usersWithoutServices = store.getters['users/usersWithoutService']
+
+    const userWithService = usersWithServices.find(user => user.id === 5)
+    const userWithoutService = usersWithoutServices.find(user => user.id === 5)
+
+    expect(userWithService).toBeUndefined() // user with service deleted
+    expect(userWithoutService).toBeDefined() // user without service added
+    expect(userWithoutService.serviceId.includes(4)).toBe(false) // selected service was deleted from user serviceId 
+
+  })
+
+  test('Saving new user to array users of selected service', async () => {
+    
+    const newUser = 
+    {
+      "id": -1,
+      "serviceId": [],
+      "firstName": "Leanne 5 New",
+      "lastName": "Graham New",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    await serviceOfUsers.getUsers('dev')
+    store.dispatch('users/updateSelectedUser', newUser)
+
+    const users = store.getters['users/users']
+    const countUsers = users.length
+
+    await serviceOfUsers.createUser(3)
+
+    const usersWithService = store.getters['users/usersWithService']
+    const newUserAfterAdding = usersWithService.find(user => user.id === countUsers + 1) // Пока не получаем нового юзера с бэка, поэтому задаём id по количеству всех юзеров
+
+    expect(newUserAfterAdding).toBeDefined()
+
+    expect(newUserAfterAdding.id).toEqual(countUsers + 1)
+    expect(newUserAfterAdding.firstName).toEqual("Leanne 5 New")
+    expect(newUserAfterAdding.lastName).toEqual("Graham New")
+
+  })
+
+  test('Saving edited user to array users of selected service', async () => {
+    
+    const editedUser = 
+    {
+      "id": 3,
+      "serviceId": [2, 3],
+      "firstName": "Leanne 3 Edited",
+      "lastName": "Graham Edited",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    await serviceOfUsers.getUsers('dev')
+    store.dispatch('users/updateSelectedUser', editedUser)
+
+    await serviceOfUsers.updateUser()
+
+    const usersWithService = store.getters['users/usersWithService']
+    const userAfterUpdating = usersWithService.find(user => user.id === 3)
+
+    expect(userAfterUpdating).toBeDefined()
+
+    expect(userAfterUpdating.id).toEqual(3)
+    expect(userAfterUpdating.firstName).toEqual("Leanne 3 Edited")
+    expect(userAfterUpdating.lastName).toEqual("Graham Edited")
+
+  })
+  
+  test('Reset store', async () => {
+    
+    const selectedUser = 
+    {
+      "id": 5,
+      "serviceId": [4, 5],
+      "firstName": "Leanne 5",
+      "lastName": "Graham",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+    
+    await serviceOfUsers.getUsers('dev')
+    await serviceOfUsers.setSelectedUser(5)
+    await serviceOfUsers.setStatusUser('active')
+    
+    const selectedUserStore = store.getters['users/selectedUser']
+    const users = store.getters['users/users']
+    const userStatus = store.getters['users/userStatus']
+
+    expect(selectedUser).toEqual(selectedUserStore) // User is selected
+    expect(users).not.toStrictEqual([]) // Not empty users
+    expect(userStatus).toEqual('active') // New user status
+
+    await serviceOfUsers.resetStore()
+
+    const resetSelectedUser = store.getters['users/selectedUser']
+    const resetUsers = store.getters['users/users']
+    const resetUserStatus = store.getters['users/userStatus']
+
+    expect(resetSelectedUser).toBe(null) // After reset store
+    expect(resetUsers).toStrictEqual([]) // After reset store
+    expect(resetUserStatus).toEqual('inactive') // After reset store
 
-    expect(sites).toEqual(expectedData)
   })
 
 })

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

@@ -1,7 +1,6 @@
 import {describe, expect, test, beforeEach} from "vitest";
 import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
 import {serviceOfUsers, serviceOfServices, store} from './MockData.js'
-import {appUser} from '@mocks/users.js'
 
 
 describe('tests for caseOfUsersInService', () => {
@@ -16,16 +15,4 @@ describe('tests for caseOfUsersInService', () => {
   test('init', () => {
     expect(caseOfUsersInService).toBeDefined()
   })
-
-  test('fetchUsersByService', async () => {
-    await caseOfUsersInService.fetchUsersByService()
-    const storeUsers = store.getters['users/siteUsers']
-    expect(storeUsers).toEqual([appUser])
-  })
-
-  // test('fetchUsersWithoutService', async () => {
-  //   await caseOfUsersInService.fetchUsersWithoutService()
-  //   const storeUsers = store.getters['users/usersWithoutSite']
-  //   expect(storeUsers).toEqual([appUser])
-  // })
 })

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

@@ -1,6 +1,6 @@
 import {test, describe, expect, vi } from 'vitest'
 import { mount} from '@vue/test-utils'
-import VTabulator from '@molecules/VTabulator/VTabulator.vue';
+import VTabulator from '@molecules/Tabulator/VTabulator.vue';
 
 describe("tests VTabulator component", () => {
 

users-manage/tests/views/3_organisms/Services/EditServiceCard.test.js

@@ -0,0 +1,143 @@
+import { mount, config} from '@vue/test-utils'
+import { expect, test, describe, vi, beforeEach } from 'vitest'
+import EditServiceCard from "@organisms/ServicesList/EditServiceCard.vue"
+import { createStore } from 'vuex'
+import axios from "axios";
+import {store as services} from "@/store/modules/services"
+import AdapterOfServices    from '@adapters/adapterOfServices/Services'
+import ServiceOfServices    from '@services/serviceOfServices/Services.js'
+import {defaultServices, resServices} from "@mocks/services"
+
+config.showDeprecationWarnings = false
+
+vi.mock('axios')
+
+
+describe("tests EditServiceCard component", () => {
+  const store = createStore({
+    plugins: [],
+    modules: {
+      services,
+    },
+  })
+
+  axios.get.mockResolvedValue({
+    data: defaultServices,
+  })
+
+  beforeEach(async () => {
+    await store.dispatch('services/resetStore')
+  })
+
+  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
+  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+  test('EditServiceCard mounted with vuex', async () => {
+
+    store.commit('services/setSelectedService', resServices[0])
+    const selectedService = store.getters['services/selectedService']
+
+    const wrapper = mount(EditServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        id: 1,
+      },
+    })
+
+    expect(selectedService).not.toBeNull()
+    expect(selectedService.id).toBe(1)
+    expect(wrapper.html()).toContain('flex justify-between items-center mb-2')
+    expect(wrapper.html()).toContain('Онлайн')
+    expect(wrapper.html()).toContain('Офлайн')
+    expect(wrapper.text()).toContain('Сохранить')
+  })
+
+  test("Cancel selected service in EditServiceCard", async () => {
+
+    config.showDeprecationWarnings = false
+
+    await serviceOfServices.fetchServices()
+
+    store.commit('services/setSelectedService', resServices[0])
+
+    const wrapper = mount(EditServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        id: 1,
+      },
+    })
+
+    wrapper.vm.cancelEditService()
+
+    const selectedService = store.getters['services/selectedService']
+    
+    expect(selectedService).toBeNull()
+  })
+
+  test("Editing selected service in EditServiceCard", async () => {
+
+    store.commit('services/setSelectedService', resServices[0])
+
+    const wrapper = mount(EditServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        id: 1,
+      },
+    })
+
+    const selectedService = store.getters['services/selectedService']
+
+    expect(selectedService.isOnline).toEqual(true)
+
+    wrapper.vm.editData({key: 'isOnline', value: false})
+
+    const selectedServiceAfterEditing = store.getters['services/selectedService']
+    
+    expect(selectedServiceAfterEditing.isOnline).toEqual(false)
+  })
+
+  test("Set isSaveData for selected service in EditServiceCard", async () => {
+
+    store.commit('services/setSelectedService', resServices[0])
+
+    const wrapper = mount(EditServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        id: 1,
+      },
+    })
+
+    const isSaveData = store.getters['services/isSaveData']
+
+    expect(isSaveData).toEqual(false)
+
+    wrapper.vm.saveData()
+
+    const isSaveDataUpdated = store.getters['services/isSaveData']
+    
+    expect(isSaveDataUpdated).toEqual(true)
+  })
+
+})
+
+

users-manage/tests/views/3_organisms/Services/ServiceCard.test.js

@@ -0,0 +1,276 @@
+import { mount} from '@vue/test-utils'
+import { expect, test, describe, vi, beforeEach } from 'vitest'
+import ServiceCard from "@organisms/ServicesList/ServiceCard.vue"
+import { createStore} from 'vuex'
+import axios from "axios";
+import {store as services} from "@/store/modules/services"
+import {store as users} from "@/store/modules/users"
+import AdapterOfServices    from '@adapters/adapterOfServices/Services'
+import ServiceOfServices    from '@services/serviceOfServices/Services.js'
+import AdapterOfUsers    from '@adapters/adapterOfUsers/Users'
+import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
+import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
+import {defaultServices, resServices} from "@mocks/services"
+
+vi.mock('axios')
+
+describe("tests Service Card component", () => {
+  const store = createStore({
+    plugins: [],
+    modules: {
+      services,
+      users
+    },
+  })
+
+  axios.get.mockResolvedValue({
+    data: defaultServices,
+  })
+
+  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
+  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+  const adapterOfUsers    = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
+  const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
+  
+
+  const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
+
+  beforeEach(() => {
+    store.dispatch('services/resetStore')
+  })
+
+
+  test('Service Card mounted with vuex', async () => {
+    const wrapper = mount(ServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        caseOfUsersInService,
+      },
+    })
+
+    await serviceOfServices.fetchServices()
+
+    store.commit('services/setServicesState', 'active')
+
+    const uploadServices = store.getters['services/services']
+    // const servicesState = store.getters['services/servicesState']
+
+    expect(uploadServices).toEqual(resServices) // full services array of store
+
+    expect(wrapper.html()).toContain('block w-full p-6 bg-white')
+    expect(wrapper.text()).toContain('статус')
+    expect(wrapper.text()).toContain('Порт')
+  })
+
+  test('View EditCard component after select service', async () => {
+
+    store.commit('services/setSelectedService', resServices[0])
+    const selectedService = store.getters['services/selectedService']
+
+    const wrapper = mount(ServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        caseOfUsersInService,
+        id: 1,
+      },
+    })
+
+    const wrapperHtml = wrapper.html()
+
+    expect(selectedService).not.toBeNull()
+    expect(selectedService.id).toBe(1)
+    expect(wrapperHtml).toContain('Сохранить')
+    expect(wrapper.find('textarea[name="description"]'))
+  })
+
+  test("Renders buttons - 'Отменить' and 'Удалить' in this service, after click to button delete service", async () => {
+
+    beforeEach(() => {
+      store.dispatch('services/resetStore')
+    })
+
+    const wrapper = mount(ServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        caseOfUsersInService,
+        id: 1,
+      },
+      data () {
+        return {
+          isDelete: false,
+        }
+      },
+    })
+
+    await wrapper.setData({ isDelete: true })
+
+    await wrapper.get('.ri-close-line').trigger('click')
+    
+    expect(wrapper.html()).toContain('Отменить')
+    expect(wrapper.html()).toContain('Удалить')
+  })
+
+  test("Cancel Renders buttons - 'Отменить' and 'Удалить' in this service, after click to button cancel delete service", async () => {
+
+    beforeEach(() => {
+      store.dispatch('services/resetStore')
+    })
+
+    const wrapper = mount(ServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        caseOfUsersInService,
+        id: 1,
+      },
+      data () {
+        return {
+          isDelete: true,
+        }
+      },
+    })
+
+    await wrapper.get('[test-id="canelButton"]').trigger('click')
+    
+    expect(wrapper.html()).not.toContain('Отменить')
+    expect(wrapper.html()).not.toContain('Удалить')
+  })
+
+  test('Set setStatus for prop isOnline in ServiceCard', async () => {
+    
+    const wrapper = mount(ServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        isOnline: false
+      },
+      data () {
+        return {
+          status: {title: 'disable', color: 'bg-red-700'}
+        }
+      },
+    })
+
+    const defaultStatus = wrapper.vm.status
+
+    expect(defaultStatus.title).toContain('disable')
+    expect(defaultStatus.color).toContain('bg-red-700')
+
+    wrapper.vm.setStatus(true)
+
+    expect(wrapper.vm.status.title).toBe('enable')
+    expect(wrapper.html()).toContain('bg-green-700')
+
+  })
+
+  test('For Editing selected user in ServiceCard', async () => {
+
+    const forEditService = {
+      "id": 1,
+      "created_at": "2024-03-06T17:31:31.948355541+03:00",
+      "updated_at": "2024-03-06T17:31:31.948355541+03:00",
+      "deleted_at": null,
+      "name": "jsonplaceholder.typicode.com",
+      "port": 9965,
+      "proxy_ip": "172.25.78.153",
+      "device_ip": "https://jsonplaceholder.typicode.com/",
+      "internet_uri": "localhost",
+      "description": "localhost",
+      "is_online": true
+    }
+
+
+    const wrapper = mount(ServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        caseOfUsersInService
+      },
+    })
+
+    const selectedService = store.getters['services/selectedService']
+
+    expect(selectedService).toBeNull()
+
+    await wrapper.vm.editService(forEditService)
+
+    const selectedUserAfterEdit = store.getters['services/selectedService']
+    const usersWithService = store.getters['users/usersWithService']
+
+    expect(selectedUserAfterEdit).not.toBeNull()
+    expect(selectedUserAfterEdit.id).toBe(1)
+
+    usersWithService.map(user => {
+      expect(user.serviceId.include(1)).toBe(true)
+    })
+    
+  })
+
+  test("View buttons - 'Отменить' and 'Удалить' after change isDelete for selected service in ServiceCard", async () => {
+
+    beforeEach(() => {
+      store.dispatch('services/resetStore')
+    })
+  
+    const wrapper = mount(ServiceCard, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        id: 1,
+      },
+      data () {
+        return {
+          isDelete: false,
+        }
+      },
+    })
+
+    const defaultIsDelete = wrapper.vm.isDelete
+
+    expect(defaultIsDelete).toBe(false)
+
+    await wrapper.get('.ri-close-line').trigger('click') // Рендер отрисовывает только с помощью триггером
+
+    const updatedIsDelete = wrapper.vm.isDelete
+
+    expect(updatedIsDelete).toBe(true)
+
+    expect(wrapper.html()).toContain('Отменить')
+    expect(wrapper.html()).toContain('Удалить')
+
+  })
+
+})
+
+

users-manage/tests/views/3_organisms/Services/ServicesList.test.js

@@ -0,0 +1,69 @@
+import { mount} from '@vue/test-utils'
+import { expect, test, describe, vi } from 'vitest'
+import { toRefs } from 'vue'
+import ServicesList from "@organisms/ServicesList/ServicesList.vue"
+import { createStore } from 'vuex'
+import axios from "axios";
+import {store as services} from "@/store/modules/services"
+import {store as users} from "@/store/modules/users"
+import AdapterOfServices    from '@adapters/adapterOfServices/Services.js'
+import ServiceOfServices    from '@services/serviceOfServices/Services.js'
+import AdapterOfUsers    from '@adapters/adapterOfUsers/Users'
+import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
+import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
+import {defaultServices, resServices} from "@mocks/services"
+
+vi.mock('axios')
+
+describe("tests Services List component", () => {
+  const store = createStore({
+    plugins: [],
+    modules: {
+      services,
+      users
+    },
+  })
+
+  axios.get.mockResolvedValue({
+    data: defaultServices,
+  })
+
+  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
+  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+  const adapterOfUsers    = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
+  const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
+  
+
+  const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
+
+  test('Services List mounted with vuex', async () => {
+    const wrapper = mount(ServicesList, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfServices,
+        caseOfUsersInService,
+      },
+      setup (props) {
+        const {serviceOfServices} = toRefs(props)
+        serviceOfServices.value.fetchServices()
+      },
+    })
+
+    await serviceOfServices.fetchServices() 
+
+    const uploadServices = store.getters['services/services']
+
+    expect(uploadServices).toEqual(resServices) // full services array of store
+
+    expect(wrapper.html()).toContain('grid grid-cols-1')
+    expect(wrapper.text()).toContain('Добавить сайт')
+  })
+
+})
+
+

users-manage/tests/views/3_organisms/Users/StaticMocks.js

@@ -20,7 +20,6 @@ const users = {
       state.notIncludedSiteUsersList = []
     },
     saveUsersOffSite({commit}, users) {
-      console.log(users)
       commit('setUsersOffSite', users)
     }
   },

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

@@ -0,0 +1,171 @@
+import { mount} from '@vue/test-utils'
+import {createStore} from "vuex"
+import { expect, test, describe, vi, beforeEach } from 'vitest'
+import UsersManager from '@organisms/UsersManager/UsersManager.vue'
+import axios from "axios"
+import {store as services} from "@/store/modules/services"
+import {store as users} from "@/store/modules/users"
+import AdapterOfServices    from '@adapters/adapterOfServices/Services'
+import ServiceOfServices    from '@services/serviceOfServices/Services.js'
+import AdapterOfUsers    from '@adapters/adapterOfUsers/Users'
+import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
+import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
+
+vi.mock('axios')
+
+describe("tests UsersManager component", () => {
+
+  const store = createStore({
+    plugins: [],
+    modules: {
+      services,
+      users
+    },
+  })
+
+  vi.mock('tabulator-tables', () => {
+    const mockTabulator = vi.fn().mockImplementation(() => ({
+      // Mock implementation details
+    }));
+    return { TabulatorFull: mockTabulator }; // Adjust based on what you're trying to mock
+  });
+
+  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
+  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+  const adapterOfUsers    = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
+  const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
+  
+  const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
+
+  const mockData = [
+    {
+      "id": 1,
+      "serviceId": [1, 3],
+      "firstName": "Leanne 1",
+      "lastName": "Graham",
+      "email": "test@mail.ru",
+      "role": "admin",
+    },
+  ]
+  axios.get.mockResolvedValue({
+    data: mockData,
+  })
+
+  beforeEach(async () => {
+    store.dispatch('users/resetStore')
+  })
+
+
+  test('UsersManager mounted with vuex', async () => {
+    const wrapper = mount(UsersManager, {
+      global: {
+        mocks: {
+          $store: store
+        },
+        props: {
+          serviceOfUsers
+        }
+      }
+    })
+
+    const userStatus = store.getters['users/userStatus']
+
+    expect(userStatus).toBe('inactive')
+    expect(wrapper.html()).toContain('w-full flex justify-between grow gap-4')
+    expect(wrapper.text()).toContain('Список пользователей')
+  })
+
+  test('View UserEditor component, after click to create user button', async () => {
+
+    await serviceOfUsers.getUsersByService(1, 'dev')
+
+    const wrapper = mount(UsersManager, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers
+      }
+    })
+
+    const buttonCreate = wrapper.find('[test-id="toggle-new-user"]')
+    await buttonCreate.trigger('click')
+
+    const userStatus = store.getters['users/userStatus']
+    const wrapperHtml = wrapper.html()
+
+    expect(userStatus).toBe('create')
+    expect(wrapperHtml).toContain('Создать пользователя')
+    expect(wrapperHtml).toContain('Закрыть')
+    expect(wrapper.find('[test-id="new-user-container"]'))
+
+  })
+
+  test('View UserEditor component, after click to select user button', async () => {
+
+    await serviceOfUsers.getUsersByService(1, 'dev')
+    
+    const wrapper = mount(UsersManager, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers,
+        caseOfUsersInService,
+      },
+    })
+
+    const buttonSelect = wrapper.find('[test-id="toggle-add-user"]')
+    await buttonSelect.trigger('click')
+
+    const userStatus = store.getters['users/userStatus']
+    const wrapperHtml = wrapper.html()
+
+    expect(userStatus).toBe('select')
+    expect(wrapperHtml).toContain('Выбрать пользователя')
+    expect(wrapperHtml).toContain('Закрыть')
+    expect(wrapper.find('[action="add"]'))
+  })
+
+  test('Close UsersForSelection, after change userStatus', async () => {
+
+    await serviceOfUsers.getUsersByService(1, 'dev')
+
+    await serviceOfUsers.setStatusUser('select')
+
+    const wrapper = mount(UsersManager, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers,
+        caseOfUsersInService,
+      },
+    })
+
+    const userStatus = store.getters['users/userStatus']
+    const wrapperHtml = wrapper.html()
+
+    expect(userStatus).toBe('select')
+    expect(wrapperHtml).toContain('Выбрать пользователя')
+    expect(wrapperHtml).toContain('Закрыть')
+    expect(wrapper.find('[action="add"]'))
+
+    wrapper.vm.closeUserPanel()
+
+    const userStatusAfterClose = store.getters['users/userStatus']
+
+    expect(userStatusAfterClose).toBe('inactive')
+    
+  })
+  
+})
+
+

users-manage/tests/views/3_organisms/Users/UsersManagerContainer.test.js

@@ -1,6 +1,6 @@
 import {test, describe, expect} from 'vitest'
 import { mount} from '@vue/test-utils'
-import UsersManagerContainer from '@organisms/UsersManager/UsersManagerContainer.vue';
+import UsersManagerContainer from '@organisms/UsersManager/Container.vue';
 
 describe("tests UsersManagerContainer component", () => {
   test('mount test of UsersManagerContainer', async () => {

users-manage/tests/views/3_organisms/Users/UsersManagerSelection.test.js

@@ -0,0 +1,143 @@
+import { expect, test, describe, vi, beforeEach } from 'vitest'
+import {createStore, mapGetters} from "vuex"
+import { mount} from '@vue/test-utils'
+import UsersSelection from '@organisms/UsersManager/UsersForSelection.vue'
+import VTabulator from '@molecules/Tabulator/VTabulator.vue'
+import axios from "axios"
+import {store as services} from "@/store/modules/services"
+import {store as users} from "@/store/modules/users"
+import AdapterOfServices    from '@adapters/adapterOfServices/Services'
+import ServiceOfServices    from '@services/serviceOfServices/Services.js'
+import AdapterOfUsers    from '@adapters/adapterOfUsers/Users'
+import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
+import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
+import {defaultUsers} from "@mocks/users"
+
+vi.mock('axios')
+
+describe("tests UsersForSelection component", () => {
+
+  const store = createStore({
+    plugins: [],
+    modules: {
+      services,
+      users
+    },
+  })
+
+  beforeEach(async () => {
+    store.dispatch('users/resetStore')
+  })
+
+  vi.mock('tabulator-tables', () => {
+    const mockTabulator = vi.fn().mockImplementation(() => ({
+      // Mock implementation details
+    }))
+    return { TabulatorFull: mockTabulator }; // Adjust based on what you're trying to mock
+  })
+
+  axios.get.mockResolvedValue({
+    data: defaultUsers,
+  })
+
+  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
+  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+  const adapterOfUsers    = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
+  const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
+  
+  const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
+
+  test('mount test of UsersManagerUsersTable', async () => {
+
+    const wrapper = mount(UsersSelection, {
+      global: {
+        mocks: {
+          $store: store
+        },
+        props: {
+          caseOfUsersInService
+        }
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  test('Added user to selected Service', async () => {
+
+    const selectedService = [
+      {
+        "id": 1,
+        "created_at": "2024-03-06T17:31:31.948355541+03:00",
+        "updated_at": "2024-03-06T17:31:31.948355541+03:00",
+        "deleted_at": null,
+        "name": "jsonplaceholder.typicode.com",
+        "port": 9965,
+        "proxy_ip": "172.25.78.153",
+        "device_ip": "https://jsonplaceholder.typicode.com/",
+        "internet_uri": "localhost",
+        "description": "localhost",
+        "is_online": true
+      },
+    ]
+
+    const addedUser = {
+      "id": 3,
+      "serviceId": [2, 3],
+      "firstName": "Leanne 3",
+      "lastName": "Graham",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    await serviceOfServices.fetchServices()
+    await serviceOfServices.selectService(selectedService[0])
+
+    await serviceOfUsers.getUsersByService(1, 'dev')
+    await serviceOfUsers.setSelectedUser(addedUser.id)
+
+    const wrapper = mount(UsersSelection, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      components: {VTabulator},
+      props: {
+        serviceOfUsers,
+        caseOfUsersInService,
+        users: defaultUsers,
+      },
+      computed: {
+        ...mapGetters('users', ['selectedUser', 'usersWithoutService']),
+      },
+    })
+
+    const usersWithServices = store.getters['users/usersWithService']
+
+    const forDeleteUserFromService = usersWithServices.find(user => user.id === addedUser.id)
+
+    expect(forDeleteUserFromService).toBeUndefined()
+
+    wrapper.vm.addUser(addedUser)
+
+    setTimeout(() => {
+
+      const usersWithServicesAfterDelete = store.getters['users/usersWithService']
+      const usersWithoutService = store.getters['users/usersWithoutService']
+
+      const userFromServiceAfterDelete = usersWithServicesAfterDelete.find(user => user.id === addedUser.id)
+      const userWithoutServiceAfterDelete = usersWithoutService.find(user => user.id === addedUser.id)
+
+      expect(userFromServiceAfterDelete).toBeDefined()
+      expect(userWithoutServiceAfterDelete).toBeUndefined()
+      expect(userWithoutServiceAfterDelete.id).toEqual(addedUser.id)
+
+    }, 100)
+
+  })
+
+})
+
+

users-manage/tests/views/3_organisms/Users/UsersManagerTable.test.js

@@ -0,0 +1,185 @@
+import { expect, test, describe, vi, beforeEach } from 'vitest'
+import {createStore, mapGetters} from "vuex"
+import { mount} from '@vue/test-utils'
+import UsersTable from '@organisms/UsersManager/UsersTable.vue'
+import VTabulator from '@molecules/Tabulator/VTabulator.vue'
+import axios from "axios"
+import {store as services} from "@/store/modules/services"
+import {store as users} from "@/store/modules/users"
+import AdapterOfServices    from '@adapters/adapterOfServices/Services'
+import ServiceOfServices    from '@services/serviceOfServices/Services.js'
+import AdapterOfUsers    from '@adapters/adapterOfUsers/Users'
+import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
+import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'
+import {defaultUsers} from "@mocks/users"
+
+vi.mock('axios')
+
+describe("tests UsersManagerUsersTable component", () => {
+
+  const store = createStore({
+    plugins: [],
+    modules: {
+      services,
+      users
+    },
+  })
+
+  beforeEach(async () => {
+    store.dispatch('users/resetStore')
+  })
+
+  vi.mock('tabulator-tables', () => {
+    const mockTabulator = vi.fn().mockImplementation(() => ({
+      // Mock implementation details
+    }))
+    return { TabulatorFull: mockTabulator }; // Adjust based on what you're trying to mock
+  })
+
+  axios.get.mockResolvedValue({
+    data: defaultUsers,
+  })
+
+  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
+  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
+
+  const adapterOfUsers    = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
+  const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
+  
+  const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)
+
+  test('mount test of UsersManagerUsersTable', async () => {
+
+    const wrapper = mount(UsersTable, {
+      global: {
+        mocks: {
+          $store: store
+        },
+        props: {
+          serviceOfUsers
+        }
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  test('For Editing select current user in UserEditor', async () => {
+
+    const forEditUser = {
+      "id": 1,
+      "serviceId": [1, 3],
+      "firstName": "Leanne 1",
+      "lastName": "Graham",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    await serviceOfUsers.getUsers()
+
+    const wrapper = mount(UsersTable, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      components: {VTabulator},
+      props: {
+        serviceOfUsers
+      },
+      computed: {
+        ...mapGetters('users', ['userStatus']),
+      },
+    })
+
+    const selectedUser = store.getters['users/selectedUser']
+
+    expect(selectedUser).toBeNull()
+    expect(wrapper.vm.userStatus).toBe('inactive')
+
+    wrapper.vm.editUser(forEditUser)
+
+    const selectedUserAfterEdit = store.getters['users/selectedUser']
+    const userStatus = store.getters['users/userStatus']
+
+    expect(selectedUserAfterEdit).not.toBeNull()
+    expect(selectedUserAfterEdit.id).toEqual(forEditUser.id)
+    expect(userStatus).toBe('edit')
+  })
+
+  test('Delete user from selected Service', async () => {
+
+    const selectedService = [
+      {
+        "id": 1,
+        "created_at": "2024-03-06T17:31:31.948355541+03:00",
+        "updated_at": "2024-03-06T17:31:31.948355541+03:00",
+        "deleted_at": null,
+        "name": "jsonplaceholder.typicode.com",
+        "port": 9965,
+        "proxy_ip": "172.25.78.153",
+        "device_ip": "https://jsonplaceholder.typicode.com/",
+        "internet_uri": "localhost",
+        "description": "localhost",
+        "is_online": true
+      },
+    ]
+
+    const forDeleteUser = {
+      "id": 2,
+      "serviceId": [1],
+      "firstName": "Leanne 2",
+      "lastName": "Graham",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    await serviceOfServices.fetchServices()
+    await serviceOfServices.selectService(selectedService[0])
+
+    await serviceOfUsers.getUsersByService(1, 'dev')
+    await serviceOfUsers.setSelectedUser(forDeleteUser.id)
+
+    const wrapper = mount(UsersTable, {
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      components: {VTabulator},
+      props: {
+        serviceOfUsers,
+        caseOfUsersInService,
+        users: defaultUsers,
+      },
+      computed: {
+        ...mapGetters('users', ['selectedUser']),
+      },
+    })
+
+    const usersWithServices = store.getters['users/usersWithService']
+    const userStatus = store.getters['users/userStatus']
+
+    const forDeleteUserFromService = usersWithServices.find(user => user.id === forDeleteUser.id)
+
+    expect(forDeleteUserFromService).not.toBeNull()
+    expect(userStatus).toBe('inactive')
+
+    await wrapper.vm.deleteUser(forDeleteUser)
+
+    const userStatusAfterDelete = store.getters['users/userStatus']
+    const usersWithServicesAfterDelete = store.getters['users/usersWithService']
+    const usersWithoutService = store.getters['users/usersWithoutService']
+
+    const userFromServiceAfterDelete = usersWithServicesAfterDelete.find(user => user.id === forDeleteUser.id)
+    const userWithoutServiceAfterDelete = usersWithoutService.find(user => user.id === forDeleteUser.id)
+
+    expect(userStatusAfterDelete).toBe('select')
+    expect(userFromServiceAfterDelete).toBeUndefined()
+    expect(userWithoutServiceAfterDelete).toBeDefined()
+    expect(userWithoutServiceAfterDelete.id).toEqual(forDeleteUser.id)
+  })
+
+})
+
+

users-manage/tests/views/3_organisms/Users/UsersManagerTitle.test.js

@@ -1,6 +1,6 @@
 import {test, describe, expect} from 'vitest'
 import { mount} from '@vue/test-utils'
-import UsersManagerTitle from '@organisms/UsersManager/UsersManagerTitle.vue';
+import UsersManagerTitle from '@organisms/UsersManager/Title.vue';
 
 describe("tests UsersManagerTitle component", () => {
   test('mount test of UsersManagerTitle', async () => {

users-manage/tests/views/3_organisms/Users/UsersManagerUserEditor.test.js

@@ -0,0 +1,264 @@
+import { mount} from '@vue/test-utils'
+import { expect, test, describe, vi, beforeEach } from 'vitest'
+import UserEditor from '@organisms/UsersManager/UserEditor.vue';
+import { createStore, mapGetters } from 'vuex'
+import axios from "axios"
+import {store as users} from "@/store/modules/users"
+import {store as services} from "@/store/modules/services"
+import AdapterOfUsers    from '@adapters/adapterOfUsers/Users'
+import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
+import {defaultUsers} from "@mocks/users"
+import {resServices} from "@mocks/services"
+
+vi.mock('axios')
+
+describe("tests UserEditor component", () => {
+  const store = createStore({
+    plugins: [],
+    modules: {
+      services,
+      users
+    },
+  })
+
+  beforeEach( async () => {
+    store.dispatch('users/resetStore')
+
+  })
+
+  axios.get.mockResolvedValue({
+    data: defaultUsers,
+  })
+
+  const adapterOfUsers = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
+  const serviceOfUsers = new ServiceOfUsers(adapterOfUsers, store)
+
+  test('UserEditor mounted with vuex', async () => {
+    const wrapper = mount(UserEditor, {
+      shallow: true,
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers
+      }
+    })
+
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  test('Editing selected user in UserEditor', async () => {
+
+    store.dispatch('users/updateSelectedUser', defaultUsers[0])
+
+    const wrapper = mount(UserEditor, {
+      shallow: true,
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers
+      },
+    })
+
+    const selectedUser = store.getters['users/selectedUser']
+
+    expect(selectedUser.firstName).toBe('Leanne 1')
+
+    wrapper.vm.editData({key: 'firstName', value: 'test Editing'})
+
+    const selectedUserAfterEdit = store.getters['users/selectedUser']
+
+    expect(selectedUserAfterEdit.firstName).toBe('test Editing')
+    
+  })
+
+  test('Saving after editing selected user in UserEditor', async () => {
+
+    const editedUser = {
+      "id": 3,
+      "serviceId": [1, 3],
+      "firstName": "Leanne 3 edited",
+      "lastName": "Graham edited",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    await serviceOfUsers.getUsersByService(resServices[0].id, 'dev')
+
+    store.dispatch('services/editSelectedService', resServices)
+    store.dispatch('users/updateSelectedUser', editedUser)
+
+    const wrapper = mount(UserEditor, {
+      shallow: true,
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers
+      },
+      computed: {
+        ...mapGetters('services', ["selectedService"]),
+        ...mapGetters('users', ['selectedUser']),
+      },
+    })
+
+    const selectedUser = store.getters['users/selectedUser']
+    wrapper.vm.saveUser()
+
+    const updatedUsersWithService = store.getters['users/usersWithService']
+    const userStatus = store.getters['users/userStatus']
+
+    const updatedUser = updatedUsersWithService.find(user => user.id === selectedUser.id)
+
+    expect(userStatus).toBe('inactive')
+    expect(updatedUser.firstName).toBe(editedUser.firstName)
+    expect(updatedUser.lastName).toBe(editedUser.lastName)
+
+  })
+  
+  test('Saving after creating new user in UserEditor', async () => {
+
+    const newUser = {
+      "id": -1,
+      "serviceId": [],
+      "firstName": "Leanne 3 new",
+      "lastName": "Graham new",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    await serviceOfUsers.getUsersByService(resServices[0].id, 'dev')
+
+    store.dispatch('services/editSelectedService', resServices)
+    store.dispatch('users/updateSelectedUser', newUser)
+
+    const wrapper = mount(UserEditor, {
+      shallow: true,
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers
+      },
+      computed: {
+        ...mapGetters('services', ["selectedService"]),
+        ...mapGetters('users', ['selectedUser']),
+      },
+    })
+
+    wrapper.vm.saveUser()
+
+    const updatedUsersWithService = store.getters['users/usersWithService']
+    const userStatus = store.getters['users/userStatus']
+
+    const updatedUser = updatedUsersWithService[0]
+
+    expect(userStatus).toBe('inactive')
+    expect(updatedUser.firstName).toBe(newUser.firstName)
+    expect(updatedUser.lastName).toBe(newUser.lastName)
+
+  })
+
+  test('Get Password for selected user in UserEditor', async () => {
+
+    const editedUser = {
+      "id": 3,
+      "serviceId": [1, 3],
+      "firstName": "Leanne 3 edited",
+      "lastName": "Graham edited",
+      "email": "test@mail.ru",
+      "role": "admin",
+    }
+
+    store.dispatch('users/updateSelectedUser', editedUser)
+
+    const wrapper = mount(UserEditor, {
+      shallow: true,
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers
+      },
+    })
+
+    const selectedUser = store.getters['users/selectedUser']
+
+    expect(selectedUser).not.toHaveProperty('password')
+
+    wrapper.vm.getPassword()
+
+    const selectedUserAfterAddPass = store.getters['users/selectedUser']
+
+    expect(selectedUserAfterAddPass).toHaveProperty('password')
+  })
+
+  test('toggle view field Password for selected user in UserEditor', async () => {
+    const wrapper = mount(UserEditor, {
+      shallow: true,
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers
+      },
+      data() {
+        return {
+          showNewPassword: false,
+          newPasswordType: 'password',
+        }
+      },
+    })
+
+    // await wrapper.setData({ showNewPassword: true })
+    // expect(passwordField.attributes().type).toBe(true)
+
+    wrapper.vm.togglePass()
+    
+    expect(wrapper.vm.showNewPassword).toBe(true)
+    expect(wrapper.vm.newPasswordType).toBe('text')
+
+  })
+
+  test('toggle view field RepeatPassword for selected user in UserEditor', async () => {
+    const wrapper = mount(UserEditor, {
+      shallow: true,
+      global: {
+        mocks: {
+          $store: store
+        }
+      },
+      props: {
+        serviceOfUsers
+      },
+      data() {
+        return {
+          showRepeatPassword: false,
+          repeatPasswordType: 'password',
+        }
+      },
+    })
+
+    wrapper.vm.toggleRepeatPass()
+    
+    expect(wrapper.vm.showRepeatPassword).toBe(true)
+    expect(wrapper.vm.repeatPasswordType).toBe('text')
+
+  })
+
+})
+
+

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

@@ -1,125 +0,0 @@
-import { mount} from '@vue/test-utils'
-import { expect, test, describe, vi, beforeEach } from 'vitest'
-import UsersManager from '@organisms/UsersManager/UsersManager.vue';
-import axios from "axios";
-import {store, serviceOfUsers} from './StaticMocks.js'
-
-vi.mock('axios')
-
-
-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')
-
-    const mockData = [
-      {
-        "id": 1,
-        "created_at": "2024-02-22T17:08:37.715772388+03:00",
-        "updated_at": "2024-02-26T14:11:38.64094899+03:00",
-        "deleted_at": null,
-        "name": "jsonplaceholder.typicode.com",
-        "port": 9965,
-        "proxy_ip": "172.25.78.153",
-        "site_ip": "172.25.78.153",
-        "internet_uri": "localhost",
-        "description": "localhost",
-        "is_online": true
-      }
-    ]
-    axios.get.mockResolvedValue({
-      data: mockData,
-    })
-
-    await store.dispatch('services/uploadSites')
-
-    store.dispatch('services/uploadAndSelectService', 1)
-  })
-
-  test('test UsersManager mounted with vuex', async () => {
-    const wrapper = mount(UsersManager, {
-      global: {
-        plugins: [store],
-        props: {
-          serviceOfUsers
-        }
-      }
-    })
-
-    const componentState = wrapper.vm.componentState
-    const gridCols = wrapper.vm.gridCols
-    expect(componentState).toBe('view')
-    expect(gridCols).toBe('grid-cols-1')
-  })
-
-  test('test UsersManager create user button', async () => {
-    const wrapper = mount(UsersManager, {
-      global: {
-        plugins: [store]
-      },
-      props: {
-        serviceOfUsers
-      }
-    })
-
-    await wrapper.vm.openUserPanelOfCreate()
-
-    let componentState = wrapper.vm.componentState
-    let gridCols = wrapper.vm.gridCols
-
-    let wrapperHtml = wrapper.html()
-    expect(componentState).toBe('create')
-    expect(gridCols).toBe('grid-cols-2')
-    expect(wrapperHtml).toContain("new-user-container")
-
-    await wrapper.vm.openUserPanelOfSelect()
-    wrapperHtml = wrapper.html()
-    componentState = wrapper.vm.componentState
-    gridCols = wrapper.vm.gridCols
-    expect(componentState).toBe('select')
-    expect(gridCols).toBe('grid-cols-2')
-    expect(wrapperHtml).toContain("Выбрать пользователя")
-    expect(wrapperHtml).toContain("Выбрать пользователя")
-
-    await wrapper.vm.closeUserPanel()
-    wrapperHtml = wrapper.html()
-    componentState = wrapper.vm.componentState
-    gridCols = wrapper.vm.gridCols
-    expect(componentState).toBe('view')
-    expect(gridCols).toBe('grid-cols-1')
-    expect(wrapperHtml).not.toContain("Выбрать пользователя")
-    expect(wrapperHtml).not.toContain("new-user-container")
-  })
-
-  test('test UsersManager select user button', async () => {
-    const wrapper = mount(UsersManager, {
-      shallow: true,
-      global: {
-        plugins: [store]
-      },
-      props: {
-        serviceOfUsers
-      }
-    })
-
-    await wrapper.vm.openUserPanelOfSelect()
-
-    const usersOffSite = store.getters['users/usersOffSite']
-
-    const componentState = wrapper.vm.componentState
-    const gridCols = wrapper.vm.gridCols
-
-    expect(componentState).toBe('select')
-    expect(gridCols).toBe('grid-cols-2')
-    expect(usersOffSite).toEqual([{id: 1, name: 'user1'}, {id: 2, name: 'user2'}])
-  })
-})
-
-

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

@@ -1,17 +0,0 @@
-import {test, describe, expect} from 'vitest'
-import { mount} from '@vue/test-utils'
-import UsersManagerUsersTable from '@organisms/UsersManager/UsersManagerUsersTable.vue';
-
-describe("tests UsersManagerUsersTable component", () => {
-  test('mount test of UsersManagerUsersTable', async () => {
-
-    const wrapper = mount(UsersManagerUsersTable, {
-      shallow: true,
-    })
-
-    expect(wrapper.exists()).toBe(true)
-  })
-
-})
-
-

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

@@ -1,56 +0,0 @@
-import { mount} from '@vue/test-utils'
-import { expect, test, describe, vi, beforeEach } from 'vitest'
-import UsersManagerUserEditor from '@organisms/UsersManager/UsersManagerUserEditor.vue';
-import { createStore } from 'vuex'
-import {store as users} from '@/store/modules/users';
-import axios from "axios";
-
-vi.mock('axios')
-
-describe("tests UsersManagerUserEditor component mounted with vuex", () => {
-  const store = createStore({
-    plugins: [],
-    modules: {
-      users
-    },
-  })
-
-  beforeEach( async () => {
-    store.dispatch('users/resetStore')
-
-    const mockData = [
-      {
-        "id": 1,
-        "created_at": "2024-02-22T17:08:37.715772388+03:00",
-        "updated_at": "2024-02-26T14:11:38.64094899+03:00",
-        "deleted_at": null,
-        "name": "jsonplaceholder.typicode.com",
-        "port": 9965,
-        "proxy_ip": "172.25.78.153",
-        "site_ip": "172.25.78.153",
-        "internet_uri": "localhost",
-        "description": "localhost",
-        "is_online": true
-      }
-    ]
-    axios.get.mockResolvedValue({
-      data: mockData,
-    })
-    await store.dispatch('services/uploadSites')
-
-    store.dispatch('services/uploadAndSelectService', 1)
-  })
-
-  test('tests UsersManager mounted with vuex', async () => {
-    const wrapper = mount(UsersManagerUserEditor, {
-      shallow: true,
-      global: {
-        plugins: [store]
-      }
-    })
-
-    expect(wrapper.exists()).toBe(true)
-  })
-})
-
-

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

@@ -1,15 +1,17 @@
 import { mount} from '@vue/test-utils'
 import { expect, test, describe, vi } from 'vitest'
-import Sites from '@pages/SitesManagerPage/SitesManagerPage.vue';
+import Services from '@pages/ServicesManagerPage/ServicesManagerPage.vue';
 import { createStore } from 'vuex'
-import {store as services} from '@/store/modules/services';
-import {store as users} from '@/store/modules/users';
 import axios from "axios";
+import {store as services} from "@/store/modules/services"
+import {store as users} from "@/store/modules/users"
+import AdapterOfServices    from '@adapters/adapterOfServices/Services'
+import ServiceOfServices    from '@services/serviceOfServices/Services.js'
+import {defaultServices, resServices} from "@mocks/services"
 
 vi.mock('axios')
 
-
+describe("tests Services Manager Page component", () => {
-describe("tests App mounted with vuex", () => {
   const store = createStore({
     plugins: [],
     modules: {
@@ -18,48 +20,31 @@ describe("tests App mounted with vuex", () => {
     },
   })
 
-  const mockData = [
-    {
-      "id": 1,
-      "first_name": "Leanne",
-      "last_name": "Graham",
-      "email": "test@mail.ru",
-      "role": "admin",
-      "is_active": true
-    }
-  ]
-
   axios.get.mockResolvedValue({
-    data: mockData,
+    data: defaultServices,
   })
 
-  test('tests App mounted with vuex', async () => {
+  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
-    const wrapper = mount(Sites, {
+  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)
-      shallow: true,
+
+  test('Services Manager Page mounted with vuex', async () => {
+    const wrapper = mount(Services, {
       global: {
-        plugins: [store]
+        mocks: {
+          $store: store
+        }
       }
     })
 
-    const siteId = 1
+    await serviceOfServices.fetchServices()
-    const answer = await wrapper.vm.selectSite(siteId, "production")
 
-    const usersList = store.getters['users/usersList']
+    const uploadServices = store.getters['services/services']
-    const componentState = store.getters['users/componentState']
-    const selectedService = store.getters['services/selectedService']
 
-    expect(usersList).toEqual([{
+    expect(uploadServices).toEqual(resServices) // full services array of store
-      "id": 1,
+    expect(wrapper.html()).toContain('me-2 mb-6')
-      "first_name": "Leanne",
+    expect(wrapper.text()).toContain('На главную')
-      "last_name": "Graham",
-      "email": "test@mail.ru",
-      "role": "admin",
-      "is_active": true
-    }])
-    expect(componentState).toEqual('active')
-    expect(selectedService).toBe(null)
-    expect(answer).toBe("ok")
   })
+
 })
 
 

users-manage/yarn.lock

@@ -2,6 +2,9 @@
 # yarn lockfile v1
 
 
+"3-class-complex-assistants@../repo/3-class-complex-assistants/":
+  version "0.0.6"
+
 "@aashutoshrathi/word-wrap@^1.2.3":
   version "1.2.6"
   resolved "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"