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

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 &&

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`

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

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;