feat: #562 add IDs on the list

Author: PaulRC-ioet

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

@@ -2,14 +2,16 @@
   <table class="table table-sm table-bordered table-striped">
     <thead class="thead-blue">
       <tr class="d-flex">
-        <th class="col-9">Activity</th>
+        <th class="col-4">Activity ID</th>
+        <th class="col-5">Activity</th>
         <th class="col-3 text-center"></th>
       </tr>
     </thead>
     <app-loading-bar *ngIf="(isLoading$ | async)"></app-loading-bar>
     <tbody *ngIf="(isLoading$ | async) === false">
       <tr class="d-flex" *ngFor="let activity of activities">
-        <td class="col-sm-9">{{ activity.name }}</td>
+        <td class="col-sm-4">{{ activity.id }}</td>
+        <td class="col-sm-5">{{ activity.name }}</td>
         <td class="col-sm-3 text-center">
           <button
             type="button"

src/app/modules/customer-management/components/customer-info/components/create-customer/create-customer.html

@@ -1,6 +1,6 @@
 <div class="container">
   <form style="width: 600px;" [formGroup]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
-    <div class="form-group">
+      <div class="form-group">
       <input
         class="form-control form-control-sm"
         id="customerName"

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

@@ -7,14 +7,16 @@
 >
   <thead class="thead-blue">
     <tr class="d-flex">
-      <th class="col-9">Name</th>
+      <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-9">{{ customer.name }}</td>
+      <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)"

src/app/modules/customer-management/components/projects-type/components/project-type-list/project-type-list.component.html

@@ -2,13 +2,15 @@
   <table class="table table-sm table-bordered table-striped">
     <thead class="thead-blue">
       <tr class="d-flex">
-        <th class="col-9">Project type</th>
+        <th class="col-4">Project Type ID</th>
+        <th class="col-5">Project type</th>
         <th class="col-3 text-center"></th>
       </tr>
     </thead>
     <tbody>
       <tr class="d-flex" *ngFor="let projectType of projectTypes">
-        <td class="col-sm-9">{{ projectType.name }}</td>
+        <td class="col-sm-4">{{ projectType.id }}</td>
+        <td class="col-sm-5">{{ projectType.name }}</td>
         <td class="col-sm-3 text-center">
           <button type="button" class="btn btn-sm btn-primary" (click)="updateProjectType(projectType.id)">
             <i class="fa fa-pencil fa-xs"></i>

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

@@ -2,13 +2,15 @@
   <table class="table table-sm table-bordered table-striped">
     <thead class="thead-blue">
       <tr class="d-flex">
-        <th class="col-9">Project</th>
+        <th class="col-4">Project ID</th>
+        <th class="col-5">Project</th>
         <th class="col-3 text-center"></th>
       </tr>
     </thead>
     <tbody>
       <tr class="d-flex" *ngFor="let project of projects">
-        <td class="col-sm-9">{{ project.name }}</td>
+        <td class="col-sm-4">{{ project.id }}</td>
+        <td class="col-sm-5">{{ project.name }}</td>
         <td class="col-sm-3 text-center">
           <button type="button" class="btn btn-sm btn-primary" (click)="updateProject(project)">
             <i class="fa fa-pencil fa-xs"></i>