Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 82ba2ee5

Přidáno uživatelem Jaroslav Hrubý před asi 2 roky(ů)

Users table implemented

Zobrazit rozdíly:

webapp/api/api.ts
170 170
     */
171 171
    'documentIdList'?: Array<string> | null;
172 172
}
173
/**
174
 * 
175
 * @export
176
 * @interface ChangeUserInfoRequest
177
 */
178
export interface ChangeUserInfoRequest {
179
    /**
180
     * 
181
     * @type {string}
182
     * @memberof ChangeUserInfoRequest
183
     */
184
    'password'?: string | null;
185
    /**
186
     * 
187
     * @type {string}
188
     * @memberof ChangeUserInfoRequest
189
     */
190
    'username'?: string | null;
191
    /**
192
     * 
193
     * @type {string}
194
     * @memberof ChangeUserInfoRequest
195
     */
196
    'name'?: string | null;
197
    /**
198
     * 
199
     * @type {string}
200
     * @memberof ChangeUserInfoRequest
201
     */
202
    'surname'?: string | null;
203
    /**
204
     * 
205
     * @type {ERole}
206
     * @memberof ChangeUserInfoRequest
207
     */
208
    'role'?: ERole;
209
}
173 210
/**
174 211
 * 
175 212
 * @export
......
195 232
     */
196 233
    'ip'?: string | null;
197 234
}
235
/**
236
 * 
237
 * @export
238
 * @interface CreateUserRequest
239
 */
240
export interface CreateUserRequest {
241
    /**
242
     * 
243
     * @type {string}
244
     * @memberof CreateUserRequest
245
     */
246
    'username'?: string | null;
247
    /**
248
     * 
249
     * @type {string}
250
     * @memberof CreateUserRequest
251
     */
252
    'password'?: string | null;
253
    /**
254
     * 
255
     * @type {string}
256
     * @memberof CreateUserRequest
257
     */
258
    'name'?: string | null;
259
    /**
260
     * 
261
     * @type {string}
262
     * @memberof CreateUserRequest
263
     */
264
    'surname'?: string | null;
265
    /**
266
     * 
267
     * @type {ERole}
268
     * @memberof CreateUserRequest
269
     */
270
    'role'?: ERole;
271
}
198 272
/**
199 273
 * 
200 274
 * @export
......
1547 1621
                options: localVarRequestOptions,
1548 1622
            };
1549 1623
        },
1624
        /**
1625
         * 
1626
         * @param {string} userId 
1627
         * @param {*} [options] Override http request option.
1628
         * @throws {RequiredError}
1629
         */
1630
        userUserIdAnnotationsGet: async (userId: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
1631
            // verify required parameter 'userId' is not null or undefined
1632
            assertParamExists('userUserIdAnnotationsGet', 'userId', userId)
1633
            const localVarPath = `/user/{userId}/annotations`
1634
                .replace(`{${"userId"}}`, encodeURIComponent(String(userId)));
1635
            // use dummy base URL string because the URL constructor only accepts absolute URLs.
1636
            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
1637
            let baseOptions;
1638
            if (configuration) {
1639
                baseOptions = configuration.baseOptions;
1640
            }
1641

  
1642
            const localVarRequestOptions = { method: 'GET', ...baseOptions, ...options};
1643
            const localVarHeaderParameter = {} as any;
1644
            const localVarQueryParameter = {} as any;
1645

  
1646

  
1647
    
1648
            setSearchParams(localVarUrlObj, localVarQueryParameter);
1649
            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
1650
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
1651

  
1652
            return {
1653
                url: toPathString(localVarUrlObj),
1654
                options: localVarRequestOptions,
1655
            };
1656
        },
1657
        /**
1658
         * 
1659
         * @param {string} userId 
1660
         * @param {ChangeUserInfoRequest} [changeUserInfoRequest] 
1661
         * @param {*} [options] Override http request option.
1662
         * @throws {RequiredError}
1663
         */
