From 330992736d838e29ebea092a81b75944a65cdde4 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 4 May 2022 19:35:04 +0200
Subject: [PATCH] change(ui) - user form role filter

---
 frontend/app/components/Client/Sites/Sites.js | 72 ++++++++++---------
 .../Users/components/UserForm/UserForm.tsx    |  8 +--
 frontend/app/mstore/types/role.ts             |  5 +-
 frontend/app/mstore/types/user.ts             |  2 +-
 4 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/frontend/app/components/Client/Sites/Sites.js b/frontend/app/components/Client/Sites/Sites.js
index 4769815e5..8d53b8eab 100644
--- a/frontend/app/components/Client/Sites/Sites.js
+++ b/frontend/app/components/Client/Sites/Sites.js
@@ -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>
diff --git a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
index 489f27881..19f44235c 100644
--- a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
+++ b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
@@ -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>
                 )}
diff --git a/frontend/app/mstore/types/role.ts b/frontend/app/mstore/types/role.ts
index e8204ef22..5d8da871a 100644
--- a/frontend/app/mstore/types/role.ts
+++ b/frontend/app/mstore/types/role.ts
@@ -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;
     }
diff --git a/frontend/app/mstore/types/user.ts b/frontend/app/mstore/types/user.ts
index c8b9dcdd6..609ee3b7f 100644
--- a/frontend/app/mstore/types/user.ts
+++ b/frontend/app/mstore/types/user.ts
@@ -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,
         }
     }