From bf7806e2eadcc7bd05fd42d78a65f5bd1bf014b4 Mon Sep 17 00:00:00 2001
From: Rahul Harpal <rahulharpal91@gmail.com>
Date: Tue, 1 Oct 2024 23:35:24 +0530
Subject: [PATCH 1/4] Added Modal for  organizations involved in the event. And
 also the (+# more) button

---
 frontend/components/card/CardDetails.vue      | 33 +++++++++--------
 .../modal/ModalOrganizationOverview.vue       | 36 +++++++++++++++++++
 frontend/components/modal/ModalSharePage.vue  |  1 +
 frontend/i18n/de.json                         |  3 +-
 frontend/i18n/en-US.json                      |  3 +-
 frontend/i18n/fr.json                         |  3 +-
 6 files changed, 62 insertions(+), 17 deletions(-)
 create mode 100644 frontend/components/modal/ModalOrganizationOverview.vue

diff --git a/frontend/components/card/CardDetails.vue b/frontend/components/card/CardDetails.vue
index 4d5bc4c00..520409cee 100644
--- a/frontend/components/card/CardDetails.vue
+++ b/frontend/components/card/CardDetails.vue
@@ -7,10 +7,9 @@
           <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'),
@@ -18,15 +17,24 @@
               $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"
-              :key="i"
-              :organization="o"
-            />
+              <MetaTagOrganization
+                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 +53,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;
 };
diff --git a/frontend/components/modal/ModalOrganizationOverview.vue b/frontend/components/modal/ModalOrganizationOverview.vue
new file mode 100644
index 000000000..feae0804c
--- /dev/null
+++ b/frontend/components/modal/ModalOrganizationOverview.vue
@@ -0,0 +1,36 @@
+<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 md:max-h-[50vh] md:overflow-y-auto py-2 pr-1">
+        <div v-if="event" class="space-y-3">
+          <div
+            v-for="(o, i) in event.organizations"
+            :key="i"
+            class="m-1 card-style 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>
diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
index 92d745d74..4bd1ca56b 100644
--- a/frontend/components/modal/ModalSharePage.vue
+++ b/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"];
diff --git a/frontend/i18n/de.json b/frontend/i18n/de.json
index af0957ba9..2fb6ef1d3 100644
--- a/frontend/i18n/de.json
+++ b/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"
-}
+}
\ No newline at end of file
diff --git a/frontend/i18n/en-US.json b/frontend/i18n/en-US.json
index 59bf2a1b5..25799a662 100644
--- a/frontend/i18n/en-US.json
+++ b/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"
-}
+}
\ No newline at end of file
diff --git a/frontend/i18n/fr.json b/frontend/i18n/fr.json
index 2cffff434..1d6513fe8 100644
--- a/frontend/i18n/fr.json
+++ b/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"
-}
+}
\ No newline at end of file

From 9d87e055a9e694c4f2658d7954148eccbe0e67ff Mon Sep 17 00:00:00 2001
From: Rahul Harpal <rahulharpal91@gmail.com>
Date: Wed, 2 Oct 2024 09:11:16 +0530
Subject: [PATCH 2/4] Ran Prettier

---
 frontend/components/card/CardDetails.vue      | 38 +++++++++++--------
 .../modal/ModalOrganizationOverview.vue       |  9 ++---
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/frontend/components/card/CardDetails.vue b/frontend/components/card/CardDetails.vue
index 520409cee..3687c0719 100644
--- a/frontend/components/card/CardDetails.vue
+++ b/frontend/components/card/CardDetails.vue
@@ -7,7 +7,10 @@
           <h3 class="responsive-h3 text-left font-display">
             {{ $t("components.card_details.header") }}
           </h3>
-          <IconEdit @click="openModal('ModalEditAboutEvent')" @keydown.enter="openModal('ModalEditAboutEvent')" />
+          <IconEdit
+            @click="openModal('ModalEditAboutEvent')"
+            @keydown.enter="openModal('ModalEditAboutEvent')"
+          />
           <!-- <ModalEditAboutEvent
             v-if="event"
             :event="event"
@@ -21,20 +24,25 @@
         </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.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"