1664
        userUserIdPut: async (userId: string, changeUserInfoRequest?: ChangeUserInfoRequest, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
1665
            // verify required parameter 'userId' is not null or undefined
1666
            assertParamExists('userUserIdPut', 'userId', userId)
1667
            const localVarPath = `/user/{userId}`
1668
                .replace(`{${"userId"}}`, encodeURIComponent(String(userId)));
1669
            // use dummy base URL string because the URL constructor only accepts absolute URLs.
1670
            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
1671
            let baseOptions;
1672
            if (configuration) {
1673
                baseOptions = configuration.baseOptions;
1674
            }
1675

  
1676
            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
1677
            const localVarHeaderParameter = {} as any;
1678
            const localVarQueryParameter = {} as any;
1679

  
1680

  
1681
    
1682
            localVarHeaderParameter['Content-Type'] = 'application/json';
1683

  
1684
            setSearchParams(localVarUrlObj, localVarQueryParameter);
1685
            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
1686
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
1687
            localVarRequestOptions.data = serializeDataIfNeeded(changeUserInfoRequest, localVarRequestOptions, configuration)
1688

  
1689
            return {
1690
                url: toPathString(localVarUrlObj),
1691
                options: localVarRequestOptions,
1692
            };
1693
        },
1550 1694
        /**
1551 1695
         * 
1552 1696
         * @param {*} [options] Override http request option.
......
1571 1715
            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
1572 1716
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
1573 1717

  
1718
            return {
1719
                url: toPathString(localVarUrlObj),
1720
                options: localVarRequestOptions,
1721
            };
1722
        },
1723
        /**
1724
         * 
1725
         * @param {CreateUserRequest} [createUserRequest] 
1726
         * @param {*} [options] Override http request option.
1727
         * @throws {RequiredError}
1728
         */
1729
        usersPost: async (createUserRequest?: CreateUserRequest, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
1730
            const localVarPath = `/users`;
1731
            // use dummy base URL string because the URL constructor only accepts absolute URLs.
1732
            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
1733
            let baseOptions;
1734
            if (configuration) {
1735
                baseOptions = configuration.baseOptions;
1736
            }
1737

  
1738
            const localVarRequestOptions = { method: 'POST', ...baseOptions, ...options};
1739
            const localVarHeaderParameter = {} as any;
1740
            const localVarQueryParameter = {} as any;
1741

  
1742

  
1743
    
1744
            localVarHeaderParameter['Content-Type'] = 'application/json';
1745

  
1746
            setSearchParams(localVarUrlObj, localVarQueryParameter);
1747
            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
1748
            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
1749
            localVarRequestOptions.data = serializeDataIfNeeded(createUserRequest, localVarRequestOptions, configuration)
1750

  
1574 1751
            return {
1575 1752
                url: toPathString(localVarUrlObj),
1576 1753
                options: localVarRequestOptions,
......
1595 1772
            const localVarAxiosArgs = await localVarAxiosParamCreator.userAnnotationsGet(options);
1596 1773
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
1597 1774
        },
1775
        /**
1776
         * 
1777
         * @param {string} userId 
1778
         * @param {*} [options] Override http request option.
1779
         * @throws {RequiredError}
1780
         */
1781
        async userUserIdAnnotationsGet(userId: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AnnotationListResponse>> {
1782
            const localVarAxiosArgs = await localVarAxiosParamCreator.userUserIdAnnotationsGet(userId, options);
1783
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
1784
        },
1785
        /**
1786
         * 
1787
         * @param {string} userId 
1788
         * @param {ChangeUserInfoRequest} [changeUserInfoRequest] 
1789
         * @param {*} [options] Override http request option.
1790
         * @throws {RequiredError}
1791
         */
1792
        async userUserIdPut(userId: string, changeUserInfoRequest?: ChangeUserInfoRequest, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
1793
            const localVarAxiosArgs = await localVarAxiosParamCreator.userUserIdPut(userId, changeUserInfoRequest, options);
1794
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
1795
        },
1598 1796
        /**
1599 1797
         * 
1600 1798
         * @param {*} [options] Override http request option.
......
1604 1802
            const localVarAxiosArgs = await localVarAxiosParamCreator.usersGet(options);
1605 1803
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
1606 1804
        },
1805
        /**
1806
         * 
1807
         * @param {CreateUserRequest} [createUserRequest] 
1808
         * @param {*} [options] Override http request option.
1809
         * @throws {RequiredError}
1810
         */
1811
        async usersPost(createUserRequest?: CreateUserRequest, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<void>> {
1812
            const localVarAxiosArgs = await localVarAxiosParamCreator.usersPost(createUserRequest, options);
1813
            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
1814
        },
1607 1815
    }
1608 1816
};
1609 1817

  
......
1622 1830
        userAnnotationsGet(options?: any): AxiosPromise<AnnotationListResponse> {
1623 1831
            return localVarFp.userAnnotationsGet(options).then((request) => request(axios, basePath));
1624 1832
        },
1833
        /**
1834
         * 
1835
         * @param {string} userId 
1836
         * @param {*} [options] Override http request option.
1837
         * @throws {RequiredError}
1838
         */
1839
        userUserIdAnnotationsGet(userId: string, options?: any): AxiosPromise<AnnotationListResponse> {
1840
            return localVarFp.userUserIdAnnotationsGet(userId, options).then((request) => request(axios, basePath));
1841
        },
1842
        /**
1843
         * 
1844
         * @param {string} userId 
1845
         * @param {ChangeUserInfoRequest} [changeUserInfoRequest] 
1846
         * @param {*} [options] Override http request option.
1847
         * @throws {RequiredError}
1848
         */
1849
        userUserIdPut(userId: string, changeUserInfoRequest?: ChangeUserInfoRequest, options?: any): AxiosPromise<void> {
1850
            return localVarFp.userUserIdPut(userId, changeUserInfoRequest, options).then((request) => request(axios, basePath));
1851
        },
1625 1852
        /**
1626 1853
         * 
1627 1854
         * @param {*} [options] Override http request option.
......
1630 1857
        usersGet(options?: any): AxiosPromise<UserList> {
1631 1858
            return localVarFp.usersGet(options).then((request) => request(axios, basePath));
1632 1859
        },
1860
        /**
1861
         * 
1862
         * @param {CreateUserRequest} [createUserRequest] 
1863
         * @param {*} [options] Override http request option.
1864
         * @throws {RequiredError}
1865
         */
1866
        usersPost(createUserRequest?: CreateUserRequest, options?: any): AxiosPromise<void> {
1867
            return localVarFp.usersPost(createUserRequest, options).then((request) => request(axios, basePath));
1868
        },
1633 1869
    };
1634 1870
};
1635 1871

  
......
1650 1886
        return UserApiFp(this.configuration).userAnnotationsGet(options).then((request) => request(this.axios, this.basePath));
1651 1887
    }
1652 1888

  
1889
    /**
1890
     * 
1891
     * @param {string} userId 
1892
     * @param {*} [options] Override http request option.
1893
     * @throws {RequiredError}
1894
     * @memberof UserApi
1895
     */
1896
    public userUserIdAnnotationsGet(userId: string, options?: AxiosRequestConfig) {
1897
        return UserApiFp(this.configuration).userUserIdAnnotationsGet(userId, options).then((request) => request(this.axios, this.basePath));
1898
    }
1899

  
1900
    /**
1901
     * 
1902
     * @param {string} userId 
1903
     * @param {ChangeUserInfoRequest} [changeUserInfoRequest] 
1904
     * @param {*} [options] Override http request option.
1905
     * @throws {RequiredError}
1906
     * @memberof UserApi
1907
     */
1908
    public userUserIdPut(userId: string, changeUserInfoRequest?: ChangeUserInfoRequest, options?: AxiosRequestConfig) {
1909
        return UserApiFp(this.configuration).userUserIdPut(userId, changeUserInfoRequest, options).then((request) => request(this.axios, this.basePath));
1910
    }
