keanu-weblite/src/components/RoomInfoBottomSheet.vue

<template>
  <BottomSheet
    class="room-info-bottom-sheet"
    :halfY="0.12"
    ref="sheet"
  >
    <div class="room-info-sheet" ref="roomInfoSheetContent">
      <div class="text-center current-room">
        <room-avatar-picker />
        <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
        <div
          class="h2"
          v-if="!isEditMode"
          @click="onRoomNameClicked()"
        >
          {{ roomName }}
        </div>
        <v-text-field
          v-model="editedRoomName"
          ref="editedRoomName"
          :rules="[(v) => !!v || $t('room.room_name_required')]"
          :error="roomNameErrorMessage != null"
          :error-messages="roomNameErrorMessage"
          required
          color="black"
          counter="50"
          background-color="white"
          autofocus
          v-if="isEditMode"
          maxlength="50"
          @blur="updateRoomName()"
          @keyup.enter="updateRoomName()"
          solo
        ></v-text-field>
        <v-btn
          id="btn-room-details"
          height="20px"
          color="black"
          class="filled-button"
          @click.stop="showDetails"
          >{{$t('room_info_sheet.view_details')}}</v-btn
        >
      </div>
      <room-list :title="'Other rooms'" v-on:close="close" v-on:newroom="createRoom" :showCreate="true" />
    </div>
  </BottomSheet>
</template>

<script>
import BottomSheet from "./BottomSheet";
import RoomAvatarPicker from "./RoomAvatarPicker";
import RoomList from "./RoomList";
import roomInfoMixin from "./roomInfoMixin";

export default {
  name: "RoomInfoBottomSheet",
  mixins: [roomInfoMixin],
  components: {
    BottomSheet,
    RoomList,
    RoomAvatarPicker,
  },
  methods: {
    open() {
      this.$refs.sheet.open();
    },

    close() {
      this.$refs.sheet.close();
    },

    showDetails() {
      this.close();
      this.$navigation.push({ name: "RoomInfo" });
    },

    createRoom() {
      this.close();
      this.$navigation.push({ name: "CreateRoom" });
    }
  }
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
</style>