{"version":3,"file":"index.0e939735.js","sources":["../../../../pages/events/index.vue"],"sourcesContent":["<template>\n  <div class=\"container mx-auto lg:px-3.5\">\n    <GridLayout variant=\"guttersOnly\">\n      <div class=\"col-span-full flex flex-col py-20 lg:py-40\">\n        <Headline\n          variant=\"xxlarge\"\n          text=\"Events\"\n          level=\"h1\"\n          class=\"font-euclid mb-14 text-white\"\n        />\n        <div\n          class=\"flex w-full flex-col gap-5 text-white xl:flex-row xl:items-center\"\n        >\n          <Select\n            v-model:selectedValue=\"selectedDate\"\n            class=\"flex w-full outline-none\"\n            :items=\"dateItems\"\n            style=\"flex: 1 0 56px\"\n          />\n          <Select\n            v-model:selectedValue=\"selectedLocation\"\n            class=\"flex w-full outline-none\"\n            :items=\"locationItems\"\n            style=\"flex: 1 0 56px\"\n          />\n          <div\n            class=\"w-ful relative flex items-center justify-center\"\n            style=\"flex: 1 0 56px\"\n          >\n            <input\n              v-model=\"searchTerm\"\n              :class=\"[\n                `bg-black-600 font-mierb text-bodyLarge text-black-200 flex h-[56px] w-full pl-4 pr-10 font-medium outline-none`,\n                searchTerm ? 'text-white' : 'text-black-200',\n              ]\"\n              placeholder=\"Search\"\n            />\n            <Icon name=\"Search\" class=\"absolute right-4\" size=\"large\" />\n          </div>\n          <StrapiButton\n            class=\"w-full cursor-pointer justify-center md:w-max\"\n            text=\"clear\"\n            variant=\"secondary\"\n            @click=\"clearSearch()\"\n          />\n        </div>\n        <div v-if=\"shouldShowUpcomingEvents\">\n          <fieldset\n            class=\"mb-12 mt-9 box-border border border-transparent border-t-[#777B7C]\"\n          >\n            <legend class=\"text-black-100 m-auto px-6\">\n              {{ getCountPosts(getEventCountBasedOnType(\"upcoming\")) }}\n            </legend>\n          </fieldset>\n\n          <div class=\"flex flex-col gap-4\">\n            <h3\n              v-if=\"allEvents.length\"\n              class=\"text-capitalXSmall text-black-100 sm:text-capitalSmall font-semibold uppercase\"\n            >\n              Upcoming\n            </h3>\n            <WraplinkList\n              v-if=\"allEvents.length\"\n              :wrap-links=\"getUpcomingEvents(allEvents)\"\n            />\n          </div>\n        </div>\n        <div v-if=\"shouldShowPastEvents\">\n          <fieldset\n            class=\"mb-12 mt-9 box-border border border-transparent border-t-[#777B7C]\"\n          >\n            <legend class=\"text-black-100 m-auto px-6\">\n              {{ getCountPosts(getEventCountBasedOnType(\"past\")) }}\n            </legend>\n          </fieldset>\n          <div class=\"flex flex-col gap-4\">\n            <h3\n              v-if=\"allEvents.length && allEvents.length\"\n              class=\"text-capitalXSmall text-black-100 sm:text-capitalSmall font-semibold uppercase\"\n            >\n              Past\n            </h3>\n            <WraplinkList\n              v-if=\"allEvents.length\"\n              :wrap-links=\"getFilteredEvents(allEvents)\"\n            />\n          </div>\n        </div>\n        <div v-if=\"noEvents\" class=\"w-full\">\n          <fieldset\n            class=\"mb-12 mt-9 box-border border border-transparent border-t-[#777B7C]\"\n          >\n            <legend class=\"text-black-100 m-auto px-6\">\n              {{ getCountPosts(getEventCountBasedOnType(\"upcoming\")) }}\n            </legend>\n          </fieldset>\n          <div class=\"flex items-center justify-center\">\n            <Icon name=\"NoContent\" class=\"flex items-center justify-center\" />\n          </div>\n        </div>\n      </div>\n    </GridLayout>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref as vRef, computed as vComputed } from \"vue\";\nimport dayjs from \"dayjs\";\nimport Input from \"~/components/Input/Input.vue\";\nimport StrapiButton from \"~/components/StrapiButton/StrapiButton.vue\";\nimport {\n  tagBackground,\n  tagColors,\n  tagVariants,\n  wraperListInterface,\n} from \"~/components/Wraplink/types\";\nimport Icon from \"~/components/Icon/Icon.vue\";\nimport { sortByDate } from \"~/utils/sortByCondition\";\n\nconst selectOption = {\n  all: \"All Events\",\n  upcoming: \"Upcoming Events\",\n  past: \"Past Events\",\n  location: \"All Locations\",\n};\n\ninterface EventType {\n  attributes: {\n    slug: string;\n    title: string;\n    sections: {\n      date: string;\n      location: string;\n    }[];\n    tags?: {\n      data: {\n        attributes: {\n          backgroundColor?: tagBackground;\n          href?: string;\n          text?: string;\n          titleColor?: tagColors;\n          variant?: tagVariants;\n        };\n      }[];\n    };\n  };\n}\n\nconst { find } = useStrapi4();\nconst events: { data: [] } = await find(\"events\");\nconst selectedLocation = vRef(selectOption.location);\nconst selectedDate = vRef(selectOption.all);\n\nconst searchTerm = vRef(\"\");\nconst locationItems = vRef<{ name: string; value?: string }[]>([\n  { name: selectOption.location, value: selectOption.location },\n]);\nconst dateItems = vRef<{ name: string; value?: string }[]>([\n  { name: selectOption.all, value: selectOption.all },\n  { name: selectOption.upcoming, value: selectOption.upcoming },\n  { name: selectOption.past, value: selectOption.past },\n]);\n\nfunction clearSearch() {\n  searchTerm.value = \"\";\n  selectedLocation.value = selectOption.location;\n  selectedDate.value = selectOption.all;\n}\n\nfunction isUpcomingDate(date: string): boolean {\n  const currentDate = new Date();\n  const [day, month, year] = date.split(\".\");\n  const eventDate = new Date(`${year}-${month}-${day}`);\n  return eventDate > currentDate;\n}\n\nfunction getEventCountBasedOnType(type: \"upcoming\" | \"past\") {\n  if (type === \"upcoming\") {\n    return allEvents.value.filter((event) => isUpcomingDate(event.dateHeadline))\n      .length;\n  } else if (type === \"past\") {\n    return allEvents.value.filter(\n      (event) => !isUpcomingDate(event.dateHeadline)\n    ).length;\n  } else {\n    throw new Error(\n      'Invalid type parameter. It should be \"upcoming\" or \"past\".'\n    );\n  }\n}\n\nconst upcomingEventCount = vComputed(() => {\n  return getEventCountBasedOnType(\"upcoming\");\n});\n\nconst pastEventCount = vComputed(() => {\n  return getEventCountBasedOnType(\"past\");\n});\n\nconst shouldShowUpcomingEvents = vComputed(() => {\n  return (\n    (selectedDate.value === selectOption.all ||\n      selectedDate.value === selectOption.upcoming) &&\n    upcomingEventCount.value !== 0\n  );\n});\nconst shouldShowPastEvents = vComputed(() => {\n  return (\n    (selectedDate.value === selectOption.all ||\n      selectedDate.value === selectOption.past) &&\n    pastEventCount.value !== 0\n  );\n});\n\nconst noEvents = vComputed(() => {\n  return upcomingEventCount.value === 0 && pastEventCount.value === 0;\n});\n\nfunction getUpcomingEvents(\n  events: wraperListInterface[]\n): wraperListInterface[] {\n  return events\n    .filter((wrapper: wraperListInterface) =>\n      isUpcomingDate(wrapper.dateHeadline as string)\n    )\n    .sort((a, b) => sortByDate(a, b, \"ascending\", (item) => item.dateHeadline));\n}\n\nfunction getFilteredEvents(\n  events: wraperListInterface[]\n): wraperListInterface[] {\n  return events\n    .filter((wrapper) => {\n      if (selectedDate.value === selectOption.all) {\n        return !isUpcomingDate(wrapper.dateHeadline as string);\n      }\n      return wrapper;\n    })\n    .sort((a, b) =>\n      sortByDate(a, b, \"descending\", (item) => item.dateHeadline)\n    );\n}\n\nconst filterEventsBasedCondition = (array: {\n  wrapLinks: wraperListInterface[];\n}) => {\n  return array.wrapLinks.filter(\n    (wraper: wraperListInterface) =>\n      (selectedDate.value === selectOption.all ||\n        (selectedDate.value === selectOption.upcoming &&\n          isUpcomingDate(wraper.dateHeadline as string)) ||\n        (selectedDate.value === selectOption.past &&\n          !isUpcomingDate(wraper.dateHeadline as string))) &&\n      (selectedLocation.value === selectOption.location ||\n        selectedLocation.value === wraper.subTitle)\n  );\n};\nconst getCountPosts = (resultCount: number): string => {\n  const resultText = resultCount === 1 ? \"result\" : \"results\";\n  return `${resultCount} ${resultText} found`;\n};\n\nconst allEvents = vComputed(() => {\n  const buildEvents: { wrapLinks: wraperListInterface[] } = { wrapLinks: [] };\n  events.data.forEach((event: EventType) => {\n    const dateString = event?.attributes?.sections[0].date;\n    if (\n      !locationItems.value.find(\n        (item) => item.name === event?.attributes?.sections[0]?.location\n      )\n    ) {\n      locationItems.value.push({\n        name: event?.attributes?.sections[0]?.location,\n        value: event?.attributes?.sections[0]?.location,\n      });\n    }\n\n    buildEvents.wrapLinks.push({\n      headlineHighlighted: event.attributes.title,\n      subTitle: event.attributes.sections[0]?.location,\n      subTitleIcon: \"location_on\",\n      buttonText: \"SEE DETAILS\",\n      isNewTab: false,\n      buttonVariant: \"ghost\",\n      isButtonUnderline: true,\n      buttonIconName: \"arrow_forward\",\n      url: `/events/${event.attributes.slug}`,\n      buttonCustomStyle: \"color: white; padding: 0;\",\n      dateHeadline: dayjs(dateString).format(\"DD.MM.YYYY\"),\n      subTitleDate: dayjs(dateString).format(\"HH:mm\"),\n      tags: event.attributes.tags,\n    });\n  });\n\n  // Filter events based on selected option\n  const filteredEvents = filterEventsBasedCondition(buildEvents);\n  // Filter events based on searchterm\n  if (searchTerm.value) {\n    const searchRegex = new RegExp(searchTerm.value, \"i\");\n    return filteredEvents.filter(\n      (wraper) =>\n        wraper.headlineHighlighted &&\n        searchRegex.test(wraper.headlineHighlighted)\n    );\n  } else {\n    return filteredEvents;\n  }\n});\n</script>\n"],"names":["selectOption","find","useStrapi4","events","__temp","__restore","_withAsyncContext","selectedLocation","vRef","selectedDate","searchTerm","locationItems","dateItems","clearSearch","isUpcomingDate","date","currentDate","day","month","year","getEventCountBasedOnType","type","allEvents","event","upcomingEventCount","vComputed","pastEventCount","shouldShowUpcomingEvents","shouldShowPastEvents","noEvents","getUpcomingEvents","wrapper","a","b","sortByDate","item","getFilteredEvents","filterEventsBasedCondition","array","wraper","getCountPosts","resultCount","buildEvents","dateString","_a","_b","_c","_e","_d","_f","dayjs","filteredEvents","searchRegex"],"mappings":"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"}