Local commit:

Restored files from PR 1037. CardConnect.vue PopupNewField.vue organization.ts types/social-links-payload.ts
activist-org · Dec 7, 2024 · 5bb2947 · 5bb2947
1 parent 9bf2b37
commit 5bb2947
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 24 deletions.
diff --git a/frontend/components/card/CardConnect.vue b/frontend/components/card/CardConnect.vue
@@ -60,6 +60,7 @@
         }"
       >
         <Popover v-slot="{ close }" class="relative">
+          <!-- Mark: 'New Account' button -->
           <PopoverButton as="div">
             <BtnAction
               :cta="true"
@@ -79,9 +80,12 @@
             leave-to-class="opacity-0 translate-y-1"
           >
             <PopoverPanel class="absolute bottom-0 mb-12">
+              <!-- popup/PopupNewField.vue -->
               <PopupNewField
-                @on-cta-clicked="emit('on-new-account')"
-                @on-close-clicked="onClose(close)"
+                @add-clicked="
+                  (payload: AddPayload) => handlePopupAddClick(payload, close)
+                "
+                @on-close-clicked="close"
                 :title="$t('components.card_connect.app_account_popup_title')"
                 :fieldNamePrompt="
                   $t(
@@ -113,16 +117,16 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import type { Group } from "~/types/entities/group";
 import type { Organization } from "~/types/entities/organization";
 import type { Event } from "~/types/events/event";
+import type { AddPayload } from "~/types/social-links-payload";
 import { IconMap } from "~/types/icon-map";
 
 const props = defineProps<{
   pageType: "organization" | "group" | "event" | "other";
 }>();
 
-// TODO: restore after 1006 is resolved.
+// TODO: uncomment and delete 'true' line after issue 1006 is done.
 // const { userIsSignedIn } = useUser();
 const userIsSignedIn = true;
-
 const paramsId = useRoute().params.id;
 const paramsIdGroup = useRoute().params.groupId;
 
@@ -161,13 +165,26 @@ const socialLinksRef = computed<string[]>(() => {
   }
 });
 
-const toggleEditMode = () => {
-  editModeEnabled.value = !editModeEnabled.value;
-};
+const handlePopupAddClick = async (payload: AddPayload, close: () => void) => {
+  // Put the social links payload in the database.
+  // TODO: Needs more robust handling (ie try/catch + error trapping/handling)
+  const response = await organizationStore.addSocialLinks(
+    organization,
+    payload
+  );
+  if (response) {
+    console.log("org store addSocialLinks response: " + response);
+    console.log(
+      "CardConnect addSocialLinks payload: " + JSON.stringify(payload)
+    );
+  }
 
-const onClose = (close: (ref?: HTMLElement) => void) => {
   close();
 };
 
+const toggleEditMode = () => {
+  editModeEnabled.value = !editModeEnabled.value;
+};
+
 const emit = defineEmits(["on-new-account", "on-account-removed"]);
 </script>
diff --git a/frontend/components/popup/PopupNewField.vue b/frontend/components/popup/PopupNewField.vue
@@ -23,6 +23,7 @@
       id="popup-input"
       class="focus-brand h-8 w-52 rounded-sm border border-primary-text bg-transparent p-2"
       type="text"
+      required
       :placeholder="fieldNamePrompt"
     />
     <input
@@ -31,6 +32,7 @@
       id="popup-input"
       class="focus-brand h-8 w-52 rounded-sm border border-primary-text bg-transparent p-2"
       type="text"
+      required
       :placeholder="fieldLabelPrompt"
     />
     <label for="popup-textarea" class="sr-only"> {{ descriptionPrompt }}</label>
@@ -43,14 +45,11 @@
       cols="10"
       :placeholder="descriptionPrompt"
     ></textarea>
-    <div
-      @click="emit('on-cta-clicked', inputValue)"
-      @keypress.enter="emit('on-cta-clicked', inputValue)"
-      role="button"
-      tabindex="0"
-      class="mt-1"
-    >
+    <div role="button" tabindex="0" class="mt-1">
+      <!-- Mark: 'Add' button -->
       <BtnAction
+        @click="handleAddClick"
+        @keypress.enter="handleAddClick"
         :cta="true"
         linkTo="placeholder-link"
         :label="ctaBtnLabel"
@@ -75,16 +74,14 @@ defineProps<{
   ctaBtnAriaLabel: string;
 }>();
 
-const inputValue = ref<HTMLInputElement | null>(null);
-const inputLabel = ref<HTMLInputElement | null>(null);
+const emit = defineEmits(["add-clicked", "on-close-clicked"]);
 
 const inputValue = ref("");
 const inputLabel = ref("");
 
 const handleAddClick = () => {
   // Validate user input and emit 'add' event + payload to CardConnect.vue.
   // CardConnect.vue handles the data PUT's via the org store.
-  //
 
   if (!inputValue.value.trim()) {
     alert("Please enter a 'Link to account'.");
@@ -110,6 +107,4 @@ const handleAddClick = () => {
     label: inputLabel.value,
   });
 };
-
-const emit = defineEmits(["on-cta-clicked", "on-close-clicked"]);
 </script>
diff --git a/frontend/stores/organization.ts b/frontend/stores/organization.ts
@@ -5,6 +5,7 @@ import type {
   PiniaResOrganization,
   PiniaResOrganizations,
 } from "~/types/entities/organization";
+import type { AddPayload } from "~/types/social-links-payload";
 
 interface OrganizationStore {
   loading: boolean;
@@ -56,7 +57,7 @@ export const useOrganizationStore = defineStore("organization", {
       const token = localStorage.getItem("accessToken");
 
       const responseOrg = await useFetch(
-        `${BASE_BACKEND_URL}/entities/organizations/`,
+        `${BASE_BACKEND_URL as string}/entities/organizations/`,
         {
           method: "POST",
           body: JSON.stringify({
@@ -170,7 +171,7 @@ export const useOrganizationStore = defineStore("organization", {
       const token = localStorage.getItem("accessToken");
 
       const responseOrg = await $fetch(
-        BASE_BACKEND_URL + `/entities/organizations/${org.id}/`,
+        (BASE_BACKEND_URL as string) + `/entities/organizations/${org.id}/`,
         {
           method: "PUT",
           body: {
@@ -184,7 +185,7 @@ export const useOrganizationStore = defineStore("organization", {
       );
 
       const responseOrgTexts = await $fetch(
-        BASE_BACKEND_URL +
+        (BASE_BACKEND_URL as string) +
           `/entities/organization_texts/${org.organizationTextId}/`,
         {
           method: "PUT",
@@ -228,7 +229,7 @@ export const useOrganizationStore = defineStore("organization", {
       const token = localStorage.getItem("accessToken");
 
       const responseSocialLinks = await useFetch(
-        `${BASE_BACKEND_URL as string}/content/social_links/${org.id}`,
+        `${BASE_BACKEND_URL as string}/content/social_links/${org.id}/`,
         {
           method: "PUT",
           body: JSON.stringify({
@@ -248,6 +249,7 @@ export const useOrganizationStore = defineStore("organization", {
       if (responseSocialLinksData) {
         this.loading = false;
 
+        // return responseSocialLinksData.id;
         return responseSocialLinksData;
       }
 

diff --git a/frontend/types/social-links-payload.ts b/frontend/types/social-links-payload.ts
@@ -0,0 +1,4 @@
+export interface AddPayload {
+  link: string;
+  label: string;
+}