Merge branch 'stage' of ssh://github.com/UTDallasEPICS/carson-s-villa…

…ge into stage

components/CVReplySystem.vue

@@ -0,0 +1,66 @@
+<script lang="ts" setup>
+import CVTextArea from './CVTextArea.vue';
+import CVInput from './CVInput.vue';
+import ActionButton from './ActionButton.vue';
+import type {Reply} from '@/types.d.ts'
+
+const emit = defineEmits(["displayReply"]);
+
+const props = defineProps<{
+    pageCuid: string
+    familyCuid: string
+    replies: Reply[]
+}>()
+
+const replyData = ref<Partial<Reply>>({
+    name: "",
+    reply:"",
+    pageCuid: "",
+    familyCuid:"",
+})
+
+const clearSuccessMessage = () => {
+    successMessage.value = '';
+}
+
+const successMessage = ref("");
+const submitComment = async () => {
+    const response = await useFetch('/api/replies', {  // look at nuxt documentation for $fetch
+      method: 'POST',
+      body: {
+        pageCuid: props.pageCuid,
+        familyCuid: props.familyCuid,
+        replyData,
+      },
+    });
+
+    if (response) {
+        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
+
+        setTimeout(clearSuccessMessage, 3000);
+    }
+    
+};
+
+</script>
+
+<template lang="pug">
+.comment-system.flex.flex-col.items-center(class="sm:mx-4 sm:w-full sm:py-2")
+      h2.text-center.mt-4.mb-6.font-bold Leave a Message
+      CVTextArea(name='reply' v-model="replyData.reply" placeholder='Replies' class="font-normal h-40 w-full")
+      .field-row.flex.mt-4.w-full
+          CVInput(name='name' v-model="replyData.name" placeholder='Name' class="font-normal w-full")     
+      .col-md-8.ml-4.pt-6.pr-5.flex.items-center.justify-center.mt-6
+          ActionButton.mx-auto.text-md(@click="submitComment") Submit
+      .div(v-if="successMessage" class="mt-4 text-green-500") {{ successMessage }}
+</template>
+
+<style scoped></style>
+

components/DonationEntry.vue

@@ -2,51 +2,6 @@
 import type { Page, PageDonation, Image } from '@/types.d.ts'
 import {  dateFormat, donationFormat } from '@/utils'
 
