source: phonelux-frontend/src/components/SuperAdminComponent/SuperAdminComponent.js@ d66b8eb

Last change on this file since d66b8eb was d66b8eb, checked in by Marko <Marko@…>, 2 years ago

Component for editing offers added

  • Property mode set to 100644
File size: 5.9 KB
Line 
1import { Pagination } from '@mui/material'
2import { styled, alpha } from '@mui/material/styles';
3import axios from 'axios'
4import React, { Component } from 'react'
5import HeaderComponent from '../HeaderComponent/HeaderComponent'
6import UserComponent from '../UserComponent/UserComponent'
7import "./SuperAdminComponent.css"
8import SearchIcon from '@mui/icons-material/Search';
9import InputBase from '@mui/material/InputBase';
10import UserContext from '../../context/UserContext';
11
12
13const Search = styled('div')(({ theme }) => ({
14 position: 'relative',
15 borderRadius: theme.shape.borderRadius,
16 backgroundColor: alpha(theme.palette.common.white, 0.15),
17 '&:hover': {
18 backgroundColor: alpha(theme.palette.common.white, 0.25),
19 },
20 marginRight: theme.spacing(2),
21 marginLeft: 0,
22 width: '100%',
23 [theme.breakpoints.up('sm')]: {
24 marginLeft: theme.spacing(3),
25 width: 'auto',
26 },
27}));
28
29const SearchIconWrapper = styled('div')(({ theme }) => ({
30 padding: theme.spacing(0, 2),
31 height: '100%',
32 position: 'absolute',
33 pointerEvents: 'none',
34 display: 'flex',
35 alignItems: 'center',
36 justifyContent: 'center',
37}));
38
39const StyledInputBase = styled(InputBase)(({ theme }) => ({
40 color: 'inherit',
41 '& .MuiInputBase-input': {
42 padding: theme.spacing(1, 1, 1, 0),
43 // vertical padding + font size from searchIcon
44 paddingLeft: `calc(1em + ${theme.spacing(4)})`,
45 transition: theme.transitions.create('width'),
46 width: '100%',
47 [theme.breakpoints.up('md')]: {
48 width: '20ch',
49 },
50 },
51}));
52
53
54export class SuperAdminComponent extends Component {
55
56 constructor(props) {
57 super(props)
58
59 this.state = {
60 users: [],
61 currentUsers: [],
62 usersPerPage:10,
63 numberOfPages: 0,
64 currentPage: 1,
65 // numberOfUsers: 0,
66 // numberOfAdmins: 0
67 }
68 }
69
70 componentDidMount(){
71 // if(!localStorage.getItem('token'))
72 // {
73 // window.location.href = "/"
74 // }
75
76 // if(this.context.role != 'SUPERADMIN')
77 // {
78 // window.location.href = "/"
79 // }
80 this.getUsers()
81 }
82
83 addAdmin = (id) => {
84 var config = {
85 method: 'put',
86 url: '/management/addadmin/'+id,
87 headers: {
88 'Authorization': 'Bearer '+localStorage.getItem('token')
89 }
90 };
91
92 axios(config)
93 .then(response => {
94 this.getUsers()
95 })
96 .catch(error => {
97 console.log(error);
98 });
99
100 }
101
102 removeAdmin = (id) => {
103 var config = {
104 method: 'put',
105 url: '/management/removeadmin/'+id,
106 headers: {
107 'Authorization': 'Bearer '+localStorage.getItem('token')
108 }
109 };
110
111 axios(config)
112 .then(response => {
113 this.getUsers()
114 })
115 .catch(error => {
116 console.log(error);
117 });
118 }
119
120 getUsers = (filter) =>{
121 let queryParams = '?'
122 if(filter)
123 {
124 queryParams+='searchValue='+filter
125 }
126 var config = {
127 method: 'get',
128 url: '/management/users'+queryParams,
129 headers: {
130 'Authorization': 'Bearer '+localStorage.getItem('token')
131 }
132 };
133
134 axios(config)
135 .then(response => {
136 this.setState({
137 users: response.data,
138 // numberOfUsers: response.data.filter(user => user.userRole == 'USER').length,
139 // numberOfAdmins: response.data.filter(user => user.userRole == 'ADMIN').length,
140 numberOfPages: Math.ceil(response.data.length / this.state.usersPerPage)
141 },(e) => this.setNewPage(e,this.state.currentPage))
142 })
143 .catch(error => {
144 console.log(error);
145 });
146 }
147
148 setNewPage = (event,page) => {
149
150 const indexOfLastUser = parseInt(page) * this.state.usersPerPage;
151 const indexOfFirstUser = indexOfLastUser - this.state.usersPerPage;
152
153 const currUsers = this.state.users.slice(indexOfFirstUser, indexOfLastUser)
154
155 this.setState({
156 currentPage: parseInt(page),
157 currentUsers: currUsers
158 })
159
160 }
161
162 render() {
163 return (
164 <div className='superadmin-section-main'>
165 <HeaderComponent/>
166 <div className='superadmin-section-header'>
167 <h1 className='superadmin-section-header-text'>
168 Менаџмент со корисници
169 </h1>
170 </div>
171 <div className='superadmin-users-section'>
172
173 <table cellPadding={20} className='superadmin-section-table'>
174 <thead className='superadmin-section-table-head'>
175 <tr>
176 <th>Име</th>
177 <th>Презиме</th>
178 <th>Е-маил адреса</th>
179 <th>Привилегии</th>
180 <th>
181 <Search onChange={(event) => this.getUsers(event.target.value)} className="search-user-field">
182 <SearchIconWrapper id="search-user-iconwrapper">
183 <SearchIcon />
184 </SearchIconWrapper>
185 <StyledInputBase
186 className="search-user-input"
187 placeholder="Пребарувај…"
188 inputProps={{ 'aria-label': 'search' }}/>
189 </Search>
190 </th>
191 </tr>
192 </thead>
193 <tbody>
194 {
195 this.state.currentUsers.map((user,idx) => <UserComponent key={idx} id={user.id} firstname={user.firstName}
196 lastname={user.lastName} email={user.email} role={user.userRole} addAdmin={this.addAdmin} removeAdmin={this.removeAdmin}/>)
197 }
198 </tbody>
199 </table>
200
201 </div>
202 <div className='pagination-wrapper'>
203 <Pagination className='superadmin-users-pagination' onChange={this.setNewPage} page={this.state.currentPage}
204 count={this.state.numberOfPages} color="primary" />
205 </div>
206 </div>
207 )
208 }
209}
210
211SuperAdminComponent.contextType = UserContext
212
213export default SuperAdminComponent
Note: See TracBrowser for help on using the repository browser.