modify event view & event participation with new permission - #687

2025-11-12 21:18:09 +01:00
parent 7b6c06d233
commit 5a020ae216
7 changed files with 246 additions and 48 deletions
--- a/src/components/Event/EventActionSection.vue
+++ b/src/components/Event/EventActionSection.vue
@@ -21,17 +21,14 @@
      @cancel-anonymous-participation="cancelAnonymousParticipation"
    />
    <div class="flex flex-col gap-1 mt-1">
-      <p
-        class="inline-flex gap-2 ml-auto"
-        v-if="
-          event.joinOptions !== EventJoinOptions.EXTERNAL &&
-          !event.options.hideNumberOfParticipants
-        "
-      >
+      <p class="inline-flex gap-2 ml-auto" v-if="showParticipant">
        <TicketConfirmationOutline />
        <router-link
-          class="participations-link"
-          v-if="canManageEvent && event?.draft === false"
+          class="participations-link underline"
+          v-if="
+            (insideGroupWithAllowSee || canManageEvent) &&
+            event?.draft === false
+          "
          :to="{
            name: RouteName.PARTICIPATIONS,
            params: { eventId: event.uuid },
@@ -110,20 +107,6 @@
            {{ t("Actions") }}
          </o-button>
        </template>
-        <o-dropdown-item
-          aria-role="listitem"
-          has-link
-          v-if="canManageEvent"
-          @click="
-            router.push({
-              name: RouteName.PARTICIPATIONS,
-              params: { eventId: event?.uuid },
-            })
-          "
-        >
-          <AccountMultiple />
-          {{ t("Participations") }}
-        </o-dropdown-item>
        <o-dropdown-item
          aria-role="listitem"
          has-link
@@ -481,6 +464,15 @@ const triggerShare = (): void => {
  // @ts-ignore-end
 };

+const showParticipant = computed((): boolean => {
+  return (
+    insideGroupWithAllowSee.value ||
+    canManageEvent.value ||
+    (event.value?.joinOptions !== EventJoinOptions.EXTERNAL &&
+      !event.value?.options.hideNumberOfParticipants)
+  );
+});
+
 const canManageEvent = computed((): boolean => {
  return actorIsOrganizer.value || hasGroupPrivileges.value;
 });
