Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 6915930

Browse files
Permission Edit done (#12)
1 parent 109fc8c commit 6915930

File tree

6 files changed

+176
-25
lines changed

6 files changed

+176
-25
lines changed

‎client/src/App.js

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Register } from "./components/Register";
88
import { Constants } from "./constants";
99
import { checkPermission } from "./utils/permissionManager.js";
1010
import { ResourceCreate, ResourceList } from "./components/Resource";
11-
import { PermissionCreate, PermissionList } from "./components/Permission";
11+
import { PermissionCreate, PermissionList,PermissionEdit } from "./components/Permission";
1212
import { RoleCreate, RoleList } from './components/Role';
1313

1414
export const PrivateRoute = ({ component: Component, name: resource, ...rest }) => {
@@ -80,6 +80,7 @@ const App = () => {
8080
{ name: 'link-post-edit', url: '/post-edit/:id', text: 'Edit post', component: PostEdit },
8181
{ name: 'link-post-delete', url: '/post-delete/:id', text: 'Delete post', component: PostDelete },
8282
{ name: 'link-permission-create', url: '/permission-create', text: 'Create permission', component: PermissionCreate, isRootMenu: true },
83+
{ name: 'link-permission-edit', url: '/permission-edit/:id', text: 'Edit permission', component: PermissionEdit, isRootMenu: false },
8384
{ name: 'link-permission-list', url: '/permission-list', text: 'List permissions', component: PermissionList, isRootMenu: true },
8485
{ name: 'link-role-create', url: '/role-create', text: 'Create role', component: RoleCreate, isRootMenu: true },
8586
{ name: 'link-role-list', url: '/role-list', text: 'List role', component: RoleList, isRootMenu: true },
@@ -118,14 +119,7 @@ const App = () => {
118119
</nav>
119120

120121
<div className="container">
121-
<Switch>
122-
{/* <PrivateRoute path="/post-detail/:id" component={PostDetail}></PrivateRoute>
123-
<PrivateRoute path="/post-create" component={PostCreate}></PrivateRoute>
124-
<PrivateRoute path="/post-edit/:id" component={PostEdit}></PrivateRoute>
125-
<PrivateRoute path="/post-delete/:id" component={PostDelete}></PrivateRoute>
126-
<PrivateRoute path="/posts" component={Posts}></PrivateRoute> */}
127-
{/* <Route path="/permission-create" component={PermissionCreate}></Route>
128-
<Route path="/role-create" component={RoleCreate}></Route> */}
122+
<Switch>
129123
{
130124
links.map(route => {
131125
return <PrivateRoute key={route.name} path={route.url} component={route.component} name={route.name}></PrivateRoute>;

‎client/src/components/Permission.js

Lines changed: 111 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { useHistory } from "react-router-dom";
2+
import { useHistory,useParams,Link } from "react-router-dom";
33
import { Formik, Form, Field, ErrorMessage } from 'formik';
44
import * as Yup from 'yup';
55
import { useSelector, useDispatch } from 'react-redux';
@@ -8,6 +8,10 @@ import { Table, Row, Col } from 'react-bootstrap';
88

99
const PermissionSchema = Yup.object().shape({
1010
resourceId: Yup.string()
11+
.min(3, 'Too Short!')
12+
.max(64, 'Too Long!')
13+
.required('Hey input the value!'),
14+
roleId: Yup.string()
1115
.min(3, 'Too Short!')
1216
.max(64, 'Too Long!')
1317
.required('Hey input the value!')
@@ -97,6 +101,100 @@ export const PermissionCreate = () => {
97101
};
98102

99103

104+
export const PermissionEdit = () => {
105+
106+
let history = useHistory();
107+
let dispatch = useDispatch();
108+
let { id } = useParams();
109+
110+
const resourceContext = useSelector(state => {
111+
return state.resourceContext;
112+
});
113+
114+
const roleContext = useSelector(state => {
115+
return state.roleContext;
116+
});
117+
118+
const permissionContext = useSelector(state => {
119+
return state.permissionContext;
120+
})
121+
122+
useEffect(() => {
123+
dispatch({ type: "FETCH_RESOURCE" });
124+
dispatch({ type: "FETCH_ROLE" });
125+
dispatch({ type: "FETCH_PERMISSION_DETAIL", payload: id });
126+
}, []);
127+
128+
129+
return (
130+
<div>
131+
<h1>Permission edit</h1>
132+
<Formik
133+
enableReinitialize={true}
134+
setFieldValue={(field, value) => console.log(field, value)}
135+
initialValues={{
136+
resourceId: permissionContext.selectedPermission.resourceId,
137+
roleId: permissionContext.selectedPermission.roleId,
138+
isAllowed: permissionContext.selectedPermission.isAllowed
139+
}}
140+
validationSchema={PermissionSchema}
141+
onSubmit={(values, { setSubmitting }) => {
142+
values.id = id;
143+
console.log('EDIT_PERMISSION', values);
144+
dispatch({
145+
type: "EDIT_PERMISSION", payload: values
146+
});
147+
setSubmitting(false);
148+
history.push('/permission-list');
149+
}}
150+
>
151+
{({ isSubmitting }) => (
152+
<Form>
153+
<div className="form-group row">
154+
<label htmlFor="resourceId" className="col-sm-2 col-form-label">Resource</label>
155+
<Field as="select" name="resourceId" className="col-sm-8">
156+
<option value="" key=""></option>
157+
{
158+
resourceContext.resourceList.map(({ id, name }) => {
159+
return <option value={id} key={id}>{name}</option>;
160+
})
161+
}
162+
</Field>
163+
<ErrorMessage className="col-sm-2 col-form-label text-danger" name="name" component="div" />
164+
</div>
165+
<div className="form-group row">
166+
<label htmlFor="roleId" className="col-sm-2 col-form-label">Roles</label>
167+
<Field as="select" name="roleId" className="col-sm-8">
168+
<option value="" key=""></option>
169+
{
170+
roleContext.roleList.map(({ id, name }) => {
171+
return <option value={id} key={id}>{name}</option>;
172+
})
173+
}
174+
</Field>
175+
<ErrorMessage className="col-sm-2 col-form-label text-danger" name="name" component="div" />
176+
</div>
177+
<div className="form-group row">
178+
<label htmlFor="isAllowed" className="col-sm-2 col-form-label">Is allowed</label>
179+
<label><Field type="checkbox" name="isAllowed" /></label>
180+
<ErrorMessage className="col-sm-2 col-form-label text-danger" name="isAllowed" component="div" />
181+
</div>
182+
<div className="form-group row">
183+
<label htmlFor="isDisabled" className="col-sm-2 col-form-label">Is disabled</label>
184+
<label><Field type="checkbox" name="isDisabled" /></label>
185+
<ErrorMessage className="col-sm-2 col-form-label text-danger" name="isDisabled" component="div" />
186+
</div>
187+
<div className="form-group row">
188+
<label htmlFor="name" className="col-sm-2 col-form-label"></label>
189+
<button type="submit" disabled={isSubmitting}>Submit</button>
190+
</div>
191+
</Form>
192+
)}
193+
</Formik>
194+
</div >
195+
);
196+
};
197+
100198
export const PermissionList = () => {
101199

102200
let dispatch = useDispatch();
@@ -106,8 +204,10 @@ export const PermissionList = () => {
106204
});
107205

108206
useEffect(() => {
109-
dispatch({ type: "FETCH_PERMISSION" });
110-
}, []);
207+
if (permissionContext.permissionList.length === 0 || permissionContext.shouldReload) {
208+
dispatch({ type: "FETCH_PERMISSION" });
209+
}
210+
}, [permissionContext.shouldReload]);
111211

112212
return (
113213
<>
@@ -124,18 +224,20 @@ export const PermissionList = () => {
124224
<th>Role</th>
125225
<th>Is allowed</th>
126226
<th>Is disabled</th>
227+
<th></th>
127228
</tr>
128229
</thead>
129230
<tbody>
130231
{
131-
permissionContext.permissionList.map((resource, index) => {
232+
permissionContext.permissionList.map((permission, index) => {
132233
return (
133-
<tr>
234+
<trkey={permission.id}>
134235
<td>{index + 1}</td>
135-
<td>{resource.resourceName}</td>
136-
<td>{resource.roleName}</td>
137-
<td>{resource.isAllowed.toString()}</td>
138-
<td>{resource.isDisabled.toString()}</td>
236+
<td>{permission.resourceName}</td>
237+
<td>{permission.roleName}</td>
238+
<td>{permission.isAllowed.toString()}</td>
239+
<td>{permission.isDisabled.toString()}</td>
240+
<td><Link to={`/permission-edit/${permission.id}`} className="">Edit</Link></td>
139241
</tr>
140242
)
141243
})

‎client/src/reducers/permissionReducer.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const initialState = {
2-
permissionList: []
2+
permissionList: [],
3+
selectedPermission: {},
4+
shouldReload: false
35
};
46

57

@@ -8,13 +10,27 @@ export default (state = initialState, action) => {
810
switch (action.type) {
911
case 'ADD_PERMISSION_SUCCESS':
1012
return {
11-
...state
13+
...state,
14+
shouldReload: true,
1215
};
1316
case 'FETCH_PERMISSION_SUCCESS':
1417
return {
1518
...state,
19+
shouldReload: false,
1620
permissionList: action.payload.data
1721
};
22+
case 'FETCH_PERMISSION_DETAIL_SUCCESS':
23+
return {
24+
...state,
25+
shouldReload: false,
26+
selectedPermission: action.payload.data
27+
}
28+
case 'EDIT_PERMISSION_SUCCESS':
29+
return {
30+
...state,
31+
shouldReload: true,
32+
selectedPermission: {}
33+
};
1834
default:
1935
return state;
2036
}

‎client/src/sagas/api.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import axios from 'axios';
22

3-
const BaseUrl = 'http://localhost:5002/api';
4-
const AuthUrl = 'http://localhost:5000';
3+
const BaseUrl = 'https://localhost:5003/api';
4+
const AuthUrl = 'https://localhost:5001';
55

66

77
axios.interceptors.request.use(function (config) {
@@ -105,7 +105,17 @@ export const createPermission = (data) => {
105105
return axios.post(`${AuthUrl}/api/ApplicationPermissions`, data);
106106
}
107107

108+
export const editPermission = (data) => {
109+
console.log("editPermission api call ->", data);
110+
return axios.put(`${AuthUrl}/api/ApplicationPermissions/${data.id}`, data);
111+
}
112+
108113
export const getPermissions = () => {
109114
console.log("getPermissions api call ->");
110115
return axios.get(`${AuthUrl}/api/ApplicationPermissions`);
116+
}
117+
118+
export const getPermissionDetail = (id) => {
119+
console.log("getPermissionDetail api call ->", id);
120+
return axios.get(`${AuthUrl}/api/ApplicationPermissions/${id}`);
111121
}

‎client/src/sagas/permissionSaga.js

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,20 @@ function* watchAdd() {
1515
yield takeEvery('ADD_PERMISSION', add);
1616
}
1717

18+
export function* edit({ payload }) {
19+
try {
20+
let output = yield call(api.editPermission, payload);
21+
yield put({ type: 'EDIT_PERMISSION_SUCCESS', payload: output });
22+
//yield put({ type: 'FETCH_PERMISSION' });
23+
} catch (error) {
24+
console.log('add permission error', error);
25+
}
26+
}
27+
28+
function* watchEdit() {
29+
yield takeEvery('EDIT_PERMISSION', edit);
30+
}
31+
1832
export function* fetch({ payload }) {
1933
try {
2034
let output = yield call(api.getPermissions, payload);
@@ -28,7 +42,22 @@ function* watchFetch() {
2842
yield takeEvery('FETCH_PERMISSION', fetch);
2943
}
3044

45+
export function* fetchDetail({ payload }) {
46+
try {
47+
const output = yield call(api.getPermissionDetail, payload);
48+
yield put({ type: 'FETCH_PERMISSION_DETAIL_SUCCESS', payload: output });
49+
} catch (error) {
50+
console.log('fetch permission error', error);
51+
}
52+
}
53+
54+
function* watchFetchDetail() {
55+
yield takeEvery('FETCH_PERMISSION_DETAIL', fetchDetail);
56+
}
57+
3158
export default [
3259
watchAdd(),
33-
watchFetch()
60+
watchFetch(),
61+
watchFetchDetail(),
62+
watchEdit()
3463
];

‎client/src/utils/permissionManager.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ const getElement = (resource, userContext) => {
55
}
66

77
export const checkPermission = (resource, userContext) => {
8-
console.log('checkPermission', resource, userContext.resources);
8+
// console.log('checkPermission', resource, userContext.resources);
99
const element = getElement(resource, userContext);
1010
return userContext.isAuthenticated && element != null && element.isAllowed;
1111
}
1212

1313
export const checkIsDisabled = (resource, userContext) => {
14-
console.log('isDisabled', resource, userContext.resources);
14+
// console.log('isDisabled', resource, userContext.resources);
1515
const element = getElement(resource, userContext);
1616
return userContext.isAuthenticated && element != null && element.isDisabled;
1717
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /