fix(refactor): add services/adapters/useCases

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

users-manage/src/useCases/CaseOfUsersInService.js

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