Feature/189 incidents (#201)

* Replace comment page with incident modal

* Incident can only be changed when present

* Add form with incident types radio buttons

* Save the selected incident type

* Remove comment component

* Replace comment with incident in labels

* Remove update comment service methods

* Preselect existing incident

* Make incidents deletable

* Adapt layout of reason/incident column

* Show incident designations on edit button

* Separate no incident option with line

* Rename output of presence control entry to changeIncident

* Align incident button with other elements and with bottom of image

* Add sepeerate incidents drop-down

* Refactor small issues

absenzenmanagement.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/dist" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.html

@@ -35,6 +35,14 @@
 </div>
 
 <div class="filters mt-2">
+  <div class="form-group">
+    <label>{{ 'edit-absences.header.confirmation-state' | translate }}</label>
+    <erz-select
+      [options]="absenceConfirmationStates$ | async"
+      [(value)]="filter.confirmationState"
+    ></erz-select>
+  </div>
+
   <div class="form-group">
     <label>{{ 'edit-absences.header.presence-type' | translate }}</label>
     <erz-select
@@ -44,10 +52,10 @@
   </div>
 
   <div class="form-group">
-    <label>{{ 'edit-absences.header.confirmation-state' | translate }}</label>
+    <label>{{ 'edit-absences.header.incident' | translate }}</label>
     <erz-select
-      [options]="absenceConfirmationStates$ | async"
-      [(value)]="filter.confirmationState"
+      [options]="incidentTypes$ | async"
+      [(value)]="filter.incidentType"
     ></erz-select>
   </div>
 

src/app/edit-absences/components/edit-absences-header/edit-absences-header.component.ts

@@ -15,7 +15,10 @@ import { map } from 'rxjs/operators';
 import { startOfDay } from 'date-fns';
 
 import { not } from 'src/app/shared/utils/filter';
-import { isComment } from 'src/app/presence-control/utils/presence-types';
+import {
+  isComment,
+  isIncident,
+} from 'src/app/presence-control/utils/presence-types';
 import { DateParserFormatter } from 'src/app/shared/services/date-parser-formatter';
 import { createPresenceTypesDropdownItems } from 'src/app/shared/utils/presence-types';
 import { EducationalEventsRestService } from '../../../shared/services/educational-events-rest.service';
@@ -46,14 +49,22 @@ export class EditAbsencesHeaderComponent implements OnInit {
     dateTo: null,
     presenceType: null,
     confirmationState: null,
+    incidentType: null,
   };
 
   @Output() filterChange = new EventEmitter<EditAbsencesFilter>();
 
   absenceConfirmationStates$ = this.state.absenceConfirmationStates$;
 
   presenceTypes$ = this.state.presenceTypes$.pipe(
-    map((presenceTypes) => presenceTypes.filter(not(isComment))),
+    map((presenceTypes) =>
+      presenceTypes.filter(not(isComment)).filter(not(isIncident))
+    ),
+    map(createPresenceTypesDropdownItems)
+  );
+
+  incidentTypes$ = this.state.presenceTypes$.pipe(
+    map((presenceTypes) => presenceTypes.filter(isIncident)),
     map(createPresenceTypesDropdownItems)
   );
 

src/app/edit-absences/components/edit-absences-list/edit-absences-list.component.html

@@ -77,9 +77,8 @@
                 {{ 'edit-absences.list.header.confirmation-state' | translate }}
               </th>
               <th>
-                {{ 'edit-absences.list.header.presence-type' | translate
-                }}<br />
-                {{ 'edit-absences.list.header.comment' | translate }}
+                {{ 'edit-absences.list.header.presence-type' | translate }} /
+                {{ 'edit-absences.list.header.incident' | translate }}
               </th>
               <th>{{ 'edit-absences.list.header.teacher' | translate }}</th>
             </tr>
@@ -151,16 +150,12 @@
               </td>
               <td
                 [attr.data-label]="
-                  'edit-absences.list.header.mobil-presence-type-comment'
+                  'edit-absences.list.header.mobil-presence-type-incident'
                     | translate
                 "
-                class="designation-comment"
+                class="designation-incident"
               >
-                <ng-container *ngIf="!entry.canChangePresenceType">{{
-                  entry.presenceType?.Designation
-                }}</ng-container
-                ><br />
-                <span class="comment">{{ entry.lessonPresence.Comment }}</span>
+                {{ entry.presenceType?.Designation }}
               </td>
               <td
                 [attr.data-label]="

src/app/edit-absences/components/edit-absences-list/edit-absences-list.component.scss

@@ -21,14 +21,10 @@
   color: $late-color;
 }
 
-.designation-comment {
+.designation-incident {
   max-width: 50ch;
 }
 
-.comment {
-  color: $gray-500;
-}
-
 .student {
   color: $body-color;
 }
@@ -42,7 +38,7 @@
     text-align: right;
   }
 
-  .designation-comment {
+  .designation-incident {
     max-width: initial;
   }
 }

src/app/edit-absences/components/edit-absences-list/edit-absences-list.component.ts

@@ -101,5 +101,6 @@ function createFilterFromParams(params: Params): EditAbsencesFilter {
     confirmationState: params.confirmationState
       ? Number(params.confirmationState)
       : null,
+    incidentType: params.incidentType ? Number(params.presenceType) : null,
   };
 }

src/app/edit-absences/services/edit-absences-state.service.ts

@@ -32,6 +32,7 @@ export interface EditAbsencesFilter {
   dateTo: Option<Date>;
   presenceType: Option<number>;
   confirmationState: Option<number>;
+  incidentType: Option<number>;
 }
 
 @Injectable()
@@ -90,6 +91,7 @@ export class EditAbsencesStateService
       dateTo: null,
       presenceType: null,
       confirmationState: null,
+      incidentType: null,
     };
   }
 
@@ -101,7 +103,8 @@ export class EditAbsencesStateService
         filterValue.dateFrom ||
         filterValue.dateTo ||
         filterValue.presenceType ||
-        filterValue.confirmationState
+        filterValue.confirmationState ||
+        filterValue.incidentType
     );
   }
 

src/app/open-absences/components/open-absences-detail/open-absences-detail.component.html

@@ -72,8 +72,5 @@
         absence.LessonDateTimeTo | date: 'HH:mm'
       }}, {{ absence.TeacherInformation }}
     </div>
-    <div class="comment" *ngIf="absence.Comment">
-      {{ absence.Comment }}
-    </div>
   </div>
 </div>

src/app/open-absences/components/open-absences-detail/open-absences-detail.component.scss

@@ -41,9 +41,7 @@
   padding: $spacer;
   border-bottom: 1px solid $gray-200;
   display: grid;
-  grid-template-areas:
-    "checkbox lesson-class time teacher"
-    "checkbox comment comment comment";
+  grid-template-areas: "checkbox lesson-class time teacher";
   grid-template-columns: min-content 3fr 1fr 1fr;
 }
 
@@ -88,11 +86,6 @@
   display: none;
 }
 
-.comment {
-  color: $gray-500;
-  grid-area: comment;
-}
-
 @media (max-width: 750px) {
   .content {
     padding-left: 0;
@@ -107,8 +100,7 @@
   .absence-entry {
     grid-template-areas:
       "checkbox lesson-class"
-      "checkbox time-teacher"
-      "checkbox comment";
+      "checkbox time-teacher";
     grid-template-columns: min-content 1fr;
   }