-              />
+            <MetaTagOrganization
+              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"
diff --git a/frontend/components/modal/ModalOrganizationOverview.vue b/frontend/components/modal/ModalOrganizationOverview.vue
index feae0804c..5629502aa 100644
--- a/frontend/components/modal/ModalOrganizationOverview.vue
+++ b/frontend/components/modal/ModalOrganizationOverview.vue
@@ -6,16 +6,14 @@
           {{ $t("components.modal_organization_overview.header") }}
         </p>
       </DialogTitle>
-      <div class="mt-6 md:max-h-[50vh] md:overflow-y-auto py-2 pr-1">
+      <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="m-1 card-style p-2"
+            class="card-style m-1 p-2"
           >
-            <MetaTagOrganization
-              :organization="o"
-            />
+            <MetaTagOrganization :organization="o" />
           </div>
         </div>
       </div>
@@ -32,5 +30,4 @@ const props = defineProps<{
   event?: Event;
 }>();
 const modalName = "ModalOrganizationOverview";
-
 </script>

From fceae653955c8408321cf07aba1d76a19618b33e Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Fri, 15 Nov 2024 00:22:31 +0100
Subject: [PATCH 3/4] Fixes for i18n and frontend workflow checks

---
 frontend/components/modal/ModalOrganizationOverview.vue | 6 +++---
 frontend/i18n/de.json                                   | 7 +++----
 frontend/i18n/en-US.json                                | 7 +++----
 frontend/i18n/fr.json                                   | 7 +++----
 frontend/utils/navMenuItems.ts                          | 2 +-
 5 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/frontend/components/modal/ModalOrganizationOverview.vue b/frontend/components/modal/ModalOrganizationOverview.vue
index 5629502aa..686da6f86 100644
--- a/frontend/components/modal/ModalOrganizationOverview.vue
+++ b/frontend/components/modal/ModalOrganizationOverview.vue
@@ -3,7 +3,7 @@
     <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") }}
+          {{ $t("_global.organizations") }}
         </p>
       </DialogTitle>
       <div class="mt-6 py-2 pr-1 md:max-h-[50vh] md:overflow-y-auto">
@@ -22,11 +22,11 @@
 </template>
 
 <script setup lang="ts">
-import ModalBase from "~/components/modal/ModalBase.vue";
 import { DialogTitle } from "@headlessui/vue";
+import ModalBase from "~/components/modal/ModalBase.vue";
 import type { Event } from "~/types/events/event";
 
-const props = defineProps<{
+defineProps<{
   event?: Event;
 }>();
 const modalName = "ModalOrganizationOverview";
diff --git a/frontend/i18n/de.json b/frontend/i18n/de.json
index 954816ea7..a14264eb7 100644
--- a/frontend/i18n/de.json
+++ b/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",
@@ -260,7 +261,6 @@
   "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",
@@ -550,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"
-}
\ No newline at end of file
+  "types.topics.women": "Frauenrechte"
+}
diff --git a/frontend/i18n/en-US.json b/frontend/i18n/en-US.json
index d013d474e..475a9a65c 100644
--- a/frontend/i18n/en-US.json
+++ b/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",
@@ -261,7 +262,6 @@
   "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",
@@ -551,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"
-}
\ No newline at end of file
+  "types.topics.women": "Women's Rights"
+}
diff --git a/frontend/i18n/fr.json b/frontend/i18n/fr.json
index 7aae2e7b0..a0b17e8f1 100644
--- a/frontend/i18n/fr.json
+++ b/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",
@@ -256,7 +257,6 @@
   "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",
@@ -544,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"
-}
\ No newline at end of file
+  "types.topics.women": "Droits des femmes"
+}
diff --git a/frontend/utils/navMenuItems.ts b/frontend/utils/navMenuItems.ts
index c10ad4c22..cf916bf03 100644
--- a/frontend/utils/navMenuItems.ts
+++ b/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",
   },

From 103c479f5c321eba1f912afa0a0fffb399a02f9c Mon Sep 17 00:00:00 2001
From: Andrew Tavis McAllister <andrew.t.mcallister@gmail.com>
Date: Fri, 15 Nov 2024 01:04:42 +0100
Subject: [PATCH 4/4] Order imports and update org details functionality

