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>

src/components/RoomInfoBottomSheet.vue

@@ -10,7 +10,7 @@
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
         <div
           class="h2"
-          v-if="!isEditMode"
+          v-if="!isRoomNameEditMode"
           @click="onRoomNameClicked()"
         >
           {{ roomName }}
@@ -26,7 +26,7 @@
           counter="50"
           background-color="white"
           autofocus
-          v-if="isEditMode"
+          v-if="isRoomNameEditMode"
           maxlength="50"
           @blur="updateRoomName()"
           @keyup.enter="updateRoomName()"

src/components/roomInfoMixin.js

@@ -5,8 +5,11 @@ export default {
       userCanChangeJoinRule: false,
       userCanPurgeRoom: false,
       editedRoomName: "",
-      isEditMode: false,
-      roomNameErrorMessage: null
+      isRoomNameEditMode: false,
+      roomNameErrorMessage: null,
+      editedRoomTopic: "",
+      isRoomTopicEditMode: false,
+      roomTopicErrorMessage: null,
     }
   },
   mounted() {
@@ -93,18 +96,32 @@ export default {
   methods: {
     onRoomNameClicked() {
       if(this.userCanPurgeRoom) {
-        this.isEditMode = !this.isEditMode;
+        this.isRoomNameEditMode = !this.isRoomNameEditMode;
         this.editedRoomName = this.roomName;
       }
     },
     updateRoomName() {
       if(this.editedRoomName) {
         this.$matrix.matrixClient.setRoomName(this.room.roomId, this.editedRoomName);
-        this.isEditMode = !this.isEditMode;
+        this.isRoomNameEditMode = !this.isRoomNameEditMode;
       } else {
         this.$refs.editedRoomName.focus();
       }
     },
+    onRoomTopicClicked() {
+      if(this.userCanPurgeRoom) {
+        this.isRoomTopicEditMode = !this.isRoomTopicEditMode;
+        this.editedRoomTopic = this.roomTopic;
+      }
+    },
+    updateRoomTopic() {
+      if(this.editedRoomTopic) {
+        this.$matrix.matrixClient.setRoomTopic(this.room.roomId, this.editedRoomTopic);
+        this.isRoomTopicEditMode = !this.isRoomTopicEditMode;
+      } else {
+        this.$refs.editedRoomTopic.focus();
+      }
+    },
     setRoomJoinRule(ignoredJoinRule) {
       // Do nothing in the general mixin, override in RoomInfo.vue
     },