-const pageData = ref<Page>({
-    cuid: "",
-    familyCuid: "",
-    userCuid: "",
-    page_name: "",
-    day_of_birth: "",
-    day_of_passing: "",
-    visitation_date: "",
-    visitation_location: "",
-    visitation_description: "",
-    funeral_date: "",
-    funeral_description: "",
-    funeral_location: "",
-    obituary: "",
-    deadline: "",
-    donation_goal: 0,
-    amount_raised: 0,
-    amount_distributed: 0,
-    profileImageCuid: "",
-    Images: []
-});
-
-type donor = {
-    first_name: string,
-    last_name: string,
-    isAnonnomous: boolean,
-    comments: string 
-}
-const donorInfo = ref<donor>({
-    first_name: "",
-    last_name: "",
-    isAnonnomous: false,
-    comments: "",
-})
-
-const donationData = ref<PageDonation>({
-    amount: 0,
-    success: false,
-    cuid: "",
-    pageCuid: "",
-    userCuid: "",
-    familyCuid: "",
-    transaction_id : ""
-});
-
 const props = defineProps({
     pageCuid: {
         type: String,
@@ -61,12 +16,32 @@ const props = defineProps({
         default: ""
     }
 })
-console.log(props.familyCuid)
+
+const donationData = ref<PageDonation>({
+    amount: 0,
+    success: false,
+    cuid: "",
+    userCuid: "",
+    pageCuid: props.pageCuid,
+    familyCuid: "",
+    transaction_id : "",
+    donorFirstName: "",
+    donorLastName: "",
+    comments: "", 
+    isAnonymous : false
+});
+
 const stripeLink_ref = ref("")
 const create_checkout_session = async () => {
+    const donorData = {
+        first_name: donationData.value.donorFirstName,
+        last_name: donationData.value.donorLastName,
+        isAnonymous: donationData.value.isAnonymous,
+        comments: donationData.value.comments
+    };
     const { data : sessionInfo } = await useFetch('/api/create_session', {
         method: 'POST',
-        body: {cuid: props.pageCuid, userCuid: props.userCuid, familyCuid: props.familyCuid, amount_raised: Math.trunc(parseFloat(donationData.value.amount as unknown as string) * 100) as number}
+        body: { ...donationData.value, cuid: props.pageCuid, family_cuid: props.familyCuid, amount_raised: Math.trunc(parseFloat(donationData.value.amount as unknown as string) * 100) as number}
     });
     stripeLink_ref.value = sessionInfo.value as string
     await navigateTo(stripeLink_ref.value as string,  { external: true } )
@@ -77,14 +52,14 @@ const create_checkout_session = async () => {
 
 <template lang="pug">
 .col-md-8.ml-4.pt-1.pr-5(class="sm:mx-4 sm:w-full sm:py-2")
-    CVInput(name='first_name' type='text' v-model="donorInfo.first_name" placeholder='First Name' required)
+    CVInput(name='first_name' type='text' v-model="donationData.donorFirstName" placeholder='First Name' required)
 .col-md-8.ml-4.pt-1.pr-5(class="sm:mx-4 sm:w-full sm:py-2")
-    CVInput(name='last_name' type='text' v-model="donorInfo.last_name" placeholder='Last Name' required)
+    CVInput(name='last_name' type='text' v-model="donationData.donorLastName" placeholder='Last Name' required)
 .col-md-8.ml-4.pt-4.pr-5.flex
     input#anonymous(type='checkbox' class="sm:ml-1" name='anonymous' value='Bike')
     label.mt-4.ml-4.text-md(for='anonymous' class="sm:mt-0" style="letter-spacing: 0.35px;")  Make this an anonymous donation
 .col-md-8.ml-4.pt-4.pr-5.flex(class="sm:mx-4 sm:w-full sm:py-2")
-    textarea#comments.rounded-md.outline-0.border-box.w-full.p-2(style="border: 1px solid #c4c4c4;" name='comments' rows='3' v-model="donorInfo.comments" placeholder='Comments' required)
+    textarea#comments.rounded-md.outline-0.border-box.w-full.p-2(style="border: 1px solid #c4c4c4;" name='comments' rows='3' v-model="donationData.comments" placeholder='Comments' required)
 .col-md-8.ml-4.pt-4.pr-5.grid.grid-cols-3(class="sm:mx-4 sm:w-full sm:py-2")
     span.rounded-l-md.p-3.col-span-2(style="text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25); border: 1px solid #c4c4c4;") Donation Amount
     .flex

pages/EditPage/[EditPageId].vue

@@ -49,6 +49,8 @@ const data = ref<Page>({
     amount_distributed: 0,
     profileImageCuid: "",
     Images: [], 
+    PageDonations: [], 
+    Reply: [], 
     familyCuid: ""
 })
 

pages/Page/[id].vue

@@ -9,8 +9,9 @@
 *	Located under "/Page/"
 */
 
-import type { Page, PageDonation, Image } from '@/types.d.ts'
+import type { Page, PageDonation, Image, Reply} from '@/types.d.ts'
 import {  dateFormat, donationFormat } from '@/utils'
+import CVReplySystem from '@/components/CVReplySystem.vue'
 
 const pageData = ref<Page>({
     cuid: "",
@@ -31,7 +32,9 @@ const pageData = ref<Page>({
     amount_raised: 0,
     amount_distributed: 0,
     profileImageCuid: "",
-    Images: []
+    Images: [],
+    PageDonations:[],
+    Reply:[]
 });
 
 
@@ -42,7 +45,11 @@ const donationData = ref<PageDonation>({
     pageCuid: "",
     userCuid: "",
     familyCuid: "",
-    transaction_id : ""
+    transaction_id : "",
+    donorFirstName: "",
+    donorLastName: "",
+    comments: "", 
+    isAnonymous : false
 });
 
 const userCuid = ref("0")
@@ -57,6 +64,8 @@ const id = computed(() =>  router.params.id);
 const pageCuid = id.value as string
 const cvuser = useCookie<Page>('cvuser')
 const stripeLink_ref = ref("")
+// const Replies = ref<Reply[]>([]);
+// const comments = ref<PageDonation[]>([])
 donationData.value.pageCuid = id.value as string;
 donationData.value.familyCuid = pageData.value.familyCuid
 
@@ -74,16 +83,15 @@ const create_checkout_session = async () => {
 };
 
 // Method to populate the page with data based on the cuid in the url
-const getDataPage = async( id: string ) => { 
-    const { data : pageDataDB } = await useFetch('/api/page', {
-    method: 'GET',
-    query: { cuid: id }
-})
+//const getDataPage = async( id: string ) => { 
+    const { data : pageDataDB } = await useFetch<Page>('/api/page', {
+        method: 'GET',
+        query: { cuid: id }
+    })
 
-if(pageDataDB.value !== false){
+if(!pageDataDB.value){
     pageData.value = pageDataDB.value as unknown as Page;
     donated_percentage.value = (((pageData.value.amount_raised as number) / (pageData.value.donation_goal as number )) * 100).toFixed(1) + "";
-    familyCuid.value = pageData.value.familyCuid as string;
     userCuid.value = pageData.value.userCuid
     //familyCuid = family_cuid.value as string
     familyCuid.value = pageData.value.familyCuid as string
@@ -93,18 +101,21 @@ if(pageDataDB.value !== false){
     }
     // Sets the front end images including the profile image
     if(pageData.value.Images?.length != 0)
-        imageData.value = pageData.value.Images as unknown as Image[] 
+        imageData.value = pageData.value.Images as unknown as Image[]
         for(let i = 0; i < imageData.value?.length; i++){
             if(imageData.value[i].cuid === pageData.value.profileImageCuid){
                 profileImageLink.value = imageData.value[i].url
                 break;
             }
         }
         console.log(donation_goal_provided.value)
+
 }
-}
 
-await getDataPage(id.value as string)
+const comments = computed(() => pageDataDB.value?.PageDonations)
+const replies = computed(() => pageDataDB.value?.Reply)
+
+
 
 // images for testing if needed.
 /*const temp = ref([
@@ -133,6 +144,9 @@ const prevImage = () => {
         currentImage.value--
     }
     }
+const DisplayReply = async (reply: Reply) => {
+    pageDataDB.value?.Reply.push(reply)
+}
 </script>
 
 <template lang="pug">
@@ -194,8 +208,20 @@ const prevImage = () => {
             CVProgress(v-else style="text-align:center;" modelBarWidth="0")  {{ donated_percentage   + "%" }}
         .well.well-sm
             h1.ml-4.pt-9.text-2xl.text-gray-dark(class="sm:text-3xl" style="font-weight: 600; letter-spacing: 0.35px;") Donor Information
-        DonationEntry(:donationData="donationData" :pageCuid="pageCuid" :familyCuid="familyCuid" :userCuid="userCuid")
-
+        DonationEntry(:donationData="donationData" :pageCuid="pageCuid" :familyCuid="familyCuid")
+        .py-4.grid.flex-box.flex-row.item-centered.gap-1(v-if="comments?.length" style="line-height: 0px;text-align: center")
+            .div.py-4.grid.gap-4(class="w-full" style="grid-template-columns: repeat(3, 1fr);")
+                .div(v-for="(comment, i) in comments" :key="i" class="comment-box")
+                    .comment-box(style="flex: calc(30% - 1rem); height: 10rem; margin: 0.5rem; padding: 1rem; border-radius: 8px; background-color: #fff; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.05);")
+                        .comment-header(style="font-size: 0.75rem; font-weight: bold; margin-bottom: 1.5rem;") {{ comment.donorFirstName }} {{ comment.donorLastName }}
+                        .comment-body(style="font-size: 0.75rem; color: #666;") {{ comment.comments }}
+        CVReplySystem(:pageCuid="pageCuid" :familyCuid="familyCuid" :replies="replies" @displayReply="DisplayReply")
+        .py-4.grid.flex-box.flex-row.item-centered.gap-1(v-if="replies?.length" style="line-height: 0px;text-align: center")
+            div(class="flex")
+            .div(v-for="(reply,i) in replies" :key="i" class="reply-box")
+                .reply-box(v-if="reply.reply.length > 0" style="padding: 1rem; text-align: left; border-bottom: 1px solid black") 
+                    .reply-header(style="font-size: 1rem; font-weight: bold; margin-bottom: 2.5rem; margin-left: 1rem") {{reply.name}}
+                    .reply-body(style="font-size: 1rem; color: #666; margin-bottom: 2.5rem;") {{reply.reply}}
     .col-md-8.mx-9(class="sm:col-span-1 sm:mr-11")
         .div.px-8.py-4(style="color: #6E6E6E; font-weight: 500; font-size: 14px; line-height: 28px; letter-spacing: -0.078px; word-break: break-word;" id="obituary") {{ pageData.obituary }}
 </template>

prisma/schema.prisma

@@ -77,8 +77,10 @@ model Page {
   Images             Image[]
   amount_distributed Int              @default(0)
   profileImageCuid   String           @map("profile_image_cuid")
-  Family             Family?          @relation(fields: [familyCuid], references: cuid)
-  familyCuid         String?          @map("family_cuid")
+  Reply              Reply[]
+
+  Family     Family? @relation(fields: [familyCuid], references: cuid)
+  familyCuid String? @map("family_cuid")
 
   @@map("pages")
 }
@@ -87,15 +89,29 @@ model PageDonation {
   cuid           String  @id @default(cuid())
   familyCuid     String  @map("family_cuid")
   pageCuid       String  @map("page_cuid")
+  donorFirstName String  @default("")
+  donorLastName  String  @default("")
+  comments       String  @default("")
+  isAnonymous    Boolean @default(false)
   success        Boolean @default(false)
   transaction_id String  @unique
   amount         Int //In cents
   Family         Family  @relation(fields: [familyCuid], references: cuid)
   Page           Page    @relation(fields: [pageCuid], references: cuid)
+  userCuid       String?
 
   @@map("page_donations")
 }
 
+model Reply {
+  cuid       String  @id @default(cuid())
+  pageCuid   String  @map("page_cuid")
+  familyCuid String  @map("family_cuid")
+  reply      String  @default("")
+  name       String? @default("")
+  Page       Page    @relation(fields: [pageCuid], references: cuid)
+}
+
 model Image {
   cuid     String  @id @default(cuid())
   url      String