1911

  
1653 1912
    /**
1654 1913
     * 
1655 1914
     * @param {*} [options] Override http request option.
......
1659 1918
    public usersGet(options?: AxiosRequestConfig) {
1660 1919
        return UserApiFp(this.configuration).usersGet(options).then((request) => request(this.axios, this.basePath));
1661 1920
    }
1921

  
1922
    /**
1923
     * 
1924
     * @param {CreateUserRequest} [createUserRequest] 
1925
     * @param {*} [options] Override http request option.
1926
     * @throws {RequiredError}
1927
     * @memberof UserApi
1928
     */
1929
    public usersPost(createUserRequest?: CreateUserRequest, options?: AxiosRequestConfig) {
1930
        return UserApiFp(this.configuration).usersPost(createUserRequest, options).then((request) => request(this.axios, this.basePath));
1931
    }
1662 1932
}
1663 1933

  
1664 1934

  
webapp/components/modals/AddUserModal.tsx
1
import { Button, Form, Input, Modal, Radio, Upload } from 'antd';
2
import { InboxOutlined, LockOutlined, UserOutlined } from '@ant-design/icons';
3
import 'antd/dist/antd.css';
4
import React from 'react';
5
import {
6
    CreateUserRequest,
7
    DocumentAddInfo,
8
    EAddDocumentFormat,
9
    ERole,
10
    LoginResponse,
11
} from '../../api';
12
import { documentController, userController } from '../../controllers';
13
import { ShowToast } from '../../utils/alerts';
14
import { getTokenData } from '../../utils/login';
15

  
16
const { Dragger } = Upload;
17

  
18
interface ModalProps {
19
    onCancel: () => void;
20
}
21

  
22
/**
23
 * Creates a modal window that loads documents to the app.
24
 * @returns The modal window.
25
 */
