Allow to join an open group

Also: * Refactor interacting with a remote event so that you can interact with a remote group as well * Add a setting for group admins to pick between an open and invite-only group * Fix new groups without posts/todos/resources/events/conversations URL set * Repair local groups that haven't got their posts/todos/resources/events/conversations URL set * Add a scheduled job to refresh remote groups every hour * Add a user setting to pick when to receive notifications when there's new members to approve (will be used when this feature is available) * Fix pagination for members Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2020-11-06 11:34:32 +01:00
parent 7baad7cafc
commit 7c11807c14
74 changed files with 1174 additions and 626 deletions
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -109,11 +109,25 @@
          >
          <p class="buttons">
            <b-tooltip
-              :label="$t('You can only get invited to groups right now.')"
+              v-if="group.openness !== Openness.OPEN"
+              :label="$t('This group is invite-only')"
              position="is-bottom"
            >
-              <b-button disabled type="is-primary">{{ $t("Join group") }}</b-button>
-            </b-tooltip>
+              <b-button disabled type="is-primary">{{ $t("Join group") }}</b-button></b-tooltip
+            >
+            <b-button v-else-if="currentActor.id" @click="joinGroup" type="is-primary">{{
+              $t("Join group")
+            }}</b-button>
+            <b-button
+              tag="router-link"
+              :to="{
+                name: RouteName.GROUP_JOIN,
+                params: { preferredUsername: usernameWithDomain(group) },
+              }"
+              v-else
+              type="is-primary"
+              >{{ $t("Join group") }}</b-button
+            >
            <b-dropdown aria-role="list" position="is-bottom-left">
              <b-button slot="trigger" role="button" icon-right="dots-horizontal"> </b-button>
              <b-dropdown-item
@@ -348,7 +362,7 @@
 <script lang="ts">
 import { Component, Prop, Watch } from "vue-property-decorator";
 import EventCard from "@/components/Event/EventCard.vue";
-import { IActor, usernameWithDomain, MemberRole, IMember } from "@/types/actor";
+import { IActor, usernameWithDomain, MemberRole, IMember, Openness } from "@/types/actor";
 import Subtitle from "@/components/Utils/Subtitle.vue";
 import CompactTodo from "@/components/Todo/CompactTodo.vue";
 import EventMinimalistCard from "@/components/Event/EventMinimalistCard.vue";
@@ -365,6 +379,7 @@ import { IReport } from "@/types/report.model";
 import { IConfig } from "@/types/config.model";
 import GroupMixin from "@/mixins/group";
 import { mixins } from "vue-class-component";
+import { JOIN_GROUP } from "@/graphql/member";
 import RouteName from "../../router/name";
 import GroupSection from "../../components/Group/GroupSection.vue";
 import ReportModal from "../../components/Report/ReportModal.vue";
@@ -414,6 +429,8 @@ export default class Group extends mixins(GroupMixin) {

  usernameWithDomain = usernameWithDomain;

+  Openness = Openness;
+
  showMap = false;

  isReportModalActive = false;
@@ -425,6 +442,15 @@ export default class Group extends mixins(GroupMixin) {
    }
  }

