Merge pull request #982 from rahulharpal1603/fix-802

Model View for all organizations involved in an event

frontend/app.vue

@@ -10,9 +10,9 @@
 
 <script setup lang="ts">
 import { useMagicKeys, whenever } from "@vueuse/core";
+import { useModalHandlers } from "~/composables/useModalHandlers";
 import { commandPaletteData } from "~/types/command-palette";
 
-import { useModalHandlers } from "~/composables/useModalHandlers";
 const { openModal: openModalCommandPalette } = useModalHandlers(
   "ModalCommandPalette"
 );

frontend/components/card/CardDetails.vue

@@ -7,26 +7,41 @@
           <h3 class="responsive-h3 text-left font-display">
             {{ $t("components.card_details.header") }}
           </h3>
-          <IconEdit @click="openModal()" @keydown.enter="openModal()" />
-          <ModalEditAboutEvent
+          <IconEdit
+            @click="openModalEditAboutEvent"
+            @keydown.enter="openModalEditAboutEvent"
+          />
+          <!-- <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="openModalOrganizationOverview"
+              @keydown.enter="openModalOrganizationOverview"
+              class="text-sm font-semibold text-black"
+            >
+              (+{{ event.organizations.length - 1 }} more)
+            </button>
+            <ModalOrganizationOverview
+              @closeModal="openModalOrganizationOverview"
+              :cta="true"
+              :event="event"
+            />
           </div>
           <!-- <MetaTagAttendance
             :numAttending="event.attendees ? event.attendees.length : 0"
@@ -44,24 +59,17 @@
 </template>
 
 <script setup lang="ts">
+import { useModalHandlers } from "~/composables/useModalHandlers";
 import type { Event } from "~/types/events/event";
 
 defineProps<{
   event?: Event;
 }>();
 
-const modals = useModals();
-const modalName = "ModalEditPageText";
-
-const modalIsOpen = ref(false);
-
-function openModal() {
-  modals.openModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-}
-
-const handleCloseModal = () => {
-  modals.closeModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-};
+const { openModal: openModalEditAboutEvent } = useModalHandlers(
+  "ModalEditAboutEvent"
+);
+const { openModal: openModalOrganizationOverview } = useModalHandlers(
+  "ModalCommandPalette"
+);
 </script>

frontend/components/card/about/CardAboutEvent.vue

@@ -59,6 +59,7 @@
 
 <script setup lang="ts">
 import { useModalHandlers } from "~/composables/useModalHandlers";
+
 const { openModal: openModalEditAboutEvent } = useModalHandlers(
   "ModalEditAboutEvent"
 );

frontend/components/card/about/CardAboutGroup.vue

@@ -76,9 +76,9 @@
 </template>
 
 <script setup lang="ts">
+import { useModalHandlers } from "~/composables/useModalHandlers";
 import { IconMap } from "~/types/icon-map";
 
-import { useModalHandlers } from "~/composables/useModalHandlers";
 const { openModal: openModalEditAboutGroup } = useModalHandlers(
   "ModalEditAboutGroup"
 );

frontend/components/card/about/CardAboutOrganization.vue

@@ -82,9 +82,9 @@
 </template>
 
 <script setup lang="ts">
+import { useModalHandlers } from "~/composables/useModalHandlers";
 import { IconMap } from "~/types/icon-map";
 
-import { useModalHandlers } from "~/composables/useModalHandlers";
 const { openModal: openModalEditAboutOrganization } = useModalHandlers(
   "ModalEditAboutOrganization"
 );

frontend/components/card/get-involved/CardGetInvolvedOrganization.vue

@@ -80,6 +80,7 @@
 <script setup lang="ts">
 import { useModalHandlers } from "~/composables/useModalHandlers";
 import { IconMap } from "~/types/icon-map";
+
 const { openModal: openModalEditAboutOrganization } = useModalHandlers(
   "ModalEditAboutOrganization"
 );

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("_global.organizations") }}
+        </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 { DialogTitle } from "@headlessui/vue";
+import ModalBase from "~/components/modal/ModalBase.vue";
+import type { Event } from "~/types/events/event";
+
+defineProps<{
+  event?: Event;
+}>();
+const modalName = "ModalOrganizationOverview";
+</script>

