Merge branch 'main' into add-event-creation-flow

aasimsyed · Jul 1, 2024 · 13e3cbe · 13e3cbe
2 parents d7a8001 + a2a115a
commit 13e3cbe
Show file tree

Hide file tree

Showing 37 changed files with 294 additions and 144 deletions.
diff --git a/frontend/app.vue b/frontend/app.vue
@@ -14,6 +14,7 @@
       <ModalCommandPalette
         @closeModal="handleCloseModal"
         :isOpen="modalIsOpen"
+        :modalName="modalName"
       />
       <NuxtPage />
     </NuxtLayout>
@@ -28,15 +29,18 @@ useHead({
     return titleChunk ? `${titleChunk} • activist` : "activist";
   },
 });
-
+const modals = useModals();
+const modalName = "generalModal";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 
 const { isMacOS } = useDevice();

diff --git a/frontend/components/card/CardDetails.vue b/frontend/components/card/CardDetails.vue
@@ -46,17 +46,22 @@
 <script setup lang="ts">
 import type { Event } from "~/types/events/event";
 
-const props = defineProps<{
+defineProps<{
   event?: Event;
 }>();
 
+const modals = useModals();
+const modalName = "ModalEditPageText";
+
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/about/CardAboutEvent.vue b/frontend/components/card/about/CardAboutEvent.vue
@@ -93,13 +93,17 @@ function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
 
+const modals = useModals();
+const modalName = "ModalEditAboutEvent";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/about/CardAboutGroup.vue b/frontend/components/card/about/CardAboutGroup.vue
@@ -119,13 +119,17 @@ function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
 
+const modals = useModals();
+const modalName = "ModalEditAboutGroup";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/about/CardAboutOrganization.vue b/frontend/components/card/about/CardAboutOrganization.vue
@@ -118,13 +118,17 @@ function expand_reduce_text() {
   expandText.value = !expandText.value;
 }
 
+const modals = useModals();
+const modalName = "ModalEditAboutOrganization";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedEvent.vue b/frontend/components/card/get-involved/CardGetInvolvedEvent.vue
@@ -52,13 +52,17 @@ defineProps<{
   disclaimer?: string;
 }>();
 
+const modals = useModals();
+const modalName = "ModalEditAboutEvent";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedGroup.vue b/frontend/components/card/get-involved/CardGetInvolvedGroup.vue
@@ -51,13 +51,17 @@ defineProps<{
   disclaimer?: string;
 }>();
 
+const modals = useModals();
+const modalName = "ModalEditAboutGroup";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue b/frontend/components/card/get-involved/CardGetInvolvedOrganization.vue
@@ -72,13 +72,17 @@ await organizationStore.fetchByID(id);
 
 const { organization } = organizationStore;
 
+const modals = useModals();
+const modalName = "ModalEditAboutOrganization";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/icon/IconOrganizationStatus.vue b/frontend/components/icon/IconOrganizationStatus.vue
@@ -74,14 +74,17 @@ defineProps<{
   status: number;
   organization: Organization;
 }>();
-
+const modals = useModals();
+const modalName = "ModalOrganizationStatus";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/media/image-carousel/MediaImageCarousel.vue b/frontend/components/media/image-carousel/MediaImageCarousel.vue
@@ -52,15 +52,18 @@ const imageUrls = [
   `${GET_ORGANIZED_IMAGE_URL}_${imageColor}.png`,
   `${GROW_ORGANIZATION_IMAGE_URL}_${imageColor}.png`,
 ];
-
+const modals = useModals();
+const modalName = "ModalUploadImages";
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
 

diff --git a/frontend/components/media/image-carousel/MediaImageCarouselFull.vue b/frontend/components/media/image-carousel/MediaImageCarouselFull.vue
@@ -18,13 +18,18 @@
 <script setup lang="ts">
 import { IconMap } from "~/types/icon-map";
 
+const modals = useModals();
+const modalName = "ModalMediaImage";
+
 const modalIsOpen = ref(false);
 
 function openModal() {
-  modalIsOpen.value = true;
+  modals.openModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 }
 
 const handleCloseModal = () => {
-  modalIsOpen.value = false;
+  modals.closeModal(modalName);
+  modalIsOpen.value = modals.modals[modalName].isOpen;
 };
 </script>
diff --git a/frontend/components/modal/ModalBase.vue b/frontend/components/modal/ModalBase.vue
@@ -1,9 +1,5 @@
 <template>
-  <Dialog
-    @close="closeModal()"
-    class="relative z-50"
-    :open="modalShouldClose == false ? modalIsOpen : false"
-  >
+  <Dialog @close="closeModal()" class="relative z-50" :open="modalIsOpen">
     <div
       @click="closeModal()"
       class="fixed inset-0 cursor-pointer bg-light-layer-0/95 dark:bg-dark-layer-0/95"
@@ -66,15 +62,18 @@ import { IconMap } from "~/types/icon-map";
 const props = defineProps<{
   isOpen: boolean;
   imageModal?: boolean;
+  modalName: string;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = props.modalName;
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const closeModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/ModalMediaImageCarousel.vue b/frontend/components/modal/ModalMediaImageCarousel.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <MediaImageCarousel :fullscreen="true" />
   </ModalBase>
@@ -12,13 +13,15 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalMediaImage";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 </script>
diff --git a/frontend/components/modal/ModalOrganizationStatus.vue b/frontend/components/modal/ModalOrganizationStatus.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="max-h-[80vh] px-2 pb-2 pt-1 lg:px-4 lg:pb-4 lg:pt-2">
       <DialogTitle class="font-display">
@@ -40,14 +41,16 @@ const props = defineProps<{
   isOpen: boolean;
 }>();
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+const modals = useModals();
+const modalName = "ModalOrganizationStatus";
+let modalIsOpen = computed(() => props.isOpen);
+
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 
 const modalOrganizationStatusData = inject<{

diff --git a/frontend/components/modal/ModalSharePage.vue b/frontend/components/modal/ModalSharePage.vue
@@ -1,7 +1,8 @@
 <template>
   <ModalBase
     @closeModal="handleCloseModal"
-    :isOpen="modalShouldClose == false ? modalIsOpen : false"
+    :isOpen="modalIsOpen"
+    :modalName="modalName"
   >
     <div class="px-2 pb-2 pt-1 lg:px-4 lg:pb-4 lg:pt-2">
       <DialogTitle class="font-display">
@@ -211,15 +212,16 @@ const props = defineProps<{
   user?: User;
   isOpen: boolean;
 }>();
+const modals = useModals();
+const modalName = "ModalSharePage";
+let modalIsOpen = computed(() => props.isOpen);
 
-const modalIsOpen = computed(() => props.isOpen);
-const modalShouldClose = ref(false);
+onMounted(() => {
+  modalIsOpen = computed(() => modals.modals[modalName].isOpen);
+});
 
-const emit = defineEmits(["closeModal"]);
 const handleCloseModal = () => {
-  modalShouldClose.value = true;
-  emit("closeModal");
-  modalShouldClose.value = false;
+  modals.closeModal(modalName);
 };
 
 const getEntityType = () => {