+  async joinGroup(): Promise<void> {
+    this.$apollo.mutate({
+      mutation: JOIN_GROUP,
+      variables: {
+        groupId: this.group.id,
+      },
+    });
+  }
+
  acceptInvitation(): void {
    if (this.groupMember) {
      const index = this.person.memberships.elements.findIndex(
@@ -508,6 +534,12 @@ export default class Group extends mixins(GroupMixin) {
      .map(({ parent: { id } }) => id);
  }

+  @Watch("isCurrentActorAGroupMember")
+  refetchGroupData(): void {
+    console.log("refetchGroupData");
+    this.$apollo.queries.group.refetch();
+  }
+
  get isCurrentActorAGroupMember(): boolean {
    return this.groupMemberships !== undefined && this.groupMemberships.includes(this.group.id);
  }
--- a/js/src/views/Group/GroupMembers.vue
+++ b/js/src/views/Group/GroupMembers.vue
@@ -77,22 +77,24 @@
        </b-select>
      </b-field>
      <b-table
-        :data="group.members.elements"
+        v-if="members"
+        :data="members.elements"
        ref="queueTable"
        :loading="this.$apollo.loading"
        paginated
        backend-pagination
+        :current-page.sync="page"
        :pagination-simple="true"
        :aria-next-label="$t('Next page')"
        :aria-previous-label="$t('Previous page')"
        :aria-page-label="$t('Page')"
        :aria-current-label="$t('Current page')"
-        :total="group.members.total"
+        :total="members.total"
        :per-page="MEMBERS_PER_PAGE"
        backend-sorting
        :default-sort-direction="'desc'"
        :default-sort="['insertedAt', 'desc']"
-        @page-change="(newPage) => (page = newPage)"
+        @page-change="triggerLoadMoreMemberPageChange"
        @sort="(field, order) => $emit('sort', field, order)"
      >
        <b-table-column field="actor.preferredUsername" :label="$t('Member')" v-slot="props">
@@ -184,7 +186,7 @@ import { mixins } from "vue-class-component";
 import { FETCH_GROUP } from "@/graphql/group";
 import RouteName from "../../router/name";
 import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER, UPDATE_MEMBER } from "../../graphql/member";
-import { IGroup, usernameWithDomain } from "../../types/actor";
+import { usernameWithDomain } from "../../types/actor";
 import { IMember, MemberRole } from "../../types/actor/group.model";

@Component({
@@ -194,7 +196,7 @@ import { IMember, MemberRole } from "../../types/actor/group.model";
      variables() {
        return {
          name: this.$route.params.preferredUsername,
-          page: 1,
+          page: this.page,
          limit: this.MEMBERS_PER_PAGE,
          roles: this.roles,
        };
@@ -216,7 +218,7 @@ export default class GroupMembers extends mixins(GroupMixin) {

  RouteName = RouteName;

-  page = 1;
+  page = parseInt((this.$route.query.page as string) || "1", 10);

  MEMBERS_PER_PAGE = 10;

@@ -227,10 +229,20 @@ export default class GroupMembers extends mixins(GroupMixin) {
    if (Object.values(MemberRole).includes(roleQuery as MemberRole)) {
      this.roles = roleQuery as MemberRole;
    }
+    this.page = parseInt((this.$route.query.page as string) || "1", 10);
  }

  async inviteMember(): Promise<void> {
    try {
+      this.inviteError = "";
+      const { roles, MEMBERS_PER_PAGE, group, page } = this;
+      const variables = {
+        name: usernameWithDomain(group),
+        page,
+        limit: MEMBERS_PER_PAGE,
+        roles,
+      };
+      console.log("variables", variables);
      await this.$apollo.mutate<{ inviteMember: IMember }>({
        mutation: INVITE_MEMBER,
        variables: {
@@ -238,7 +250,10 @@ export default class GroupMembers extends mixins(GroupMixin) {
          targetActorUsername: this.newMemberUsername,
        },
        refetchQueries: [
-          { query: FETCH_GROUP, variables: { name: this.$route.params.preferredUsername } },
+          {
+            query: GROUP_MEMBERS,
+            variables,
+          },
        ],
      });
      this.$notifier.success(
@@ -257,34 +272,49 @@ export default class GroupMembers extends mixins(GroupMixin) {
  }

  @Watch("page")
-  loadMoreMembers(): void {
-    this.$apollo.queries.event.fetchMore({
+  triggerLoadMoreMemberPageChange(page: string): void {
+    this.$router.replace({
+      name: RouteName.GROUP_MEMBERS_SETTINGS,
+      query: { ...this.$route.query, page },
+    });
+  }
+
+  @Watch("roles")
+  triggerLoadMoreMemberRoleChange(roles: string): void {
+    this.$router.replace({
+      name: RouteName.GROUP_MEMBERS_SETTINGS,
+      query: { ...this.$route.query, roles },
+    });
+  }
+
+  async loadMoreMembers(): Promise<void> {
+    const { roles, MEMBERS_PER_PAGE, group, page } = this;
+    await this.$apollo.queries.members.fetchMore({
      // New variables
-      variables: {
-        page: this.page,
-        limit: this.MEMBERS_PER_PAGE,
+      variables() {
+        return {
+          name: usernameWithDomain(group),
+          page,
+          limit: MEMBERS_PER_PAGE,
+          roles,
+        };
      },
      // Transform the previous result with new data
      updateQuery: (previousResult, { fetchMoreResult }) => {
+        if (!fetchMoreResult) return previousResult;
        const oldMembers = previousResult.group.members;
        const newMembers = fetchMoreResult.group.members;
-
        return {
-          group: {
-            ...previousResult.event,
-            members: {
-              elements: [...oldMembers.elements, ...newMembers.elements],
-              total: newMembers.total,
-              __typename: oldMembers.__typename,
-            },
-          },
+          elements: [...oldMembers.elements, ...newMembers.elements],
+          total: newMembers.total,
+          __typename: oldMembers.__typename,
        };
      },
    });
  }

  async removeMember(memberId: string): Promise<void> {
-    console.log("removeMember", memberId);
+    const { roles, MEMBERS_PER_PAGE, group, page } = this;
    try {
      await this.$apollo.mutate<{ removeMember: IMember }>({
        mutation: REMOVE_MEMBER,
@@ -293,7 +323,17 @@ export default class GroupMembers extends mixins(GroupMixin) {
          memberId,
        },
        refetchQueries: [
-          { query: FETCH_GROUP, variables: { name: this.$route.params.preferredUsername } },
+          {
+            query: GROUP_MEMBERS,
+            variables() {
+              return {
+                name: usernameWithDomain(group),
+                page,
+                limit: MEMBERS_PER_PAGE,
+                roles,
+              };
+            },
+          },
        ],
      });
      this.$notifier.success(
--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -102,6 +102,31 @@
          </p>
        </div>

+        <p class="label">{{ $t("New members") }}</p>
+        <div class="field">
+          <b-radio v-model="group.openness" name="groupOpenness" :native-value="Openness.OPEN">
+            {{ $t("Anyone can join freely") }}<br />
+            <small>{{
+              $t(
+                "Anyone wanting to be a member from your group will be able to from your group page."
+              )
+            }}</small>
+          </b-radio>
+        </div>
+        <div class="field">
+          <b-radio
+            v-model="group.openness"
+            name="groupOpenness"
+            :native-value="Openness.INVITE_ONLY"
+            >{{ $t("Manually invite new members") }}<br />
+            <small>{{
+              $t(
+                "The only way for your group to get new members is if an admininistrator invites them."
+              )
+            }}</small>
+          </b-radio>
+        </div>
+
        <full-address-auto-complete
          :label="$t('Group address')"
          v-model="group.physicalAddress"
@@ -129,7 +154,7 @@ import { mixins } from "vue-class-component";
 import GroupMixin from "@/mixins/group";
 import RouteName from "../../router/name";
 import { UPDATE_GROUP, DELETE_GROUP } from "../../graphql/group";
-import { IGroup, usernameWithDomain } from "../../types/actor";
+import { IGroup, usernameWithDomain, Openness } from "../../types/actor";
 import { Address, IAddress } from "../../types/address.model";

@Component({
@@ -157,6 +182,8 @@ export default class GroupSettings extends mixins(GroupMixin) {
    UNLISTED: "UNLISTED",
  };

+  Openness = Openness;
+
  showCopiedTooltip = false;

  async updateGroup(): Promise<void> {
--- a/js/src/views/Group/MyGroups.vue
+++ b/js/src/views/Group/MyGroups.vue
@@ -27,6 +27,16 @@
        :member="member"
        @leave="leaveGroup(member.parent)"
      />
+      <b-pagination
+        :total="membershipsPages.total"
+        v-model="page"
+        :per-page="limit"
+        :aria-next-label="$t('Next page')"
+        :aria-previous-label="$t('Previous page')"
+        :aria-page-label="$t('Page')"
+        :aria-current-label="$t('Current page')"
+      >
+      </b-pagination>
    </section>
    <b-message v-if="$apollo.loading === false && memberships.length === 0" type="is-danger">
      {{ $t("No groups found") }}
@@ -54,10 +64,11 @@ import RouteName from "../../router/name";
    membershipsPages: {
      query: LOGGED_USER_MEMBERSHIPS,
      fetchPolicy: "cache-and-network",
-      variables: {
-        page: 1,
-        limit: 10,
-        beforeDateTime: new Date().toISOString(),
+      variables() {
+        return {
+          page: this.page,
+          limit: this.limit,
+        };
      },
      update: (data) => data.loggedUser.memberships,
    },
@@ -76,6 +87,10 @@ export default class MyGroups extends Vue {

  RouteName = RouteName;

+  page = 1;
+
+  limit = 10;
+
  acceptInvitation(member: IMember): Promise<Route> {
    return this.$router.push({
      name: RouteName.GROUP,
@@ -94,11 +109,21 @@ export default class MyGroups extends Vue {
  }

  async leaveGroup(group: IGroup): Promise<void> {
+    const { page, limit } = this;
    await this.$apollo.mutate({
      mutation: LEAVE_GROUP,
      variables: {
        groupId: group.id,
      },
+      refetchQueries: [
+        {
+          query: LOGGED_USER_MEMBERSHIPS,
+          variables: {
+            page,
+            limit,
+          },
+        },
+      ],
    });
  }