Merge pull request #46 from sourcefuse/saas-ui-10

fix(arc-saas): adding hyperlink and filters

Author: a-ganguly

projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.scss

@@ -1 +1,6 @@
 @use '../../styles/grid-styles.scss' as *;
+
+.ag-theme-quartz {
+    width: 100%;
+    height: 400;
+  }

projects/saas-ui/src/app/main/components/onboarding-tenant-list/onboarding-tenant-list.component.ts

@@ -8,6 +8,7 @@ import {TenantFacadeService} from '../../../shared/services/tenant-list-facade.s
 import {Tenant} from '../../../shared/models';
 import {BackendFilter} from '@project-lib/core/api';
 import {TenantStatus} from '../../../shared/enum/tenant-status.enum';
+import {environment} from 'projects/saas-ui/src/environment';
 
 @Component({
   selector: 'app-onboarding-tenant-list',
@@ -18,11 +19,51 @@ export class OnboardingTenantListComponent
   extends RouteComponentBaseDirective
   implements OnInit
 {
+  defaultColDef: ColDef = {
+    flex: 1,
+    minWidth: 150,
+    filter: true,
+    floatingFilter: true,
+    resizable: true,
+  };
+
   colDefs: ColDef[] = [
-    {field: 'name', headerName: 'Company Name', width: 300, minWidth: 20},
-    {field: 'domains', width: 300, minWidth: 20},
-    {field: 'address', width: 400, minWidth: 20},
-    {field: 'status', width: 300, minWidth: 20},
+    {
+      field: 'name',
+      headerName: 'Company Name',
+      width: 300,
+      minWidth: 20,
+      filter: 'agTextColumnFilter',
+      floatingFilter: true,
+      cellRenderer: function (params) {
+        console.log(params);
+        console.log(params.data.key);
+        return `<a href="${params.data.key}.${environment.baseApiUrl}" target="_blank" class="company-link">
+        ${params.value}
+        </a>`;
+      },
+    },
+    {
+      field: 'domains',
+      width: 300,
+      minWidth: 20,
+      filter: 'agTextColumnFilter',
+      floatingFilter: true,
+    },
+    {
+      field: 'address',
+      width: 400,
+      minWidth: 20,
+      filter: 'agTextColumnFilter',
+      floatingFilter: true,
+    },
+    {
+      field: 'status',
+      width: 300,
+      minWidth: 20,
+      filter: 'agTextColumnFilter',
+      floatingFilter: true,
+    },
   ];
 
   rowData = [];
@@ -31,6 +72,7 @@ export class OnboardingTenantListComponent
   filter: BackendFilter<Tenant> = {
     include: [{relation: 'address'}],
   };
+  variable: any;
   constructor(
     protected override readonly location: Location,
     protected override readonly route: ActivatedRoute,
@@ -49,9 +91,11 @@ export class OnboardingTenantListComponent
       .pipe(takeUntil(this._destroy$))
       .subscribe(res => {
         this.rowData = res.map(item => {
+          this.variable = item.key;
           const addressString = `${item.address.city}, ${item.address.state}, ${item.address.zip}, ${item.address.country}`;
           return {
             name: item.name,
+            key: item.key,
             domains: item.domains.join(', '),
             address: addressString,
             status: TenantStatus[item.status],

projects/saas-ui/src/app/main/main.component.html

@@ -37,7 +37,7 @@
     <nb-menu [items]="menu"> </nb-menu>
   </nb-sidebar>
 
-  <nb-layout-column>
+  <nb-layout-column class="column-wrapper">
     <router-outlet class="main-router"></router-outlet>
   </nb-layout-column>
 </nb-layout>

projects/saas-ui/src/app/main/main.component.scss

@@ -13,6 +13,9 @@
     width: 100%;
   }
 
+  .column-wrapper{
+    height:calc(100% - 200px);
+  }
   .logo-container {
     display: flex;
     align-items: center;

projects/saas-ui/src/app/on-boarding/components/add-lead/add-lead.component.scss

@@ -17,8 +17,6 @@
   }
 }
 
-
-
 .input-box {
   .inputTags {
     input {
@@ -58,4 +56,3 @@
     margin-top: 0 !important;
   }
 }
-

projects/saas-ui/src/app/on-boarding/components/add-tenant/add-tenant.component.scss

@@ -60,7 +60,6 @@
 /* Media Queries for Responsiveness */
 
 @media (max-width: 575px) {
- 
   .plan-card-container .plan-card-wrapper {
     flex-direction: column;
   }
@@ -72,7 +71,6 @@
 
 /* Small devices */
 @media (min-width: 576px) and (max-width: 767px) {
- 
   .plan-card-container .plan-card-wrapper {
     flex-direction: column;
   }
@@ -84,7 +82,6 @@
 
 /* Medium devices  */
 @media (min-width: 768px) and (max-width: 991px) {
- 
   .plan-card-container .plan-card-wrapper {
     flex-direction: row;
   }
@@ -96,7 +93,6 @@
 
 /* Large devices */
 @media (min-width: 992px) {
-
   .plan-card-container .plan-card-wrapper {
     flex-direction: row;
   }

projects/saas-ui/src/app/on-boarding/components/email-verification/email-verification.component.scss

@@ -21,4 +21,4 @@ p {
 
 .verifiaction-wrapper {
   padding: 0 18px;
-}
+}