---
 frontend/app.vue                              |  2 +-
 frontend/components/card/CardDetails.vue      | 31 ++++++++-----------
 .../components/card/about/CardAboutEvent.vue  |  1 +
 .../components/card/about/CardAboutGroup.vue  |  2 +-
 .../card/about/CardAboutOrganization.vue      |  2 +-
 .../CardGetInvolvedOrganization.vue           |  1 +
 .../edit/about/ModalEditAboutOrganization.vue |  2 +-
 frontend/pages/organizations/[id]/about.vue   |  2 +-
 8 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/frontend/app.vue b/frontend/app.vue
index 181692eab..76bf7f50a 100644
--- a/frontend/app.vue
+++ b/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"
 );
diff --git a/frontend/components/card/CardDetails.vue b/frontend/components/card/CardDetails.vue
index 3687c0719..bd629a751 100644
--- a/frontend/components/card/CardDetails.vue
+++ b/frontend/components/card/CardDetails.vue
@@ -8,8 +8,8 @@
             {{ $t("components.card_details.header") }}
           </h3>
           <IconEdit
-            @click="openModal('ModalEditAboutEvent')"
-            @keydown.enter="openModal('ModalEditAboutEvent')"
+            @click="openModalEditAboutEvent"
+            @keydown.enter="openModalEditAboutEvent"
           />
           <!-- <ModalEditAboutEvent
             v-if="event"
@@ -31,17 +31,16 @@
             />
             <button
               v-if="event.organizations.length > 1"
-              @click="openModal('ModalOrganizationOverview')"
-              @keydown.enter="openModal('ModalOrganizationOverview')"
+              @click="openModalOrganizationOverview"
+              @keydown.enter="openModalOrganizationOverview"
               class="text-sm font-semibold text-black"
             >
               (+{{ event.organizations.length - 1 }} more)
             </button>
             <ModalOrganizationOverview
-              @closeModal="handleCloseModal('ModalOrganizationOverview')"
+              @closeModal="openModalOrganizationOverview"
               :cta="true"
               :event="event"
-              :isOpen="modalIsOpen"
             />
           </div>
           <!-- <MetaTagAttendance
@@ -60,21 +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 modalIsOpen = ref(false);
-
-function openModal(modalName: string) {
-  modals.openModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-}
-
-const handleCloseModal = (modalName: string) => {
-  modals.closeModal(modalName);
-  modalIsOpen.value = modals.modals[modalName].isOpen;
-};
+const { openModal: openModalEditAboutEvent } = useModalHandlers(
+  "ModalEditAboutEvent"
+);
+const { openModal: openModalOrganizationOverview } = useModalHandlers(
+  "ModalCommandPalette"
+);
 </script>
diff --git a/frontend/components/card/about/CardAboutEvent.vue b/frontend/components/card/about/CardAboutEvent.vue
index 77dd685be..1e67e64f7 100644
--- a/frontend/components/card/about/CardAboutEvent.vue
+++ b/frontend/components/card/about/CardAboutEvent.vue
@@ -59,6 +59,7 @@
 
 <script setup lang="ts">
 import { useModalHandlers } from "~/composables/useModalHandlers";
+
 const { openModal: openModalEditAboutEvent } = useModalHandlers(
   "ModalEditAboutEvent"
 );
diff --git a/frontend/components/card/about/CardAboutGroup.vue b/frontend/components/card/about/CardAboutGroup.vue
index a9611bdae..95cec9946 100644
--- a/frontend/components/card/about/CardAboutGroup.vue
+++ b/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"
 );
diff --git a/frontend/components/card/about/CardAboutOrganization.vue b/frontend/components/card/about/CardAboutOrganization.vue
index 9fd305410..afacc181d 100644
--- a/frontend/components/card/about/CardAboutOrganization.vue
+++ b/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"
 );
diff --git a/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue b/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
index 5e8b7e287..c972add3f 100644
--- a/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
+++ b/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"
 );
diff --git a/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue b/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue
index b72abc336..a7f6434d3 100644
--- a/frontend/components/modal/edit/about/ModalEditAboutOrganization.vue
+++ b/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);
diff --git a/frontend/pages/organizations/[id]/about.vue b/frontend/pages/organizations/[id]/about.vue
index 0a5904366..e6d6114d0 100644
--- a/frontend/pages/organizations/[id]/about.vue
+++ b/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");