Merge pull request activist-org#1328 from nicki182/1291_selector_view_events

1291 selector view events

Author: andrewtavis

frontend/components/events/EventsList.vue

@@ -0,0 +1,14 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
+<template>
+  <div v-for="event in events" class="space-y-6 pb-6 pt-3 md:pt-4">
+    <CardSearchResultEvent :isPrivate="false" :event="event" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Event } from "~/types/events/event";
+
+defineProps<{
+  events: Event[];
+}>();
+</script>

frontend/components/events/EventsMap.vue

@@ -0,0 +1,18 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
+<template>
+  <div class="space-y-6 pb-6 pt-3 md:pt-4">
+    <MediaMapEvents
+      v-if="events.length"
+      class="h-[calc(50vh-1rem)] w-full"
+      :events="events"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Event } from "~/types/events/event";
+
+defineProps<{
+  events: Event[];
+}>();
+</script>

frontend/components/form/FormViewSelector.vue

@@ -2,26 +2,31 @@
 <template>
   <RadioGroup
     v-model="value"
-    class="flex h-11 w-full items-center divide-x-2 divide-primary-text"
+    class="flex h-10 w-full px-1"
     :aria-label="$t('i18n.components.form_view_selector.title_aria_label')"
   >
     <RadioGroupOption
-      v-for="option in viewOptions"
-      :key="option"
+      v-for="(option, idx) in options"
+      :key="option.key"
       v-slot="{ checked }"
-      :name="option"
-      :value="option"
-      as="template"
+      class="flex flex-1"
+      :name="option.label || ''"
+      :value="option.value"
     >
       <button
-        class="h-full flex-1 border-y-2 border-primary-text first:rounded-l-xl first:border-l-2 last:rounded-r-xl last:!border-r-2"
-        :class="checked ? 'bg-menu-selection' : 'bg-layer-0'"
-        :aria-label="$t(viewAriaLabelsDict[option])"
+        class="flex-1 rounded-none"
+        :class="{
+          'style-menu-option-cta': checked,
+          'style-menu-option bg-layer-0': !checked,
+          'rounded-l-lg': idx === 0,
+          'rounded-r-lg': idx === options.length - 1,
+        }"
+        :aria-label="$t(option.aria_label)"
       >
         <Icon
-          class="h-full w-auto p-2"
-          :class="checked ? 'text-primary-text' : 'text-distinct-text'"
-          :name="viewTypeIcons[option]"
+          :name="option.content as string"
+          class="h-6 w-6"
+          :aria-hidden="true"
         />
       </button>
     </RadioGroupOption>
@@ -31,58 +36,26 @@
 <script setup lang="ts">
 import { RadioGroup, RadioGroupOption } from "@headlessui/vue";
 
-import { ViewType } from "~/types/view-types";
+type Option = {
+  value: string | number | boolean | Record<string, unknown> | undefined;
+  key: string;
+  content: HTMLElement | string;
+  aria_label: string;
+  label?: string;
+  isIcon?: boolean;
+};
 
-const props = defineProps({
-  modelValue: {
-    type: String as PropType<ViewType>,
-    required: true,
-  },
-  option1: {
-    type: String as PropType<ViewType>,
-    required: true,
-  },
-  option2: {
-    type: String as PropType<ViewType>,
-    required: true,
-  },
-  option3: {
-    type: String as PropType<ViewType>,
-    required: false,
-  },
-});
+const props = defineProps<{
+  modelValue: string | number | boolean | Record<string, unknown> | undefined;
+  options: Option[];
+}>();
 
-const emit = defineEmits(["update:modelValue"]);
+const emit = defineEmits<{
+  (e: "update:modelValue", value: typeof props.modelValue): void;
+}>();
 
 const value = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value: ViewType) {
-    emit("update:modelValue", value);
-  },
-});
-
-const viewOptions = computed(() => {
-  const options = [props.option1, props.option2];
-  if (props.option3) {
-    options.push(props.option3);
-  }
-  return options;
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
 });
-
-// Dictionary is used to assure that the full keys are present and picked up by the i18n checks.
-const viewAriaLabelsDict = {
-  map: "i18n.components.form_view_selector.view_as_map_aria_label",
-  list: "i18n.components.form_view_selector.view_as_list_aria_label",
-  calendar: "i18n.components.form_view_selector.view_as_calendar_aria_label",
-  grid: "i18n.components.form_view_selector.view_as_grid_aria_label",
-};
-
-const viewTypeIcons: Record<ViewType, string> = {
-  [ViewType.MAP]: "bi-pin-map-fill",
-  [ViewType.LIST]: "bi-list-ul",
-  [ViewType.GRID]: "bi-grid-3x2-gap-fill",
-  [ViewType.CALENDAR]: "bi-calendar-date",
-};
 </script>

frontend/components/media/MediaMap.vue renamed to frontend/components/media/map/MediaMap.vue

@@ -9,23 +9,27 @@
 <script setup lang="ts">
 import type { LayerSpecification } from "maplibre-gl";
 
-import { useMap } from "@/composables/useMap";
 import "maplibre-gl/dist/maplibre-gl.css";
 
-import type { Location } from "~/types/content/location";
-import type { Event, EventType } from "~/types/events/event";
-
 import { useClusterMap } from "~/composables/useClusterMap";
+import { useMap } from "~/composables/useMap";
+import { usePointerMap } from "~/composables/usePointerMap";
 import { useRouting } from "~/composables/useRoutingMap";
