merge from master
This commit is contained in:
@@ -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})
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -94,7 +94,6 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
makeTable () {
|
||||
console.log(Tabulator)
|
||||
this.table = new Tabulator(this.$refs[this.refId], this.getConfig())
|
||||
},
|
||||
getConfig () {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -65,10 +65,12 @@ export default {
|
||||
<SiteList
|
||||
:serviceOfServices="serviceOfServices"
|
||||
:caseOfUsersInService="caseOfUsersInService"
|
||||
:selectSite="selectSite"
|
||||
/>
|
||||
<SiteManager
|
||||
v-if="selectedServiceState === 'active'"
|
||||
:serviceOfUsers="serviceOfUsers"
|
||||
:caseOfUsersInService="caseOfUsersInService"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user