From f05a3e74d21e4ccbd9ef5ed64243496677bc4e67 Mon Sep 17 00:00:00 2001 From: Thangaraj-Ideas2it Date: Wed, 1 Nov 2023 19:19:24 +0530 Subject: [PATCH 1/6] Changes for adding experience --- .../add-member-experience-form.tsx | 212 ++++++++++++++++++ .../add-member-experience.tsx | 98 ++++++++ .../members/member-enrollment/addmember.tsx | 58 ++++- .../assets/images/icons/add-image-icon.svg | 3 + .../assets/images/icons/collapse-blue.svg | 3 + .../assets/images/icons/delete-icon.svg | 3 + .../assets/images/icons/expand-blue.svg | 4 + apps/web-app/utils/members.types.ts | 1 + libs/ui/src/index.ts | 1 + .../src/lib/single-select/single-select.tsx | 173 ++++++++++++++ 10 files changed, 550 insertions(+), 6 deletions(-) create mode 100644 apps/web-app/components/members/member-enrollment/add-member-experience-form.tsx create mode 100644 apps/web-app/components/members/member-enrollment/add-member-experience.tsx create mode 100644 apps/web-app/public/assets/images/icons/add-image-icon.svg create mode 100644 apps/web-app/public/assets/images/icons/collapse-blue.svg create mode 100644 apps/web-app/public/assets/images/icons/delete-icon.svg create mode 100644 apps/web-app/public/assets/images/icons/expand-blue.svg create mode 100644 libs/ui/src/lib/single-select/single-select.tsx diff --git a/apps/web-app/components/members/member-enrollment/add-member-experience-form.tsx b/apps/web-app/components/members/member-enrollment/add-member-experience-form.tsx new file mode 100644 index 000000000..9e5383745 --- /dev/null +++ b/apps/web-app/components/members/member-enrollment/add-member-experience-form.tsx @@ -0,0 +1,212 @@ +import { InputField, SingleSelect, Switch } from "@protocol-labs-network/ui"; +import api from "apps/web-app/utils/api"; +import { useRef, useState } from "react"; + +function AddMemberExperienceForm(props) { + + const onItemChange = props.onItemChange; + const exp = props.exp; + const expIndex = props.expIndex; + const errors = props?.errors.filter(err => err?.id === expIndex); + const onDeleteExperience = props.onDeleteExperience; + const expandedId = props.expandedId; + const onToggleExpansion = props.onToggleExpansion; + const setLoaderStatus = props.setLoaderStatus + const uploadRef = useRef(); + const descriptionRef = useRef(); + const [isLogoHovered, setLogoHoverStatus] = useState(false); + + const getYears = () => { + const currentYear = new Date().getFullYear(); + const start = currentYear - 50; + const years = []; + for (let year = start; year <= currentYear; year++) { + years.push({ label: `${year}`, value: `${year}` }); + } + + return years; + } + const yearValues = getYears(); + const monthNames = [ + 'January', 'February', 'March', 'April', 'May', 'June', + 'July', 'August', 'September', 'October', 'November', 'December' + ]; + const startMonthIndex = monthNames.indexOf(exp.startDate.toLocaleDateString(undefined, { month: 'long' })) + const endMonthIndex = monthNames.indexOf(exp.endDate?.toLocaleDateString(undefined, { month: 'long' })) + const selectedStartYear = {label: `${exp.startDate.getFullYear()}`, value: `${exp.startDate.getFullYear()}`} + const selectedEndyear = {label: `${exp.endDate?.getFullYear()}`, value: `${exp.endDate?.getFullYear()}`} + + const getMonths = () => { + return [...monthNames].map(m => { + return { label: m, value: m } + }) + + } + + const onMonthChange = (field, value ) => { + const monthIndex = monthNames.indexOf(value); + const year = exp[field].getFullYear(); + const newDate = new Date(year, monthIndex); + onItemChange(expIndex, field, newDate) + } + + const onYearChange = (field, value) => { + const month = exp[field].getMonth(); + const newDate = new Date(parseInt(value, 10), month); + onItemChange(expIndex, field, newDate); + } + + function bytesToSize(bytes: number) { + return parseFloat((bytes / 1024 ** 2).toFixed(1)); + } + + const onHandleImageUpload = async (e) => { + setLoaderStatus(true) + const file = e.target.files?.[0]; + const isValidFormat = ['image/jpeg', 'image/png'].includes(file.type); + const sizeInMB = bytesToSize(file.size); + if(!isValidFormat) { + + } + if(sizeInMB > 4) { + } + + try { + const formData = new FormData(); + formData.append('file', file); + const config = { + headers: { + 'content-type': 'multipart/form-data', + }, + }; + + console.log("calling api") + const imageResponse = await api.post(`/v1/images`, formData, config); + const result = imageResponse.data.image; + onItemChange(expIndex, 'logoUid', result.uid); + onItemChange(expIndex, 'logoUrl', result.url); + console.log(result); + setLoaderStatus(false) + } catch (error) { + console.log(error) + setLoaderStatus(false) + } + + setLoaderStatus(false) + + } + + const onImageUpload = () => { + if(uploadRef?.current) { + console.log('in current') + uploadRef?.current?.click(); + } + } + + const onImageDelete = () => { + onItemChange(expIndex, 'logoUid', 0); + onItemChange(expIndex, 'logoUrl', ""); + } + + return <> +
+
+ + {/******************************** HEAD ***********************************/} +
0 ? 'border-[1px] border-solid border-[#ED6E68]': ''} h-[32px] flex items-center justify-between px-[8px]`}> +
+ {expIndex === expandedId && onToggleExpansion(expIndex)} src="/assets/images/icons/collapse-blue.svg" />} + {expIndex !== expandedId && onToggleExpansion(expIndex)} src="/assets/images/icons/expand-blue.svg" />} + onDeleteExperience(expIndex)} className="cursor-pointer" src="/assets/images/icons/delete-icon.svg" /> +
+ {exp.companyName.trim() === '' &&

{`Company ${expIndex + 1}`}

} + {exp.companyName.trim() !== '' &&

{`${exp.companyName.trim()}`}

} +
+ onItemChange(expIndex, 'currentTeam', val)} key={`${expIndex}-switch`} /> + +
+
+ + {expIndex === expandedId &&
+ {/*********************************** ERRORS ***************************************/} +
    {errors.map((err, errIndex) =>
  • {err.error}
    • )}
+ {/******************************** LOGO & COMPANY NAME ***********************************/} +
+ {!exp.logoUrl &&
+ +

Add Logo

+ +
} + {exp.logoUrl &&
setLogoHoverStatus(false)} onMouseOver={() => setLogoHoverStatus(true)} onClick={onImageUpload} className="flex relative rounded-[8px] cursor-pointer border-[#CBD5E1] bg-[#F1F5F9] border-solid border-[3px] h-[100px] w-[100px] flex-col items-center justify-center"> + + {isLogoHovered &&
+ + +
} +
} +
+ + onItemChange(expIndex, 'companyName', e.target.value)} /> +
+
+
+ +

Please upload a squared image in PNG or JPEG format only

+ +
+ + {/******************************** TITLE ***********************************/} +
+ + onItemChange(expIndex, 'title', e.target.value)} /> +
+ + + + + {/******************************** DATES ***********************************/} +
+
+

From*

+
+
onMonthChange('startDate', option.value)} initialOption={getMonths()[startMonthIndex]} placeholder="Select Month" options={getMonths()} />
+
onYearChange('startDate', option.value)} initialOption={selectedStartYear} placeholder="Select Year" options={[...yearValues]} />
+
+ +
+
+ {exp?.endDate &&

To*

} + {!exp?.endDate &&

To

} + {exp?.endDate &&
+
onMonthChange('endDate', option.value)} initialOption={getMonths()[endMonthIndex]} placeholder="Select Month" options={getMonths()} />
+
onYearChange('endDate', option.value)} initialOption={selectedEndyear} placeholder="Select Year" options={[...yearValues]} />
+
} + {!exp?.endDate &&
+
e.preventDefault()} className="w-full border-[1px] rounded-[8px] px-[8px] border-solid border-[#CBD5E1] h-[40px] text-[13px]" placeholder="Month" disabled/>
+
e.preventDefault()} className="w-full border-[1px] rounded-[8px] px-[8px] border-solid border-[#CBD5E1] h-[40px] text-[13px]" placeholder="Year" disabled/>
+
} +
+
+ + {/******************************** DESCRIPTION ***********************************/} +
+ +