120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
|
|
<template>
|
|
<div class="admin-chat-rooms">
|
|
<h2>{{ $t('admin.chatrooms.title') }}</h2>
|
|
<button class="create-btn" @click="openCreateDialog">{{ $t('admin.chatrooms.create') }}</button>
|
|
<table class="rooms-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ $t('admin.chatrooms.roomName') }}</th>
|
|
<th>{{ $t('admin.chatrooms.type') }}</th>
|
|
<th>{{ $t('admin.chatrooms.isPublic') }}</th>
|
|
<th>{{ $t('admin.chatrooms.isAdultOnly') }}</th>
|
|
<th>{{ $t('admin.chatrooms.actions') }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="room in rooms" :key="room.id">
|
|
<td>{{ room.title }}</td>
|
|
<td>{{ getRoomTypeLabel(room) }}</td>
|
|
<td>{{ room.isPublic ? $t('common.yes') : $t('common.no') }}</td>
|
|
<td>{{ room.isAdultOnly ? $t('common.yes') : $t('common.no') }}</td>
|
|
<td>
|
|
<button @click="editRoom(room)">{{ $t('common.edit') }}</button>
|
|
<button @click="deleteRoom(room)">{{ $t('common.delete') }}</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<RoomDialog ref="roomDialog" :room="selectedRoom" @save="fetchRooms" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import RoomDialog from '@/dialogues/admin/RoomDialog.vue';
|
|
import apiClient from '@/utils/axios.js';
|
|
|
|
export default {
|
|
name: 'AdminChatRoomsView',
|
|
components: { RoomDialog },
|
|
data() {
|
|
return {
|
|
rooms: [],
|
|
// dialog: false, // removed, handled by DialogWidget
|
|
selectedRoom: null,
|
|
// headers entfernt, da eigene Tabelle
|
|
// roomTypeTr sollte beim Laden der Räume mitgeliefert werden (API/Backend)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchRooms();
|
|
},
|
|
methods: {
|
|
getRoomTypeLabel(room) {
|
|
const roomTypeTr = room?.roomType?.tr || room?.roomTypeTr;
|
|
if (!roomTypeTr) {
|
|
return room?.roomTypeId ?? '-';
|
|
}
|
|
const translationKey = `admin.chatrooms.roomtype.${roomTypeTr}`;
|
|
return this.$te(translationKey) ? this.$t(translationKey) : roomTypeTr;
|
|
},
|
|
openCreateDialog() {
|
|
this.selectedRoom = null;
|
|
this.$refs.roomDialog.open();
|
|
},
|
|
editRoom(room) {
|
|
this.selectedRoom = { ...room };
|
|
this.$refs.roomDialog.open(this.selectedRoom);
|
|
},
|
|
async deleteRoom(room) {
|
|
if (!room.id) return;
|
|
await apiClient.delete(`/api/admin/chat/rooms/${room.id}`);
|
|
this.fetchRooms();
|
|
},
|
|
async fetchRooms() {
|
|
const res = await apiClient.get('/api/admin/chat/rooms');
|
|
this.rooms = res.data;
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-chat-rooms {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
}
|
|
.create-btn {
|
|
margin-bottom: 12px;
|
|
padding: 6px 18px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
background: #1976d2;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
.rooms-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
.rooms-table th, .rooms-table td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
}
|
|
.rooms-table th {
|
|
background: #f5f5f5;
|
|
}
|
|
.rooms-table td button {
|
|
margin-right: 6px;
|
|
padding: 4px 12px;
|
|
border: none;
|
|
border-radius: 3px;
|
|
background: #eee;
|
|
cursor: pointer;
|
|
}
|
|
.rooms-table td button:hover {
|
|
background: #1976d2;
|
|
color: #fff;
|
|
}
|
|
</style>
|