Feature/612 action plan on keyresult detail

frontend/cypress/e2e/checkIn.cy.ts

@@ -227,7 +227,7 @@ describe('OKR Check-in e2e tests', () => {
       cy.contains('STRETCH');
     });
 
-    it.only(`Should display confirm dialog when creating checkin on draft objective`, () => {
+    it(`Should display confirm dialog when creating checkin on draft objective`, () => {
       cy.getByTestId('add-objective').first().click();
       cy.fillOutObjective('draft objective title', 'safe-draft', '3');
       cy.visit('/?quarter=3');

frontend/src/app/keyresult-detail/keyresult-detail.component.html

@@ -112,15 +112,16 @@
 
         <div *ngIf="keyResult.actionList?.length != 0" class="mt-3 mb-4">
           <h2 class="sub-title-keyresult-detail fw-bold">Action Plan</h2>
-          <div *ngFor="let action of keyResult.actionList" class="ms-2">
-            <img
-              src="{{
-                action.isChecked ? '../assets/icons/checked_checkbox.svg' : '../assets/icons/empty_checkbox.svg'
-              }}"
-              alt="checkbox"
-              class="action-checkbox me-1"
-            />
-            {{ action.action }}
+          <div *ngFor="let action of keyResult.actionList">
+            <div *ngIf="action.isChecked">
+              <div class="action-list-checked-item break-word ms-4">
+                <img src="../assets/icons/checkmark.svg" alt="checkbox" class="action-checkbox me-1" />
+                <span [ngStyle]="{ 'text-decoration': 'line-through' }"> {{ action.action }}</span>
+              </div>
+            </div>
+            <div *ngIf="!action.isChecked">
+              <div class="action-list-item break-word ms-4"><span class="me-2">-</span> {{ action.action }}</div>
+            </div>
           </div>
         </div>
 

frontend/src/app/keyresult-detail/keyresult-detail.component.scss

@@ -82,3 +82,11 @@
     margin-bottom: 0.065rem !important;
   }
 }
+
+.action-list-item {
+  text-indent: -1.1rem;
+}
+
+.action-list-checked-item {
+  text-indent: -1.3rem;
+}

frontend/src/app/objective-detail/objective-detail.component.html

@@ -15,7 +15,10 @@
 
       <div class="me-3">
         <p class="sub-title-objective fw-bold mb-1">Beschrieb</p>
-        <p data-test-id="description" class="linebreak">{{ objective.description }}</p>
+        <div class="linebreak" *ngIf="objective.description === ''"><p>-</p></div>
+        <div *ngIf="objective.description !== ''" data-test-id="description" class="linebreak">
+          <p>{{ objective.description }}</p>
+        </div>
 
         <div
           class="d-flex align-items-center flex-row justify-content-start mt-4"

frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.html

@@ -13,8 +13,11 @@
       <div *ngIf="getActions()?.length != 0" class="input-style gap-1">
         <label class="text-black mb-1">Action Plan:</label>
         <span *ngFor="let action of getActions(); let i = index" class="d-flex flex-row">
-          <mat-checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
-          <span class="action-list-item w-100">
+          <mat-checkbox #checkbox (change)="changeIsChecked($event, i)" [checked]="action.isChecked"></mat-checkbox>
+          <span
+            class="action-list-item w-100 break-word"
+            [ngStyle]="{ 'text-decoration': checkbox.checked ? 'line-through' : 'none' }"
+          >
             {{ action.action }}
           </span>
         </span>

frontend/src/app/shared/dialog/checkin/check-in-form/check-in-form.component.scss

@@ -2,7 +2,8 @@
 
 .action-list-item {
   background-color: $show-element;
-  height: 40px;
+  height: auto;
+  min-height: 40px;
   padding: 10px;
   margin: auto;
   color: black;

frontend/src/style/styles.scss

@@ -268,3 +268,7 @@ mat-form-field.quarter-filter .mat-mdc-text-field-wrapper {
 .h-0 {
   height: 0;
 }
+
+.break-word {
+  word-break: break-all;
+}