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

change(ui) - user form role filter

Browse source
This commit is contained in:
Shekar Siri 2022-05-04 19:35:04 +02:00
parent 7e655d513c
commit 330992736d
4 changed files with 49 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
frontend/app/components/Client/Sites/Sites.js
View file

@ -170,43 +170,51 @@ class Sites extends React.PureComponent {
<div className={ stl.list }>
{
sites.map(_site => (
<div key={ _site.key } className={ stl.site } data-inactive={ _site.status === RED }>
<div className="flex items-center">
<Popup
trigger={
<div style={ { width: '10px' } }>
<Icon name="circle" size="10" color={ STATUS_COLOR_MAP[ _site.status ] } />
// <div key={ _site.key } data-inactive={ _site.status === RED }>
<div key={ _site.key } className="grid grid-cols-12 gap-2 w-full group hover:bg-active-blue items-center border-b py-3">
<div className="col-span-4">
<div className="flex items-center">
<Popup
trigger={
<div style={ { width: '10px' } }>
<Icon name="circle" size="10" color={ STATUS_COLOR_MAP[ _site.status ] } />
</div>
}
content={ STATUS_MESSAGE_MAP[ _site.status ] }
inverted
position="top center"
/>
<span className="ml-2">{ _site.host }</span>
</div>
}
content={ STATUS_MESSAGE_MAP[ _site.status ] }
inverted
position="top center"
/>
<div className="ml-3 flex items-center">
</div>
<div className="col-span-4">
<span className="px-2 py-1 bg-gray-lightest rounded border color-teal text-sm">{_site.projectKey}</span>
</div>
{/* <div className="ml-3 flex items-center">
<div>{ _site.host }</div>
<div className={ stl.label}>{_site.projectKey}</div>
</div> */}
<div className="col-span-4 justify-self-end flex items-center invisible group-hover:visible">
<button
className={cn({'hidden' : !canDeleteSites})}
disabled={ !canDeleteSites }
onClick={ () => canDeleteSites && this.remove(_site) }
>
<Icon name="trash" size="16" color="teal" />
</button>
<button
className={cn({'hidden' : !isAdmin})}
disabled={ !isAdmin }
onClick={ () => isAdmin && this.edit(_site) }
data-clickable
>
<Icon name="edit" size="16" color="teal"/>
</button>
<div><Button size="small" outline primary onClick={ () => this.showTrackingCode(_site) }>{ 'Tracking Code' }</Button></div>
{/* <button disabled={ !isAdmin } onClick={ () => this.showGDPRForm(_site) } ><Icon name="cog" size="16" color="teal" /></button> */}
</div>
</div>
<div className={ stl.actions }>
<button
className={cn({'hidden' : !canDeleteSites})}
disabled={ !canDeleteSites }
onClick={ () => canDeleteSites && this.remove(_site) }
>
<Icon name="trash" size="16" color="teal" />
</button>
<button
className={cn({'hidden' : !isAdmin})}
disabled={ !isAdmin }
onClick={ () => isAdmin && this.edit(_site) }
data-clickable
>
<Icon name="edit" size="16" color="teal"/>
</button>
<div><Button size="small" outline primary onClick={ () => this.showTrackingCode(_site) }>{ 'Tracking Code' }</Button></div>
{/* <button disabled={ !isAdmin } onClick={ () => this.showGDPRForm(_site) } ><Icon name="cog" size="16" color="teal" /></button> */}
</div>
</div>
// </div>
))
}
</div>

8
frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
View file

@ -16,7 +16,7 @@ function UserForm(props: Props) {
const { hideModal } = useModal();
const { userStore, roleStore } = useStore();
const user: any = useObserver(() => userStore.instance);
const roles = useObserver(() => roleStore.list.map(r => ({ label: r.name, value: r.roleId })));
const roles = useObserver(() => roleStore.list.filter(r => r.isProtected ? user.isSuperAdmin : true).map(r => ({ label: r.name, value: r.roleId })));
const onChangeCheckbox = (e: any) => {
user.updateKey('isAdmin', !user.isAdmin);
@ -70,10 +70,9 @@ function UserForm(props: Props) {
<input
name="admin"
type="checkbox"
value={ user.isAdmin }
checked={ !!user.isAdmin }
checked={ !!user.isAdmin || !!user.isSuperAdmin }
onChange={ onChangeCheckbox }
disabled={user.superAdmin}
disabled={user.isSuperAdmin}
className="mt-1"
/>
<div className="ml-2 select-none">
@ -94,6 +93,7 @@ function UserForm(props: Props) {
defaultValue={ user.roleId }
onChange={({ value }) => user.updateKey('roleId', value)}
className="block"
isDisabled={user.isSuperAdmin}
/>
</div>
)}

5
frontend/app/mstore/types/role.ts
View file

@ -4,8 +4,9 @@ export interface IRole {
roleId: string;
name: string;
description: string;
isProtected: boolean;
fromJson(json: any): IRole;
fromJson(json: any);
toJson(): any;
}
@ -13,6 +14,7 @@ export default class Role implements IRole {
roleId: string = '';
name: string = '';
description: string = '';
isProtected: boolean = false;
constructor() {
@ -28,6 +30,7 @@ export default class Role implements IRole {
this.roleId = json.roleId;
this.name = json.name;
this.description = json.description;
this.isProtected = json.protected;
})
return this;
}

2
frontend/app/mstore/types/user.ts
View file

@ -77,7 +77,7 @@ export default class User implements IUser {
name: this.name,
email: this.email,
admin: this.isAdmin,
isSuperAdmin: this.isSuperAdmin,
superAdmin: this.isSuperAdmin,
roleId: this.roleId,
}
}