From d794d2904d03631a91efde934446dec536aa5921 Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Fri, 15 Jul 2022 12:51:45 +0000
Subject: [PATCH] Resolve "Room setup: Not able to edit the room name once the
 room is created"

---
 src/assets/css/_utilities.scss         | 10 ++++++++-
 src/assets/css/chat.scss               | 17 ++++++++++++++++
 src/assets/translations/bo.json        |  3 ++-
 src/assets/translations/de.json        |  3 ++-
 src/assets/translations/en.json        |  3 ++-
 src/assets/translations/es.json        |  3 ++-
 src/assets/translations/fi.json        |  3 ++-
 src/assets/translations/fr.json        |  3 ++-
 src/assets/translations/it.json        |  3 ++-
 src/assets/translations/nb_NO.json     |  3 ++-
 src/assets/translations/pt_BR.json     |  3 ++-
 src/assets/translations/ro.json        |  3 ++-
 src/assets/translations/ug.json        |  3 ++-
 src/assets/translations/zh_Hans.json   |  3 ++-
 src/components/CreateRoom.vue          |  1 +
 src/components/RoomAvatarPicker.vue    |  2 +-
 src/components/RoomInfo.vue            | 28 ++++++++++++++++++++++++--
 src/components/RoomInfoBottomSheet.vue | 25 ++++++++++++++++++++++-
 src/components/roomInfoMixin.js        | 19 ++++++++++++++++-
 src/main.js                            |  2 +-
 src/plugins/utils.js                   |  4 ++--
 21 files changed, 123 insertions(+), 21 deletions(-)

diff --git a/src/assets/css/_utilities.scss b/src/assets/css/_utilities.scss
index 53f4bfb..b2d67e3 100644
--- a/src/assets/css/_utilities.scss
+++ b/src/assets/css/_utilities.scss
@@ -1,5 +1,13 @@
 .cursor-pointer {
-    cursor: pointer;
+    cursor: pointer !important;
+}
+
+.cursor-default {
+    cursor: default !important;
+}
+
+.cursor-text {
+    cursor: text !important;
 }
 
 .text-transform-0 {
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 9b13b0c..2c1918b 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -782,6 +782,8 @@ $admin-fg: white;
     width: 64px !important;
     height: 64px !important;
     margin-bottom: 20px;
+    cursor: default;
+
     .headline {
       font-size: 70 * $chat-text-size !important;
     }
@@ -791,6 +793,9 @@ $admin-fg: white;
     font-family: "Poppins", sans-serif;
     font-size: 32px;
     font-weight: 800;
+    input {
+      text-align: center;
+    }
   }
 
   .topic {
@@ -1051,6 +1056,16 @@ $admin-fg: white;
     background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%), #f5f5f7;
     box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
     border-radius: 18px;
