implemented basics for users and scenarios tables of usergroups

Signed-off-by: Andrii Podriez <andrey5577990@gmail.com>

src/pages/usergroups/tables/usergroup-scenarios-table.js

@@ -15,8 +15,48 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-const UsergroupScenariosTable = (props) => {
-    return <div></div>
+import { useGetUsergroupByIdQuery } from "../../../store/apiSlice";
+import { Table, DataColumn, LinkColumn, ButtonColumn } from "../../../common/table";
+import { iconStyle, buttonStyle } from "../styles";
+import IconButton from "../../../common/buttons/icon-button";
+
+const UsergroupScenariosTable = ({usergroupID}) => {
+    const {data: {usergroup} = {}, isLoading} = useGetUsergroupByIdQuery(usergroupID);
+
+    const handleAddScenarioMapping = () => {
+
+    }
+
+    const getDuplicateLabel = (duplicate) => {
+        return duplicate ? <div>yes</div> : <div>no</div>;
+    }
+
+    if(isLoading) return <div>Loading...</div>;
+
+    return (<div className="section"> 
+        <h2>
+        Scenario Mappings
+        <span className="icon-button">
+            <IconButton
+                childKey={0}
+                tooltip="Add Scenario Mapping"
+                onClick={() => handleAddScenarioMapping()}
+                icon="plus"
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
+            />
+        </span>
+        </h2>
+        <Table data={usergroup.scenarioMappings}>
+            <DataColumn title='ID' dataKey='id' width={70}/>
+            <LinkColumn title="Scenario ID" dataKey="scenarioID" link="/scenarios/" linkKey="id" />
+            <DataColumn title='Duplicate' dataKey='duplicate' modifier={(duplicate) => getDuplicateLabel(duplicate)}/>
+            {/* <ButtonColumn
+            width="200"
+            align="right"
+            /> */}
+        </Table>
+    </div>);
 }
 
 export default UsergroupScenariosTable;

src/pages/usergroups/tables/usergroup-users-table.js

@@ -15,8 +15,51 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-const UsergroupUsersTable = (props) => {
-    return <div></div>
+import { useGetUsersByUsergroupIdQuery } from "../../../store/apiSlice";
+import { Table, DataColumn, LinkColumn, ButtonColumn } from "../../../common/table";
+import { iconStyle, buttonStyle } from "../styles";
+import IconButton from "../../../common/buttons/icon-button";
+
+const UsergroupUsersTable = ({usergroupID}) => {
+    const {data: {users}=[], isLoading} = useGetUsersByUsergroupIdQuery(usergroupID);
+
+    const handleAddUser = () => {
+
+    }
+
+    if(isLoading) return <div>Loading...</div>;
+
+    return (<div className="section"> 
+        <h2>
+        Users
+        <span className="icon-button">
+            <IconButton
+                childKey={0}
+                tooltip="Add Users"
+                onClick={() => handleAddUser()}
+                icon="plus"
+                buttonStyle={buttonStyle}
+                iconStyle={iconStyle}
+            />
+        </span>
+        </h2>
+        <Table data={users}>
+            <DataColumn
+                title='ID'
+                dataKey='id'
+                width={70}
+            />
+            <DataColumn
+                title="Name"
+                dataKey="name"
+                width={70}
+            />
+            {/* <ButtonColumn
+            width="200"
+            align="right"
+            /> */}
+        </Table>
+    </div>);
 }
 
 export default UsergroupUsersTable;

src/pages/usergroups/usergroup.js

@@ -20,25 +20,23 @@ import { Table, DataColumn, LinkColumn } from "../../common/table";
 import { Row, Col } from "react-bootstrap";
 import UsergroupScenariosTable from "./tables/usergroup-scenarios-table";
 import UsergroupUsersTable from "./tables/usergroup-users-table";
-import { useGetUserGroupByIdQuery } from "../../store/apiSlice";
+import { useGetUsergroupByIdQuery } from "../../store/apiSlice";
 
 const Usergroup = (props) => {
     const params = useParams();
     const usergroupID = params.usergroup;
-    const {data: {usergroup} = {}, isLoading} = useGetUserGroupByIdQuery(usergroupID);
+    const {data: {usergroup} = {}, isLoading} = useGetUsergroupByIdQuery(usergroupID);
 
     if(isLoading) return <div className='loading'>Loading...</div>;
 
     return (
         <div className='section'>
             <h1>{usergroup.name}</h1>
-            <Row>
+            <Row className="mt-4">
                 <Col>
-                    <h4>Users</h4>
                     <UsergroupUsersTable usergroupID={usergroupID} />
                 </Col>
                 <Col>
-                    <h4>Scenario Mappings</h4>
                     <UsergroupScenariosTable usergroupID={usergroupID} />
                 </Col>
             </Row>

src/store/apiSlice.js

@@ -109,5 +109,6 @@ export const {
   useGetUsergroupsQuery,
   useAddUsergroupMutation,
   useDeleteUsergroupMutation,
-  useGetUserGroupByIdQuery
+  useGetUsergroupByIdQuery,
+  useGetUsersByUsergroupIdQuery
 } = apiSlice;

src/store/endpoints/usergroup-endpoints.js

@@ -19,7 +19,7 @@ export const usergroupEndpoints = (builder) => ({
     getUsergroups: builder.query({
       query: () => 'usergroups',
     }),
-    getUserGroupById: builder.query({
+    getUsergroupById: builder.query({
       query: (usergroupID) => `/usergroups/${usergroupID}`,
     }),
     addUsergroup: builder.mutation({
@@ -31,6 +31,9 @@ export const usergroupEndpoints = (builder) => ({
         },
       }),
     }),
+    getUsersByUsergroupId: builder.query({
+      query: (usergroupID) => `/usergroups/${usergroupID}/users`,
+    }),
     deleteUsergroup: builder.mutation({
       query: (usergroupID) => ({
         url: `usergroups/${usergroupID}`,