💚 linter

Author: FabianWilms

personalization-webcomponents/src/ChecklistDetail.ce.vue

@@ -61,6 +61,7 @@
 
 <script setup lang="ts">
 import type Checklist from "@/api/persservice/Checklist.ts";
+import type ChecklistItem from "@/api/persservice/ChecklistItem.ts";
 import type AuthorizationEventDetails from "@/types/AuthorizationEventDetails.ts";
 
 import { MucBanner } from "@muenchen/muc-patternlab-vue";
@@ -74,7 +75,6 @@ import ChecklistList from "@/components/ChecklistList.vue";
 import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
 import { useDBSLoginWebcomponentPlugin } from "@/composables/DBSLoginWebcomponentPlugin.ts";
 import { QUERY_PARAM_CHECKLIST_ID, setAccessToken } from "@/util/Constants.ts";
-import type ChecklistItem from "@/api/persservice/ChecklistItem.ts";
 
 const checklist = ref<Checklist | null>(null);
 const loading = ref(true);
@@ -205,39 +205,39 @@ function onCheckedClosed(serviceID: string) {
  *
  * @param evt Sort-Event which contains the old and new index of the checklist-item.
  */
-function onSortOpen(evt: { oldIndex: number, newIndex: number }) {
-  let elementToSort = openCheckList.value[evt.oldIndex] as ChecklistItem;
-  let oldIndex = checklist.value?.checklistItems.findIndex(item => {return item.serviceID === elementToSort.serviceID}) as number;
-  if(oldIndex >= 0 && checklist.value) {
+function onSortOpen(evt: { oldIndex: number; newIndex: number }) {
+  const elementToSort = openCheckList.value[evt.oldIndex] as ChecklistItem;
+  const oldIndex = checklist.value?.checklistItems.findIndex((item) => {
+    return item.serviceID === elementToSort.serviceID;
+  }) as number;
+  if (oldIndex >= 0 && checklist.value) {
     loading.value = true;
 
     const newIndex = oldIndex + (evt.newIndex - evt.oldIndex);
-    const element = checklist.value.checklistItems[oldIndex];
+    const element = checklist.value.checklistItems[oldIndex] as ChecklistItem;
     checklist.value.checklistItems.splice(oldIndex, 1);
-    checklist.value.checklistItems.splice(newIndex, 0, element!)
+    checklist.value.checklistItems.splice(newIndex, 0, element);
 
     const service = new ChecklistService();
     service
-        .updateChecklist(checklist.value)
-        .then((resp) => {
-          if (resp.ok) {
-            resp.json().then((newChecklist) => {
-              checklist.value = newChecklist;
-            });
-          } else {
-            resp.text().then((errBody) => {
-              throw Error(errBody);
-            });
-          }
-        })
-        .catch((err) => {
-          console.debug(err);
-        })
-        .finally(() => (loading.value = false));
-
+      .updateChecklist(checklist.value)
+      .then((resp) => {
+        if (resp.ok) {
+          resp.json().then((newChecklist) => {
+            checklist.value = newChecklist;
+          });
+        } else {
+          resp.text().then((errBody) => {
+            throw Error(errBody);
+          });
+        }
+      })
+      .catch((err) => {
+        console.debug(err);
+      })
+      .finally(() => (loading.value = false));
   }
 }
-
 </script>
 
 <style>

personalization-webcomponents/src/api/persservice/ChecklistService.ts

@@ -1,6 +1,7 @@
-import { getAccessToken, getAPIBaseURL } from "@/util/Constants.ts";
 import type Checklist from "@/api/persservice/Checklist.ts";
 
+import { getAccessToken, getAPIBaseURL } from "@/util/Constants.ts";
+
 export default class ChecklistService {
   getChecklists(): Promise<Response> {
     //todo replace with openapi generated client when backend is finished
@@ -32,7 +33,10 @@ export default class ChecklistService {
 
   updateChecklist(newChecklist: Checklist): Promise<Response> {
     //todo replace with openapi generated client when backend is finished
-    const url = getAPIBaseURL() + "/clients/api/p13n-backend/checklist/" + newChecklist.id;
+    const url =
+      getAPIBaseURL() +
+      "/clients/api/p13n-backend/checklist/" +
+      newChecklist.id;
 
     return fetch(url, {
       method: "PUT",

personalization-webcomponents/src/components/ChecklistList.vue

@@ -19,7 +19,7 @@
           aria-roledescription="sortierbares Listenelement"
           :class="{
             muted: element.checked !== null,
-            'keyboard-dragging': draggedIndex === index
+            'keyboard-dragging': draggedIndex === index,
           }"
           :aria-grabbed="draggedIndex === index ? 'true' : 'false'"
           :aria-label="`${element.title}, Position ${index + 1} von ${checklistItems.length}`"
@@ -78,9 +78,9 @@
 <script lang="ts" setup>
 import type ChecklistItem from "@/api/persservice/ChecklistItem.ts";
 
-import {MucIcon} from "@muenchen/muc-patternlab-vue";
-import {Sortable} from "sortablejs-vue3";
-import {computed, onBeforeUnmount, onMounted, ref} from "vue";
+import { MucIcon } from "@muenchen/muc-patternlab-vue";
+import { Sortable } from "sortablejs-vue3";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 
 const props = withDefaults(
   defineProps<{
@@ -130,11 +130,11 @@ function closeDialog() {
   dialogVisible.value = false;
 }
 
-function onSortEnd(evt: { oldIndex: number, newIndex: number }) {
+function onSortEnd(evt: { oldIndex: number; newIndex: number }) {
   const oldIndex = evt.oldIndex;
   const newIndex = evt.newIndex;
-  if(oldIndex !== newIndex) {
-    emit('sort', {oldIndex, newIndex});
+  if (oldIndex !== newIndex) {
+    emit("sort", { oldIndex, newIndex });
   }
 }
 
@@ -153,16 +153,18 @@ function handleArrowKeyDown(event: KeyboardEvent) {
 
   const maxIndex = props.checklistItems.length - 1;
   const move = (direction: number) => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const newIndex = draggedIndex.value! + direction;
-    if (newIndex < 0 || newIndex > maxIndex) return;
+    if (draggedIndex.value) {
+       
+      const newIndex = draggedIndex.value + direction;
+      if (newIndex < 0 || newIndex > maxIndex) return;
 
-    event.preventDefault();
+      event.preventDefault();
 
-    emit("sort", {oldIndex: draggedIndex.value!, newIndex});
+      emit("sort", { oldIndex: draggedIndex.value, newIndex });
 
-    draggedIndex.value = newIndex;
-    focusedIndex.value = newIndex;
+      draggedIndex.value = newIndex;
+      focusedIndex.value = newIndex;
+    }
   };
 
   if (event.key === "ArrowUp") move(-1);