Rearrange Groups interface a bit to add Rename in a place that's visu…

…ally grouped with the group

css/groups.css

@@ -28,3 +28,18 @@
   clear: both;
 }
 
+#groups .group
+{
+  margin-bottom: 4em;
+}
+
+#groups .group > h4
+{
+  margin-top: 0;
+  float: left;
+}
+
+#groups .group > .groupActions
+{
+  float: right;
+}

messages.json

@@ -81,7 +81,9 @@
       "yourGroups": "Your groups",
       "newGroupName": "New group name",
       "addGroup": "Add group",
+      "renameGroup": "Rename group",
       "deleteGroup": "Delete group",
+      "enterGroupName": "What do you want to rename \"{group}\" to?",
       "confirmDeleteGroup": "Are you sure you want to delete the group \"{group}\"?"
     },
     "messagePreview": {
@@ -347,7 +349,9 @@
       "yourGroups": "あなたのグループ",
       "newGroupName": "新しいグループ名",
       "addGroup": "グループを追加",
+      "renameGroup": "グループの名前を変更する",
       "deleteGroup": "グループを削除",
+      "enterGroupName": "「{group}」の名前を何に変更しますか？",
       "confirmDeleteGroup": "「{group}」という名前のグループを削除してもよろしいですか？"
     },
     "messagePreview": {

ui/groups.js

@@ -10,8 +10,14 @@ module.exports = function (componentsState) {
       <h2>{{ $t('groups.yourGroups') }}</h2>
       <div>
         <input type="text" v-model="groupName" :placeholder="$t('groups.newGroupName')" />&nbsp;<button class="clickButton" v-on:click="addGroup">{{ $t('groups.addGroup') }}</button>
-        <div v-for="group in groups">
-          <h4><router-link :to="{name: 'group', params: { group: group.id }}">{{ group.name }}</router-link> <a href="javascript:void(0)" v-on:click="deleteGroup(group)" :title="$t('groups.deleteGroup')" style="color: #900;">X</a></h4>
+        <div class="group" v-for="group in groups">
+          <hr />
+          <h4><router-link :to="{name: 'group', params: { group: group.id }}">{{ group.name }}</router-link></h4>
+          <div class="groupActions">
+            <button class="clickButton" v-on:click="renameGroup(group)">{{ $t('groups.renameGroup') }}</button>
+            <button class="clickButton" v-on:click="deleteGroup(group)">{{ $t('groups.deleteGroup') }}</button>
+          </div>
+          <div class="clearingDiv"></div>
           <ul class="groupMembers">
             <li v-for="member in group.members">
               <ssb-profile-link v-bind:key="member" v-bind:feedId="member"></ssb-profile-link>
@@ -83,6 +89,22 @@ module.exports = function (componentsState) {
         })
       },
 
+      renameGroup: function(group) {
+        var self = this
+        const newName = prompt(this.$root.$t('groups.enterGroupName', { group: group.name }), group.name)
+        if (newName && newName.trim() != '' && newName != group.name) {
+          group.name = newName
+          userGroups.updateGroup(group.id, group, (err, success) => {
+            if (err)
+              alert(err)
+            else {
+              self.groups = []
+              self.loadGroups()
+            }
+          })
+        }
+      },
+
       deleteGroup: function(group) {
         var self = this
         if (confirm(this.$root.$t('groups.confirmDeleteGroup', { group: group.name }))) {

usergroups.js

@@ -47,7 +47,26 @@ exports.addGroup = function(groupInfo, cb) {
 }
 
 exports.updateGroup = function(groupId, groupInfo, cb) {
-  cb("Not supported yet")
+  var groups = getFullLocalGroupInfo()
+  var updated = false
+  for (g in groups) {
+    if (groups[g].id == groupId) {
+      if (groupInfo.name && groupInfo.name.trim() != '') {
+        groups[g].name = groupInfo.name
+        updated = true
+      }
+      if (groupInfo.description) {
+        groups[g].description = groupInfo.description
+        updated = true
+      }
+    }
+  }
+  if (!updated)
+    cb("Group not found")
+  else {
+    setFullLocalGroupInfo(groups)
+    cb(null, true)
+  }
 }
 
 exports.deleteGroup = function(groupId, cb) {