Model View for all organizations involved in an event

frontend/components/card/CardDetails.vue

@@ -7,26 +7,42 @@
           <h3 class="responsive-h3 text-left font-display">
             {{ $t("components.card_details.header") }}
           </h3>
-          <IconEdit @click="openModal()" @keydown.enter="openModal()" />
-          <ModalEditAboutEvent
+          <IconEdit
+            @click="openModal('ModalEditAboutEvent')"
+            @keydown.enter="openModal('ModalEditAboutEvent')"
+          />
+          <!-- <ModalEditAboutEvent
             v-if="event"
-            @closeModal="handleCloseModal"
             :event="event"
             :sectionsToEdit="[
               $t('_global.about'),
               $t('components._global.participate'),
               $t('components._global.offer_to_help_link'),
             ]"
             :isOpen="modalIsOpen"
-          />
+          /> -->
         </div>
         <div v-if="event" class="flex-col space-y-6 py-2">
           <div class="flex items-center gap-3">
             <MetaTagOrganization
-              v-for="(o, i) in event.organizations"
+              v-for="(o, i) in event.organizations.slice(0, 1)"
               :key="i"
               :organization="o"
             />
+            <button
+              v-if="event.organizations.length > 1"
+              @click="openModal('ModalOrganizationOverview')"
+              @keydown.enter="openModal('ModalOrganizationOverview')"
+              class="text-sm font-semibold text-black"
+            >
+              (+{{ event.organizations.length - 1 }} more)
+            </button>
+            <ModalOrganizationOverview
+              @closeModal="handleCloseModal('ModalOrganizationOverview')"
+              :cta="true"
+              :event="event"
+              :isOpen="modalIsOpen"
+            />
           </div>
           <!-- <MetaTagAttendance
             :numAttending="event.attendees ? event.attendees.length : 0"
@@ -45,22 +61,19 @@
 
 <script setup lang="ts">
 import type { Event } from "~/types/events/event";
-
 defineProps<{
   event?: Event;
 }>();
 
 const modals = useModals();
-const modalName = "ModalEditPageText";
-
 const modalIsOpen = ref(false);
 
-function openModal() {
+function openModal(modalName: string) {
   modals.openModal(modalName);
   modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
-const handleCloseModal = () => {
+const handleCloseModal = (modalName: string) => {
   modals.closeModal(modalName);
   modalIsOpen.value = modals.modals[modalName].isOpen;
 };

frontend/components/modal/ModalOrganizationOverview.vue

@@ -0,0 +1,33 @@
+<template>
+  <ModalBase :modalName="modalName">
+    <div class="px-2 pb-2 pt-1 lg:px-4 lg:pb-4 lg:pt-2">
+      <DialogTitle class="font-display">
+        <p class="responsive-h2 font-bold">
+          {{ $t("components.modal_organization_overview.header") }}
+        </p>
+      </DialogTitle>
+      <div class="mt-6 py-2 pr-1 md:max-h-[50vh] md:overflow-y-auto">
+        <div v-if="event" class="space-y-3">
+          <div
+            v-for="(o, i) in event.organizations"
+            :key="i"
+            class="card-style m-1 p-2"
+          >
+            <MetaTagOrganization :organization="o" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </ModalBase>
+</template>
+
+<script setup lang="ts">
+import ModalBase from "~/components/modal/ModalBase.vue";
+import { DialogTitle } from "@headlessui/vue";
+import type { Event } from "~/types/events/event";
+
+const props = defineProps<{
+  event?: Event;
+}>();
+const modalName = "ModalOrganizationOverview";
+</script>

frontend/components/modal/ModalSharePage.vue

@@ -247,6 +247,7 @@ import type { Group } from "~/types/entities/group";
 import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
 import { IconMap } from "~/types/icon-map";
+import { DialogTitle } from "@headlessui/vue";
 
 const props = defineProps<{
   cta: BtnAction["cta"];

frontend/i18n/de.json

@@ -262,6 +262,7 @@
   "components.modal_command_palette.jump_to": "Springen zu",
   "components.modal_image_btn.open_modal_aria_label": "Größere Version dieses Bildes öffnen",
   "components.modal_organization_status.status_accepted": "Bewerbungsstatus: Angenommen",
+  "components.modal_organization_overview.header": "Organisationen",
   "components.modal_qr_code.aria_label": "QR-Code in einem neuen Tab öffnen",
   "components.modal_qr_code.download_qr_code": "QR-Code herunterladen",
   "components.modal_qr_code.download_qr_code_aria_label": "QR-Code herunterladen, der auf diese Seite verlinkt",
@@ -730,4 +731,4 @@
   "types.topics.transparency": "Transparenz",
   "types.topics.women": "Frauenrechte",
   "utils.nav_menu_items.organizations": "Organisationen"
-}
+}

frontend/i18n/en-US.json

@@ -266,6 +266,7 @@
   "components.modal_command_palette.jump_to": "Jump to",
   "components.modal_image_btn.open_modal_aria_label": "Open a larger version of this image",
   "components.modal_organization_status.status_accepted": "Application status: Accepted",
+  "components.modal_organization_overview.header": "Organizations",
   "components.modal_qr_code.aria_label": "Open the QR code in a new tab",
   "components.modal_qr_code.download_qr_code": "Download QR code",
   "components.modal_qr_code.download_qr_code_aria_label": "Download a QR code that links to this page",
@@ -734,4 +735,4 @@
   "types.topics.transparency": "Transparency",
   "types.topics.women": "Women's Rights",
   "utils.nav_menu_items.organizations": "Organizations"
-}
+}

frontend/i18n/fr.json

@@ -258,6 +258,7 @@
   "components.modal_command_palette.jump_to": "Sauter vers",
   "components.modal_image_btn.open_modal_aria_label": "Ouvrir une version agrandie de cette image",
   "components.modal_organization_status.status_accepted": "Statut de la demande : acceptée",
+  "components.modal_organization_overview.header": "Organizations",
   "components.modal_qr_code.aria_label": "Ouvrir le code QR dans un nouvel onglet",
   "components.modal_qr_code.download_qr_code": "Télécharger le code QR",
   "components.modal_qr_code.download_qr_code_aria_label": "Télécharger un code QR qui renvoie à cette page",
@@ -722,4 +723,4 @@
   "types.topics.transparency": "Transparence",
   "types.topics.women": "Droits des femmes",
   "utils.nav_menu_items.organizations": "Organisations"
-}
+}