feat(tests): create useCase for UsersInServices

2024-03-07 14:47:21 +03:00
parent a14fd56955
commit b5b3c616dc
27 changed files with 1048 additions and 724 deletions
--- a/users-manage/src/adapters/adapterOfUsers/Users.js
+++ b/users-manage/src/adapters/adapterOfUsers/Users.js
@@ -1,5 +1,5 @@
 import {get, post, put, remove} from './apiHelpers.js'
-import {convertList} from '@helpers/adapter/adapter.js'
+import {convertList, convertObject} from '@helpers/adapter/adapter.js'
 import {devUsersList} from './StaticData.js'

 /**
@@ -8,15 +8,22 @@ import {devUsersList} from './StaticData.js'
 * @param {Number}  id
 */

+const adapter_config = {
+  id: "id",
+  first_name: "firstName",
+  last_name: "lastName",
+  email: "email",
+  role: "role",
+}
+
 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'}) {
+  constructor(apiAddr, params = {mode: 'prod'}) {
    this.apiAddr = apiAddr
    this.config  = adapter_config
    this.mode    = params.mode
@@ -28,7 +35,7 @@ class Users {
   * @param {'prod' | 'dev'} params.mode - Конфиг настроек
   * @returns {Promise<*[]> | *[]}
   */
-  async getUsers(params) {
+  async getUsers(params = {mode: 'prod'}) {
    if (params.mode === "dev") {
      return devUsersList
    }
@@ -41,9 +48,9 @@ class Users {
   *
   * @param {Number} id - Сервис id, если id не указан, отображается список всех роутеров
   * @param {'dev' | 'prod'} mode - Сервис id, если id не указан, отображается список всех роутеров
-   * @returns {Promise<*[]>}
+   * @returns {Promise<Array<User>> | any}
   */
-  async getUsersBySiteId(id, mode) {
+  async getUsersByServiceId(id, mode) {
    if (mode === "dev") {
      return devUsersList
    }
@@ -55,33 +62,33 @@ class Users {
  /**
   *
   * @param {User} userData
-   * @returns {Promise<void>}
+   * @returns {Promise<Object>}
   */
  async createUser(userData) {
    const newUser = await post(`${this.apiAddr}/users`, userData)
-    return newUser
+    return convertObject(newUser, {config: this.config})
  }

  /**
   *
   * @param {User} userData
-   * @returns {Promise<void>}
+   * @returns {Promise<Object>}
   */
  async updateUser(userData) {
    const updatedUserData = {...userData}
    delete updatedUserData.id
    const newUser = await put(`${this.apiAddr}/users/${userData.id}`, updatedUserData)
-    return newUser
+    return convertObject(newUser, {config: this.config})
  }

  /**
   *
   * @param {Number} userId - Сервис id, если id не указан, отображается список всех роутеров
-   * @returns {Promise<*[]>}
+   * @returns {Promise<Object>}
   */
  async removeUser(userId) {
    const removedUser = await remove(`${this.apiAddr}/users/${userId}`)
-    return removedUser
+    return convertObject(removedUser, {config: this.config})
  }


--- a/users-manage/src/components/2_molecules/Tabulator/VTabulator.vue
+++ b/users-manage/src/components/2_molecules/Tabulator/VTabulator.vue
@@ -94,7 +94,6 @@ export default {
  },
  methods: {
    makeTable () {
-      console.log(Tabulator)
      this.table = new Tabulator(this.$refs[this.refId], this.getConfig())
    },
    getConfig () {
--- a/users-manage/src/components/3_organisms/UsersManager/UsersManager.vue
+++ b/users-manage/src/components/3_organisms/UsersManager/UsersManager.vue
@@ -9,6 +9,12 @@ import {mapGetters} from 'vuex'
 export default {
  name: 'UsersManager',
  components: {ModuleContainer, UsersTable, UsersEditor, ManagerTitle, VButton},
+  props: {
+    serviceOfUsers: {
+      type: Object,
+      default: () => ({})
+    }
+  },
  data() {
    return {
      componentState: 'view' // view | create | select
@@ -26,6 +32,7 @@ export default {
    },
    openUserPanelOfSelect() {
      this.componentState = 'select'
+      this.serviceOfUsers.fetchUsersOffSite()
    },
    closeUserPanel() {
      this.componentState = 'view'
@@ -36,10 +43,10 @@ export default {

 <template>
  <div
-    class="grid gap-4"
+    class="grid grid-cols-12 gap-4"
    :class="`${gridCols}`"
  >
-    <ModuleContainer>
+    <ModuleContainer :class="[{'col-span-12': componentState === 'view', 'col-span-4': componentState !== 'view' }]">
      <ManagerTitle class="mb-4">
        <template #title>
          <span>Список пользователей</span>
@@ -48,12 +55,14 @@ export default {
          <div class="flex items-center gap-2">
            <VButton
              color="blue"
+              test-id="toggle-new-user"
              @click="openUserPanelOfCreate"
            >
-              Добавить пользователя
+              Создать пользователя
            </VButton>
            <VButton
              color="purple"
+              test-id="toggle-add-user"
              @click="openUserPanelOfSelect"
            >
              Добавить существующего
@@ -63,8 +72,11 @@ export default {
      </ManagerTitle>
      <UsersTable :usersList="usersList" />
    </ModuleContainer>
-    <ModuleContainer v-if="componentState === 'create'">
-      <ManagerTitle>
+    <ModuleContainer
+      v-if="componentState === 'create'"
+      class="col-span-8"
+    >
+      <ManagerTitle test-id="new-user-container">
        <template #title>
          <span>Создать пользователя</span>
        </template>
@@ -80,7 +92,10 @@ export default {
      </ManagerTitle>
      <UsersEditor />
    </ModuleContainer>
-    <ModuleContainer v-if="componentState === 'select'">
+    <ModuleContainer
+      v-if="componentState === 'select'"
+      class="col-span-8"
+    >
      <ManagerTitle>
        <template #title>
          <span>Выбрать пользователя</span>
--- a/users-manage/src/components/3_organisms/UsersManager/UsersManagerUsersTable.vue
+++ b/users-manage/src/components/3_organisms/UsersManager/UsersManagerUsersTable.vue
@@ -11,11 +11,10 @@ export default {
    },
  },
  data() {
-    const editItem = (item) =>  this.editItem(item);
-
-    const deleteItem = (item) =>  this.deleteItem(item);
-
+    const editItem = (item)   =>  this.editItem(item)
+    const deleteItem = (item) =>  this.deleteItem(item)
    return {
+      rerenderStep: 3,
      columns: [
        {
          field: "id",
@@ -44,15 +43,33 @@ export default {
        {
          title: "Actions",
          formatter: (cell) => {
-            return `<button @click="editItem(${cell.getRow().getIndex()})">Edit</button>
-                  <button @click="deleteItem(${cell.getRow().getIndex()})">Delete</button>`;
+            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) {
-            // Handle the click event and call Vue methods
-            const action = e.target.textContent.toLowerCase();
+            const action = e.target.getAttribute('action');
            if (action === 'edit') {
              editItem(cell.getRow().getData());
-            } else if (action === 'delete') {
+            } else if (action === 'remove') {
              deleteItem(cell.getRow().getData());
            }
          },
@@ -66,7 +83,7 @@ export default {
    deleteItem(item) {
      console.log('Delete item:', item);
    },
-  },
+  }
 }
 </script>

--- a/users-manage/src/components/5_pages/SitesManagerPage/SitesManagerPage.vue
+++ b/users-manage/src/components/5_pages/SitesManagerPage/SitesManagerPage.vue
@@ -58,10 +58,12 @@ export default {
    <SiteList
      :serviceOfUsers="serviceOfServices"
      :caseOfUsersInService="caseOfUsersInService"
+      :selectSite="selectSite"
    />
    <SiteManager
      v-if="selectedSiteState === 'active'"
      :serviceOfUsers="serviceOfUsers"
+      :caseOfUsersInService="caseOfUsersInService"
    />
  </div>
 </template>
--- a/users-manage/src/services/serviceOfServices/Services.js
+++ b/users-manage/src/services/serviceOfServices/Services.js
@@ -9,6 +9,10 @@ class ServiceOfServices {
    this.store.dispatch('services/saveServices', services)
    return services
  }
+
+  async getSelectedService() {
+    return this.store.getters['services/selectedService']
+  }
 }

 export default ServiceOfServices
--- a/users-manage/src/services/serviceOfUsers/Users.js
+++ b/users-manage/src/services/serviceOfUsers/Users.js
@@ -1,5 +1,38 @@
 class UsersOfServices {
-  constructor() {
+  constructor(adapter, store) {
+    this.adapter = adapter
+    this.store = store
+  }
+
+  /**
+   *
+   * @param {Array} users
+   * @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) {
+    const users = await this.adapter.getUsersByServiceId(serviceId)
+    await this.saveSiteUsers(users)
+    return users
  }
 }

--- a/users-manage/src/store/modules/services/index.js
+++ b/users-manage/src/store/modules/services/index.js
@@ -61,8 +61,7 @@ const actions = {
    const newRoute = {"path": null, "role": null, id: -1}
    state.newRoute = newRoute
  },
-  createNewRoute: ({state}, payload) => {
-    console.log(payload)
+  createNewRoute: ({state}) => {
    state.newRoute = null
  },
  stopAddingRoute: ({state}) => {
--- a/users-manage/src/useCases/CaseOfUsersInService.js
+++ b/users-manage/src/useCases/CaseOfUsersInService.js
@@ -4,6 +4,19 @@ class UsersInService {
    this.serviceOfServices = serviceOfServices
  }

+  async fetchUsersByService() {
+    const selectedService = this.serviceOfServices.getSelectedService()
+    if (!selectedService) {
+      console.error('fetchUsersByService: Service not found')
+      return []
+    }
+    this.serviceOfUsers.fetchUsersByService(selectedService.id)
+  }
+
+  async fetchUsersWithoutService() {
+
+  }
+
 }

-export default UsersInService
+export default UsersInService