feat: #562 Show read only GUID field

Author: PaulRC-ioet

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

@@ -1,6 +1,17 @@
 <div class="container">
   <form style="width: 600px;" [formGroup]="customerForm" (ngSubmit)="onSubmit(customerForm.value)">
     <div class="form-group">
+      <div class="form-group">
+        <input 
+        type="text" 
+        class="form-control form-control-sm" 
+        id="customerId" 
+        value="{{customerId}}"
+        readonly 
+        disabled
+        *ngIf="this.customerToEdit"
+        />
+      </div>
       <input
         class="form-control form-control-sm"
         id="customerName"

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

@@ -27,6 +27,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
   @Output() closeCustomerComponent = new EventEmitter<boolean>();
   customerToEdit: Customer;
   editSubscription: Subscription;
+  customerId: string;
 
   constructor(private formBuilder: FormBuilder, private store: Store<CustomerState>) {
     this.customerForm = this.formBuilder.group({
@@ -68,6 +69,7 @@ export class CreateCustomerComponent implements OnInit, OnDestroy {
       this.store.dispatch(new LoadProjectTypes(customerData.id));
       this.store.dispatch(new LoadCustomerProjects(customerData.id));
       this.changeValueAreTabsActives.emit(true);
+      this.customerId = 'Customer ID: ' + customerData.id;
       this.customerForm.setValue({
         name: customerData.name,
         description: customerData.description,

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

@@ -1,4 +1,15 @@
 <form style="width: 600px;" [formGroup]="projectForm" (ngSubmit)="onSubmit(projectForm.value)">
+  <div class="form-group">
+    <input 
+      type="text" 
+      class="form-control form-control-sm" 
+      id="projectId" 
+      value="{{projectId}}" 
+      readonly 
+      disabled
+      *ngIf="this.projectToEdit"
+      />
+  </div>
   <div class="form-group">
     <input
       type="text"

src/app/modules/customer-management/components/projects/components/create-project/create-project.component.ts

@@ -20,6 +20,7 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
   projectToEdit: Project;
   projectsTypes: ProjectType[] = [];
   customerId: string;
+  projectId: string;
 
   projectTypesSubscription: Subscription;
   projectToEditSubscription: Subscription;
@@ -87,6 +88,7 @@ export class CreateProjectComponent implements OnInit, OnDestroy {
 
   setDataToUpdate(projectData: Project) {
     if (projectData) {
+      this.projectId = 'Project ID: ' + projectData.id;
       this.projectForm.setValue({
         name: projectData.name,
         description: projectData.description,