pipeline and improvements

public/src/components/TablePlan.vue

@@ -2,9 +2,10 @@
 
 import {API} from "@/services/api";
 
-import {onMounted, reactive, ref} from "vue";
+import {onMounted, reactive, ref, toRaw} from "vue";
 import type {Gottesdienst, Mark, PlanModel, SimplifiedMinistrant} from "@/models/models";
 import Input from "@/components/Input.vue";
+import GroupView from "@/components/GroupView.vue";
 
 const props = defineProps<{
     gottesdienste: Gottesdienst[],
@@ -14,22 +15,13 @@ const props = defineProps<{
     edit: boolean,
     smallMode: boolean
 }>()
-const emit = defineEmits(["toggleMark", "added", "delete", "endEdit", "resetPassword"])
-
+const emit = defineEmits(["toggleMark", "added", "delete", "endEdit", "resetPassword", "deleteMinistrant", "createMinistrant", "editMinistrant"])
+const openEditUser = ref<number>(-1)
+const miniCopy = reactive<{ data?: SimplifiedMinistrant }>({})
 const data = reactive({
     godi: {}
 })
 
-onMounted(() => {
-    window.addEventListener("keypress", ev => {
-        if(ev.key == "Enter" && props.edit){
-            emit("added", data.godi, () => {
-                data.godi = {}
-            })
-        }
-    })
-})
-
 
 function getIconForMark(gid, mid) {
     const mark = getMark(gid, mid).value
@@ -45,7 +37,6 @@ function getIconForMark(gid, mid) {
     return ""
 }
 
-
 function getClassForMark(gid, mid) {
     const mark = getMark(gid, mid).value
     return {
@@ -74,7 +65,7 @@ function two(s) {
 
 function formatDay(time) {
     let date = new Date(time)
-    return two(date.getDate()) + "." + two(date.getMonth()) + "."
+    return two(date.getDate()) + "." + two(date.getMonth() + 1) + "."
 }
 
 function formatTime(time) {
@@ -112,82 +103,103 @@ function getMinistrantClasses(mini: SimplifiedMinistrant) {
         edit: props.editable.includes(mini.username)
     }
 }
+
+function toggleEditMinistrant(mini: SimplifiedMinistrant) {
+    console.log("Toggled", miniCopy.data, mini, props.ministranten, openEditUser)
+    if (openEditUser.value == mini.id) {
+        miniCopy.data = undefined
+        openEditUser.value = -1;
+    } else {
+        openEditUser.value = mini.id
+        miniCopy.data = toRaw(mini)
+    }
+
+}
 </script>
 
 <template>
 
-    <table>
+    <div class="container">
 
-        <thead>
+        <table>
 
-        <tr v-if="props.edit">
-            <th></th>
-            <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)">delete</i></th>
-            <th><i @click="$emit('endEdit')">close</i></th>
-        </tr>
+            <thead>
 
-        <tr>
-            <th></th>
-            <th v-for="godi in props.gottesdienste">{{ godi.name }}</th>
-            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.name"/></th>
-        </tr>
-        <tr class="bold">
-            <th>Datum</th>
-            <th v-for="godi in props.gottesdienste">{{ formatDay(godi.date) }}</th>
-            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.date" type="date"/></th>
-        </tr>
-        <tr>
-            <th>Uhrzeit</th>
-            <th v-for="godi in props.gottesdienste">{{ formatTime(godi.date) }}</th>
-            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.time" type="time"/></th>
-        </tr>
-        <tr class="bold">
-            <th>Anwesenheit</th>
-            <th v-for="godi in props.gottesdienste">{{ formatTime(godi.attendance) }}</th>
-            <th class="edit" v-if="props.edit"><Input v-model:value="data.godi.attendance" type="time"/></th>
-        </tr>
-        <tr>
-            <th>Wochentag</th>
-            <th v-for="godi in props.gottesdienste">{{ formatWeekday(godi.date) }}</th>
-            <th class="edit" v-if="props.edit"></th>
-        </tr>
+            <tr v-if="props.edit" class="no-print">
+                <th></th>
+                <th v-for="godi in props.gottesdienste"><i @click="$emit('delete', godi.id)">delete</i></th>
+            </tr>
 
-        </thead>
-        <tbody>
+            <tr>
+                <th></th>
+                <th v-for="godi in props.gottesdienste" class="name">{{ godi.name }}</th>
+            </tr>
+            <tr class="bold">
+                <th>Datum</th>
+                <th v-for="godi in props.gottesdienste">{{ formatDay(godi.date) }}</th>
+            </tr>
+            <tr>
+                <th>Uhrzeit</th>
+                <th v-for="godi in props.gottesdienste">{{ formatTime(godi.date) }}</th>
+            </tr>
+            <tr class="bold">
+                <th>Anwesenheit</th>
+                <th v-for="godi in props.gottesdienste">{{ formatTime(godi.attendance) }}</th>
+            </tr>
+            <tr>
+                <th>Wochentag</th>
+                <th v-for="godi in props.gottesdienste">{{ formatWeekday(godi.date) }}</th>
+            </tr>
 
-        <tr v-for="mini in props.ministranten" class="ministrant" :class="getMinistrantClasses(mini)">
-            <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"
-                :class="getClassForMark(godi.id, mini.id)"
-                @click="$emit('toggleMark', godi.id, mini.id)">
-                <i class="icon"> {{ getIconForMark(godi.id, mini.id) }} </i><br>
-                <span class="hint">{{ getHintForMark(godi.id, mini.id) }}</span>
-            </td>
-            <td class="edit" v-if="props.edit"></td>
+            </thead>
+            <tbody>
 
+            <tr v-for="mini in props.ministranten" class="ministrant" :class="getMinistrantClasses(mini)">
+                <td class="name">
+                    <div class="center">
+                        <i class="edit-button no-print"
+                           v-if="edit"
+                           style="margin-right: 10px; font-size: 18px"
+                           @click="$emit('editMinistrant', mini.id)">edit</i>
+                        {{ mini.firstname }}
+                        {{ mini.lastname }}
+                    </div>
+                </td>
+                <td
+                    v-for="godi in props.gottesdienste"
+                    class="mark"
+                    :class="getClassForMark(godi.id, mini.id)"
+                    @click="$emit('toggleMark', godi.id, mini.id)">
+                    <i class="icon"> {{ getIconForMark(godi.id, mini.id) }} </i><br>
+                    <span class="hint no-print">{{ getHintForMark(godi.id, mini.id) }}</span>
+                </td>
+            </tr>
 
-        </tr>
+            </tbody>
+        </table>
 
-        </tbody>
-    </table>
+    </div>
 </template>
 
 <style scoped lang="less">
 
+
 table {
     border-spacing: 0;
+    min-width: 100%;
 }
 
-tr{
-    th{
+tr {
+    th {
         font-weight: 400;
-        &.edit{
+
+        &.edit {
             text-align: start;
         }
+      padding: 10px;
     }
-    &.bold th{
+
+    &.bold th {
         font-weight: 700;
     }
 }
@@ -199,9 +211,10 @@ td {
 td:first-child, th:first-child {
     padding: 6px 30px 6px 12px;
     text-align: left;
+    min-width: 150px;
 }
 
-td:nth-child(2n), th:nth-child(2n){
+td:nth-child(2n), th:nth-child(2n) {
     background: #8ce081;
 }
 
@@ -222,19 +235,15 @@ td:nth-child(2n), th:nth-child(2n){
         margin: 2px;
     }
 
-    &.minus {
-        background: #fdd5d5;
-        color: #690b0b;
-
-        i {
+    @media not print {
+        &.minus {
+            background: #fdd5d5;
+            color: #690b0b;
         }
-    }
 
-    &.cross {
-        background: #d1fcd1;
-        color: #045b04;
-
-        i {
+        &.cross {
+            background: #d1fcd1;
+            color: #045b04;
         }
     }
 
@@ -253,34 +262,70 @@ td:nth-child(2n), th:nth-child(2n){
         //mix-blend-mode: difference;
     }
 
-
-    &:not(.showIcon){
+    &:not(.showIcon) {
         padding: 0 !important;
-        .hint, br{
+
+        .hint, br {
             display: none !important;
         }
     }
 }
 
+.ministrant {
+    .center {
+        display: flex;
+        align-items: center;
+
+        .edit-button {
+            cursor: pointer;
+            user-select: none;
+        }
+    }
+
+    .controls {
+        display: flex;
+        flex-direction: column;
+
+        &:not(.show) {
+            display: none;
+        }
+
+        padding: 20px 10px;
+
+        .input {
+            padding-bottom: 8px;
+        }
+    }
+}
+
 .ministrant.edit {
-    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
     z-index: 10;
     position: relative;
+
     td {
         padding-top: 10px;
         padding-bottom: 10px;
     }
 
-    .name{
+    .name {
         align-items: center;
         height: 100%;
-    }
 
-    .mark{
-        cursor: pointer;
-        &.neutral i {
+        i {
             opacity: 0.5;
         }
+    }
+
+    .mark {
+        cursor: pointer;
+
+        @media not print {
+            &.neutral i {
+                opacity: 0.5;
+            }
+        }
+
         .hint {
             display: inline-block;
         }