+
+    input {
+      text-align: center;
+    }
+
+    .h2 {
+      &:hover {
+        cursor: text;
+      }
+    }
   }
 
   .room-avatar {
@@ -1058,6 +1073,8 @@ $admin-fg: white;
     width: 44px !important;
     height: 44px !important;
     margin-bottom: 20px;
+    cursor: default;
+
     .headline {
       font-size: 70 * $chat-text-size !important;
     }
diff --git a/src/assets/translations/bo.json b/src/assets/translations/bo.json
index 869bf1c..42d9488 100644
--- a/src/assets/translations/bo.json
+++ b/src/assets/translations/bo.json
@@ -132,7 +132,8 @@
         "purge_failed": "ཁ་བརྡ་ཁང་བཤིག་ཐུབ་མ་སོང་།",
         "purge_removing_members": "ཚོགས་མི་ཁག་ཕྱིར་འདོན།",
         "purge_redacting_events": "ཁ་བརྡ་གཙང་གསུབ།",
-        "purge_set_room_state": "ཁ་བརྡ་ཁང་གི་རྣམ་པ་སྒྲིག་འགོད།"
+        "purge_set_room_state": "ཁ་བརྡ་ཁང་གི་རྣམ་པ་སྒྲིག་འགོད།",
+        "room_name_required": ""
     },
     "message": {
         "users_are_typing": "{count} ཚོགས་མི་ཡིས་གཏགས་བཞིན་འདུག",
diff --git a/src/assets/translations/de.json b/src/assets/translations/de.json
index 9b9bfc5..bdd50f5 100644
--- a/src/assets/translations/de.json
+++ b/src/assets/translations/de.json
@@ -64,7 +64,8 @@
         "members": "keine Mitglieder | 1 Mitglied | {count} Mitglieder",
         "purge_removing_members": "Entfernen von Mitgliedern",
         "purge_failed": "Fehler beim Bereinigen des Raums!",
-        "room_list_rooms": "Räume"
+        "room_list_rooms": "Räume",
+        "room_name_required": ""
     },
     "room_welcome": {
         "info": "Herzlich willkommen! Hier sind ein paar Dinge, die du über deinen Raum wissen solltest:",
diff --git a/src/assets/translations/en.json b/src/assets/translations/en.json
index 61a49d5..b795483 100644
--- a/src/assets/translations/en.json
+++ b/src/assets/translations/en.json
@@ -74,7 +74,8 @@
     "purge_removing_members": "Removing members",
     "purge_failed": "Failed to purge room!",
     "room_list_invites": "Invites",
-    "room_list_rooms": "Rooms"
+    "room_list_rooms": "Rooms",
+    "room_name_required": "Room name is required"
   },
   "room_welcome": {
     "info": "Welcome! Here are a few things to know about your room:",
diff --git a/src/assets/translations/es.json b/src/assets/translations/es.json
index 6fbbbc8..db9243e 100644
--- a/src/assets/translations/es.json
+++ b/src/assets/translations/es.json
@@ -143,7 +143,8 @@
         "purge_set_room_state": "Estado de la sala",
         "purge_removing_members": "Eliminar miembros",
         "purge_failed": "¡Fallo en la purga de la sala!",
-        "room_list_rooms": "Salas"
+        "room_list_rooms": "Salas",
+        "room_name_required": ""
     },
     "message": {
         "user_powerlevel_change_from_to": "{user} de {powerOld} a {powerNew}",
diff --git a/src/assets/translations/fi.json b/src/assets/translations/fi.json
index c33d955..aba08c7 100644
--- a/src/assets/translations/fi.json
+++ b/src/assets/translations/fi.json
@@ -104,7 +104,8 @@
     },
     "room": {
         "leave": "Poistu",
-        "room_list_rooms": "Huoneet"
+        "room_list_rooms": "Huoneet",
+        "room_name_required": ""
     },
     "room_welcome": {
         "room_history_is": "Huoneen historia on {type}.",
diff --git a/src/assets/translations/fr.json b/src/assets/translations/fr.json
index ac102b0..b4a1dad 100644
--- a/src/assets/translations/fr.json
+++ b/src/assets/translations/fr.json
@@ -64,7 +64,8 @@
         "purge_removing_members": "Suppression de membres",
         "room_list_invites": "Invitations",
         "room_list_rooms": "Salons",
-        "purge_redacting_events": "Rédaction des évènements"
+        "purge_redacting_events": "Rédaction des évènements",
+        "room_name_required": ""
     },
     "room_welcome": {
         "info": "Bienvenue ! Voici quelques informations à connaître sur votre salon :",
diff --git a/src/assets/translations/it.json b/src/assets/translations/it.json
index d061c6c..7e2017b 100644
--- a/src/assets/translations/it.json
+++ b/src/assets/translations/it.json
@@ -45,7 +45,8 @@
         "purge_redacting_events": "Redazione di eventi",
         "purge_failed": "Impossibile pulire la stanza!",
         "room_list_invites": "Inviti",
-        "room_list_rooms": "Stanze"
+        "room_list_rooms": "Stanze",
+        "room_name_required": ""
     },
     "menu": {
         "reply": "Risposta",
diff --git a/src/assets/translations/nb_NO.json b/src/assets/translations/nb_NO.json
index c7e9596..1e0342d 100644
--- a/src/assets/translations/nb_NO.json
+++ b/src/assets/translations/nb_NO.json
@@ -127,7 +127,8 @@
         "room_list_rooms": "Rom",
         "room_list_invites": "Invitasjoner",
         "purge_set_room_state": "Setter romtilstand",
-        "leave": "Forlat"
+        "leave": "Forlat",
+        "room_name_required": ""
     },
     "purge_room": {
         "n_seconds": "{seconds} sekunder",
diff --git a/src/assets/translations/pt_BR.json b/src/assets/translations/pt_BR.json
index 5ff1079..8c395dc 100644
--- a/src/assets/translations/pt_BR.json
+++ b/src/assets/translations/pt_BR.json
@@ -87,7 +87,8 @@
         "purge_failed": "Houve uma falha ao eliminar a sala!",
         "room_list_invites": "Convites",
         "room_list_rooms": "Salas",
-        "invitations": "Você não tem convites | Você tem 1 convite | Você tem {count} convites"
+        "invitations": "Você não tem convites | Você tem 1 convite | Você tem {count} convites",
+        "room_name_required": ""
     },
     "room_welcome": {
         "info": "Bem-vindo! Aqui estão algumas coisas que você deve saber sobre a sua sala:",
diff --git a/src/assets/translations/ro.json b/src/assets/translations/ro.json
index ad231fd..d9df0b9 100644
--- a/src/assets/translations/ro.json
+++ b/src/assets/translations/ro.json
@@ -187,7 +187,8 @@
         "purge_redacting_events": "Redactarea evenimentelor",
         "purge_set_room_state": "Setarea stării camerei",
         "leave": "Lăsați",
-        "members": "fără membri | 1 membru | {count} membri"
+        "members": "fără membri | 1 membru | {count} membri",
+        "room_name_required": ""
     },
     "message": {
         "user_changed_guest_access_open": "{user} a permis oaspeților să intre în cameră",
diff --git a/src/assets/translations/ug.json b/src/assets/translations/ug.json
index c3aaa79..1df59c3 100644
--- a/src/assets/translations/ug.json
+++ b/src/assets/translations/ug.json
@@ -94,7 +94,8 @@
         "purge_redacting_events": "پائالىيەتلەرنى تەھرىرلەش",
         "purge_set_room_state": "مۇنازىرەخانىنىڭ شەرتىنى قۇرۇش",
         "leave": "كېتىش",
-        "members": "ئەزالار يوق | بىر ئەزا | [نەپەر] ئەزا"
+        "members": "ئەزالار يوق | بىر ئەزا | [نەپەر] ئەزا",
+        "room_name_required": ""
     },
     "leave": {
         "text_public_lastroom": "ئەگەر بۇ ئۆيگە يەنە قوشۇلماقچى بولسىڭىز ، يېڭى سالاھىيەت ئاستىدا قاتناشسىڭىز بولىدۇ. {ئىشلەتكۈچى} ، {ھەرىكەت} نى ساقلاش.",
diff --git a/src/assets/translations/zh_Hans.json b/src/assets/translations/zh_Hans.json
index 002e147..570f338 100644
--- a/src/assets/translations/zh_Hans.json
+++ b/src/assets/translations/zh_Hans.json
@@ -70,7 +70,8 @@
         "purge_failed": "删除聊天室失败了！",
         "purge_removing_members": "移除成员",
         "purge_redacting_events": "编辑事件",
-        "purge_set_room_state": "设置聊天室状态"
+        "purge_set_room_state": "设置聊天室状态",
+        "room_name_required": ""
     },
     "message": {
         "you": "您",
diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue
index a0afa15..79fa4bc 100644
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -46,6 +46,7 @@
             color="black"
             :rules="roomNamerules"
             counter="50"
+            maxlength="50"
             background-color="white"
             v-on:keyup.enter="$refs.topic.focus()"
             :disabled="step > steps.INITIAL"
diff --git a/src/components/RoomAvatarPicker.vue b/src/components/RoomAvatarPicker.vue
index 6fa6ef9..84f5f57 100644
--- a/src/components/RoomAvatarPicker.vue
+++ b/src/components/RoomAvatarPicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker:null" v-if="isRoomAvatarLoaded">
+  <v-avatar :class="{'room-avatar':true, 'cursor-pointer':userCanPurgeRoom}" @click="userCanPurgeRoom?showRoomAvatarPicker():null" v-if="isRoomAvatarLoaded">
     <v-img v-if="roomAvatar" :src="roomAvatar"/>
     <span v-else class="white--text headline">{{
       roomName.substring(0, 1).toUpperCase()
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index c59f700..3b44fc8 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -25,9 +25,33 @@
 
     <div class="members ma-3 pa-3 mt-0 pt-0 text-center">
       <room-avatar-picker />
-      <div class="name">{{ roomName }}</div>
+      <div :class="{'name':true,'cursor-default':!userCanPurgeRoom}">
+        <span
+          v-if="!isEditMode"
+          @click="onRoomNameClicked()"
+        >
+          {{ roomName }}
+        </span>
+        <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>
+      </div>
       <div class="topic">{{ roomTopic }}</div>
-      <div class="created-by">
+      <div :class="{'created-by':true, 'cursor-default':!userCanPurgeRoom}">
         {{ $t("room_info.created_by", { user: creator }) }}
       </div>
     </div>
diff --git a/src/components/RoomInfoBottomSheet.vue b/src/components/RoomInfoBottomSheet.vue
index bd09691..12ed076 100644
--- a/src/components/RoomInfoBottomSheet.vue
+++ b/src/components/RoomInfoBottomSheet.vue
@@ -8,7 +8,30 @@
       <div class="text-center current-room">
         <room-avatar-picker />
         <div class="h4">{{$t('room_info_sheet.this_room')}}</div>
-        <div class="h2">{{ roomName }}</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"
diff --git a/src/components/roomInfoMixin.js b/src/components/roomInfoMixin.js
index ae5884c..b9d17ca 100644
--- a/src/components/roomInfoMixin.js
+++ b/src/components/roomInfoMixin.js
@@ -3,7 +3,10 @@ export default {
     return {
       roomJoinRule: null,
       userCanChangeJoinRule: false,
-      userCanPurgeRoom: false
+      userCanPurgeRoom: false,
+      editedRoomName: "",
+      isEditMode: false,
+      roomNameErrorMessage: null
     }
   },
   mounted() {
@@ -88,6 +91,20 @@ export default {
     },
   },
   methods: {
+    onRoomNameClicked() {
+      if(this.userCanPurgeRoom) {
+        this.isEditMode = !this.isEditMode;
+        this.editedRoomName = this.roomName;
+      }
+    },
+    updateRoomName() {
+      if(this.editedRoomName) {
+        this.$matrix.matrixClient.setRoomName(this.room.roomId, this.editedRoomName);
+        this.isEditMode = !this.isEditMode;
+      } else {
+        this.$refs.editedRoomName.focus();
+      }
+    },
     setRoomJoinRule(ignoredJoinRule) {
       // Do nothing in the general mixin, override in RoomInfo.vue
     },
diff --git a/src/main.js b/src/main.js
index 07853c9..82db06b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -54,7 +54,7 @@ Vue.directive('blur', {
  * Handle long taps. Call with the timeout as argument (default 500ms) and the value
  * can be either one function called on long tap or two functions, the
  * first called on "short tap" and the other on "long tap".
- * 
+ *
  * Like this: v-linkTap:500="[tapped,longTapped]"
  */
 Vue.directive('longTap', {
diff --git a/src/plugins/utils.js b/src/plugins/utils.js
index 1122cb8..91d532f 100644
--- a/src/plugins/utils.js
+++ b/src/plugins/utils.js
@@ -590,8 +590,8 @@ class Util {
 
     /**
      * Return number of whole days between the timestamps, at end of that day.
-     * @param {*} ts1 
-     * @param {*} ts2 
+     * @param {*} ts1
+     * @param {*} ts2
      */
     dayDiff(ts1, ts2) {
         var t1 = dayjs(ts1).endOf('day');