frontend/components/modal/ModalSharePage.vue

@@ -248,6 +248,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";
 import { toast, Toaster } from "vue-sonner";
 import { useI18n } from "vue-i18n";
 

frontend/components/modal/edit/about/ModalEditAboutOrganization.vue

@@ -46,8 +46,8 @@
 </template>
 
 <script setup lang="ts">
-import type { OrganizationUpdateTextFormData } from "~/types/entities/organization";
 import { useModalHandlers } from "~/composables/useModalHandlers";
+import type { OrganizationUpdateTextFormData } from "~/types/entities/organization";
 
 const modalName = "ModalEditAboutOrganization";
 const { handleCloseModal } = useModalHandlers(modalName);

frontend/i18n/de.json

@@ -27,6 +27,7 @@
   "_global.on_github": "auf GitHub",
   "_global.organization": "Organisation",
   "_global.organization_name": "Organisationsname",
+  "_global.organizations": "Organisationen",
   "_global.public_matrix_chat_rooms": "öffentliche Matrix-Chaträume",
   "_global.repeat_password": "Passwort wiederholen",
   "_global.resources": "Ressourcen",
@@ -549,6 +550,5 @@
   "types.topics.racial_justice": "Rassengerechtigkeit",
   "types.topics.technology_privacy": "Technologie und Datenschutz",
   "types.topics.transparency": "Transparenz",
-  "types.topics.women": "Frauenrechte",
-  "utils.nav_menu_items.organizations": "Organisationen"
+  "types.topics.women": "Frauenrechte"
 }

frontend/i18n/en-US.json

@@ -27,6 +27,7 @@
   "_global.on_github": "on GitHub",
   "_global.organization": "Organization",
   "_global.organization_name": "Organization Name",
+  "_global.organizations": "Organizations",
   "_global.public_matrix_chat_rooms": "public Matrix chat rooms",
   "_global.repeat_password": "Repeat password",
   "_global.resources": "Resources",
@@ -550,6 +551,5 @@
   "types.topics.racial_justice": "Racial Justice",
   "types.topics.technology_privacy": "Technology and Privacy",
   "types.topics.transparency": "Transparency",
-  "types.topics.women": "Women's Rights",
-  "utils.nav_menu_items.organizations": "Organizations"
+  "types.topics.women": "Women's Rights"
 }

frontend/i18n/fr.json

@@ -27,6 +27,7 @@
   "_global.on_github": "sur GitHub",
   "_global.organization": "Organisation",
   "_global.organization_name": "Nom organization",
+  "_global.organizations": "Organisations",
   "_global.public_matrix_chat_rooms": "salons de tchat publics dans Matrix",
   "_global.repeat_password": "Répéter mot de passe",
   "_global.resources": "Ressources",
@@ -543,6 +544,5 @@
   "types.topics.racial_justice": "Justice raciale",
   "types.topics.technology_privacy": "Technologie et protection de la vie privée",
   "types.topics.transparency": "Transparence",
-  "types.topics.women": "Droits des femmes",
-  "utils.nav_menu_items.organizations": "Organisations"
+  "types.topics.women": "Droits des femmes"
 }

frontend/pages/organizations/[id]/about.vue

@@ -78,10 +78,10 @@
 </template>
 
 <script setup lang="ts">
+import { useModalHandlers } from "~/composables/useModalHandlers";
 import { BreakpointMap } from "~/types/breakpoint-map";
 import { IconMap } from "~/types/icon-map";
 
-import { useModalHandlers } from "~/composables/useModalHandlers";
 const { openModal: openModalSharePage } = useModalHandlers("ModalSharePage");
 
 const aboveLargeBP = useBreakpoint("lg");

frontend/utils/navMenuItems.ts

@@ -12,7 +12,7 @@ export const menuItems = [
     iconUrl: `${IconMap.EVENT}`,
   },
   {
-    label: "utils.nav_menu_items.organizations",
+    label: "_global.organizations",
     routeUrl: "/organizations",
     iconUrl: "IconOrganization",
   },