Add userSettings

ui/src/components/UI/FilterableTableAction.tsx

@@ -0,0 +1,60 @@
+import { Button } from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import { Table } from "./Table";
+import {useCommonStyles} from "../../helpers/commonStyle";
+import {ColsType} from "../UI/Table"
+import './style/FilterableTableAction.sass';
+
+
+export type {ColsType} from "../UI/Table"
+
+type filterFuncFactory = (query:string) => (any) => boolean
+export interface Props {
+    onRowEdit : (any) => void;
+    onRowDelete : (any) => void;
+    searchConfig : {searchPlaceholder : string;filterRows: filterFuncFactory};
+    buttonConfig : {onClick : () => void, text:string}
+    rows: any[];
+    cols: ColsType[];
+}
+
+export const FilterableTableAction: React.FC<Props> = ({onRowDelete,onRowEdit, searchConfig, buttonConfig, rows, cols}) => {
+
+    const classes = useCommonStyles()
+
+    const [tableRows,setRows] = useState(rows as any[])
+    const [inputSearch, setInputSearch] = useState("")
+    let allRows = rows;
+
+    useEffect(() => {
+        allRows = rows;
+        setRows(rows);
+    },[rows])
+
+    useEffect(()=> {  
+        if(inputSearch !== ""){
+            const searchFunc = searchConfig.filterRows(inputSearch)
+            const filtered = tableRows.filter(searchFunc)
+            setRows(filtered)
+        }
+        else{
+            setRows(allRows);
+        }
+    },[inputSearch])
+
+    const onChange = (e) => {
+        setInputSearch(e.target.value)
+    }
+
+    return (<>
+        <div className="filterable-table">
+            <div className="actions-header">
+                <input type="text" className={classes.textField + " actions-header__search-box"} placeholder={searchConfig.searchPlaceholder} onChange={onChange}></input>
+                <Button style={{height: '100%'}} className={classes.button + " actions-header__action-button"} size={"small"} onClick={buttonConfig.onClick}>
+                            {buttonConfig.text}
+                </Button>
+            </div>
+            <Table rows={tableRows} cols={cols} onRowEdit={onRowEdit} onRowDelete={onRowDelete}></Table>
+        </div>
+    </>);
+};

ui/src/components/UI/Table.tsx

@@ -1,22 +1,26 @@
 import React, {useEffect, useState} from "react";
 import './style/Table.sass';
-import editImg from "../assets/edit.svg";
-import deleteImg from "../assets/delete.svg"
 import circleImg from "../assets/dotted-circle.svg"
 import Delete from '@material-ui/icons/Delete';
 import Edit from '@material-ui/icons/Edit';
 
+export interface ColsType {
+    field:string,
+    cellClassName?: string,
+    header:string,
+    width?:number,
+    getCellClassName?:(field:string,value : any) => string
+};
 
-interface Props {
+interface TableProps {
     rows : any[];
-    cols : {field:string, cellClassName?: string,header:string, width?:number,
-            getCellClassName?:(field:string,value : any) => string}[];
+    cols : ColsType[]
     onRowEdit : (any) => void;
     onRowDelete : (any) => void;
-    noDataMeesage : string;
+    noDataMeesage? : string;
 }
 
-export const Table: React.FC<Props> = ({rows, cols, onRowDelete, onRowEdit,noDataMeesage}) => {
+export const Table: React.FC<TableProps> = ({rows, cols, onRowDelete, onRowEdit, noDataMeesage = "No Data Found"}) => {
 
     const [tableRows, updateTableRows] = useState(rows);
 

ui/src/components/UI/style/FilterableTableAction.sass

@@ -0,0 +1,15 @@
+@import '../../../variables.module'
+
+.filterable-table
+    padding: 0 5%;
+
+.actions-header
+    
+    display: flex;
+    justify-content: space-between;
+
+    &__search-box
+        width : 313px;
+
+    &__action-button
+        height: 100%

ui/src/components/UserSettings/UserSettings.sass

@@ -0,0 +1,2 @@
+@import '../../../variables.module'
+

ui/src/components/UserSettings/UserSettings.tsx

@@ -0,0 +1,53 @@
+import "./UserSettings"
+import {useCommonStyles} from "../../helpers/commonStyle";
+import {ColsType, FilterableTableAction} from "../UI/FilterableTableAction"
+import Api from "../../helpers/api"
+import { useEffect, useState } from "react";
+
+interface Props {
+
+}
+
+const api = Api.getInstance();
+
+export const UserSettings : React.FC<Props> = ({}) => {
+
+    const [usersRows, setUserRows] = useState([]);
+    const cols : ColsType[] = [{field : "userName",header:"User"},{field : "role",header:"Role"}, {field : "role",header:"Role"}]
+
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const users = await api.getUsers() 
+                setUserRows(usersRows)                  
+            } catch (e) {
+                console.error(e);
+            }
+        })();
+    },[])
+
+    const filterFuncFactory = (searchQuery: string) => {
+        return (row) => {
+            return row.userName.toLowercase().includes(searchQuery.toLowerCase()) > -1
+        }
+    }
+
+    const searchConfig = { searchPlaceholder: "Search User",filterRows: filterFuncFactory}
+    
+    const onRowDelete = (row) => {
+        const filterFunc = filterFuncFactory(row.userName)
+        const newUserList = usersRows.filter(filterFunc)
+        setUserRows(newUserList)
+    }
+
+    const onRowEdit = (row) => {
+
+    }
+
+    const buttonConfig = {onClick: () => {}, text:"Add User"}
+    return (<>
+        <FilterableTableAction onRowEdit={onRowEdit} onRowDelete={onRowDelete} searchConfig={searchConfig} buttonConfig={buttonConfig} rows={usersRows} cols={cols}>
+        </FilterableTableAction>
+    </>);
+}

ui/src/helpers/api.js

@@ -48,6 +48,11 @@ export default class Api {
         return response.data;
     }
 
+    getUsers = async(filter = "") =>{
+        const response = await this.client.get(`/user/listUsers?usernameFilter=${filter}`);
+        return response.data;
+    }
+
     analyzeStatus = async () => {
         const response = await this.client.get("/status/analyze");
         return response.data;