Room description editable

src/components/RoomInfo.vue

@@ -27,12 +27,13 @@
       <room-avatar-picker />
       <div :class="{'name':true,'cursor-default':!userCanPurgeRoom}">
         <span
-          v-if="!isEditMode"
+          v-if="!isRoomNameEditMode"
           @click="onRoomNameClicked()"
         >
           {{ roomName }}
         </span>
         <v-text-field
+          v-else
           v-model="editedRoomName"
           ref="editedRoomName"
           :rules="[(v) => !!v || $t('room.room_name_required')]"
@@ -43,14 +44,36 @@
           counter="50"
           background-color="white"
           autofocus
-          v-if="isEditMode"
           maxlength="50"
           @blur="updateRoomName()"
           @keyup.enter="updateRoomName()"
           solo
         ></v-text-field>
       </div>
-      <div class="topic">{{ roomTopic }}</div>
+      <div :class="{'topic':true,'cursor-default':!userCanPurgeRoom}">
+        <span
+          v-if="!isRoomTopicEditMode"
+          @click="onRoomTopicClicked()"
+        >
+          {{ roomTopic }}
+        </span>
+        <v-text-field
+          v-else
+          v-model="editedRoomTopic"
+          ref="editedRoomTopic"
+          :rules="[(v) => !!v || $t('room.room_topic_required')]"
+          :error="roomTopicErrorMessage != null"
+          :error-messages="roomTopicErrorMessage"
+          required
+          color="black"
+          background-color="white"
+          autofocus
+          @blur="updateRoomTopic()"
+          @keyup.enter="updateRoomTopic()"
+          solo
+        >
+        </v-text-field>
+      </div>
       <div :class="{'created-by':true, 'cursor-default':!userCanPurgeRoom}">
         {{ $t("room_info.created_by", { user: creator }) }}
       </div>