yourpart3/frontend/src/dialogues/admin/RoomDialog.vue

<template>
  <DialogWidget ref="dialog" :title="$t(room && room.id ? 'admin.chatrooms.edit' : 'admin.chatrooms.create')"
    :show-close="true" :buttons="buttons" name="RoomDialog" :modal="true" :isTitleTranslated="true"
    @close="closeDialog">
    <form class="dialog-form" @submit.prevent="save">
      <label>
        {{ $t('admin.chatrooms.roomName') }}
        <input v-model="localRoom.title" required />
      </label>
      <label>
        {{ $t('admin.chatrooms.type') }}
        <select v-model="localRoom.roomTypeId" required>
          <option v-for="type in roomTypes" :key="type.id" :value="type.id">{{ $t(`admin.chatrooms.roomtype.${type.tr}`) }}</option>
        </select>
      </label>
      <label>
        <input type="checkbox" v-model="localRoom.isPublic" />
        {{ $t('admin.chatrooms.isPublic') }}
      </label>
      <label>
        <input type="checkbox" v-model="showGenderRestriction" />
        {{ $t('admin.chatrooms.genderRestriction.show') }}
      </label>
      <label v-if="showGenderRestriction">
        {{ $t('admin.chatrooms.genderRestriction.label') }}
        <select v-model="localRoom.genderRestrictionId">
          <option v-for="g in genderRestrictions" :key="g.id" :value="g.id">{{ $t(`gender.${g.value}`) }}</option>
        </select>
      </label>
      <label>
        <input type="checkbox" v-model="showMinAge" />
        {{ $t('admin.chatrooms.minAge.show') }}
      </label>
      <label v-if="showMinAge">
        {{ $t('admin.chatrooms.minAge.label') }}
        <input v-model.number="localRoom.minAge" type="number" />
      </label>
      <label>
        <input type="checkbox" v-model="showMaxAge" />
        {{ $t('admin.chatrooms.maxAge.show') }}
      </label>
      <label v-if="showMaxAge">
        {{ $t('admin.chatrooms.maxAge.label') }}
        <input v-model.number="localRoom.maxAge" type="number" />
      </label>
      <label>
        <input type="checkbox" v-model="showPassword" />
        {{ $t('admin.chatrooms.password.show') }}
      </label>
      <label v-if="showPassword">
        {{ $t('admin.chatrooms.password.label') }}
        <input v-model="localRoom.password" type="password" />
      </label>
      <label>
        <input type="checkbox" v-model="localRoom.friendsOfOwnerOnly" />
        {{ $t('admin.chatrooms.friendsOfOwnerOnly') }}
      </label>
      <label>
        <input type="checkbox" v-model="showRequiredUserRight" />
        {{ $t('admin.chatrooms.requiredUserRight.show') }}
      </label>
      <label v-if="showRequiredUserRight">
        {{ $t('admin.chatrooms.requiredUserRight.label') }}
        <select v-model="localRoom.requiredUserRightId">
          <option v-for="r in userRights" :key="r.id" :value="r.id">{{ $t(`admin.chatrooms.rights.${r.tr}`) }}</option>
        </select>
      </label>
    </form>
  </DialogWidget>
</template>

<script>

import DialogWidget from '@/components/DialogWidget.vue';
import axios from '@/utils/axios.js';

export default {
  name: 'RoomDialog',
  components: { DialogWidget },
  props: {
    modelValue: Boolean,
    room: Object
  },
  data() {
    return {
      dialog: null,
      localRoom: this.room ? { ...this.room } : { title: '', isPublic: true },
      roomTypes: [],
      genderRestrictions: [],
      userRights: [],
      showGenderRestriction: !!(this.room && this.room.genderRestrictionId),
      showMinAge: !!(this.room && this.room.minAge),
      showMaxAge: !!(this.room && this.room.maxAge),
      showPassword: !!(this.room && this.room.password),
      showRequiredUserRight: !!(this.room && this.room.requiredUserRightId),
      buttons: [
        { text: 'Ok', action: () => this.save() },
        { text: 'Cancel', action: () => this.closeDialog() }
      ]
    }
  },
  watch: {
    room: {
      handler(newVal) {
        this.localRoom = newVal ? { ...newVal } : { title: '', isPublic: true };
        this.showGenderRestriction = !!(newVal && newVal.genderRestrictionId);
        this.showMinAge = !!(newVal && newVal.minAge);
        this.showMaxAge = !!(newVal && newVal.maxAge);
        this.showPassword = !!(newVal && newVal.password);
        this.showRequiredUserRight = !!(newVal && newVal.requiredUserRightId);
      },
      immediate: true
    }
  },
  mounted() {
    this.dialog = this.$refs.dialog;
    this.fetchRoomTypes();
    this.fetchGenderRestrictions();
    this.fetchUserRights();
  },
  methods: {
    async fetchRoomTypes() {
      const res = await axios.get('/api/admin/chat/room-types');
      this.roomTypes = res.data;
    },
    async fetchGenderRestrictions() {
      const res = await axios.get('/api/admin/chat/gender-restrictions');
      this.genderRestrictions = res.data;
    },
    async fetchUserRights() {
      const res = await axios.get('/api/admin/chat/user-rights');
      this.userRights = res.data;
    },
    async open(roomData) {
      await Promise.all([
        this.fetchRoomTypes(),
        this.fetchGenderRestrictions(),
        this.fetchUserRights()
      ]);
      this.localRoom = roomData ? { ...roomData } : { title: '', isPublic: true };
      this.dialog.open();
    },
    closeDialog() {
      this.dialog.close();
    },
    save() {
      this.$emit('save', this.localRoom);
      this.closeDialog();
    }
  }
}
</script>

<style scoped>
.room-dialog-content {
  padding: 16px;
}
.dialog-title {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 12px;
  display: block;
}
.dialog-fields > * {
  margin-bottom: 8px;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.save-btn, .cancel-btn {
  padding: 6px 18px;
  border: none;
  border-radius: 3px;
  background: #eee;
  cursor: pointer;
}
.save-btn {
  background: #1976d2;
  color: #fff;
}
.cancel-btn {
  background: #eee;
  color: #333;
}
label {
  display: block;
}
</style>