Add group admin profiles

And other fixes

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

js/src/views/Group/Create.vue

@@ -2,41 +2,64 @@
   <section class="section container">
     <h1>{{ $t("Create a new group") }}</h1>
 
-    <div>
-      <b-field :label="$t('Group name')">
-        <b-input aria-required="true" required v-model="group.preferredUsername" />
-      </b-field>
+    <b-message type="is-danger" v-for="(value, index) in errors" :key="index">
+      {{ value }}
+    </b-message>
 
-      <b-field :label="$t('Group full name')">
+    <form @submit.prevent="createGroup">
+      <b-field :label="$t('Group display name')">
         <b-input aria-required="true" required v-model="group.name" />
       </b-field>
 
+      <div class="field">
+        <label class="label">{{ $t("Federated Group Name") }}</label>
+        <div class="field-body">
+          <b-field>
+            <b-input aria-required="true" required expanded v-model="group.preferredUsername" />
+            <p class="control">
+              <span class="button is-static">@{{ host }}</span>
+            </p>
+          </b-field>
+        </div>
+        <p
+          v-html="
+            $t(
+              'This is like your federated username (<code>{username}</code>) for groups. It will allow you to be found on the federation, and is guaranteed to be unique.',
+              { username: usernameWithDomain(currentActor, true) }
+            )
+          "
+        />
+      </div>
+
       <b-field :label="$t('Description')">
-        <b-input aria-required="true" required v-model="group.summary" type="textarea" />
+        <b-input v-model="group.summary" type="textarea" />
       </b-field>
 
       <div>
-        Avatar
-        <picture-upload v-model="avatarFile" />
+        {{ $t("Avatar") }}
+        <picture-upload :textFallback="$t('Avatar')" v-model="avatarFile" />
       </div>
 
       <div>
-        Banner
-        <picture-upload v-model="avatarFile" />
+        {{ $t("Banner") }}
+        <picture-upload :textFallback="$t('Banner')" v-model="bannerFile" />
       </div>
 
-      <button class="button is-primary" @click="createGroup()">{{ $t("Create my group") }}</button>
-    </div>
+      <button class="button is-primary" native-type="submit">{{ $t("Create my group") }}</button>
+    </form>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { Group, IPerson } from "@/types/actor";
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
+import { Component, Vue, Watch } from "vue-property-decorator";
+import { Group, IPerson, usernameWithDomain, MemberRole } from "@/types/actor";
+import { CURRENT_ACTOR_CLIENT, PERSON_MEMBERSHIPS } from "@/graphql/actor";
 import { CREATE_GROUP } from "@/graphql/group";
 import PictureUpload from "@/components/PictureUpload.vue";
 import RouteName from "../../router/name";
+import { mixins } from "vue-class-component";
+import IdentityEditionMixin from "@/mixins/identityEdition";
+import { convertToUsername } from "../../utils/username";
 
 @Component({
   components: {
@@ -48,7 +71,7 @@ import RouteName from "../../router/name";
     },
   },
 })
