tabella tenant (work in progress)

avionic-iot-aviot · Mar 26, 2020 · c659cb9 · c659cb9
1 parent c6fd79f
commit c659cb9
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 51 deletions.
diff --git a/frontend/public/css/global.css b/frontend/public/css/global.css
@@ -0,0 +1,8 @@
+.searchInput {
+    float: right !important;
+    margin-bottom: 15px !important;
+}
+
+.searchInput input {
+    border-radius: 20px !important;
+}
diff --git a/frontend/public/css/tenant.css b/frontend/public/css/tenant.css
@@ -0,0 +1,27 @@
+.addIcon {
+    width: 3% !important;
+    min-width: 48px;
+    border: 1px solid;
+    padding: 6px !important;
+}
+
+.buttonCell {
+    text-align: right !important;
+}
+
+/* i.circular.icon {
+    padding: 6px !important;
+} */
+
+.icon .addIcon{
+    background-color: white;
+}
+
+.customButtonRemove {
+    background-color: #0d4c86 !important;
+    border-radius: 20px !important;
+    border: none !important;
+    color: #f6a531 !important;
+}
+
+
diff --git a/frontend/src/components/app.tsx b/frontend/src/components/app.tsx
@@ -11,6 +11,7 @@ import Helpers from '../utils/helpers';
 import TopBar from "./toolbars/topBar";
 import { Button, Container, Segment, Card, Image } from 'semantic-ui-react';
 import TokenWatchdog from './tokenwatchdog';
+import './../../public/css/global.css';
 
 let container: any;
 class App extends Component<any, any> {
@@ -30,11 +31,11 @@ class App extends Component<any, any> {
   }
 
   componentWillMount() {
-
-  }
+}
   componentDidMount() { }
 
   componentWillUnmount() {
+
   }
 
   componentWillReceiveProps(nextProps: any) {
@@ -48,43 +49,43 @@ class App extends Component<any, any> {
 
     let accessibleRoutes: any[] = getRoutesGroupByName('public');
     return (
-      <> 
-      <ToastContainer />
-      <TokenWatchdog {...this.props} />        
-      <Container textAlign="center">
-        <Switch>
-          {_.map(accessibleRoutes, (route: any, idx: number) => {
-            if (route.showTopbar) {
-              return (
-                <Route
-                  key={idx}
-                  path={route.path}
-                  exact={route.exact}
-                  render={
-                    props => (
-                      <TopBar className="topBar" {...props}>
-                        <Card fluid centered className="cardStyle">
-                          <route.component {...props}></route.component>
-                        </Card>
-                      </TopBar>
-                    )
-                  }
-                />
-              );
-            } else {
-              return (
-                <Route
-                  key={idx}
-                  path={route.path}
-                  exact={route.exact}
-                  component={route.component}
-                />
-              );
-            }
-          })}
-          <Redirect from="*" to="/" />
-        </Switch>
-      </Container>       
+      <>
+        <ToastContainer />
+        <TokenWatchdog {...this.props} />
+        <Container textAlign="center">
+          <Switch>
+            {_.map(accessibleRoutes, (route: any, idx: number) => {
+              if (route.showTopbar) {
+                return (
+                  <Route
+                    key={idx}
+                    path={route.path}
+                    exact={route.exact}
+                    render={
+                      props => (
+                        <TopBar className="topBar" {...props}>
+                          <Card fluid centered className="cardStyle">
+                            <route.component {...props}></route.component>
+                          </Card>
+                        </TopBar>
+                      )
+                    }
+                  />
+                );
+              } else {
+                return (
+                  <Route
+                    key={idx}
+                    path={route.path}
+                    exact={route.exact}
+                    component={route.component}
+                  />
+                );
+              }
+            })}
+            <Redirect from="*" to="/" />
+          </Switch>
+        </Container>
       </>
     );
   }

diff --git a/frontend/src/components/tables/tenantTable.tsx b/frontend/src/components/tables/tenantTable.tsx
@@ -5,7 +5,7 @@ import DNSBaseComponent from '../dnsBaseComponent';
 import TenantApi from '../../api/tenantApi'
 import { history } from '../../main';
 import _ from 'lodash';
-// import tenantCSS from './../../../public/css/tenant.css';
+import './../../../public/css/tenant.css';
 import { Table, Button, Icon, Container, Pagination, Popup, Input, Loader, Label, Grid } from 'semantic-ui-react';
 
 import TenantForm from '../forms/tenantForm';
@@ -23,7 +23,7 @@ interface CompState {
     paginationOpts: IPaginationOpts;
     search: string;
     selectedTenant: ITenant;
-    tenants: any[];
+    tenants: ITenant[];
     updateTenant: boolean;
 }
 
@@ -48,8 +48,6 @@ class TenantTable extends DNSBaseComponent<CompProps | any, CompState> {
     }
 
     componentWillMount() {
-        // INJECT COMPONENT-SPECIFIC STYLES
-        // tenantCSS.use();
     }
     componentDidMount() {
         this.init();
@@ -61,7 +59,6 @@ class TenantTable extends DNSBaseComponent<CompProps | any, CompState> {
 
     componentWillUnmount() {
         this.cancelPromises();
-        // tenantCSS.unuse();
     }
 
     init() {
@@ -92,7 +89,7 @@ class TenantTable extends DNSBaseComponent<CompProps | any, CompState> {
     }
 
     async handleRemoveTenant(tenant: ITenant) {
-        // this.setState({ loading: true });
+        this.setState({ loading: true });
         _.defer(async () => {
             const removeTenantPromise = TenantApi.delete(tenant.id);
             this.registerPromise(removeTenantPromise);
@@ -122,13 +119,10 @@ class TenantTable extends DNSBaseComponent<CompProps | any, CompState> {
             this.registerPromise(getTenantsPromise);
             const tenantsResponse: any = await getTenantsPromise;
             const newSearch = search ? this.state.search : "";
-            console.log("tenantsResponse", tenantsResponse);
-            if (tenantsResponse && tenantsResponse.data && tenantsResponse.data.payload) {
-                console.log("tenantsResponse.data.payload", tenantsResponse.data.payload);
-
+            if (tenantsResponse && tenantsResponse.data && tenantsResponse.data.payload) {            
                 _.defer(() => {
                     this.setState({
-                        tenants: tenantsResponse.data.payload.tenants,
+                        tenants: tenantsResponse.data.payload,
                         paginationOpts: tenantsResponse.data.payload.options,
                         search: newSearch,
                         loading: false
@@ -233,7 +227,7 @@ class TenantTable extends DNSBaseComponent<CompProps | any, CompState> {
                                     </Table.Body>
                                     <Table.Footer fullWidth>
                                         <Table.Row>
-                                            <Table.HeaderCell colSpan='2'>
+                                            <Table.HeaderCell colSpan='1'>
                                                 {/* <Pagination
                                                     activePage={this.state.paginationOpts.activePage}
                                                     boundaryRange={1}