fix: TT-139 Reduce the left margin on customers page (#631)

* fix: TT-139  Reduce the left margin on coutome page

* fix: TT-139-Reduce-the-left-margin-on-the-customer-page

* fix: TT-139 Resolved the cometaries on GitHub about identation and bootstrap

* fix: TT-139 delete line white

Co-authored-by: Sandro Castillo <[email protected]>

Author: jr-98

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -4,7 +4,7 @@
       <tr class="d-flex">
         <th class="col-4">Activity ID</th>
         <th class="col-5">Activity</th>
-        <th class="col-3 text-center"></th>
+        <th class="col-3 text-center">Options</th>
       </tr>
     </thead>
     <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -1,43 +1,45 @@
-<table
-  *ngIf="customers"
-  class="table table-sm table-bordered table-striped mb-0"
-  datatable
-  [dtTrigger]="dtTrigger"
-  [dtOptions]="dtOptions"
->
-  <thead class="thead-blue">
-    <tr class="d-flex">
-      <th class="col-4">Customer ID</th>
-      <th class="col-5">Name</th>
-      <th class="col-3 text-center">Options</th>
-    </tr>
-  </thead>
-  <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
-  <tbody *ngIf="((isLoading$ | async) === false)">
-    <tr class="d-flex" *ngFor="let customer of customers">
-      <td class="col-sm-4">{{ customer.id }}</td>
-      <td class="col-sm-5">{{ customer.name }}</td>
-      <td class="col-sm-3 text-center">
-        <button
-          (click)="editCustomer(customer.id)"
-          type="button"
-          class="btn btn-sm btn-primary"
-        >
-          <i class="fa fa-pencil fa-xs"></i>
-        </button>
-        <button
-          data-toggle="modal"
-          data-target="#deleteModal"
-          (click)="openModal(customer)"
-          type="button"
-          class="btn btn-sm btn-danger ml-2"
-        >
-          <i class="fa fa-trash-alt fa-xs"></i>
-        </button>
-      </td>
-    </tr>
-  </tbody>
-</table>
+<div class="table-responsive-sm">
+  <table
+    *ngIf="customers"
+    class="table table-bordered table-striped mb-0"
+    datatable
+    [dtTrigger]="dtTrigger"
+    [dtOptions]="dtOptions"
+  >
+    <thead class="thead-blue">
+      <tr class="d-flex">
+        <th class="col-5 text-center">Customer ID</th>
+        <th class="col-3 text-center">Name</th>
+        <th class="col-4 text-center">Options</th>
+      </tr>
+    </thead>
+    <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
+    <tbody *ngIf="((isLoading$ | async) === false)">
+      <tr class="d-flex" *ngFor="let customer of customers">
+        <td class="col-5 text-break">{{ customer.id }}</td>
+        <td class="col-3 text-break">{{ customer.name }}</td>
+        <td class="col-4 text-center">
+          <button
+            (click)="editCustomer(customer.id)"
+            type="button"
+            class="btn btn-sm btn-primary"
+          >
+            <i class="fa fa-pencil fa-xs"></i>
+          </button>
+          <button
+            data-toggle="modal"
+            data-target="#deleteModal"
+            (click)="openModal(customer)"
+            type="button"
+            class="btn btn-sm btn-danger ml-2"
+          >
+            <i class="fa fa-trash-alt fa-xs"></i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 
 <app-dialog
   *ngIf="showModal"

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.ts

@@ -40,16 +40,16 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
 
   ngOnInit(): void {
     this.dtOptions = {
-      scrollY: '290px',
+      scrollY: '325px',
       paging: false,
+      responsive: true,
     };
     this.loadCustomersSubscription = this.actionsSubject$
       .pipe(filter((action: any) => action.type === CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS))
       .subscribe((action) => {
         this.customers = action.payload;
         this.rerenderDataTable();
       });
-
     this.changeCustomerSubscription = this.actionsSubject$
       .pipe(
         filter(
@@ -109,4 +109,5 @@ export class CustomerListComponent implements OnInit, OnDestroy, AfterViewInit {
     this.message = `Are you sure you want to delete ${item.name}?`;
     this.showModal = true;
   }
+
 }

src/app/modules/customer-management/pages/customer.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container-fluid px-0 full-height">
   <div class="row">
     <div style="padding: 15px;">
       <button (click)="activateCustomerForm()" class="btn btn-primary">Add new customer</button>