@@ -494,6 +486,14 @@ const canManageEvent = computed((): boolean => {
 //   );
 // });

+const insideGroupWithAllowSee = computed((): boolean => {
+  return (
+    event.value?.attributedTo?.allowSeeParticipants &&
+    props.person?.memberships !== undefined &&
+    props.person?.memberships?.total > 0
+  );
+});
+
 const actorIsOrganizer = computed((): boolean => {
  return (
    props.participations.length > 0 &&
--- a/src/graphql/event.ts
+++ b/src/graphql/event.ts
@@ -8,6 +8,7 @@ import {
 } from "./participant";
 import { TAG_FRAGMENT } from "./tags";
 import { CONVERSATIONS_QUERY_FRAGMENT } from "./conversations";
+import { GROUP_MINIMAL_FIELDS_FRAGMENTS } from "./group";

 const FULL_EVENT_FRAGMENT = gql`
  fragment FullEvent on Event {
@@ -49,7 +50,7 @@ const FULL_EVENT_FRAGMENT = gql`
      ...ActorFragment
    }
    attributedTo {
-      ...ActorFragment
+      ...GroupMinimalFields
    }
    participantStats {
      going
@@ -73,6 +74,7 @@ const FULL_EVENT_FRAGMENT = gql`
  ${TAG_FRAGMENT}
  ${EVENT_OPTIONS_FRAGMENT}
  ${ACTOR_FRAGMENT}
+  ${GROUP_MINIMAL_FIELDS_FRAGMENTS}
 `;

 export const FETCH_EVENT = gql`
@@ -146,7 +148,7 @@ export const FETCH_EVENTS = gql`
          ...ActorFragment
        }
        attributedTo {
-          ...ActorFragment
+          ...GroupMinimalFields
        }
        category
        tags {
@@ -162,6 +164,7 @@ export const FETCH_EVENTS = gql`
  ${TAG_FRAGMENT}
  ${EVENT_OPTIONS_FRAGMENT}
  ${ACTOR_FRAGMENT}
+  ${GROUP_MINIMAL_FIELDS_FRAGMENTS}
 `;

 export const CREATE_EVENT = gql`
@@ -358,12 +361,13 @@ export const PARTICIPANTS = gql`
        ...ActorFragment
      }
      attributedTo {
-        ...ActorFragment
+        ...GroupMinimalFields
      }
    }
  }
  ${PARTICIPANTS_QUERY_FRAGMENT}
  ${ACTOR_FRAGMENT}
+  ${GROUP_MINIMAL_FIELDS_FRAGMENTS}
 `;

 export const EVENT_PERSON_PARTICIPATION = gql`
@@ -445,7 +449,7 @@ export const FETCH_GROUP_EVENTS = gql`
            notApproved
          }
          attributedTo {
-            ...ActorFragment
+            ...GroupMinimalFields
          }
          organizerActor {
            ...ActorFragment
@@ -466,6 +470,7 @@ export const FETCH_GROUP_EVENTS = gql`
  ${EVENT_OPTIONS_FRAGMENT}
  ${ACTOR_FRAGMENT}
  ${ADDRESS_FRAGMENT}
+  ${GROUP_MINIMAL_FIELDS_FRAGMENTS}
 `;

 export const EXPORT_EVENT_PARTICIPATIONS = gql`
--- a/src/graphql/group.ts
+++ b/src/graphql/group.ts
@@ -53,6 +53,27 @@ export const LIST_GROUPS = gql`
  ${ACTOR_FRAGMENT}
 `;

+export const GROUP_MINIMAL_FIELDS_FRAGMENTS = gql`
+  fragment GroupMinimalFields on Group {
+    ...ActorFragment
+    suspended
+    visibility
+    openness
+    manuallyApprovesFollowers
+    allowSeeParticipants
+    members {
+      elements {
+        id
+        role
+        actor {
+          id
+        }
+      }
+    }
+  }
+  ${ACTOR_FRAGMENT}
+`;
+
 export const GROUP_VERY_BASIC_FIELDS_FRAGMENTS = gql`
  fragment GroupVeryBasicFields on Group {
    ...ActorFragment
--- a/src/views/Event/ParticipantsView.vue
+++ b/src/views/Event/ParticipantsView.vue
@@ -82,7 +82,7 @@
      detailed
      detail-key="id"
      v-model:checked-rows="checkedRows"
-      checkable
+      :checkable="canChange"
      :is-row-checkable="
        (row: IParticipant) => row.role !== ParticipantRole.CREATOR
      "
@@ -221,7 +221,7 @@
        </EmptyContent>
      </template>
    </o-table>
-    <div class="flex flex-wrap gap-2">
+    <div class="flex flex-wrap gap-2" v-if="canChange">
      <o-button
        @click="acceptParticipants(checkedRows)"
        variant="success"
@@ -283,6 +283,7 @@ import EmptyContent from "@/components/Utils/EmptyContent.vue";
 import { Notifier } from "@/plugins/notifier";
 import Tag from "@/components/TagElement.vue";
 import { useHead } from "@/utils/head";
+import { IMember } from "@/types/actor/member.model";

 const PARTICIPANTS_PER_PAGE = 10;
 const MESSAGE_ELLIPSIS_LENGTH = 130;
@@ -318,6 +319,14 @@ const checkedRows = ref<IParticipant[]>([]);

 const queueTable = ref();

+const is_enabled = computed((): boolean => {
+  return (
+    currentActor.value?.id !== undefined &&
+    page.value !== undefined &&
+    role.value !== undefined
+  );
+});
+
 const {
  result: participantsResult,
  loading: participantsLoading,
@@ -333,10 +342,7 @@ const {
    roles: role.value === "EVERYTHING" ? undefined : role.value,
  }),
  () => ({
-    enabled:
-      currentActor.value?.id !== undefined &&
-      page.value !== undefined &&
-      role.value !== undefined,
+    enabled: is_enabled.value,
  })
 );

@@ -354,6 +360,29 @@ const onPageChange = (p: number): void => {

 const event = computed(() => participantsResult.value?.event);

+const getGroupMember = computed<IMember | undefined>(
+  (): IMember | undefined => {
+    const group_members: IMember[] | undefined =
+      event.value?.attributedTo?.members.elements.filter(
+        (member: IMember) =>
+          member.actor.id?.toString() === currentActor.value?.id?.toString()
+      );
+    if (group_members?.length > 0) {
+      return group_members[0];
+    } else {
+      return undefined;
+    }
+  }
+);
+
+const canChange = computed(() => {
+  if (event.value?.attributedTo?.allowSeeParticipants) {
+    return getGroupMember.value?.role !== "MEMBER";
+  } else {
+    return true;
+  }
+});
+
 // const participantStats = computed((): IEventParticipantStats | null => {
 //   if (!event.value) return null;
 //   return event.value.participantStats;
--- a/tests/unit/specs/components/Event/EventActionSection.spec.ts
+++ b/tests/unit/specs/components/Event/EventActionSection.spec.ts
@@ -175,27 +175,24 @@ describe("EventActionSection", () => {
    expect(wrapper.find(".participations-link").text()).toBe(
      "No one is participating"
    );
-    expect(wrapper.findAll("o-dropdown > o-dropdown-item").length).toBe(7);
+    expect(wrapper.findAll("o-dropdown > o-dropdown-item").length).toBe(6);
    expect(
      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(1)").text()
-    ).toBe("Participations");
-    expect(
-      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(2)").text()
    ).toBe("Announcements");
    expect(
-      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(3)").text()
+      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(2)").text()
    ).toBe("Edit");
    expect(
-      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(4)").text()
+      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(3)").text()
    ).toBe("Duplicate");
    expect(
-      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(5)").text()
+      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(4)").text()
    ).toBe("Delete");
    expect(
-      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(6)").text()
+      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(5)").text()
    ).toBe("Share this event");
    expect(
-      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(7)").text()
+      wrapper.find("o-dropdown > o-dropdown-item:nth-of-type(6)").text()
    ).toBe("Add to my calendar");
    expect(
      wrapper
@@ -209,4 +206,54 @@ describe("EventActionSection", () => {
    );
    expect(wrapper.html()).toMatchSnapshot();
  });
+
+  it("event action section with event's group without permission for user/member", async () => {
+    const wrapper = generateWrapper(
+      {
+        attributedTo: {
+          id: 123,
+          uuid: "987654314231132",
+          allowSeeParticipants: false,
+        },
+        options: {
+          hideNumberOfParticipants: true,
+        },
+      },
+      undefined,
+      [],
+      {
+        memberships: {
+          total: 1,
+          elements: [{ role: "MEMBER" }],
+        },
+      }
+    );
+    await wrapper.vm.$nextTick();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("event action section with event's group with permission for user/member", async () => {
+    const wrapper = generateWrapper(
+      {
+        attributedTo: {
+          id: 123,
+          uuid: "987654314231132",
+          allowSeeParticipants: true,
+        },
+        options: {
+          hideNumberOfParticipants: true,
+        },
+      },
+      undefined,
+      [],
+      {
+        memberships: {
+          total: 1,
+          elements: [{ role: "MEMBER" }],
+        },
+      }
+    );
+    await wrapper.vm.$nextTick();
+    expect(wrapper.html()).toMatchSnapshot();
+  });
 });
--- a/tests/unit/specs/components/Event/snapshots/EventActionSection.spec.ts.snap
+++ b/tests/unit/specs/components/Event/snapshots/EventActionSection.spec.ts.snap
@@ -14,7 +14,6 @@ exports[`EventActionSection > event action section with basic informations 1`] =
      <!--v-if-->
      <!--v-if-->
      <!--v-if-->
-      <!--v-if-->
      <o-dropdown-item aria-role="listitem" class="p-1"><span class="flex gap-1"><share-stub fillcolor="currentColor" size="24"></share-stub> Share this event</span></o-dropdown-item>
      <o-dropdown-item aria-role="listitem"><span class="flex gap-1"><calendar-plus-stub fillcolor="currentColor" size="24"></calendar-plus-stub> Add to my calendar</span></o-dropdown-item>
      <!--v-if-->
@@ -56,16 +55,13 @@ exports[`EventActionSection > event action section with creator as participant 1
  <!--v-if-->
  <div class="flex flex-col gap-1 mt-1">
    <p class="inline-flex gap-2 ml-auto">
-      <ticket-confirmation-outline-stub fillcolor="currentColor" size="24"></ticket-confirmation-outline-stub><a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106/participations" class="participations-link">
+      <ticket-confirmation-outline-stub fillcolor="currentColor" size="24"></ticket-confirmation-outline-stub><a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106/participations" class="participations-link underline">
        <!-- We retire one because of the event creator who is a
                    participant --><span>No one is participating</span>
      </a>
      <!--v-if-->
    </p>
    <o-dropdown class="ml-auto">
-      <o-dropdown-item aria-role="listitem" has-link="">
-        <account-multiple-stub fillcolor="currentColor" size="24"></account-multiple-stub> Participations
-      </o-dropdown-item>
      <o-dropdown-item aria-role="listitem" has-link="">
        <bullhorn-stub fillcolor="currentColor" size="24"></bullhorn-stub> Announcements
      </o-dropdown-item>
@@ -113,6 +109,106 @@ exports[`EventActionSection > event action section with creator as participant 1
 </o-modal>"
 `;

+exports[`EventActionSection > event action section with event's group with permission for user/member 1`] = `
+"<div class="">
+  <!--v-if-->
+  <div class="flex flex-col gap-1 mt-1">
+    <p class="inline-flex gap-2 ml-auto">
+      <ticket-confirmation-outline-stub fillcolor="currentColor" size="24"></ticket-confirmation-outline-stub><a href="/events/f37910ea-fd5a-4756-9679-00971f3f4106/participations" class="participations-link underline">
+        <!-- We retire one because of the event creator who is a
+                    participant --><span>No one is participating</span>
+      </a>
+      <!--v-if-->
+    </p>
+    <o-dropdown class="ml-auto">
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      <o-dropdown-item aria-role="listitem" class="p-1"><span class="flex gap-1"><share-stub fillcolor="currentColor" size="24"></share-stub> Share this event</span></o-dropdown-item>
+      <o-dropdown-item aria-role="listitem"><span class="flex gap-1"><calendar-plus-stub fillcolor="currentColor" size="24"></calendar-plus-stub> Add to my calendar</span></o-dropdown-item>
+      <!--v-if-->
+    </o-dropdown>
+  </div>
+</div>
+<o-modal active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
+  <report-modal-stub title="Report this event"></report-modal-stub>
+</o-modal>
+<o-modal close-button-aria-label="Close" active="false" has-modal-card="">
+  <share-event-modal-stub event="[object Object]" eventcapacityok="true"></share-event-modal-stub>
+</o-modal>
+<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
+  <!--v-if-->
+</o-modal>
+<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Participation confirmation</p>
+    </header>
+    <section class="modal-card-body">
+      <p>The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?</p>
+      <form>
+        <o-field label="Message">
+          <o-input type="textarea" size="medium" modelvalue="" minlength="10"></o-input>
+        </o-field>
+        <div class="buttons">
+          <o-button native-type="button" class="button">Cancel</o-button>
+          <o-button variant="primary" type="submit">Confirm my participation</o-button>
+        </div>
+      </form>
+    </section>
+  </div>
+</o-modal>"
+`;
+
+exports[`EventActionSection > event action section with event's group without permission for user/member 1`] = `
+"<div class="">
+  <!--v-if-->
+  <div class="flex flex-col gap-1 mt-1">
+    <!--v-if-->
+    <o-dropdown class="ml-auto">
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+      <o-dropdown-item aria-role="listitem" class="p-1"><span class="flex gap-1"><share-stub fillcolor="currentColor" size="24"></share-stub> Share this event</span></o-dropdown-item>
+      <o-dropdown-item aria-role="listitem"><span class="flex gap-1"><calendar-plus-stub fillcolor="currentColor" size="24"></calendar-plus-stub> Add to my calendar</span></o-dropdown-item>
+      <!--v-if-->
+    </o-dropdown>
+  </div>
+</div>
+<o-modal active="false" has-modal-card="" close-button-aria-label="Close" autofocus="false" trapfocus="false">
+  <report-modal-stub title="Report this event"></report-modal-stub>
+</o-modal>
+<o-modal close-button-aria-label="Close" active="false" has-modal-card="">
+  <share-event-modal-stub event="[object Object]" eventcapacityok="true"></share-event-modal-stub>
+</o-modal>
+<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
+  <!--v-if-->
+</o-modal>
+<o-modal active="false" has-modal-card="" close-button-aria-label="Close">
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">Participation confirmation</p>
+    </header>
+    <section class="modal-card-body">
+      <p>The event organiser has chosen to validate manually participations. Do you want to add a little note to explain why you want to participate to this event?</p>
+      <form>
+        <o-field label="Message">
+          <o-input type="textarea" size="medium" modelvalue="" minlength="10"></o-input>
+        </o-field>
+        <div class="buttons">
+          <o-button native-type="button" class="button">Cancel</o-button>
+          <o-button variant="primary" type="submit">Confirm my participation</o-button>
+        </div>
+      </form>
+    </section>
+  </div>
+</o-modal>"
+`;
+
 exports[`EventActionSection > event action section with participant 1`] = `
 "<div class="">
  <!--v-if-->
@@ -127,7 +223,6 @@ exports[`EventActionSection > event action section with participant 1`] = `
      <!--v-if-->
      <!--v-if-->
      <!--v-if-->
-      <!--v-if-->
      <o-dropdown-item aria-role="listitem" class="p-1"><span class="flex gap-1"><share-stub fillcolor="currentColor" size="24"></share-stub> Share this event</span></o-dropdown-item>
      <o-dropdown-item aria-role="listitem"><span class="flex gap-1"><calendar-plus-stub fillcolor="currentColor" size="24"></calendar-plus-stub> Add to my calendar</span></o-dropdown-item>
      <!--v-if-->
--- a/tests/unit/specs/mocks/client.ts
+++ b/tests/unit/specs/mocks/client.ts
@@ -13,6 +13,7 @@ let mockClient: MockApolloClient | null;
 export let requestHandlers: Record<string, RequestHandler>;

 export function getMockClient(queries: Array<any>): any {
+  cache.reset();
  mockClient = createMockClient({
    cache,
    resolvers: buildCurrentUserResolver(cache),