Improve group related UI

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/views/Group/GroupSettings.vue

@@ -37,10 +37,10 @@
     >
       <form @submit.prevent="updateGroup">
         <b-field :label="$t('Group name')">
-          <b-input v-model="group.name" />
+          <b-input v-model="editableGroup.name" />
         </b-field>
         <b-field :label="$t('Group short description')">
-          <editor mode="basic" v-model="group.summary" :maxSize="500"
+          <editor mode="basic" v-model="editableGroup.summary" :maxSize="500"
         /></b-field>
         <b-field :label="$t('Avatar')">
           <picture-upload
@@ -62,7 +62,7 @@
         <p class="label">{{ $t("Group visibility") }}</p>
         <div class="field">
           <b-radio
-            v-model="group.visibility"
+            v-model="editableGroup.visibility"
             name="groupVisibility"
             :native-value="GroupVisibility.PUBLIC"
           >
@@ -76,7 +76,7 @@
         </div>
         <div class="field">
           <b-radio
-            v-model="group.visibility"
+            v-model="editableGroup.visibility"
             name="groupVisibility"
             :native-value="GroupVisibility.PRIVATE"
             >{{ $t("Only accessible through link") }}<br />
@@ -110,7 +110,7 @@
         <p class="label">{{ $t("New members") }}</p>
         <div class="field">
           <b-radio
-            v-model="group.openness"
+            v-model="editableGroup.openness"
             name="groupOpenness"
             :native-value="Openness.OPEN"
           >
@@ -124,7 +124,7 @@
         </div>
         <div class="field">
           <b-radio
-            v-model="group.openness"
+            v-model="editableGroup.openness"
             name="groupOpenness"
             :native-value="Openness.INVITE_ONLY"
             >{{ $t("Manually invite new members") }}<br />
@@ -140,14 +140,14 @@
           :label="$t('Followers')"
           :message="$t('Followers will receive new public events and posts.')"
         >
-          <b-checkbox v-model="group.manuallyApprovesFollowers">
+          <b-checkbox v-model="editableGroup.manuallyApprovesFollowers">
             {{ $t("Manually approve new followers") }}
           </b-checkbox>
         </b-field>
 
         <full-address-auto-complete
           :label="$t('Group address')"
-          v-model="group.physicalAddress"
+          v-model="editableGroup.physicalAddress"
           :value="currentAddress"
         />
 
@@ -171,14 +171,13 @@
 </template>
 
 <script lang="ts">
-import { Component } from "vue-property-decorator";
+import { Component, Watch } from "vue-property-decorator";
 import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.vue";
 import { Route } from "vue-router";
 import PictureUpload from "@/components/PictureUpload.vue";
 import { mixins } from "vue-class-component";
 import GroupMixin from "@/mixins/group";
 import { GroupVisibility, Openness } from "@/types/enums";
-import RouteName from "../../router/name";
 import { UPDATE_GROUP, DELETE_GROUP } from "../../graphql/group";
 import { IGroup, usernameWithDomain } from "../../types/actor";
 import { Address, IAddress } from "../../types/address.model";
@@ -186,6 +185,7 @@ import { CONFIG } from "@/graphql/config";
 import { IConfig } from "@/types/config.model";
 import { ServerParseError } from "@apollo/client/link/http";
 import { ErrorResponse } from "@apollo/client/link/error";
+import RouteName from "@/router/name";
 
 @Component({
   components: {
@@ -225,9 +225,12 @@ export default class GroupSettings extends mixins(GroupMixin) {
 
   showCopiedTooltip = false;
 
+  editableGroup!: IGroup;
+
   async updateGroup(): Promise<void> {
     try {
       const variables = this.buildVariables();
+      console.log(variables);
       await this.$apollo.mutate<{ updateGroup: IGroup }>({
         mutation: UPDATE_GROUP,
         variables,
@@ -270,18 +273,26 @@ export default class GroupSettings extends mixins(GroupMixin) {
     }, 2000);
   }
 
+  @Watch("group")
+  async watchUpdateGroup(): Promise<void> {
+    this.editableGroup = { ...this.group };
+  }
+
   private buildVariables() {
     let avatarObj = {};
     let bannerObj = {};
-    const variables = { ...this.group };
+    const variables = { ...this.editableGroup };
+    const physicalAddress = {
+      ...variables.physicalAddress,
+    };
 
     // eslint-disable-next-line
     // @ts-ignore
     delete variables.__typename;
-    if (variables.physicalAddress) {
+    if (physicalAddress) {
       // eslint-disable-next-line
       // @ts-ignore
-      delete variables.physicalAddress.__typename;
+      delete physicalAddress.__typename;
     }
     delete variables.avatar;
     delete variables.banner;
@@ -291,7 +302,7 @@ export default class GroupSettings extends mixins(GroupMixin) {
         avatar: {
           media: {
             name: this.avatarFile.name,
-            alt: `${this.group.preferredUsername}'s avatar`,
+            alt: `${this.editableGroup.preferredUsername}'s avatar`,
             file: this.avatarFile,
           },
         },
@@ -303,14 +314,20 @@ export default class GroupSettings extends mixins(GroupMixin) {
         banner: {
           media: {
             name: this.bannerFile.name,
-            alt: `${this.group.preferredUsername}'s banner`,
+            alt: `${this.editableGroup.preferredUsername}'s banner`,
             file: this.bannerFile,
           },
         },
       };
     }
     return {
-      ...variables,
+      id: this.group.id,
+      name: this.editableGroup.name,
+      summary: this.editableGroup.summary,
+      visibility: this.editableGroup.visibility,
+      openness: this.editableGroup.openness,
+      manuallyApprovesFollowers: this.editableGroup.manuallyApprovesFollowers,
+      physicalAddress,
       ...avatarObj,
       ...bannerObj,
     };
@@ -322,7 +339,7 @@ export default class GroupSettings extends mixins(GroupMixin) {
   }
 
   get currentAddress(): IAddress {
-    return new Address(this.group.physicalAddress);
+    return new Address(this.editableGroup.physicalAddress);
   }
 
   get avatarMaxSize(): number | undefined {