-import { MapType } from "~/types/map";
+import {
+  MapType,
+  type ClusterProperties,
+  type Pointer,
+  type PointerCluster,
+  type PopupContent,
+} from "~/types/map";
 
 const props = defineProps<{
-  eventNames?: string[];
-  eventTypes?: EventType[];
-  eventLocations?: Location[];
-  events?: Event[];
+  pointer?: Pointer;
   type: MapType;
-  ids?: string[];
+  pointers?: PointerCluster[];
+  clusterProperties?: ClusterProperties;
+  clusterTooltipCreate?: (pointer: unknown) => PopupContent;
+  pointerTooltipCreate?: (pointer: Pointer) => PopupContent;
 }>();
 
 const { createMap, isWebglSupported, addDefaultControls } = useMap();
@@ -41,9 +45,6 @@ const i18n = useI18n();
 const colorMode = useColorMode();
 const { setMapLayers, setMap } = useRouting();
 
-const attendLabelKey = "i18n.components._global.attend";
-const attendLabel = i18n.t(attendLabelKey) as string;
-
 const isTouchDevice =
   // Note: `maxTouchPoints` isn't recognized by TS. Safe to ignore.
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -81,7 +82,6 @@ const mapLayers: LayerSpecification[] = [
 ];
 
 // MARK: Map Creation
-
 onMounted(() => {
   if (!isWebglSupported()) {
     alert(i18n.t("i18n.components.media_map.maplibre_gl_alert"));
@@ -92,22 +92,28 @@ onMounted(() => {
     setMap(map);
 
     if (props.type === MapType.POINT) {
-      createMapForPointerTypeMap(
+      if (!props.pointer) {
+        console.error("Pointer is required for MapType.POINT");
+        return;
+      }
+      const pointer: Pointer = props.pointer;
+      createMapForPointerTypeMap(map, pointer, isTouchDevice);
+    }
+    if (props.type === MapType.CLUSTER) {
+      if (!props.pointers || props.pointers.length === 0) {
+        console.error("Pointers are required for MapType.CLUSTER");
+        return;
+      }
+      const { pointers } = props;
+      createMapForClusterTypeMap(
         map,
-        {
-          name: props.eventNames ? props.eventNames[0] : "",
-          type: props.eventTypes ? props.eventTypes[0] : "learn",
-          location: props.eventLocations
-            ? props.eventLocations[0]
-            : ({} as Location),
-          id: props.ids ? props.ids[0] : "",
-        },
+        pointers || [],
         isTouchDevice,
-        attendLabel
+        props.clusterProperties as ClusterProperties,
+        props?.clusterTooltipCreate as (pointer: unknown) => PopupContent,
+        props?.pointerTooltipCreate as (pointer: unknown) => PopupContent
       );
     }
-    if (props.type === MapType.CLUSTER)
-      createMapForClusterTypeMap(map, props.events || [], isTouchDevice);
   }
 });
 </script>

frontend/components/media/map/MediaMapEvent.vue

@@ -0,0 +1,77 @@
+<!-- SPDX-License-Identifier: AGPL-3.0-or-later -->
+<template>
+  <MediaMap
+    class="h-[17.5rem] w-full"
+    :pointer="pointer"
+    :type="MapType.POINT"
+  />
+</template>
+
+<script setup lang="ts">
+import type { Event, EventType } from "~/types/events/event";
+
+import { MapType, type Pointer } from "~/types/map";
+import { colorByType } from "~/utils/mapUtils";
+const organizationIcon = `/icons/map/tooltip_organization.png`;
+const calendarIcon = `/icons/map/tooltip_datetime.png`;
+const locationIcon = `/icons/map/tooltip_location.png`;
+const props = defineProps<{
+  event: Event;
+}>();
+const { event } = props;
+const buildExpandedTooltip = () => {
+  const root = document.createElement("div");
+  root.className = "w-[220px] cursor-pointer font-sans";
+
+  let tooltipClass = "";
+  if (event.type === "learn") {
+    tooltipClass =
+      "overflow-hidden bg-white rounded-sm border-l-8 border-l-[#2176AE]";
+  } else {
+    tooltipClass =
+      "overflow-hidden bg-white rounded-sm border-l-8 border-l-[#BA3D3B]";
+  }
+  const url = "";
+  const organization = "Organization"; // replace with actual organization name
+  const datetime = "Date and Time"; // replace with actual date and time
+
+  root.innerHTML = `
+      <a href="${url}" class="no-underline">
+        <div class="${tooltipClass}">
+          <div class="px-3 py-1">
+            <h3 class="font-display text-base text-black font-bold mb-2 leading-tight">${event.name}</h3>
+
+            <div class="flex items-center text-xs text-black mb-1.5 font-semibold space-x-2">
+              <img src="${organizationIcon}"/>
+              <span>${organization}</span>
+            </div>
+
+            <div class="flex items-center text-xs text-black mb-1.5 font-semibold space-x-2">
+              <img src="${calendarIcon}"/>
+              <span>${datetime}</span>
+            </div>
+
+            <div class="flex items-start text-xs text-black mb-1.5 font-semibold space-x-2">
+              <img src="${locationIcon}"/>
+              <span>${event.offlineLocation?.displayName.split(",").slice(0, 3).join(", ")}</span>
+            </div>
+          </div>
+        </div>
+      </a>
+    `;
+
+  return root;
+};
+const pointer: Pointer = {
+  id: event.id,
+  color: colorByType[event.type as EventType],
+  location: event.offlineLocation || {
+    displayName: event.name,
+    lat: "0",
+    lon: "0",
+    id: "",
+    bbox: ["0", "0", "0", "0"],
+  },
+  popup: buildExpandedTooltip(),
+};
+</script>