save changed marks

public/src/components/TablePlan.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import {API} from "@/views/api";
+import {API} from "@/services/api";
 
 import {onMounted, reactive, ref} from "vue";
 import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
@@ -10,10 +10,11 @@ const props = defineProps<{
     gottesdienste: Gottesdienst[],
     ministranten: SimplifiedMinistrant[]
     marks: Mark[],
-    editable: number[]
-    edit: boolean
+    editable: string[]
+    edit: boolean,
+    smallMode: boolean
 }>()
-const emit = defineEmits(["toggleMark", "added", "delete", "endEdit"])
+const emit = defineEmits(["toggleMark", "added", "delete", "endEdit", "resetPassword"])
 
 const data = reactive({
     godi: {}
@@ -47,15 +48,12 @@ function getIconForMark(gid, mid) {
 
 function getClassForMark(gid, mid) {
     const mark = getMark(gid, mid).value
-    switch (mark) {
-        case -1:
-            return "minus";
-        case 0:
-            return "neutral";
-        case 1:
-            return "cross"
+    return {
+        minus: mark == -1,
+        neutral: mark == 0,
+        cross: mark == 1,
+        showIcon: !props.smallMode
     }
-    return ""
 }
 
 function getHintForMark(gid, mid) {
@@ -111,7 +109,7 @@ function getMark(gid, mid) {
 
 function getMinistrantClasses(mini: SimplifiedMinistrant) {
     return {
-        edit: props.editable.includes(mini.id)
+        edit: props.editable.includes(mini.username)
     }
 }
 </script>
@@ -158,7 +156,7 @@ function getMinistrantClasses(mini: SimplifiedMinistrant) {
         <tbody>
 
         <tr v-for="mini in props.ministranten" class="ministrant" :class="getMinistrantClasses(mini)">
-            <td class="name">{{ mini.id }} {{ mini.firstname }} {{ mini.lastname }}</td>
+            <td class="name"><i v-if="edit" style="margin-right: 10px" @click="$emit('resetPassword', mini.username)">lock_reset</i>{{ mini.id }} {{ mini.firstname }} {{ mini.lastname }}</td>
             <td
                 v-for="godi in props.gottesdienste"
                 class="mark"
@@ -199,7 +197,7 @@ td {
 }
 
 td:first-child, th:first-child {
-    padding: 6px 60px 6px 12px;
+    padding: 6px 30px 6px 12px;
     text-align: left;
 }
 
@@ -216,6 +214,7 @@ td:nth-child(2n), th:nth-child(2n){
     height: 20px;
     user-select: none;
 
+
     i {
         border-radius: 100%;
         padding: 1px;
@@ -253,6 +252,14 @@ td:nth-child(2n), th:nth-child(2n){
         font-size: 14px;
         //mix-blend-mode: difference;
     }
+
+
+    &:not(.showIcon){
+        padding: 0 !important;
+        .hint, br{
+            display: none !important;
+        }
+    }
 }
 
 .ministrant.edit {
@@ -264,6 +271,11 @@ td:nth-child(2n), th:nth-child(2n){
         padding-bottom: 10px;
     }
 
+    .name{
+        align-items: center;
+        height: 100%;
+    }
+
     .mark{
         cursor: pointer;
         &.neutral i {