torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Implementiert die Bearbeitung von Aktivitäten in DiaryView.vue. Fügt Eingabefelder und Schaltflächen zum Speichern oder Abbrechen von Änderungen hinzu. Aktualisiert das Styling für klickbare Elemente.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2025-08-28 12:04:33 +02:00
parent 455b2c94cd
commit 8fbdc68016
1 changed files with 51 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/views/DiaryView.vue
View File

@@ -103,8 +103,24 @@
<td>{{ item.startTime }}</td>
<td>
<span v-if="item.isTimeblock"><i>Zeitblock</i></span>
<span v-else>{{ item.predefinedActivity ? item.predefinedActivity.name :
item.activity }}</span>
<span v-else-if="editingActivityId === item.id">
<div style="display: flex; gap: 5px; align-items: center;">
<input
type="text"
:value="item.predefinedActivity ? item.predefinedActivity.name : item.activity"
@input="item.activity = $event.target.value"
@keyup.enter="saveActivityEdit(item)"
@keyup.esc="cancelActivityEdit"
ref="activityInput"
style="flex: 1;"
/>
<button @click="saveActivityEdit(item)" class="btn-primary" style="padding: 2px 8px; font-size: 12px;">✓</button>
<button @click="cancelActivityEdit" class="btn-secondary" style="padding: 2px 8px; font-size: 12px;">✗</button>
</div>
</span>
<span v-else @click="startActivityEdit(item)" class="clickable">
{{ item.predefinedActivity ? item.predefinedActivity.name : item.activity }}
</span>
</td>
<td>{{ item.groupActivity ? item.groupActivity.name : '' }}</td>
<td>
@@ -354,6 +370,7 @@ export default {
accident: '',
},
accidents: [],
editingActivityId: null, // ID der Aktivität, die gerade bearbeitet wird
};
},
watch: {
@@ -1118,6 +1135,31 @@ export default {
closeAccidentForm() {
this.showAccidentForm = false;
},
startActivityEdit(item) {
this.editingActivityId = item.id;
this.$nextTick(() => {
this.$refs.activityInput.focus();
});
},
async saveActivityEdit(item) {
try {
await apiClient.put(`/diary-date-activities/${this.currentClub}/${item.id}`, {
customActivityName: item.activity,
duration: item.duration,
durationText: item.durationText,
groupId: item.groupId,
});
this.editingActivityId = null;
} catch (error) {
alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
}
},
cancelActivityEdit() {
this.editingActivityId = null;
},
},
async mounted() {
await this.init();
@@ -1301,7 +1343,13 @@ input[type="number"] {
.clickable {
cursor: pointer;
color: #45a049;
color: var(--primary-color);
transition: color 0.2s ease;
}
.clickable:hover {
color: var(--primary-hover);
text-decoration: underline;
}
.highlighted {