feat: Add Contract Offer Id Element back to the Catalog Browser Detai…

…l Dialog (#817)

CHANGELOG.md

@@ -20,6 +20,8 @@ the detailed section referring to by linking pull requests or issues.
 
 #### Patch
 
+- Data Offer details now display the contract ID for each contract offer
+
 ## [v4.1.3] - 2024-09-03
 
 ### Overview

src/app/component-library/catalog/contract-offer-mini-list/contract-offer-mini-list.component.html

@@ -21,6 +21,13 @@
     </mat-progress-spinner>
   </div>
 
+  <property-grid
+    class="mb-3"
+    [columns]="1"
+    [props]="
+      contractOfferIdGroup(contractOffer.contractOfferId)
+    "></property-grid>
+
   <property-grid
     [columns]="3"
     [props]="contractOffer.properties"></property-grid>

src/app/component-library/catalog/contract-offer-mini-list/contract-offer-mini-list.component.ts

@@ -8,6 +8,7 @@ import {
 import {DataOffer} from 'src/app/core/services/models/data-offer';
 import {ContractNegotiationService} from '../../../core/services/contract-negotiation.service';
 import {ContractOffer} from '../../../core/services/models/contract-offer';
+import {PropertyGridField} from '../../property-grid/property-grid/property-grid-field';
 
 @Component({
   selector: 'contract-offer-mini-list',
@@ -25,4 +26,15 @@ export class ContractOfferMiniListComponent {
   negotiateClick = new EventEmitter<ContractOffer>();
 
   constructor(public contractNegotiationService: ContractNegotiationService) {}
+
+  contractOfferIdGroup(id: string): PropertyGridField[] {
+    return [
+      {
+        icon: 'category',
+        label: 'Contract Offer Id',
+        text: this.data.contractOffers.find((it) => it.contractOfferId == id)
+          ?.contractOfferId,
+      },
+    ];
+  }
 }