Skip to content

Commit

Permalink
Merge pull request #216 from UTDallasEPICS/UITweaksF24
Browse files Browse the repository at this point in the history
UI tweaks f24
  • Loading branch information
pariahGH authored Dec 1, 2024
2 parents 234d25e + e631fa7 commit 6efad95
Show file tree
Hide file tree
Showing 14 changed files with 173 additions and 137 deletions.
8 changes: 8 additions & 0 deletions components/CVChevronDown.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template lang="pug">
.group.overflow-visible.relative
svg(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="1.5" data-slot="icon")
path(fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd")
</template>

<script setup lang="ts">
</script>
8 changes: 8 additions & 0 deletions components/CVChevronLeft.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template lang="pug">
.group.overflow-visible.relative
svg(xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="1.5" aria-hidden="true" data-slot="icon")
path(fill-rule="evenodd" d="M7.72 12.53a.75.75 0 0 1 0-1.06l7.5-7.5a.75.75 0 1 1 1.06 1.06L9.31 12l6.97 6.97a.75.75 0 1 1-1.06 1.06l-7.5-7.5Z" clip-rule="evenodd")
</template>

<script setup lang="ts">
</script>
2 changes: 1 addition & 1 deletion components/CVLegend.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template lang="pug">
legend.ml-2(class="sm:py-1" style="font-weight: 700;")
legend.ml-4(class="sm:py-1" style="font-weight: 700;")
slot
</template>

Expand Down
78 changes: 51 additions & 27 deletions components/imagePreview.vue
Original file line number Diff line number Diff line change
@@ -1,9 +1,33 @@
<script lang="ts" setup>
import type { Image } from '@/types.d.ts'
import type { User, Page, Image } from '@/types.d.ts'
const props = defineProps<{ images: Image[], profileImage: Image, pageCuid: string }>()
const emit = defineEmits(["images","update:images","profileImage"])
console.log(props.pageCuid)
const previewCuid = ref("")
type UserWithFamily = {
cuid: string
first_name: string,
last_name: string,
user_role: string,
email: string,
middle_name: string,
phone: string,
Pages: Page[],
Family: {
cuid: string,
family_name: string,
stripe_account_id: string,
created_at: string,
updated_at: string,
FamilyMembers: [],
FamilyDonationPayouts: [],
Pages: [],
AdvocateResponsible: User,
FamilyDonations: [],
advocateCuid: ""
}
}
const cvuser = useCookie<UserWithFamily>('cvuser')
onMounted(() => {
previewCuid.value = props.images[0]?.cuid || ""
})
Expand All @@ -20,7 +44,7 @@ watch(props.images, async () => {
previewCuid.value = props.images[0]?.cuid
}
})
const previewImage = computed(() => props.images.find((i:Image)=> i.cuid == previewCuid.value))
const previewImage = computed(() => props.images.find((i:Image) => i.cuid == previewCuid.value))
const emptyImage = ref<Image>({
cuid: "",
Expand All @@ -29,31 +53,31 @@ const emptyImage = ref<Image>({
})
// Method to remove a single image
const removeImage = async (cuid: string, isPreview: boolean) => {
if(cuid == previewCuid.value){
const removeImage = async (image: Image, isPreview: boolean) => {
if(image.cuid == previewCuid.value){
isPreview = true;
}
// move imagesTemp declaration outside of the confirm block for performance?
// Confirmation of image deletetion. If no is pressed nothing happens
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 $fetch('/api/image', {
method: 'delete',
body: (theImage as Image)
body: (image as Image)
});
let imagesTemp = props.images.filter((i: Image) => i.cuid != cuid) //todo: replace emit on "images" with this?
emit("images", props.images.filter((i: Image) => i.cuid != cuid));
if(isPreview && imagesTemp.length !=0){
let imagesTemp = props.images.filter((i: Image) => i.cuid != image.cuid)
//todo: replace emit on "images" with this?
emit("images", props.images.filter((i: Image) => i.cuid != image.cuid));
if(isPreview && imagesTemp.length != 0){
previewCuid.value = imagesTemp[0].cuid
} else if(imagesTemp.length === 0){
emit("profileImage", emptyImage)
previewCuid.value = ""
}
if(theImage?.url === props.profileImage.url && imagesTemp.length !=0){
if(image?.url === props.profileImage.url && imagesTemp.length !=0){
emit("profileImage", imagesTemp[0])
}
}
}
}
// Method that saves images to the frontend on image upload.
Expand All @@ -70,21 +94,21 @@ const saveImage = async (theImage: Image) => {

<template lang="pug">
.information.rounded-md.mx-9.my-2.text-center(class="sm:text-start text-white bg-blue-999")
CVLegend Images
.py-4.grid(class="sm:grid-cols-3")
div(v-if="images.length !=0" style='position: relative;')
img.cursor-pointer.object-cover.align-middle.rounded-lg(class="w-40 sm:w-64" :src = "previewImage?.url")
.absolute(style='top: 10px; right: 150px')
button.bg-red-500(class='w-40 sm:64' style="align-items: center;justify-content: center; line-height: 1;text-align: center; color: white; font-weight: 450; positon: absolute; top:0px; left: 0px; width: 30px; height: 2rem; border-radius: 50%; padding-bottom: 4px; background-color: red;" @click = "removeImage(previewCuid, true)") x
a.ml-10.pt-1(style="text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25);") Image Upload
CVLegend Images
.grid.py-4.ml-10(class="sm:grid-cols-3")
.relative.shrink-0(v-if="images.length !=0")
img.cursor-pointer.object-cover.align-middle.rounded-lg(class="w-56" :src = "previewImage?.url")
.absolute.flex(class="top-2.5 left-44 sm:left-28 md:left-40 lg:left-44")
button.bg-red-500(style="align-items: center; justify-content: center; line-height: 1;text-align: center; color: white; font-weight: 450; positon: absolute; top:0px; left: 0px; width: 30px; height: 2rem; border-radius: 50%; padding-bottom: 4px; background-color: red;" @click = "removeImage(previewImage, true)") x
a.pt-1(class="sm:ml-3" style="text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25);") Image Upload
ImageUpload(@imageUploaded="saveImage" :pageCuid="props.pageCuid")
.py-4.grid.flex-box.flex-row.item-centered.gap-1(v-if="images.length!= 0" class="sm:grid-cols-3" style="line-height: 0px;text-align: center")
div(style="width:1200px" class="")
div(class="flex" style="overflow-x: auto")
.div(v-for="(image,i) in images" :key="i" style="flex-shrink: 0; position: relative;")
img.object-cover.align-middle.rounded-lg.cursor-pointer(class="w-40 sm:w-64" style="margin-right:5px" :src = "image.url" @click="previewCuid = image.cuid")
.form-horizontal(style='position: absolute; top: 10px; right: 10px')
button.bg-red-500(style="align-items: center;justify-content: center;line-height: 2;text-align: center ; color: white; font-weight: 300; positon: absolute; top:0px; left: 0px; width: 30px; height: 2rem; border-radius: 50%; padding-bottom: 4px; background-color:red;" @click = "removeImage(image.cuid, false)") x
.py-4.flex-box.flex-row.item-centered.gap-1.ml-10(v-if="images.length!= 0" style="line-height: 0px;text-align: center")
div(style="width:1200px")
div.flex(style="overflow-x: auto")
.relative.shrink-0(v-for="(image,i) in images" :key="i")
img.object-cover.align-middle.rounded-lg.cursor-pointer(class="w-56" style="margin-right:5px" :src = "image.url" @click="previewCuid = image.cuid")
.form-horizontal(style='position: absolute; top: 10px; right: 20px')
button.bg-red-500(style="align-items: center;justify-content: center;line-height: 2;text-align: center ; color: white; font-weight: 300; positon: absolute; top:0px; left: 0px; width: 30px; height: 2rem; border-radius: 50%; padding-bottom: 4px; background-color:red;" @click = "removeImage(image, false)") x
</template>

<style scoped></style>
67 changes: 39 additions & 28 deletions pages/EditPage/[EditPageId].vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,19 @@
* Located under "/EditPage/"
*/
import ImageUpload from '@/components/ImageUpload.vue'
import CVInput from '@/components/CVInput.vue'
import CVLabel from '@/components/CVLabel.vue'
import CVDatepicker from '@/components/CVDatepicker.vue'
import CVHelpButton from '@/components/CVHelpButton.vue'
import CVReply from '@/components/CVReply.vue'
import '@vuepic/vue-datepicker/dist/main.css';
import CVSuspendButton from '@/components/CVSuspendButton.vue'
import {
Listbox,
ListboxButton,
ListboxOptions,
ListboxOption,
} from '@headlessui/vue'
import { ChevronDownIcon, ChevronLeftIcon } from '@heroicons/vue/24/solid'
import { vElementSize } from '@vueuse/components'
import type { Image, Page, User, PageDonation, Reply } from '@/types.d.ts'
import type { Family } from "@prisma/client"
import { donationFormat, dateFormat } from '@/utils'
const router = useRoute()
const cvuser = useCookie<User>('cvuser');
Expand Down Expand Up @@ -134,7 +127,7 @@ const data_all_users = ref<Family[]>([])
const replies = ref<Reply[]>([])
const imageData = ref<Image[]>([])
const profile_image = ref("")
const left = ref(true)
const toggleFiddlyBit = ref(true)
const familyCuid = ref("")
const cuid_data = computed(() => router.params.EditPageId);
const cuid = cuid_data.value as string
Expand Down Expand Up @@ -258,7 +251,7 @@ watch(data, async () => {
}, { deep: true })
if( isAdvocate.value ) {
const { data: Families } = await useFetch('/api/families', {
const { data: Families } = await useFetch('/api/family', {
method: 'GET'
})
data_all_users.value = Families.value as unknown as Family[]
Expand All @@ -275,10 +268,17 @@ const updateSuspendButton = (reply:Reply, suspend:boolean) => { // updates the f
return;
}
await getData(useRoute().params.EditPageId as string)
const profileImage = computed(() => data.value?.Images.find((i: Image) => i.cuid == data.value?.profileImageCuid))
const profileImgHeight = ref(40)
// moves the listbox options (dropdown) down based on the current button image's rendered height
const onResize = ({ width, height }: { width: number, height: number }) => {
if(height != 0) {
profileImgHeight.value = height + 45
} else {
profileImgHeight.value = 40
}
}
</script>

<template lang="pug">
Expand Down Expand Up @@ -310,7 +310,7 @@ CVContainer
Listbox.shadow-sm.border.border-1.rounded-lg(as='div' v-model="familyCuid")
.relative
Transition(
leave-active-class='transition ease-in duration-100'
leave-active-class='transition ease-in duration-300'
leave-from-class='opacity-100'
leave-to-class='opacity-0'
)
Expand All @@ -319,22 +319,33 @@ CVContainer
ListboxButton(class='text-left bg-white relative rounded-md pl-2 pr-10 py-2 sm:text-sm w-96') {{ familyCuid ? currentFamily.family_name : 'Select family to add the page to' }}
ImagePreview(v-model:images="imageData" :images="data.Images" :profileImage="profileImage" :pageCuid="cuid_data" @profileImage="setProfileImage" @images="setImagesPreview")
.information.rounded-md.mx-9.my-2.text-center(class="sm:text-start text-white bg-blue-999")
legend.ml-2(class="sm:py-1" style="font-weight: 700; text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25);") Profile Image Selection
.py-4.flex.gap-72
legend.ml-4(class="sm:py-1" style="font-weight: 700; text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25);") Profile Image Selection
.py-4.grid(class="sm:grid-cols-3")
.flex
CVLabel Profile Image
CVHelpButton(class="inline-block"
description="Here, you select from photos you uploaded to show up first on the Family Page")
CVHelpButton(class="inline-block z-20"
description="Here, you select from photos you uploaded to show up at the top of the family page")
.col-md-8.mx-9(class="sm:col-span-2 sm:mr-11")
Listbox.rounded-md.outline-0.border-box.w-full.p-2.bg-white(style="width:350px; border: 1px solid #c4c4c4;" v-model="data.profileImageCuid" as="div")
ListboxButton(@click="left=!left" class='bg-white relative rounded-md pl-2 py-2 sm:text-sm')
div.flex
img.rounded-lg(class="w-50" style="padding: 10px;" :src="profileImage?.url")
p.p-2(v-if="left" style="font-size: 20px") &lt
p.p-2(v-else style="font-size: 20px") v
ListboxOptions(as='div' style="width:350px;" class='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(v-for="(image,k) in imageData" :key="image.cuid" :value="image.cuid")
img.rounded-lg(style="padding: 10px;" :src="image.url")
Listbox.rounded-lg.outline-0.w-full.bg-white.p-2(v-model="data.profileImageCuid" as="div")
.relative
Transition(
leave-active-class='transition ease-in duration-300'
leave-from-class='opacity-100'
leave-to-class='opacity-0'
@leave="toggleFiddlyBit=!toggleFiddlyBit"
@enter="toggleFiddlyBit=!toggleFiddlyBit"

)
ListboxOptions(as='div' class='w-full absolute z-10 bg-white shadow-lg shrink-0 max-h-60 max-w-96 mt-8 px-2 py-2 text-base ring-1 ring-black ring-opacity-5 rounded-md overflow-auto focus:outline-none sm:text-sm' :style="{ 'margin-top': profileImgHeight + 'px' }")
ListboxOption(v-for="(image,k) in imageData" :key="image.cuid" :value="image.cuid")
img.rounded-lg(class="py-4" :src="image.url" v-if="imageData.length")
ListboxButton(class='relative rounded-md pl-2 py-4 pr-6 max-w-96 sm:text-sm' style="border: 1px solid #c4c4c4" v-element-size="onResize")
.flex
img.rounded-lg(:src="profileImage?.url" v-if="profileImage")
div.rounded-md.w-96(v-else)
CVChevronLeft.h-4.text-grey-500.z-3(class="inline-block size-4 h-2 max-w-8" v-if="toggleFiddlyBit")
CVChevronDown.h-4.text-gray-500.z-3(v-else class="inline-block size-4 h-2 max-w-8")


.py-4.grid(class="sm:grid-cols-3")
CVLabel Day of Birth
Expand Down Expand Up @@ -390,7 +401,7 @@ description="Here, you select from photos you uploaded to show up first on the F
.py-4.grid(class="sm:grid-cols-3")
.flex
CVLabel Goal
CVHelpButton(class="inline-block" description="If the Donation Goal is 0, it is assumed that there are no donations required")
CVHelpButton(class="inline-block" description="If the Donation Goal is 0, it will be assumed that you do not wish to display your donation progress bar and current amount raised.")
.col-md-8.flex.mx-9(class="sm:col-span-2 sm:mr-11")
span.rounded-l-md.bg-gray-200.text-lg.p-2(style="text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.25); border: 1px solid #c4c4c4;") $
input.outline-0.rounded-r-md.border-box.w-full.p-2(style="border: 1px solid #c4c4c4;" v-model='data.donation_goal' placeholder="required" required)
Expand Down
2 changes: 1 addition & 1 deletion pages/EditUser/[id].vue
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const getData = async (cuid: string) => {
// boolean indicating that we need the family selection listbox
const addingFamily = computed(() => data_user.value.user_role == "family")
const getUsers = async () => {
const { data: FamilyData } = await useFetch('/api/families', {
const { data: FamilyData } = await useFetch('/api/family', {
method: 'GET',
})
data_all_families.value = FamilyData.value as unknown as Family[];
Expand Down
Loading

0 comments on commit 6efad95

Please sign in to comment.