Skip to content

Commit 7acae23

Browse files
rickyhurtadorickyhurtado
committed
Add DataTable component
Additional features: - Users data table - Modals (default and confirm dialog) - User form for (new and edit) - View user (static content) - View, edit, delete user via data table or page - Create config files for data table and forms - Update bin install and reinstall exe files - Update README file
1 parent 15217b9 commit 7acae23

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+2494
-47
lines changed

‎.env.dist‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
REACT_APP_SITE_NAME=React App Boilerplate
2+
23
REACT_APP_API_BASE_URL=http://localhost:7770
4+
35
REACT_APP_API_SIGN_IN_URL=http://localhost:7770/sign-in
46
REACT_APP_API_SIGN_OUT_URL=http://localhost:7770/sign-out
57
REACT_APP_API_VERIFY_TOKEN_URL=http://localhost:7770/verify-token
8+
9+
REACT_APP_API_USERS_URL=http://localhost:7770/users
10+
611
REACT_APP_API_JWT_SECRET=jwtsecretcode

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ build
1111
!bin/css/build
1212
src/Assets/Styles/**/*.css
1313
!src/Assets/Styles/Style.css
14+
src/Config
1415

1516
# misc
1617
.DS_Store

‎README.md‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ Required node version is `9.2.1`.
55
The client app is bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app)
66
and [Bootstrap 3.3](http://getbootstrap.com/docs/3.3/) framework and theme.
77

8-
## Starting the App
8+
## Settings
9+
10+
### Environment Vars
911

1012
Copy `.env.dist` to `.env` and change the values of the environment variables if needed.
1113

@@ -18,7 +20,11 @@ REACT_APP_API_VERIFY_TOKEN_URL=http://localhost:7770/verify-token
1820
REACT_APP_API_JWT_SECRET=jwtsecretcode
1921
```
2022

21-
Then run the following commands:
23+
### Config Files
24+
25+
Copy `./src/Config.dist` folder to `Config` and change the configurations if needed.
26+
27+
## Starting the App
2228

2329
```
2430
yarn
@@ -91,11 +97,22 @@ With the [Node Express API Mockup Data Boilerplate](https://github.com/anthub-se
9197
or the [Node Express API Boilerplate](https://github.com/anthub-services/node-express-api-boilerplate) app,
9298
use the following credentials to test different API responses. Default password for all accounts is `password`.
9399

94-
- **Admin User:** `admin@email.com` - can access all applications
95-
- **Admin User witout Settings page:** `admin_no_settings@email.com` - no access on admin Settings page
96-
- **User redirected to internal page:** `referrer@email.com` – when `redirect.url` is set without the domain,
97-
user shall be redirected to internal page if no location path (referrer) found on the Sign In page
98-
- **User redirected to external page:** `redirect@email.com` – when `redirect.external` and `redirect.url` are set,
99-
user shall be redirected to external page if no location path (referrer) found on the Sign In page
100-
- **Blocked User:** `blocked@email.com` – user is signed in but the account is blocked
101-
- **Unauthorized User:** simply enter wrong `email` and/or `password`
100+
| Name | Email | Description |
101+
|-------------------|------------------------|-------------|
102+
| Super Admin User | `superadmin@email.com` | Has wildcard access |
103+
| Admin User | `admin@email.com` | Has wildcard access but `Admin › Users › Delete` is excluded |
104+
| Common User | `user@email.com` | Can access `My Profile`, `Admin › Dashboard`, `Users`, `Users › View, and Settings` |
105+
| Referrer User | `referrer@email.com` | When `redirect` is set without the domain, e.i. `/admin/dashboard`, user shall be redirected to internal page if no location path (referrer) found on the Sign In page |
106+
| Redirect User | `redirect@email.com` | When `redirect` is set with complete URL, e.i. `https://github.com/anthub-services`, user shall be redirected to external page if no location path (referrer) found on the Sign In page |
107+
| Blocked User | `blocked@email.com` | User is signed in but the account is blocked |
108+
| Unauthorized User | `<any invalid email>` | Simply enter wrong `email` and/or `password` |
109+
110+
## Docker Boilerplates
111+
112+
The following boilerplates can be used to install and run the API and client boilerplates in a Docker container.
113+
114+
[Docker for Node API Mockup Data and Client Boilerplates](https://github.com/anthub-services/docker-for-node-api-mockup-data-and-client-boilerplates)
115+
<br />
116+
[Docker for Node API and Client Boilerplates](https://github.com/anthub-services/docker-for-node-api-and-client-boilerplates)
117+
<br />
118+
[Docker for Rails API and Client Boilerplates](https://github.com/anthub-services/docker-for-rails-api-and-client-boilerplates)

‎bin/install‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
source $PWD/bin/bash.sh
33

44
execute cp $PWD/.env.dist $PWD/.env
5+
execute cp -r $PWD/src/Config.dist $PWD/src/Config
56

67
execute docker-compose build
78
execute docker-compose up

‎bin/reinstall‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ source $PWD/bin/bash.sh
33

44
execute docker-compose down
55

6-
execute rm -rf $PWD/.env $PWD/node_modules
6+
execute rm -rf $PWD/.env $PWD/node_modules $PWD/src/Config
7+
78
execute cp $PWD/.env.dist $PWD/.env
9+
execute cp -r $PWD/src/Config.dist $PWD/src/Config
810

911
execute docker-compose build
1012
execute docker-compose up

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-react-app-boilerplate",
3-
"version": "0.1.0",
3+
"version": "0.2.0",
44
"description": "Create React App Boilerplate",
55
"author": "Ricky Hurtado",
66
"license": "UNLICENSED",
@@ -15,7 +15,9 @@
1515
"dependencies": {
1616
"axios": "^0.17.1",
1717
"jsonwebtoken": "^8.1.1",
18+
"moment": "^2.21.0",
1819
"node-sass-chokidar": "^0.0.3",
20+
"query-string": "^5.1.0",
1921
"react": "^16.2.0",
2022
"react-bootstrap": "^0.32.1",
2123
"react-dom": "^16.2.0",
@@ -24,6 +26,7 @@
2426
"react-redux": "^5.0.6",
2527
"react-router-dom": "^4.2.2",
2628
"react-scripts": "1.1.0",
29+
"react-table": "^6.8.0",
2730
"redux": "^3.7.2",
2831
"redux-thunk": "^2.2.0",
2932
"store": "^2.0.12"

‎src/Assets/Styles/App.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
html, body {
2+
min-width: 768px;
3+
}
14
html {
25
min-height: 100%;
36
position: relative;
@@ -25,3 +28,6 @@ body {
2528
.no-padding {
2629
padding: 0;
2730
}
31+
.columns-2 {
32+
column-count: 2;
33+
}

‎src/Assets/Styles/Components/Buttons/Button.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.btn {
2+
&:focus, &:focus:active, &:focus:hover {
3+
text-decoration: none;
4+
}
5+
&-default, &-success, &-warning, &-danger {
6+
transition: inherit;
7+
}
8+
}

‎src/Assets/Styles/Components/DataTable/DataTable.scss‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.datatable {
2+
position: relative;
3+
&-header {
4+
position: absolute;
5+
right: 0;
6+
top: -43px;
7+
* {
8+
margin-left: 6px;
9+
}
10+
a {
11+
transition: none;
12+
}
13+
}
14+
&-actions {
15+
text-align: center;
16+
> * {
17+
margin-left: 7px;
18+
}
19+
> :first-child {
20+
margin-left: 0;
21+
}
22+
&-btn {
23+
background: transparent;
24+
color: #337ab7;
25+
cursor: pointer;
26+
border: none;
27+
padding: 0;
28+
&:hover {
29+
color: #23527c;
30+
text-decoration: underline;
31+
}
32+
&:focus {
33+
outline: none;
34+
}
35+
}
36+
}
37+
}
38+
.ReactTable {
39+
.rt-thead {
40+
&.-header {
41+
border-bottom: 2px solid rgba(0,0,0,0.1);
42+
box-shadow: none;
43+
}
44+
.rt-th {
45+
font-weight: bold;
46+
> div {
47+
padding: 7px 5px;
48+
}
49+
&.rt-resizable-header {
50+
&:focus {
51+
outline: none;
52+
}
53+
}
54+
&:not(.-cursor-pointer) {
55+
box-shadow: none;
56+
}
57+
}
58+
}
59+
.rt-tbody {
60+
.rt-td {
61+
border-color: rgba(0,0,0,0.05);
62+
}
63+
}
64+
.pagination-bottom {
65+
.-pagination {
66+
box-shadow: none;
67+
}
68+
}
69+
}

‎src/Assets/Styles/Components/DataTable/Filters.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.datatable-filters {
2+
background: #f5f5f5;
3+
margin-bottom: 20px;
4+
padding: 10px 15px 15px;
5+
.date-filters {
6+
display: flex;
7+
.form-group {
8+
margin: 0 3px 15px;
9+
}
10+
}
11+
.column-filters {
12+
> form {
13+
> .form-group {
14+
margin-bottom: 10px;
15+
text-align: center;
16+
}
17+
.form-group {
18+
fieldset {
19+
.form-group {
20+
display: inline-block;
21+
margin: 0 3px 10px;
22+
text-align: left;
23+
input {
24+
width: 100%;
25+
}
26+
width: 100%;
27+
@media (min-width: 769px) {
28+
width: 48%;
29+
}
30+
@media (min-width: 1143px) {
31+
width: 32.65%;
32+
}
33+
@media (min-width: 1208px) {
34+
width: 24%;
35+
}
36+
}
37+
}
38+
}
39+
}
40+
&-buttons {
41+
margin-bottom: 0;
42+
text-align: center;
43+
> :first-child {
44+
margin-right: 6px;
45+
}
46+
.btn {
47+
width: 115px;
48+
}
49+
}
50+
}
51+
}
52+
.react-datepicker-popper {
53+
z-index: 1000;
54+
}

0 commit comments

Comments
 (0)