HM-84. Добавлена страница с пользователями (#55)

src/app.js

@@ -14,6 +14,7 @@ import ProfilePage from './components/profile-page';
 import authServiceApi from './api/AuthServiceAPI';
 import userInfoService from './services/UserInfoService';
 import {EVENTS} from './consts';
+import UsersPage from './components/users-page';
 
 const initAppComponents = () => {
     const mainMenu = new MainMenu();
@@ -36,6 +37,7 @@ const initAppComponents = () => {
         {url: '/', pageComponent: MainPage},
         {url: '/api', pageComponent: ApiPage},
         {url: '/logs', pageComponent: LogsPage},
+        {url: '/users', pageComponent: UsersPage},
         {url: '/login', pageComponent: LoginPage},
         {url: '/profile', pageComponent: ProfilePage},
     ]);

src/components/main-menu/MainMenu.js

@@ -18,6 +18,10 @@ export const NAV_MENU = [
         title: 'Журнал',
         url: '/logs',
     },
+    {
+        title: 'Пользователи',
+        url: '/users',
+    },
     {
         title: 'Личный кабинет',
         url: '/profile',

src/components/users-page/UsersPage.js

@@ -0,0 +1,25 @@
+import Component from '../component';
+import UsersTable from '../users-table';
+import usersServiceApi from '../../api/UsersServiceAPI';
+
+class UsersPage extends Component {
+    constructor (mainNodeSelector, parentNode) {
+        super(mainNodeSelector, parentNode);
+
+        this.usersTable = this.createComponent(UsersTable, this.mainNode);
+        this.initPage();
+    }
+
+    initPage = async () => {
+        this.userList = await usersServiceApi.request();
+        this.renderTable();
+    }
+
+    renderTable = () => {
+        this.render(() => {
+            this.usersTable.render(this.userList);
+        });
+    }
+}
+
+export default UsersPage;

src/components/users-page/index.js

@@ -0,0 +1,3 @@
+import UsersPage from './UsersPage';
+
+export default UsersPage;

src/components/users-table/UserAvatarCell.css

@@ -0,0 +1,9 @@
+.UserAvatarCell__wrapper {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-origin: border-box;
+    background-size: cover;
+}

src/components/users-table/UserAvatarCell.js

@@ -0,0 +1,25 @@
+import Component from '../component';
+import './UserAvatarCell.css';
+
+class UserAvatarCell extends Component {
+    constructor (parentNode, url) {
+        super(null, parentNode);
+
+        const cell = this.createElement({
+            tagName: 'td',
+            parentNode: this.mainNode,
+        });
+
+        const div = this.createElement({
+            tagName: 'div',
+            parentNode: cell,
+            options: {
+                className: 'UserAvatarCell__wrapper',
+            }
+        });
+
+        div.style.backgroundImage = `url('${url}')`;
+    }
+}
+
+export default UserAvatarCell;

src/components/users-table/UsersTable.js

@@ -0,0 +1,15 @@
+import Table from '../table';
+import {USERS_COLS} from '../../consts';
+import UsersTableRow from './UsersTableRow';
+
+class UsersTable extends Table {
+    constructor (parentNode) {
+        super(parentNode, USERS_COLS);
+    }
+
+    renderRow = (parentNode, cols, row) => {
+        return this.createComponent(UsersTableRow, parentNode, cols, row);
+    }
+}
+
+export default UsersTable;

src/components/users-table/UsersTableRow.js

@@ -0,0 +1,23 @@
+import Component from '../component';
+import TableCellOverflow from '../table-cell-overflow';
+import UserAvatarCell from './UserAvatarCell';
+
+const makeYesOrNo = (value) => {
+    return value ? 'Да' : 'Нет';
+};
+
+class UsersTableRow extends Component {
+    constructor (parentNode, cols, row) {
+        super(null, parentNode);
+
+        this.cols = cols.map((col) => {
+            if (col.id === 'avatar') {
+                return this.createComponent(UserAvatarCell, this.mainNode, row[col.id]);
+            }
+            const text = col.id === 'is_admin' ? makeYesOrNo(row[col.id]) : row[col.id];
+            return this.createComponent(TableCellOverflow, this.mainNode, text);
+        });
+    }
+}
+
+export default UsersTableRow;

src/components/users-table/index.js

@@ -0,0 +1,3 @@
+import UsersTable from './UsersTable';
+
+export default UsersTable;

src/consts.js

@@ -32,6 +32,12 @@ export const LOG_COLS = {
     [LOG_TYPE.CLIENT]: CLIENT_COLS,
 };
 
+export const USERS_COLS = [
+    {id: 'login', label: 'Логин'},
+    {id: 'avatar', label: 'Аватар'},
+    {id: 'is_admin', label: 'Админ'},
+];
+
 export const EVENTS = {
     ROUTE_CHANGE: 'routeChange',
     ROUTE_SEARCH_CHANGE: 'routeSearchChange',