-export default class CreateGroup extends Vue {
+export default class CreateGroup extends mixins(IdentityEditionMixin) {
   currentActor!: IPerson;
 
   group = new Group();
@@ -57,19 +80,39 @@ export default class CreateGroup extends Vue {
 
   bannerFile: File | null = null;
 
+  errors: string[] = [];
+
+  usernameWithDomain = usernameWithDomain;
+
   async createGroup() {
     try {
       await this.$apollo.mutate({
         mutation: CREATE_GROUP,
         variables: this.buildVariables(),
         update: (store, { data: { createGroup } }) => {
-          // TODO: update group list cache
+          const query = {
+            query: PERSON_MEMBERSHIPS,
+            variables: {
+              id: this.currentActor.id,
+            },
+          };
+          const membershipData = store.readQuery<{ person: IPerson }>(query);
+          if (!membershipData) return;
+          const person: IPerson = membershipData.person;
+          person.memberships.elements.push({
+            parent: createGroup,
+            role: MemberRole.ADMINISTRATOR,
+            actor: this.currentActor,
+            insertedAt: new Date().toString(),
+            updatedAt: new Date().toString(),
+          });
+          store.writeQuery({ ...query, data: { person } });
         },
       });
 
       await this.$router.push({
         name: RouteName.GROUP,
-        params: { identityName: this.group.preferredUsername },
+        params: { preferredUsername: usernameWithDomain(this.group) },
       });
 
       this.$notifier.success(
@@ -82,6 +125,15 @@ export default class CreateGroup extends Vue {
     }
   }
 
+  get host(): string {
+    return window.location.hostname;
+  }
+
+  @Watch("group.name")
+  updateUsername(groupName: string): void {
+    this.group.preferredUsername = convertToUsername(groupName);
+  }
+
   private buildVariables() {
     let avatarObj = {};
     let bannerObj = {};
@@ -121,7 +173,18 @@ export default class CreateGroup extends Vue {
   }
 
   private handleError(err: any) {
-    console.error(err);
+    this.errors.push(
+      ...err.graphQLErrors.map(({ message }: { message: string }) => this.convertMessage(message))
+    );
+  }
+
+  private convertMessage(message: string): string {
+    switch (message) {
+      case "A group with this name already exists":
+        return this.$t("A group with this name already exists") as string;
+      default:
+        return message;
+    }
   }
 }
 </script>

js/src/views/Group/Group.vue

@@ -304,6 +304,7 @@ import addMinutes from "date-fns/addMinutes";
   apollo: {
     group: {
       query: FETCH_GROUP,
+      fetchPolicy: "cache-and-network",
       variables() {
         return {
           name: this.preferredUsername,
@@ -312,6 +313,7 @@ import addMinutes from "date-fns/addMinutes";
     },
     person: {
       query: PERSON_MEMBERSHIPS,
+      fetchPolicy: "cache-and-network",
       variables() {
         return {
           id: this.currentActor.id,

js/src/views/Group/GroupList.vue

@@ -22,11 +22,15 @@ import { LIST_GROUPS } from "@/graphql/group";
 import { Group, IGroup } from "@/types/actor";
 import GroupMemberCard from "@/components/Group/GroupMemberCard.vue";
 import RouteName from "../../router/name";
+import { Paginate } from "@/types/paginate";
 
 @Component({
   apollo: {
     groups: {
-      query: LIST_GROUPS,
+      query: {
+        query: LIST_GROUPS,
+        fetchPolicy: "network-only",
+      },
     },
   },
   components: {
@@ -34,7 +38,7 @@ import RouteName from "../../router/name";
   },
 })
 export default class GroupList extends Vue {
-  groups: { elements: IGroup[]; total: number } = { elements: [], total: 0 };
+  groups!: Paginate<IGroup>;
 
   loading = true;
 

js/src/views/Group/GroupMembers.vue

@@ -176,7 +176,7 @@ import { IMember, MemberRole } from "../../types/actor/group.model";
   apollo: {
     group: {
       query: GROUP_MEMBERS,
-      // fetchPolicy: "network-only",
+      fetchPolicy: "network-only",
       variables() {
         return {
           name: this.$route.params.preferredUsername,

js/src/views/Group/GroupSettings.vue

@@ -91,7 +91,10 @@
           :value="currentAddress"
         />
 
-        <b-button native-type="submit" type="is-primary">{{ $t("Update group") }}</b-button>
+        <div class="buttons">
+          <b-button native-type="submit" type="is-primary">{{ $t("Update group") }}</b-button>
+          <b-button @click="confirmDeleteGroup" type="is-danger">{{ $t("Delete group") }}</b-button>
+        </div>
       </form>
     </section>
   </div>
@@ -100,7 +103,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import RouteName from "../../router/name";
-import { FETCH_GROUP, UPDATE_GROUP } from "../../graphql/group";
+import { FETCH_GROUP, UPDATE_GROUP, DELETE_GROUP } from "../../graphql/group";
 import { IGroup, usernameWithDomain } from "../../types/actor";
 import { Address, IAddress } from "../../types/address.model";
 import { IMember, Group } from "../../types/actor/group.model";
@@ -111,6 +114,7 @@ import FullAddressAutoComplete from "@/components/Event/FullAddressAutoComplete.
   apollo: {
     group: {
       query: FETCH_GROUP,
+      fetchPolicy: "cache-and-network",
       variables() {
         return {
           name: this.$route.params.preferredUsername,
@@ -148,15 +152,41 @@ export default class GroupSettings extends Vue {
     // eslint-disable-next-line
     // @ts-ignore
     delete variables.__typename;
-    // eslint-disable-next-line
-    // @ts-ignore
-    delete variables.physicalAddress.__typename;
+    if (variables.physicalAddress) {
+      // eslint-disable-next-line
+      // @ts-ignore
+      delete variables.physicalAddress.__typename;
+    }
     await this.$apollo.mutate<{ updateGroup: IGroup }>({
       mutation: UPDATE_GROUP,
       variables,
     });
   }
 
+  confirmDeleteGroup() {
+    this.$buefy.dialog.confirm({
+      title: this.$t("Delete group") as string,
+      message: this.$t(
+        "Are you sure you want to <b>completely delete</b> this group? All members - including remote ones - will be notified and removed from the group, and <b>all of the group data (events, posts, discussions, todos…) will be irretrievably destroyed</b>."
+      ) as string,
+      confirmText: this.$t("Delete group") as string,
+      cancelText: this.$t("Cancel") as string,
+      type: "is-danger",
+      hasIcon: true,
+      onConfirm: () => this.deleteGroup(),
+    });
+  }
+
+  async deleteGroup() {
+    await this.$apollo.mutate<{ deleteGroup: IGroup }>({
+      mutation: DELETE_GROUP,
+      variables: {
+        groupId: this.group.id,
+      },
+    });
+    return this.$router.push({ name: RouteName.MY_GROUPS });
+  }
+
   async copyURL() {
     await window.navigator.clipboard.writeText(this.group.url);
     this.showCopiedTooltip = true;

js/src/views/Group/MyGroups.vue

@@ -85,7 +85,7 @@ export default class MyEvents extends Vue {
   get memberships() {
     if (!this.membershipsPages) return [];
     return this.membershipsPages.elements.filter(
-      (member: IMember) => member.role !== MemberRole.INVITED
+      (member: IMember) => ![MemberRole.INVITED, MemberRole.REJECTED].includes(member.role)
     );
   }
 }