26
const AddUserModal: React.FC<ModalProps> = ({ onCancel }) => {
27
    /**
28
     * Handles successful closing of the modal window.
29
     */
30
    const handleOk = () => {
31
        onCancel();
32
    };
33

  
34
    /**
35
     * Handles cancelling of the model window.
36
     */
37
    const handleCancel = () => {
38
        onCancel();
39
    };
40

  
41
    const onFinish = async (values: any) => {
42
        const req: CreateUserRequest = {
43
            username: values.username,
44
            password: values.password,
45
            name: values.name,
46
            surname: values.surname,
47
            role: values.role,
48
        };
49

  
50
        const loginRes = await userController.usersPost(req);
51
        onCancel();
52
    };
53

  
54
    const onFinishFailed = (errorInfo: any) => {
55
        ShowToast('Zadané údaje nejsou validní', 'error', 3000, 'top-end');
56
    };
57

  
58
    return (
59
        <Modal
60
            title="Nový uživatel"
61
            onOk={handleOk}
62
            visible={true}
63
            onCancel={handleCancel}
64
            footer={null}
65
        >
66
            <Form
67
                onFinish={onFinish}
68
                onFinishFailed={onFinishFailed}
69
                autoComplete="off"
70
                labelCol={{ span: 4 }}
71
                layout="horizontal"
72
            >
73
                <Form.Item
74
                    label=""
75
                    name="role"
76
                    rules={[
77
                        {
78
                            required: true,
79
                            message: 'Prosím vyberte roli',
80
                        },
81
                    ]}
82
                >
83
                    <Radio.Group>
84
                        <Radio.Button value={ERole.Annotator}>Anotátor</Radio.Button>
85
                        <Radio.Button value={ERole.Administrator}>Admin</Radio.Button>
86
                    </Radio.Group>
87
                </Form.Item>
88
                <Form.Item
89
                    name="username"
90
                    rules={[
91
                        {
92
                            required: true,
93
                            message: 'Prosím zadejte uživatelské jméno',
94
                        },
95
                    ]}
96
                >
97
                    <Input placeholder="Uživatelské jméno" />
98
                </Form.Item>
99
                <Form.Item
100
                    name="password"
101
                    rules={[{ required: true, message: 'Prosím zadejte heslo' }]}
102
                >
103
                    <Input placeholder="Heslo" />
104
                </Form.Item>
105

  
106
                <Form.Item
107
                    name="name"
108
                    rules={[
109
                        {
110
                            required: true,
111
                            message: 'Prosím zadejte jméno',
112
                        },
113
                    ]}
114
                >
115
                    <Input placeholder="Jméno" />
116
                </Form.Item>
117

  
118
                <Form.Item
119
                    name="surname"
120
                    rules={[
121
                        {
122
                            required: true,
123
                            message: 'Prosím zadejte příjmení',
124
                        },
125
                    ]}
126
                >
127
                    <Input placeholder="Příjmení" />
128
                </Form.Item>
129
                <Form.Item>
130
                    <Button type="primary" htmlType="submit" className="w-100">
131
                        Vytvořit
132
                    </Button>
133
                </Form.Item>
134
            </Form>
135
        </Modal>
136
    );
137
};
138

  
139
export default AddUserModal;
webapp/pages/users/index.tsx
1 1
import 'antd/dist/antd.css';
2
import React, { useContext, useEffect } from 'react';
2
import React, { useContext, useEffect, useState } from 'react';
3 3

  
4 4
import { useUnauthRedirect } from '../../hooks';
5 5
import { useRouter } from 'next/router';
6
import { Typography } from 'antd';
6
import { Button, Space, Table, Typography } from 'antd';
7 7
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
8 8
import { faUsers } from '@fortawesome/free-solid-svg-icons';
9 9
import { LoggedUserContext } from '../../contexts/LoggedUserContext';
10 10
import { MainLayout } from '../../layouts/MainLayout';
11
import { UserInfo } from '../../api';
12
import { userController } from '../../controllers';
13
import AddUserModal from '../../components/modals/AddUserModal';
11 14

  
12 15
function UsersPage() {
13 16
    const redirecting = useUnauthRedirect('/login');
14 17
    const { logout, role } = useContext(LoggedUserContext);
15 18
    const router = useRouter();
16 19

  
20
    const [visible, setVisible] = React.useState(false);
21
    const [users, setUsers] = useState<UserInfo[]>([]);
22

  
17 23
    useEffect(() => {
24
        async function fetchData() {
25
            let usrs = (await userController.usersGet()).data.users;
26
            if (!usrs) {
27
                setUsers([]);
28
            } else {
29
                setUsers(usrs);
30
            }
31
        }
32

  
18 33
        if (!redirecting && role === 'ADMINISTRATOR') {
19
            // TODO load users
34
            fetchData();
20 35
        }
21 36
    }, [logout, redirecting, role, router]);
22 37

  
38
    const showModal = () => {
39
        setVisible(true);
40
    };
41

  
42
    const hideModal = () => {
43
        setVisible(false);
44
    };
45

  
46
    const columns = [
47
        { title: 'Jméno', dataIndex: 'name', key: 'name' },
48
        { title: 'Příjmení', dataIndex: 'surname', key: 'surname' },
49
        { title: 'Uživatelské jméno', dataIndex: 'username', key: 'username' },
50
        {
51
            title: '',
52
            key: 'operation',
53
            render: () => (
54
                <div>
55
                    <Space size={'middle'}>
56
                        <Button>Dokumenty</Button>
57
                        <Button>Upravit</Button>
58
                        <Button>Smazat</Button>
59
                    </Space>
60
                </div>
61
            ),
62
        },
63
    ];
64

  
23 65
    return redirecting || role !== 'ADMINISTRATOR' ? null : (
24 66
        <MainLayout>
25 67
            <Typography.Title level={2}>
26 68
                <FontAwesomeIcon icon={faUsers} /> Uživatelé
27 69
            </Typography.Title>
70
            <Button type={'primary'} onClick={showModal}>
71
                Přidat uživatele
72
            </Button>
73
            {visible && <AddUserModal onCancel={hideModal} />}
74

  
75
            <Table
76
                columns={columns}
77
                dataSource={users}
78
                size="small"
79
                scroll={{ y: 500 }}
80
            />
28 81
        </MainLayout>
29 82
    );
30 83
}

Také k dispozici: Unified diff