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

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;