Merge pull request #211 from UTDallasEPICS/UIAndFunctionaltweaks

UI and functional tweaks

components/DonationEntry.vue

@@ -45,9 +45,7 @@ const stripeLink_ref = ref("")
 const create_checkout_session = async () => {
     //console.log(feeRecovery.value)
     if(feeRecovery.value) {
-      donationData.value.amount = donationData.value.amount * 100 // converting to cents for better accuracy 
-      donationData.value.amount = 1.029 * donationData.value.amount + 0.30
-      donationData.value.amount = donationData.value.amount / 100 
+      donationData.value.amount = Math.round((1.029 * donationData.value.amount + 0.30) * 100 ) / 100
     } 
     if(anonymous.value) {
         donationData.value.donorFirstName = "anonymous"

components/DonationEntryPopup.vue

@@ -61,9 +61,7 @@ const stripeLink_ref = ref("")
 const create_checkout_session = async () => {
     console.log(feeRecovery.value)
     if(feeRecovery.value) {
-      donationData.value.amount = donationData.value.amount * 100 // converting to cents for better accuracy 
-      donationData.value.amount = 1.029 * donationData.value.amount + 0.30
-      donationData.value.amount = donationData.value.amount / 100 
+        donationData.value.amount = Math.round((1.029 * donationData.value.amount + 0.30) * 100 ) / 100
     } 
     if(anonymous.value) {
         donationData.value.donorFirstName = "anonymous"
@@ -87,7 +85,7 @@ const create_checkout_session = async () => {
 };
 
 const exitDoationPoppup = () => {
-    emit("Exit", true)
+    emit("Exit")
 }
 </script>
 

components/PayoutRecord.vue

@@ -3,7 +3,6 @@ import Datepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
 import type { Family, User, Page, PageDonation, donation_payout } from "@/types.d.ts"
-import { donationFormat } from "@/utils"
 const props = defineProps<{
   currentPage: Page
   currentFamily: Family
@@ -18,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',
     body: {
       transaction_id: transaction_id.value,

pages/EmailList.vue

@@ -36,6 +36,6 @@ onMounted(() => {
 
 <template lang="pug">
 div(v-if="successMessage") {{ successMessage }}
-button.type-button.my-4.bg-orange-999.text-white.px-4.py-2.rounded-full.w-32.grow-0(type="button" @click="getAuthRequestUrl") Authorize
-button.type-button.my-4.bg-orange-999.text-white.px-4.py-2.rounded-full.w-32.grow-0(type="button" @click="refreshToken") Refresh
+button.type-button.ml-4.my-4.bg-orange-999.text-white.px-4.py-2.rounded-full.w-32.grow-0(type="button" @click="getAuthRequestUrl") Authorize
+button.type-button.ml-4.my-4.bg-orange-999.text-white.px-4.py-2.rounded-full.w-32.grow-0(type="button" @click="refreshToken") Refresh
 </template>

pages/Page/[id].vue

@@ -11,10 +11,6 @@
 
 
 import type { User, Page, PageDonation, Image, Reply, Family} from '@/types.d.ts'
-import {  dateFormat, donationFormat, longDateFormat } from '@/utils'
-import CVReplySystem from '@/components/CVReplySystem.vue'
-import CVReply from '@/components/CVReply.vue'
-
 
 const pageData = ref<Page>({
     cuid: "",
@@ -84,6 +80,7 @@ const donationData = ref<PageDonation>({
     transaction_id : "",
     donorFirstName: "",
     donorLastName: "",
+    donorEmail: "",
     comments: "", 
     isAnonymous : false,
     donationDate: "",
@@ -216,7 +213,7 @@ const displayReply = async (reply: Reply) => {
 }
 
 // Recieves the emit to stop displaying the donation popup from the button within the component donationEntryPoppup
-const exitPopup = async(exit: boolean) => {
+const exitPopup = () => {
   DisplayDonationPopup.value = false
 }
 

pages/Search.vue

@@ -10,7 +10,6 @@
 */
 
 import type { Page, User } from '@/types.d.ts'
-import { donationFormat, dateFormat } from '@/utils'
 import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
 
 const currentPage = ref(0)

pages/Users.vue

@@ -9,7 +9,7 @@
 */
 
 import type { User, Page } from "@/types.d.ts"
-import { Family } from "@prisma/client" 
+import type { Family } from "@prisma/client" 
 import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@heroicons/vue/24/solid'
 
 type User2 = {

utils/index.ts

@@ -0,0 +1,52 @@
+import type {Page} from '@/types.d.ts'
+
+// Function that converts each date from the TimeStamp object from the date picker to a human readable format
+// The timezone is computed automatically.
+export function dateFormat(date: string, justDate = false) {
+  if(date === "") {
+    return ""
+  }
+  if(date == null) {
+    return ""
+  }
+
+  const dateObj = new Date(date);
+  if(justDate) return dateObj.toLocaleDateString()
+  return dateObj.toLocaleString();
+}
+
+// Function that converts the donation amounts in cents to a string in the form
+// $ whole dollars.xx
+export function donationFormat(amount = 0){
+    const amountInDollars = amount / 100
+    if(isNaN(amount)){
+       return '$0.00'
+    }
+    return amountInDollars.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+    style: "currency",
+    currency: "usd"
+  })
+}
+
+export function longDateFormat(date: string, justTime = false) {
+  if(date === "") {
+    return ""
+  }
+  if(date == null) {
+    return ""
+  }
+
+  const options: Intl.DateTimeFormatOptions = {    
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }; 
+
+  const dateObj = new Date(date);
+  if(justTime) return dateObj.toLocaleTimeString()
+  return dateObj.toLocaleDateString(undefined, options);
+}
+