Refactor group creation and assignment logic in DiaryView. Update group creation to allow specifying the number of groups, enhance participant assignment with group selection, and improve UI elements for better user experience.
This commit is contained in:
Torsten Schulz (local)
@@ -69,19 +69,15 @@
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="showGeneralData">
|
||||
<h4>Neue Gruppe erstellen</h4>
|
||||
<h4>Gruppen erstellen</h4>
|
||||
<div class="groups">
|
||||
<div>
|
||||
<label for="groupName">Gruppenname:</label>
|
||||
<input type="text" v-model="newGroupName" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="groupLead">Leiter:</label>
|
||||
<input type="text" v-model="newGroupLead" required />
|
||||
<label for="groupCount">Anzahl Gruppen:</label>
|
||||
<input type="number" id="groupCount" v-model="newGroupCount" min="2" max="10" required />
|
||||
</div>
|
||||
<div>
|
||||
<label> </label>
|
||||
<button type="submit" @click="addGroup">Gruppe hinzufügen</button>
|
||||
<button type="submit" @click="createGroups">Gruppen erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -153,8 +149,22 @@
|
||||
<button @click="removePlanItem(item.id)" class="trash-btn">🗑️</button>
|
||||
<div v-if="activityMembersOpenId === item.id" class="dropdown"
|
||||
style="max-height: 12em; padding: 0.25rem;">
|
||||
<div style="margin-bottom: 0.25rem; font-weight: 600;">Teilnehmer
|
||||
zuordnen</div>
|
||||
<div style="margin-bottom: 0.25rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem;">
|
||||
<span>Teilnehmer zuordnen</span>
|
||||
<button @click="assignAllMembersToActivity(item.id)"
|
||||
style="font-size: 10px; padding: 1px 4px; background: #28a745; color: white; border: none; border-radius: 2px;">
|
||||
Alle
|
||||
</button>
|
||||
<select v-if="groups.length > 0"
|
||||
@change="assignGroupToActivity(item.id, $event.target.value)"
|
||||
style="font-size: 10px; width: 80px;">
|
||||
<option value="">Gruppe...</option>
|
||||
<option v-for="group in groups" :key="group.id" :value="group.id">
|
||||
{{ group.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div style="max-height: 9.5em; overflow-y: auto;">
|
||||
<label v-for="m in presentMembers" :key="m.id"
|
||||
style="display:flex; align-items:center; gap:0.5rem;">
|
||||
@@ -277,6 +287,16 @@
|
||||
member ? member.lastName : ''
|
||||
}}</span>
|
||||
</label>
|
||||
<!-- Gruppenzuordnung für aktive Teilnehmer -->
|
||||
<select v-if="isParticipant(member.id) && groups.length > 0"
|
||||
:value="getMemberGroup(member.id)"
|
||||
@change="updateMemberGroup(member.id, $event.target.value)"
|
||||
style="margin-left: 10px; font-size: 8px; width: 5em;">
|
||||
<option value="">-</option>
|
||||
<option v-for="group in groups" :key="group.id" :value="group.id">
|
||||
{{ group.name }}
|
||||
</option>
|
||||
</select>
|
||||
<span v-if="false" @click="openNotesModal(member)" class="clickable">📝</span>
|
||||
<span @click="showPic(member)" class="img-icon" v-if="member.hasImage">🖼</span>
|
||||
<span class="pointer" @click="openTagInfos(member)">ℹ️</span>
|
||||
@@ -457,8 +477,7 @@ export default {
|
||||
renderModalData: null,
|
||||
groups: [],
|
||||
currentTimeBlockId: null,
|
||||
newGroupName: '',
|
||||
newGroupLead: '',
|
||||
newGroupCount: 2,
|
||||
addtype: 'activity',
|
||||
addNewItem: false,
|
||||
addNewGroupActivity: false,
|
||||
@@ -497,6 +516,8 @@ export default {
|
||||
// Aktivitäts-Teilnehmer
|
||||
activityMembersOpenId: null,
|
||||
activityMembersMap: {}, // key: activityId, value: Set(participantIds)
|
||||
activityGroupsMap: {}, // key: activityId, value: groupId
|
||||
memberGroupsMap: {}, // key: memberId, value: groupId
|
||||
// Schnell hinzufügen Dialog
|
||||
showQuickAddDialog: false,
|
||||
newMember: {
|
||||
@@ -1335,18 +1356,23 @@ export default {
|
||||
currentTime = this.addDurationToTime(currentTime, item.duration);
|
||||
});
|
||||
},
|
||||
async addGroup() {
|
||||
async createGroups() {
|
||||
try {
|
||||
const form = {
|
||||
clubid: this.currentClub,
|
||||
dateid: this.date.id,
|
||||
name: this.newGroupName,
|
||||
lead: this.newGroupLead,
|
||||
// Erstelle die gewünschte Anzahl Gruppen mit Namen 1 bis X
|
||||
for (let i = 1; i <= this.newGroupCount; i++) {
|
||||
const form = {
|
||||
clubid: this.currentClub,
|
||||
dateid: this.date.id,
|
||||
name: i.toString(),
|
||||
lead: '', // Leiter wird leer gelassen
|
||||
}
|
||||
await apiClient.post('/group', form);
|
||||
}
|
||||
await apiClient.post('/group', form);
|
||||
await this.loadGroups();
|
||||
this.showInfo('Erfolg', `${this.newGroupCount} Gruppen wurden erfolgreich erstellt!`, '', 'success');
|
||||
} catch (error) {
|
||||
|
||||
console.error('Fehler beim Erstellen der Gruppen:', error);
|
||||
this.showInfo('Fehler', 'Fehler beim Erstellen der Gruppen', '', 'error');
|
||||
}
|
||||
},
|
||||
parentIsTimeblock() {
|
||||
@@ -1709,6 +1735,88 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
// Gruppenzuordnung für Aktivitäten
|
||||
hasActivityMembers(activityId) {
|
||||
const setIds = this.activityMembersMap[activityId];
|
||||
return setIds && setIds.size > 0;
|
||||
},
|
||||
|
||||
getActivityGroup(activityId) {
|
||||
return this.activityGroupsMap[activityId] || '';
|
||||
},
|
||||
|
||||
async updateActivityGroup(activityId, groupId) {
|
||||
try {
|
||||
// Hier würde normalerweise ein API-Call gemacht werden
|
||||
// Für jetzt speichern wir es nur lokal
|
||||
this.activityGroupsMap[activityId] = groupId || '';
|
||||
|
||||
// TODO: API-Call zum Speichern der Gruppenzuordnung
|
||||
// await apiClient.put(`/diary-date-activities/${activityId}/group`, { groupId });
|
||||
|
||||
this.showInfo('Erfolg', 'Gruppenzuordnung aktualisiert', '', 'success');
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Aktualisieren der Gruppenzuordnung:', error);
|
||||
this.showInfo('Fehler', 'Fehler beim Aktualisieren der Gruppenzuordnung', '', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// Bulk-Zuordnungen für Aktivitäten
|
||||
async assignAllMembersToActivity(activityId) {
|
||||
try {
|
||||
// Alle anwesenden Mitglieder zur Aktivität hinzufügen
|
||||
for (const member of this.presentMembers) {
|
||||
if (!this.isAssignedToActivity(activityId, member.id)) {
|
||||
await this.toggleMemberForActivity(activityId, member.id, true);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Zuordnen aller Teilnehmer:', error);
|
||||
this.showInfo('Fehler', 'Fehler beim Zuordnen aller Teilnehmer', '', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
async assignGroupToActivity(activityId, groupId) {
|
||||
if (!groupId) return; // Leere Auswahl ignorieren
|
||||
|
||||
try {
|
||||
// Alle Mitglieder der gewählten Gruppe zur Aktivität hinzufügen
|
||||
const groupMembers = this.presentMembers.filter(member =>
|
||||
this.getMemberGroup(member.id) === groupId
|
||||
);
|
||||
|
||||
for (const member of groupMembers) {
|
||||
if (!this.isAssignedToActivity(activityId, member.id)) {
|
||||
await this.toggleMemberForActivity(activityId, member.id, true);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Zuordnen der Gruppe:', error);
|
||||
this.showInfo('Fehler', 'Fehler beim Zuordnen der Gruppe', '', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// Gruppenzuordnung für Teilnehmer
|
||||
getMemberGroup(memberId) {
|
||||
return this.memberGroupsMap[memberId] || '';
|
||||
},
|
||||
|
||||
async updateMemberGroup(memberId, groupId) {
|
||||
try {
|
||||
// Hier würde normalerweise ein API-Call gemacht werden
|
||||
// Für jetzt speichern wir es nur lokal
|
||||
this.memberGroupsMap[memberId] = groupId || '';
|
||||
|
||||
// TODO: API-Call zum Speichern der Teilnehmer-Gruppenzuordnung
|
||||
// await apiClient.put(`/participants/${this.date.id}/${memberId}/group`, { groupId });
|
||||
|
||||
console.log(`Teilnehmer ${memberId} wurde Gruppe ${groupId} zugewiesen`);
|
||||
} catch (error) {
|
||||
console.error('Fehler beim Aktualisieren der Teilnehmer-Gruppenzuordnung:', error);
|
||||
this.showInfo('Fehler', 'Fehler beim Aktualisieren der Teilnehmer-Gruppenzuordnung', '', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
// Schnell hinzufügen Dialog Methoden
|
||||
openQuickAddDialog() {
|
||||
this.showQuickAddDialog = true;
|
||||
|
||||
Reference in New Issue
Block a user