clean-up config and change from angular template rules with angularpa…

…rser to html parser with html rules

frontend/eslint.config.mjs

@@ -4,6 +4,7 @@ import unusedImports from 'eslint-plugin-unused-imports'
 import stylistic from '@stylistic/eslint-plugin'
 import html from '@html-eslint/eslint-plugin'
 import angular from 'angular-eslint'
+import htmlParser from '@html-eslint/parser'
 
 export default tsEslint.config(
   {
@@ -52,43 +53,41 @@ export default tsEslint.config(
     },
     rules: {
       ...stylistic.configs['all-flat'].rules,
+      //eslint rules
       'unused-imports/no-unused-imports': 'error',
-
-      // ToDo: Disable rules so eslint passes, fix in followup ticket
-      '@typescript-eslint/no-unused-vars': [
+      'no-undef': 'error',
+      'prefer-rest-params': 'error',
+      //Typescript eslint rules
+      '@typescript-eslint/ban-ts-comment': 'error',
+      '@typescript-eslint/no-unused-expressions': [
         'error',
         {
-          args: 'none',
+          allowTernary: true,
         },
       ],
-      '@typescript-eslint/ban-ts-comment': 'error',
-      '@typescript-eslint/no-unused-expressions': [
+
+      '@typescript-eslint/no-unused-vars': [
         'error',
         {
-          allowTernary: true,
+          args: 'none',
         },
       ],
-      'no-undef': 'error',
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-namespace': [
         'error',
         {
           allowDeclarations: true,
         },
       ],
-      'prefer-rest-params': 'error',
       '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions', 'constructors'] }],
-      '@angular-eslint/no-empty-lifecycle-method': 'error',
-      '@angular-eslint/component-class-suffix': 'error',
       '@typescript-eslint/no-non-null-asserted-optional-chain': 'error',
       '@typescript-eslint/no-non-null-assertion': 'error',
-      '@stylistic/no-extra-parens': 'error',
       '@typescript-eslint/no-confusing-non-null-assertion': 'error',
-      //Actual formatting rules
+
+      //Stylistic eslint rules
+      '@stylistic/no-extra-parens': 'error',
       '@stylistic/function-call-argument-newline': ['error', 'never'],
       '@stylistic/quotes': ['error', 'double'],
-      // This rule makes no sense
-      '@stylistic/lines-around-comment': 'off',
       '@stylistic/padded-blocks': ['error', 'never'],
       '@stylistic/dot-location': ['error', 'property'],
       '@stylistic/newline-per-chained-call': ['error', { ignoreChainWithDepth: 1 }],
@@ -148,22 +147,15 @@ export default tsEslint.config(
     // recommended configuration included in the plugin
     ...html.configs['flat/recommended'],
     languageOptions: {
-      // Choose one parser. For Angular templates, usually angular.templateParser is needed.
-      parser: angular.templateParser,
+      parser: htmlParser,
     },
     rules: {
-      // Combine all sets of rules
-      ...html.configs.recommended.rules,
       ...html.configs['flat/recommended'].rules,
-      //Angular template eslint rules
-      '@angular-eslint/template/eqeqeq': 'error',
-      '@angular-eslint/template/banana-in-box': 'error',
-      '@angular-eslint/template/no-negated-async': 'error',
       //Html eslint rules
-      '@html-eslint/require-img-alt': 'error',
+      '@html-eslint/require-img-alt': 'off',
       '@html-eslint/indent': ['error', 2],
       '@html-eslint/require-closing-tags': ['error', { selfClosing: 'always' }],
-      //For Some reason the following rule does not work with the angular-parser
+      //Doesn't work with Angular 17+
       '@html-eslint/element-newline': 'off',
     },
   {

frontend/src/app/components/checkin/check-in-form-ordinal/check-in-form-ordinal.component.html

@@ -12,7 +12,8 @@
         class="ordinal-zone"
       >
         <div class="radio-text-container d-flex align-items-center p-3 text-black">
-          <strong>Fail:&nbsp;</strong> Commit / Target / Stretch noch nicht erreicht
+          <strong>Fail:&nbsp;</strong>
+          Commit / Target / Stretch noch nicht erreicht
         </div>
       </mat-radio-button>
 
@@ -22,7 +23,10 @@
         class="ordinal-zone"
       >
         <div class="radio-text-container d-flex p-3">
-          <span class="text-black"><strong>Commit:&nbsp;</strong>{{ keyResult.commitZone }}</span>
+          <span class="text-black">
+            <strong>Commit:&nbsp;</strong>
+            {{ keyResult.commitZone }}
+          </span>
         </div>
       </mat-radio-button>
 
@@ -32,7 +36,10 @@
         class="ordinal-zone"
       >
         <div class="radio-text-container d-flex p-3 w-100">
-          <span class="text-black"><strong>Target:&nbsp;</strong>{{ keyResult.targetZone }}</span>
+          <span class="text-black">
+            <strong>Target:&nbsp;</strong>
+            {{ keyResult.targetZone }}
+          </span>
         </div>
       </mat-radio-button>
 
@@ -42,7 +49,10 @@
         class="ordinal-zone"
       >
         <div class="radio-text-container d-flex p-3">
-          <span class="text-black"><strong>Stretch:&nbsp;</strong>{{ keyResult.stretchZone }}</span>
+          <span class="text-black">
+            <strong>Stretch:&nbsp;</strong>
+            {{ keyResult.stretchZone }}
+          </span>
         </div>
       </mat-radio-button>
     </mat-radio-group>

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

@@ -120,7 +120,10 @@ <h3 class="mb-1">Action Plan</h3>
                 </div>
               </div>
               <div *ngIf="!action.isChecked">
-                <div class="action-list-item break-word ms-4"><span class="me-2">-</span> {{ action.action }}</div>
+                <div class="action-list-item break-word ms-4">
+                  <span class="me-2">-</span>
+                  {{ action.action }}
+                </div>
               </div>
             </div>
           </div>

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

@@ -19,7 +19,9 @@ <h2 class="title" [attr.data-testId]="'objective-title'">{{ objective.title }}</
 
       <section class="me-3">
         <h3 class="mb-1">Beschrieb</h3>
-        <div class="linebreak" *ngIf="objective.description === ''"><p>-</p></div>
+        <div class="linebreak" *ngIf="objective.description === ''">
+          <p>-</p>
+        </div>
         <div
           *ngIf="objective.description !== ''"
           [attr.data-testId]="'description'"