jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui) - roles update type issues

Browse source
This commit is contained in:
Shekar Siri 2022-11-04 12:05:27 +01:00
parent 09ae0ff9d3
commit 223231f084
5 changed files with 25 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
frontend/app/components/Client/Roles/Roles.tsx
View file

@ -27,8 +27,7 @@ interface Props {
}
function Roles(props: Props) {
const { loading, instance, roles, init, edit, deleteRole, account, permissionsMap, projectsMap, removeErrors } = props;
// const [showModal, setShowmModal] = useState(false);
const { loading, roles, init, edit, deleteRole, account, permissionsMap, projectsMap, removeErrors } = props;
const { showModal, hideModal } = useModal();
const isAdmin = account.admin || account.superAdmin;
@ -47,17 +46,6 @@ function Roles(props: Props) {
};
}, [removeErrors]);
// const closeModal = (showToastMessage: boolean) => {
// if (showToastMessage) {
// toast.success(showToastMessage);
// props.fetchList();
// }
// // setShowmModal(false);
// setTimeout(() => {
// init();
// }, 100);
// };
const editHandler = (role: any) => {
init(role);
showModal(<RoleForm closeModal={hideModal} permissionsMap={permissionsMap} deleteHandler={deleteHandler} />, { right: true });
@ -103,6 +91,7 @@ function Roles(props: Props) {
</div>
{roles.map((role) => (
<RoleItem
key={role.roleId}
role={role}
isAdmin={isAdmin}
permissions={permissionsMap}

12
frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
View file

@ -32,16 +32,16 @@ const RoleForm = (props: Props) => {
});
};
const write = ({ target: { value, name } }) => edit({ [name]: value });
const write = ({ target: { value, name } }: any) => edit({ [name]: value });
const onChangePermissions = (e) => {
const onChangePermissions = (e: any) => {
const { permissions } = role;
const index = permissions.indexOf(e);
const _perms = permissions.contains(e) ? permissions.remove(index) : permissions.push(e);
edit({ permissions: _perms });
};
const onChangeProjects = (e) => {
const onChangeProjects = (e: any) => {
const { projects } = role;
const index = projects.indexOf(e);
const _projects = index === -1 ? projects.push(e) : projects.remove(index);
@ -111,7 +111,7 @@ const RoleForm = (props: Props) => {
/>
{role.projects.size > 0 && (
<div className="flex flex-row items-start flex-wrap mt-4">
{role.projects.map((p) => OptionLabel(projectsMap, p, onChangeProjects))}
{role.projects.map((p: any) => OptionLabel(projectsMap, p, onChangeProjects))}
</div>
)}
</>
@ -129,7 +129,7 @@ const RoleForm = (props: Props) => {
/>
{role.permissions.size > 0 && (
<div className="flex flex-row items-start flex-wrap mt-4">
{role.permissions.map((p) => OptionLabel(permissionsMap, p, onChangePermissions))}
{role.permissions.map((p: any) => OptionLabel(permissionsMap, p, onChangePermissions))}
</div>
)}
</Form.Field>
@ -185,7 +185,7 @@ export default connect(
function OptionLabel(nameMap: any, p: any, onChangeOption: (e: any) => void) {
return (
<div className="px-2 py-1 rounded bg-gray-lightest mr-2 mb-2 border flex items-center justify-between">
<div className="px-2 py-1 rounded bg-gray-lightest mr-2 mb-2 border flex items-center justify-between" key={p.roleId}>
<div>{nameMap[p]}</div>
<div className="cursor-pointer ml-2" onClick={() => onChangeOption(p)}>
<Icon name="close" size="12" />

9
frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx
View file

@ -18,30 +18,29 @@ function PermisionLabelLinked({ label, route }: any) {
interface Props {
role: any;
deleteHandler?: (role: any) => void;
editHandler?: (role: any) => void;
permissions: any;
isAdmin: boolean;
projects: any;
}
function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions, projects }: Props) {
function RoleItem({ role, editHandler, isAdmin, permissions, projects }: Props) {
return (
<div className={cn('flex items-start relative py-4 hover border-b last:border-none px-5 pr-20 group')}>
<div className="flex" style={{ width: '20%' }}>
<Icon name="user-alt" size="16" marginRight="10" />
<Icon name="user-alt" size="16" className="mr-2" />
{role.name}
</div>
<div className="flex items-start flex-wrap" style={{ width: '30%' }}>
{role.allProjects ? (
<PermisionLabelLinked label="All projects" route={clientRoute(CLIENT_TABS.SITES)} />
) : (
role.projects.map((p) => <PermisionLabel label={projects[p]} />)
role.projects.map((p: any) => <PermisionLabel label={projects[p]} />)
)}
</div>
<div className="flex items-start flex-wrap" style={{ width: '50%' }}>
<div className="flex items-center flex-wrap">
{role.permissions.map((permission: any) => (
<PermisionLabel label={permissions[permission]} key={permission.id} />
<PermisionLabel label={permissions[permission]} key={permission} />
))}
</div>

22
frontend/app/duck/roles.js
View file

@ -5,7 +5,7 @@ import { reduceDucks } from 'Duck/tools';
import { createListUpdater } from './funcTools/tools';
const crudDuck = crudDuckGenerator('client/role', Role, { idKey: 'roleId' });
export const { fetchList, init, edit, remove, } = crudDuck.actions;
export const { fetchList, init, edit, remove } = crudDuck.actions;
const RESET_ERRORS = 'roles/RESET_ERRORS';
@ -18,23 +18,24 @@ const initialState = Map({
{ text: 'Dashboard', value: 'METRICS' },
{ text: 'Assist (Live)', value: 'ASSIST_LIVE' },
{ text: 'Assist (Call)', value: 'ASSIST_CALL' },
])
]),
});
// const name = "role";
const idKey = "roleId";
const idKey = 'roleId';
const updateItemInList = createListUpdater(idKey);
const updateInstance = (state, instance) => state.getIn([ "instance", idKey ]) === instance[ idKey ]
? state.mergeIn([ "instance" ], instance)
: state;
const updateInstance = (state, instance) =>
state.getIn(['instance', idKey]) === instance[idKey]
? state.mergeIn(['instance'], instance)
: state;
const reducer = (state = initialState, action = {}) => {
switch (action.type) {
case RESET_ERRORS:
return state.setIn(['removeRequest', 'errors'], null);
case crudDuck.actionTypes.SAVE.SUCCESS:
return updateItemInList(updateInstance(state, action.data), action.data);
return updateItemInList(updateInstance(state, action.data), Role(action.data));
}
return state;
};
@ -42,14 +43,17 @@ const reducer = (state = initialState, action = {}) => {
export function save(instance) {
return {
types: crudDuck.actionTypes.SAVE.toArray(),
call: client => instance.roleId ? client.post(`/client/roles/${ instance.roleId }`, instance.toData()) : client.put(`/client/roles`, instance.toData()),
call: (client) =>
instance.roleId
? client.post(`/client/roles/${instance.roleId}`, instance.toData())
: client.put(`/client/roles`, instance.toData()),
};
}
export function resetErrors() {
return {
type: RESET_ERRORS,
}
};
}
export default reduceDucks(crudDuck, { initialState, reducer }).reducer;

1
frontend/app/duck/site.js
View file

@ -54,7 +54,6 @@ const reducer = (state = initialState, action = {}) => {
case FETCH_GDPR_SUCCESS:
return state.mergeIn([ 'instance', 'gdpr' ], action.data);
case success(SAVE):
console.log(action)
const newSite = Site(action.data);
return updateItemInList(state, newSite)
.set('siteId', newSite.get('id'))