{"version":3,"file":"GroupEvents-JAZhVLpk.js","sources":["../../../src/components/Event/GroupedMultiEventMinimalistCard.vue","../../../src/views/Event/GroupEvents.vue"],"sourcesContent":["<template>\n  <div class=\"flex flex-col gap-6\">\n    <div class=\"flex flex-col gap-4\" v-for=\"key of keys\" :key=\"key\">\n      <h2 class=\"capitalize inline-block relative\">\n        {{ monthName(groupEvents(key)[0]) }}\n      </h2>\n      <event-minimalist-card\n        v-for=\"event in groupEvents(key)\"\n        :key=\"event.id\"\n        :event=\"event\"\n        :isCurrentActorMember=\"isCurrentActorMember\"\n      />\n    </div>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport { IEvent } from \"@/types/event.model\";\nimport { computed } from \"vue\";\nimport EventMinimalistCard from \"./EventMinimalistCard.vue\";\n\nconst props = withDefaults(\n  defineProps<{\n    events: IEvent[];\n    isCurrentActorMember?: boolean;\n    order: \"ASC\" | \"DESC\";\n  }>(),\n  { isCurrentActorMember: false, order: \"ASC\" }\n);\n\nconst monthlyGroupedEvents = computed((): Map<string, IEvent[]> => {\n  return props.events.reduce((acc: Map<string, IEvent[]>, event: IEvent) => {\n    const beginsOn = new Date(event.beginsOn);\n    const month = `${beginsOn.getUTCFullYear()}-${beginsOn.getUTCMonth()}`;\n    const monthEvents = acc.get(month) || [];\n    acc.set(month, [...monthEvents, event]);\n    return acc;\n  }, new Map());\n});\n\nconst keys = computed((): string[] => {\n  return Array.from(monthlyGroupedEvents.value.keys()).sort((a, b) => {\n    const aParams = a.split(\"-\").map((x) => parseInt(x, 10)) as [\n      number,\n      number,\n    ];\n    const aDate = new Date(...aParams);\n    const bParams = b.split(\"-\").map((x) => parseInt(x, 10)) as [\n      number,\n      number,\n    ];\n    const bDate = new Date(...bParams);\n    return props.order === \"DESC\"\n      ? bDate.getTime() - aDate.getTime()\n      : aDate.getTime() - bDate.getTime();\n  });\n});\n\nconst groupEvents = (key: string): IEvent[] => {\n  return monthlyGroupedEvents.value.get(key) || [];\n};\n\nconst monthName = (event: IEvent): string => {\n  const beginsOn = new Date(event.beginsOn);\n  return new Intl.DateTimeFormat(undefined, {\n    month: \"long\",\n    year: \"numeric\",\n  }).format(beginsOn);\n};\n</script>\n<style lang=\"scss\" scoped>\n.events-wrapper {\n  display: grid;\n  grid-gap: 20px;\n  grid-template: 1fr;\n}\n</style>\n","<template>\n  <div class=\"container mx-auto\" v-if=\"group\">\n    <breadcrumbs-nav\n      :links=\"[\n        {\n          name: RouteName.GROUP,\n          params: { preferredUsername: usernameWithDomain(group) },\n          text: displayName(group),\n        },\n        {\n          name: RouteName.GROUP_EVENTS,\n          params: { preferredUsername: usernameWithDomain(group) },\n          text: t('Events'),\n        },\n      ]\"\n    />\n    <section>\n      <h1 class=\"\" v-if=\"group\">\n        {{\n          t(\"{group}'s events\", {\n            group: displayName(group),\n          })\n        }}\n      </h1>\n      <p v-if=\"isCurrentActorMember\">\n        {{\n          t(\n            \"When a moderator from the group creates an event and attributes it to the group, it will show up here.\"\n          )\n        }}\n      </p>\n      <o-button\n        tag=\"router-link\"\n        variant=\"primary\"\n        v-if=\"isCurrentActorAGroupModerator\"\n        :to=\"{\n          name: RouteName.CREATE_EVENT,\n          query: { actorId: group.id },\n        }\"\n        >{{ t(\"+ Create an event\") }}</o-button\n      >\n      <o-loading v-model:active=\"groupLoading\"></o-loading>\n      <section v-if=\"group\">\n        <h2 class=\"text-2xl\">\n          {{ showPassedEvents ? t(\"Past events\") : t(\"Upcoming events\") }}\n        </h2>\n        <o-switch class=\"mb-4\" v-model=\"showPassedEvents\">{{\n          t(\"Past events\")\n        }}</o-switch>\n        <grouped-multi-event-minimalist-card\n          class=\"mb-6\"\n          :events=\"group.organizedEvents.elements\"\n          :isCurrentActorMember=\"isCurrentActorMember\"\n          :order=\"showPassedEvents ? 'DESC' : 'ASC'\"\n        />\n        <empty-content\n          v-if=\"\n            group.organizedEvents.elements.length === 0 &&\n            groupLoading === false\n          \"\n          icon=\"calendar\"\n          :inline=\"true\"\n          :center=\"true\"\n        >\n          {{ t(\"No events found\") }}\n          <template v-if=\"group.domain !== null\">\n            <div class=\"mt-4\">\n              <p>\n                {{\n                  t(\n                    \"This group is a remote group, it's possible the original instance has more informations.\"\n                  )\n                }}\n              </p>\n              <o-button variant=\"text\" tag=\"a\" :href=\"group.url\">\n                {{ t(\"View the group profile on the original instance\") }}\n              </o-button>\n            </div>\n          </template>\n        </empty-content>\n        <o-pagination\n          v-if=\"group.organizedEvents.total > EVENTS_PAGE_LIMIT\"\n          class=\"mt-4\"\n          :total=\"group.organizedEvents.total\"\n          v-model:current=\"page\"\n          :per-page=\"EVENTS_PAGE_LIMIT\"\n          :aria-next-label=\"t('Next page')\"\n          :aria-previous-label=\"t('Previous page')\"\n          :aria-page-label=\"t('Page')\"\n          :aria-current-label=\"t('Current page')\"\n        >\n        </o-pagination>\n      </section>\n    </section>\n  </div>\n</template>\n<script lang=\"ts\" setup>\nimport RouteName from \"@/router/name\";\nimport GroupedMultiEventMinimalistCard from \"@/components/Event/GroupedMultiEventMinimalistCard.vue\";\nimport { PERSON_MEMBERSHIPS } from \"@/graphql/actor\";\nimport { FETCH_GROUP_EVENTS } from \"@/graphql/event\";\nimport EmptyContent from \"../../components/Utils/EmptyContent.vue\";\nimport {\n  displayName,\n  IGroup,\n  IPerson,\n  usernameWithDomain,\n} from \"../../types/actor\";\nimport { useQuery } from \"@vue/apollo-composable\";\nimport { useCurrentActorClient } from \"@/composition/apollo/actor\";\nimport { computed, watch } from \"vue\";\nimport { useRoute } from \"vue-router\";\nimport {\n  booleanTransformer,\n  integerTransformer,\n  useRouteQuery,\n} from \"vue-use-route-query\";\nimport { MemberRole } from \"@/types/enums\";\nimport { useHead } from \"@unhead/vue\";\nimport { useI18n } from \"vue-i18n\";\n\nconst EVENTS_PAGE_LIMIT = 10;\n\nconst { currentActor } = useCurrentActorClient();\n\nconst { result: membershipsResult } = useQuery<{\n  person: Pick<IPerson, \"memberships\">;\n}>(\n  PERSON_MEMBERSHIPS,\n  () => ({ id: currentActor.value?.id }),\n  () => ({\n    enabled:\n      currentActor.value?.id !== undefined && currentActor.value?.id !== null,\n  })\n);\nconst memberships = computed(\n  () => membershipsResult.value?.person.memberships?.elements\n);\n\nconst route = useRoute();\nconst page = useRouteQuery(\"page\", 1, integerTransformer);\nconst showPassedEvents = useRouteQuery(\n  \"showPassedEvents\",\n  false,\n  booleanTransformer\n);\n\n/**\n * Why is the following hack needed? Page doesn't want to be reactive!\n * TODO: investigate\n */\nconst variables = computed(() => ({\n  name: route.params.preferredUsername as string,\n  beforeDateTime: showPassedEvents.value ? new Date() : null,\n  afterDateTime: showPassedEvents.value ? null : new Date(),\n  order: \"BEGINS_ON\",\n  orderDirection: showPassedEvents.value ? \"DESC\" : \"ASC\",\n  organisedEventsPage: page.value,\n  organisedEventsLimit: EVENTS_PAGE_LIMIT,\n}));\n\nwatch(\n  variables,\n  (newVariables) => {\n    refetch(newVariables);\n  },\n  { deep: true }\n);\n\nconst {\n  result: groupResult,\n  loading: groupLoading,\n  refetch: refetch,\n} = useQuery<\n  {\n    group: IGroup;\n  },\n  {\n    name: string;\n    beforeDateTime: Date | null;\n    afterDateTime: Date | null;\n    organisedEventsPage: number;\n    organisedEventsLimit: number;\n  }\n>(FETCH_GROUP_EVENTS, variables);\nconst group = computed(() => groupResult.value?.group);\n\nconst { t } = useI18n({ useScope: \"global\" });\nuseHead({\n  title: () =>\n    t(\"{group} events\", {\n      group: displayName(group.value),\n    }),\n});\n\nconst isCurrentActorMember = computed((): boolean => {\n  if (!group.value || !memberships.value) return false;\n  return (memberships.value ?? [])\n    .map(({ parent: { id } }) => id)\n    .includes(group.value.id);\n});\n\nconst isCurrentActorAGroupModerator = computed((): boolean => {\n  return hasCurrentActorThisRole([\n    MemberRole.MODERATOR,\n    MemberRole.ADMINISTRATOR,\n  ]);\n});\n\nconst hasCurrentActorThisRole = (givenRole: string | string[]): boolean => {\n  const roles = Array.isArray(givenRole) ? givenRole : [givenRole];\n  return (\n    memberships.value !== undefined &&\n    memberships.value?.length > 0 &&\n    roles.includes(memberships.value[0].role)\n  );\n};\n</script>\n"],"names":["props","__props","monthlyGroupedEvents","computed","acc","event","beginsOn","month","monthEvents","keys","a","b","aParams","x","aDate","bParams","bDate","groupEvents","key","monthName","EVENTS_PAGE_LIMIT","currentActor","useCurrentActorClient","membershipsResult","useQuery","PERSON_MEMBERSHIPS","_a","_b","memberships","route","useRoute","page","useRouteQuery","integerTransformer","showPassedEvents","booleanTransformer","variables","watch","newVariables","refetch","groupResult","groupLoading","FETCH_GROUP_EVENTS","group","t","useI18n","useHead","displayName","isCurrentActorMember","id","isCurrentActorAGroupModerator","hasCurrentActorThisRole","MemberRole","givenRole","roles"],"mappings":"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"}