Merge pull request #153 from UTDallasEPICS/stage

I forgot to do git pull

components/CVReplySystem.vue

@@ -12,21 +12,21 @@ const props = defineProps<{
     replies: Reply[]
 }>()
 
+console.log(props.familyCuid)
 const replyData = ref<Partial<Reply>>({
     name: "",
     reply:"",
-    pageCuid: "",
-    familyCuid:"",
+    pageCuid: props.pageCuid,
+    familyCuid: props.familyCuid,
 })
 
 const clearSuccessMessage = () => {
     successMessage.value = '';
-    //replyData.value.name = ""; // Clear name field
-    //replyData.value.reply = ""; // Clear reply field
+    replyData.value.name = ""; // Clear name field
+    replyData.value.reply = ""; // Clear reply field
 }
 
 const successMessage = ref("");
-// todo: change to $fetch
 const submitComment = async () => {
     const response = await $fetch('/api/replies', {  // look at nuxt documentation for $fetch
       method: 'POST',
@@ -38,16 +38,16 @@ const submitComment = async () => {
     });
 
     if (response) {
-        replyData.value.pageCuid = props.pageCuid;
-        replyData.value.familyCuid = props.familyCuid;
-        emit('displayReply', replyData.value);
+        //replyData.value.pageCuid = props.pageCuid;
+        //replyData.value.familyCuid = props.familyCuid;
+        emit('displayReply', {...replyData.value});
         // replyData.value.name = ""; // Clear name field
         // replyData.value.reply = ""; // Clear reply field
         // need to find a way to clear fields after submitting a response without messing up the emitted data
         
-        successMessage.value = "Comment submitted successfully!"; // Set success message
+        //successMessage.value = "Comment submitted successfully!"; // Set success message
 
-        setTimeout(clearSuccessMessage, 3000);
+        setTimeout(clearSuccessMessage, 1500);
     }
     
 };

components/DonationEntry.vue

@@ -40,7 +40,6 @@ const create_checkout_session = async () => {
         isAnonymous: donationData.value.isAnonymous,
         comments: donationData.value.comments
     };
-
     const sessionInfo = await $fetch('/api/create_session', {
 
         method: 'POST',

components/ImageUpload.vue

@@ -22,11 +22,17 @@ const onFile = async (event: Event) => {
     const file = Files[i];
     // Creates the presigned url and enters the image into the database
     // todo: change to $fetch
-    const { data: imageData } = await useFetch('/api/image_upload', {
+    const imageDataObj = {
+      contentLength: file.size, 
+      contentType: file.type, 
+      file,
+      pageCuid: props.pageCuid
+    }
+    const imageData = await $fetch('/api/image_upload', {
       method: 'POST',
-      body: { contentLength: file.size, contentType: file.type, file, pageCuid: ref(props.pageCuid) }
+      body: imageDataObj
     });
-  const { uploadUrl, image} = imageData.value as unknown as imageLinkTypes;
+  const { uploadUrl, image } = imageData as unknown as imageLinkTypes;
 
   // Executing the image upload by using the presigned url and file as well as its size and type in the request
   const response = await fetch(uploadUrl, {

components/PayoutRecord.vue

@@ -17,7 +17,6 @@ const cvuser = useCookie<User>('cvuser')
 
 // Method that records donation payouts and increases the amount distributed for each page.
 const save = async () => {
-
   const result = await $fetch('/api/family_transaction_payout', {
 
     method: 'POST',

components/imagePreview.vue

@@ -38,7 +38,7 @@ const removeImage = async (cuid: string, isPreview: boolean) => {
   if(confirm('Are you sure you want to delete this image?')){
     const theImage = props.images.find((i:Image)=> i.cuid == cuid)
     // todo: change to $fetch
-    await useFetch('/api/image', {
+    await $fetch('/api/image', {
     method: 'delete',
     body: (theImage as Image)
     });

pages/EditPage/[EditPageId].vue

@@ -33,7 +33,8 @@ const cvuser2 = useCookie<User2>('cvuser')
 const data = ref<Page>({
     cuid: "",
     userCuid: "",
-    page_name: "",
+    page_first_name: "",
+    page_last_name: "",
     day_of_birth: "",
     day_of_passing:"",
     visitation_date: "",
@@ -145,16 +146,15 @@ const save = async () => {
         data.value.start_date = new Date().toString()
     }
 
-
-    const saveSuccess= await $fetch('/api/page', {
-
+    const saveSuccess = await $fetch('/api/page', {
         // Checks if there is a pre-existing page to edit or if to create a new page    
         method: router.params.EditPageId !== "0" ? 'PUT' : 'POST',
         body: ({ ...data.value })
     }
     )
     try {
 
+
         if (saveSuccess == true && isAdvocate.value) {
             errorInPage.value = false;
             await navigateTo('/PageList/' + data.value.userCuid + '?fromUsers=1')
@@ -265,15 +265,16 @@ CVContainer
     div
         .information.rounded-md.my-2.text-center(class="sm:text-start text-white bg-blue-999")
             CVLegend Personal Information
-        .py-4.flex.gap-60
-            .flex
-                CVLabel Page Name
-                CVHelpButton(class="inline-block" 
-    description="The first and last name of the recently deceased person this page should be dedicated to should be entered here") 
-                // TODO: Fix this frontend bit to facilitate page name => first and last name
-            CVInput.mx-11(v-model='data.page_name' placeholder="required" required)
-        //    .col-md-8.mx-9(class="sm:col-span-2 sm:mr-11")
-                CVInput(v-model='data.page_name' placeholder="required" required)
+
+        .py-4.grid(class="sm:grid-cols-3") 
+            CVLabel First Name
+            .col-md-8.mx-9(class="sm:col-span-2 sm:mr-11")
+                CVInput(v-model='data.page_first_name' placeholder="required" required)
+        .py-4.grid(class="sm:grid-cols-3") 
+            CVLabel Last Name
+            .col-md-8.mx-9(class="sm:col-span-2 sm:mr-11")
+                CVInput(v-model='data.page_last_name' placeholder="required" required)
+
         .py-4.grid(class="sm:grid-cols-3" v-if="isAdvocate")
             CVLabel Family
             .col-md-8.mx-9(class="sm:col-span-2 sm:mr-11")

pages/EditUser/[id].vue

@@ -66,8 +66,7 @@ const save = async () => {
     } else {
         errorInPage.value = true;
     }
-
-}
+  }
 
 }
 
@@ -95,7 +94,7 @@ if ((cuid.value as string) !== "0") {
   await getData(cuid.value as string);
 }
 
-    await getUsers()
+await getUsers()
 
 </script>
 

pages/FamilyReports.vue

@@ -4,6 +4,7 @@
 //todo: add selection for families instead of all at once and toggle between all at once and all families by having the first option as displaying every page
 //todo: 3 column by however many needed rows (flex-wrap) of checkboxes to enable and disable columns. Future idea: put a nicer version as a sidebar
 div
+
     TitleComp.border-1.border-black  Family Reports 
     br
     .flex.flex-col.gap-5.px-4.mx-auto.mt-8(class="w-3/4 sm:px-16")
@@ -67,6 +68,7 @@ div
       p {{  currentPage + 1 }}
   .col-md-10.px-2.mt-2
       button(@click="nextPage") >
+
 </template>
 
 <script setup lang='ts'>
@@ -118,39 +120,8 @@ div
   
   // converts array of family pages and their advocate responsible for the family into a csv
   function convertToCSV(arr : Partial<Page[]>) {
-    // todo: clean up and remove usages of any, idea for this is to use the pick type from typescript
-    // problem for Samuel: page_name will be set as first_name and last_name which will be on the same level as the user first_name and last_name
-    const listOfTags = ["page_name", "donation_goal", "amount_raised", "deadline", "amount_distributed", "donation_status", "duration", "start_date", "goal_met_date", "first_name", "middle_name", "last_name", "Amount Owed / Goal Percentage" ]
-    // removes every column not in list of tags
-    Object.keys(arr[0] || "").forEach((element: string) => {
-      const currentArr = ref<Partial<Page[]>>([])
-      if(!listOfTags.includes(element)) {
-        arr.forEach((d: any) => {
-        const { [element]: removedSeries , ...newObject  } = d
-        currentArr.value.push(newObject)
-    });
-      arr = currentArr.value 
-      }
-    })
-
-    //adds owed Percent
-    //todo: add something useful here or depreciate
-    type pageReport = Partial<Page> & { owedPercent: number | undefined }
-    const currentArr = ref<pageReport[]>([])
-    arr.forEach((d) => {
-        const owed = (d?.amount_raised as number) - (d?.amount_distributed as number)
-        const goal = (d?.donation_goal as number)
-        const owedPercent: number | undefined = goal != 0 ? ((100 * owed) / goal) : 0
-        
-        currentArr.value.push({...d, ['owedPercent']: owedPercent | 0} )
-    });
-
-    const array = [listOfTags].concat(currentArr.value as unknown as string[])
-  
-    // creates CSV
-    return array.map(it => {
-      return Object.values(it).toString()
-    }).join('\n')
+    const headers = ["page_first_name", "page_last_name", "donation_goal", "amount_raised", "deadline", "amount_distributed", "donation_status", "duration", "start_date", "goal_met_date", "first_name", "middle_name", "last_name", "Amount Owed / Goal Percentage" ]
+    return arr.reduce((acc: any[], page: any) => [...acc, headers.reduce((acc: string[], header: string) => [...acc, page[header]], []).join(",")], []).join("\n")
   }
 
 
@@ -169,24 +140,21 @@ div
   // loads family report data from the families database table and joins and creates a download link for the file
   const loadReports = async () => {
     if( isAdminAdvocate ) { 
-        const { data: familiesData } = await useFetch('/api/familiesReports', {
-        method: 'GET', 
-        query: { page_number: currentPage, start_date: start_date.value, end_date: end_date.value },
-        watch: [currentPage, start_date, end_date]
-        });
-        
-        families.value = familiesData.value?.paginated_pages as unknown as Family[]
-        totalLength.value = familiesData.value?.Pagination.total as unknown as number
-        console.log(families.value)
-        // gathering the family data into an array of family pages and their advocate responsible
-        familiesRaw.value = familiesData.value?.all_families as unknown as Family[]
-        familiesRaw.value.forEach((element: Family)  => { element.Pages.forEach((element2) => {familyPages.value.push( { ...element2 as unknown as Page[], ...element.AdvocateResponsible as any }) })})
-        const familyPagesArr = [...familyPages.value]
-        const csv = convertToCSV( familyPagesArr )
-        createCsvDownloadLink(csv)
+      const familiesData = await useFetch('/api/families', {
+        method: 'GET' 
+      });
+      
+      families.value = familiesData as unknown as Family[]
+      // gathering the family data into an array of family pages and their advocate responsible
+      families.value.forEach((element: Family)  => { element.Pages.forEach((element2) => {familyPages.value.push( { ...element2 as unknown as Page[], ...element.AdvocateResponsible as any }) })})
+      const familyPagesArr = [...familyPages.value]
+      
+      const csv = convertToCSV( familyPagesArr )
+      createCsvDownloadLink(csv)
     }
   }
 
+
     // Formats report date to the format 'yyyy-mm-dd'
     function formatReportDate(date: string) {
       const dates = date.split("-")
@@ -201,7 +169,7 @@ div
     
     // method activated by Advocate or Admin to manual remove the ability to donate to a family page after about a week of the donation deadline.
     // an advocate or admin can also re-enable a page to set its status from 'inactive' to 'active'
-    const togglePageStatus = (page: Page) => {
+    const togglePageStatus = async(page: Page) => {
       if(isAdminAdvocate.value) {
         let booleanChanged = false 
         if(page.status == "active") {
@@ -218,7 +186,7 @@ div
             page.status = "active"
 
             booleanChanged = true
-          } else if(!confirmDeactivate){
+          } else if(!confirmReactivate){
           return ""
           }
       } else if(page.status == "inactive" && !booleanChanged) {
@@ -229,14 +197,17 @@ div
         } else if(!confirmReactivate) {
         return ""
         }
+      }
 
-          booleanChanged = false          
-          const toggledStatus = $fetch('api/page', {
+        //booleanChanged = false         
+        if(booleanChanged) {
+          const toggledStatus = await $fetch('api/page', {
             method: "PUT",
             body: { ...page }
           })
         }
     }
+  }
     
 // Pagination control, move the page counter forwards and backwards and searches
 const nextPage = () => { 
@@ -246,13 +217,12 @@ const nextPage = () => {
         loadReports()
     } 
 }
-const prevPage= () => {
+const prevPage = () => {
     if(currentPage.value != 0){
         currentPage.value--
         loadReports()
     } 
   }
 // Invoke the initial data loading
 loadReports();
-    }
-    </script>
+</script>

pages/FamilyTransactionList.vue

@@ -106,8 +106,8 @@ const { data: Families } = await useFetch<Family[]>('/api/families', {
             leave-to-class='opacity-0'
           )
             ListboxOptions(as='div' class='w-full absolute z-10 mt-10 bg-white shadow-lg max-h-60 rounded-md px-2 py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm' )
-              ListboxOption(as='div' v-for="page in familyData.raw_data" :key="page.cuid" :value="page.cuid" class="px-2 border border-grey-500 py-1 my-1") {{ page.page_name }} | {{ donationFormat(page?.amount_raised - page?.amount_distributed) }}
-        ListboxButton(class='text-left bg-white relative rounded-md pl-2 pr-10 py-2 sm:text-sm w-96') {{ currentPageCuid ? currentPage.page_name : 'Select Page' }}
+              ListboxOption(as='div' v-for="page in familyData.raw_data" :key="page.cuid" :value="page.cuid" class="px-2 border border-grey-500 py-1 my-1") {{ page.page_first_name + " "  + page.page_last_name }} | {{ donationFormat(page?.amount_raised - page?.amount_distributed) }}
+        ListboxButton(class='text-left bg-white relative rounded-md pl-2 pr-10 py-2 sm:text-sm w-96') {{ currentPageCuid ? (currentPage.page_first_name || currentPage.page_last_name) : 'Select Page' }}
 
   .flex.gap-5.justify-around
     //these next two divs could theoretically be their own component with props
@@ -149,7 +149,7 @@ const { data: Families } = await useFetch<Family[]>('/api/families', {
               :key="i" 
               :class="{'bg-gray-200': (i+1) % 2}"
           )
-              td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ item?.page_name }}
+              td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ item?.page_first_name + " " + item?.page_last_name }}
               td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ donationFormat(item.amount_raised) }}
               td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ donationFormat(item.amount_raised-item.amount_distributed) }}
   .mb-9.py-7.flex.flex-wrap.gap-2.place-content-center
@@ -171,7 +171,8 @@ const { data: Families } = await useFetch<Family[]>('/api/families', {
               :class="{'bg-gray-200': (i+1) % 2}"
           )
               td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ item.transaction_id }}
-              td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ item.Page.page_name }}
+              td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ item.cuid }}
+              td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ item.Page.page_first_name + " " + item.Page.page_last_name }}
               td.font-poppins.text-gray-dark.font-bold(style="text-align: center")  {{ donationFormat(item.amount) }}
 </template>