117 lines
3.1 KiB
Vue
117 lines
3.1 KiB
Vue
<script>
|
|
import ModuleContainer from "@organisms/UsersManager/UsersManagerContainer.vue";
|
|
import UsersTable from "@organisms/UsersManager/UsersManagerUsersTable.vue";
|
|
import UsersEditor from "@organisms/UsersManager/UsersManagerUserEditor.vue";
|
|
import ManagerTitle from "@organisms/UsersManager/UsersManagerTitle.vue";
|
|
import VButton from "@atoms/VButton.vue";
|
|
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
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters('users', ["usersList"]),
|
|
gridCols() {
|
|
return this.componentState === 'view' ? 'grid-cols-1' : 'grid-cols-2'
|
|
}
|
|
},
|
|
methods: {
|
|
openUserPanelOfCreate() {
|
|
this.componentState = 'create'
|
|
},
|
|
openUserPanelOfSelect() {
|
|
this.componentState = 'select'
|
|
this.serviceOfUsers.fetchUsersOffSite()
|
|
},
|
|
closeUserPanel() {
|
|
this.componentState = 'view'
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="grid grid-cols-12 gap-4"
|
|
:class="`${gridCols}`"
|
|
>
|
|
<ModuleContainer :class="[{'col-span-12': componentState === 'view', 'col-span-4': componentState !== 'view' }]">
|
|
<ManagerTitle class="mb-4">
|
|
<template #title>
|
|
<span>Список пользователей</span>
|
|
</template>
|
|
<template #control>
|
|
<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"
|
|
>
|
|
Добавить существующего
|
|
</VButton>
|
|
</div>
|
|
</template>
|
|
</ManagerTitle>
|
|
<UsersTable :usersList="usersList" />
|
|
</ModuleContainer>
|
|
<ModuleContainer
|
|
v-if="componentState === 'create'"
|
|
class="col-span-8"
|
|
>
|
|
<ManagerTitle test-id="new-user-container">
|
|
<template #title>
|
|
<span>Создать пользователя</span>
|
|
</template>
|
|
<template #control>
|
|
<VButton
|
|
class="close-button"
|
|
color="gray"
|
|
@click="closeUserPanel"
|
|
>
|
|
Закрыть
|
|
</VButton>
|
|
</template>
|
|
</ManagerTitle>
|
|
<UsersEditor />
|
|
</ModuleContainer>
|
|
<ModuleContainer
|
|
v-if="componentState === 'select'"
|
|
class="col-span-8"
|
|
>
|
|
<ManagerTitle>
|
|
<template #title>
|
|
<span>Выбрать пользователя</span>
|
|
</template>
|
|
<template #control>
|
|
<VButton
|
|
class="close-button"
|
|
color="gray"
|
|
@click="closeUserPanel"
|
|
>
|
|
Закрыть
|
|
</VButton>
|
|
</template>
|
|
</ManagerTitle>
|
|
<UsersEditor />
|
|
</ModuleContainer>
|
|
</div>
|
|
</template>
|