OZG-6311 OZG-6534 Add styling

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/collaboration-in-vorgang.component.html

@@ -4,6 +4,7 @@
       | hasLink: collaborationListLinkRel.CREATE_COLLABORATION_REQUEST
   "
 >
+  <ng-container *ngIf="!collaboration" data-test-id="collaboration-in-progres">
     <ng-template #anfrageErstellenButton>
       <ods-button
         variant="outline"
@@ -24,8 +25,17 @@
       ></alfa-collaboration-request-form>
     </ng-container>
   </ng-container>
+</ng-container>
 <ng-container *ngIf="collaboration">
   <div data-test-id="collaboration-request-result">
-    Result: {{ collaboration | json }} OrganisationsEinheit: {{ organisationsEinheit | json }}
+    <div class="flex items-center gap-3">
+      <ods-office-icon size="large" class="fill-text" />
+      <alfa-organisations-einheit
+        data-test-id="organisations-einheit-in-collaboration"
+        [organisationsEinheitResource]="organisationsEinheit"
+      ></alfa-organisations-einheit>
+    </div>
+    <h4 class="my-6 text-xl font-medium">{{ collaboration.titel }}</h4>
+    <p class="text-base">{{ collaboration.anfrage }}</p>
   </div>
 </ng-container>

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang/collaboration-in-vorgang.component.spec.ts

@@ -13,7 +13,7 @@ import {
   triggerEvent,
 } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ButtonComponent, CollaborationIconComponent } from '@ods/system';
+import { ButtonComponent, CollaborationIconComponent, OfficeIconComponent } from '@ods/system';
 import {
   createCollaboration,
   createCollaborationListResource,
@@ -21,6 +21,7 @@ import {
 import { getDataTestIdAttributeOf, getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
 import { CollaborationRequestFormComponent } from '../collaboration-request-form/collaboration-request-form.component';
+import { OrganisationsEinheitComponent } from '../collaboration-request-form/organisations-einheit-container/organisations-einheit/organisations-einheit.component';
 import { CollaborationInVorgangComponent } from './collaboration-in-vorgang.component';
 
 describe('CollaborationInVorgangComponent', () => {
@@ -30,6 +31,7 @@ describe('CollaborationInVorgangComponent', () => {
   const anfrageErstellenButton: string = getDataTestIdAttributeOf('anfrage-erstellen-button');
   const collaborationRequestForm: string = getDataTestIdOf('collaboration-request-form');
   const collaborationRequestResult: string = getDataTestIdOf('collaboration-request-result');
+  const collaborationInProgress: string = getDataTestIdOf('collaboration-in-progress');
 
   const collaborationListResource: CollaborationListResource = createCollaborationListResource();
 
@@ -41,6 +43,8 @@ describe('CollaborationInVorgangComponent', () => {
         MockComponent(ButtonComponent),
         MockComponent(CollaborationRequestFormComponent),
         MockComponent(CollaborationIconComponent),
+        MockComponent(OfficeIconComponent),
+        MockComponent(OrganisationsEinheitComponent),
       ],
     }).compileComponents();
 
@@ -164,6 +168,14 @@ describe('CollaborationInVorgangComponent', () => {
 
       existsAsHtmlElement(fixture, collaborationRequestResult);
     });
+
+    it('should not show collaboration in progress', () => {
+      component.collaboration = undefined;
+
+      fixture.detectChanges();
+
+      notExistsAsHtmlElement(fixture, collaborationRequestResult);
+    });
   });
 
   describe('set collaboration', () => {

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.html

@@ -2,7 +2,7 @@
   *ngIf="organisationsEinheitResource$ | async as organisationsEinheitResource; else searchButton"
 >
   <div class="flex items-center gap-3">
-    <ods-office-icon size="large" class="flex-none" />
+    <ods-office-icon size="large" class="fill-text" />
     <alfa-organisations-einheit
       data-test-id="organisations-einheit-in-collaboration"
       [organisationsEinheitResource]="organisationsEinheitResource"