yourpart3/frontend/src/views/admin/RoomsView.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.actions') }}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="room in rooms" :key="room.id">
                    <td>{{ room.title }}</td>
                    <td>{{ room.roomTypeTr || room.roomTypeId }}</td>
                    <td>{{ room.isPublic ? $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="saveRoom" />
    <ChooseDialog ref="chooseDialog" />
    </div>
</template>

<script>
import RoomDialog from '@/dialogues/admin/RoomDialog.vue';
import ChooseDialog from '@/dialogues/standard/ChooseDialog.vue';
import apiClient from '@/utils/axios.js';

export default {
    name: 'RoomsView',
    components: { RoomDialog, ChooseDialog },
    data() {
        return {
            rooms: [],
            selectedRoom: null,
        }
    },
    mounted() {
        this.fetchRooms();
    },
    methods: {
        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;
            const confirmed = await this.$refs.chooseDialog.open({
                title: this.$t('common.confirm'),
                message: this.$t('admin.chatrooms.confirmDelete')
            });
            if (!confirmed) 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;
        },
        async saveRoom(roomData) {
            // Remove forbidden and associated object fields before sending to backend
            const { id, ownerId, passwordHash, roomType, genderRestriction, ...cleanData } = roomData;
            if (roomData.id) {
                await apiClient.put(`/api/admin/chat/rooms/${roomData.id}`, cleanData);
            } else {
                await apiClient.post('/api/admin/chat/rooms', cleanData);
            }
            this.fetchRooms();
        },
    },
}
</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;
}
</style>