From 92e8dcbc0b386b31377a0c2afccc6d4007055324 Mon Sep 17 00:00:00 2001 From: Kevin Charles Date: Tue, 11 Apr 2023 14:14:10 +0000 Subject: [PATCH] fixed something --- .../Paths/PortfolioActivitySettings.jsx | 522 ++++++++++-------- 1 file changed, 277 insertions(+), 245 deletions(-) diff --git a/src/Tools/_framework/Paths/PortfolioActivitySettings.jsx b/src/Tools/_framework/Paths/PortfolioActivitySettings.jsx index 255afbbc0b..e1ca543c34 100644 --- a/src/Tools/_framework/Paths/PortfolioActivitySettings.jsx +++ b/src/Tools/_framework/Paths/PortfolioActivitySettings.jsx @@ -12,54 +12,58 @@ import { useSetRecoilState } from 'recoil'; import { pageToolViewAtom } from '../NewToolRoot'; import { useCourse } from '../../../_reactComponents/Course/CourseActions'; - export async function action({ request, params }) { const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const referrer = urlParams.get('referrer'); - + const formData = await request.formData(); let updates = Object.fromEntries(formData); - let response = await axios.post("/api/updatePortfolioActivitySettings.php",{ - ...updates, doenetId:params.doenetId - }) - - if (referrer == "portfolioeditor"){ - return redirect(`/portfolioeditor/${updates.doenetId}?tool=editor&doenetId=${updates.doenetId}&pageId=${updates.pageDoenetId}`) - }else{ + let response = await axios.post('/api/updatePortfolioActivitySettings.php', { + ...updates, + doenetId: params.doenetId, + }); + + if (referrer == 'portfolioeditor') { + return redirect( + `/portfolioeditor/${updates.doenetId}?tool=editor&doenetId=${updates.doenetId}&pageId=${updates.pageDoenetId}`, + ); + } else { const portfolioCourseId = response.data.portfolioCourseId; - return redirect(`/portfolio/${portfolioCourseId}`) + return redirect(`/portfolio/${portfolioCourseId}`); } - // if (response.ok) { - // // let { doenetId } = await response.json(); - // if (updates._source == "_source") - // return redirect(`/portfolioeditor?tool=editor&doenetId=${updates.doenetId}&pageId=${updates.pageDoenetId}`) - // return redirect(`/portfolioeditor?tool=editor&doenetId=${updates.doenetId}&pageId=${updates.pageDoenetId}`) -// }else{ -// return redirect(`/portfolio/${portfolioCourseId}`) -// } - // }else{ - // throw Error(response.message) - // } + // if (response.ok) { + // // let { doenetId } = await response.json(); + // if (updates._source == "_source") + // return redirect(`/portfolioeditor?tool=editor&doenetId=${updates.doenetId}&pageId=${updates.pageDoenetId}`) + // return redirect(`/portfolioeditor?tool=editor&doenetId=${updates.doenetId}&pageId=${updates.pageDoenetId}`) + // }else{ + // return redirect(`/portfolio/${portfolioCourseId}`) + // } + // }else{ + // throw Error(response.message) + // } } -export async function loader({ params }){ - const response = await fetch(`/api/getPortfolioActivityData.php?doenetId=${params.doenetId}`); +export async function loader({ params }) { + const response = await fetch( + `/api/getPortfolioActivityData.php?doenetId=${params.doenetId}`, + ); const data = await response.json(); return data.activityData; } -export async function ErrorBoundry(whatdoIget){ - console.log("whatdoIget",whatdoIget) - return

Error

+export async function ErrorBoundry(whatdoIget) { + console.log('whatdoIget', whatdoIget); + return

Error

; } const MainGrid = styled.div` - display:grid; + display: grid; grid-template-rows: auto 10px [slot1-start] 40px [slot1-end] 20px [slot2-start] min-content [slot2-end] 20px [slot3-start] 40px [slot3-end] 10px auto; height: 100vh; -` +`; const Slot1 = styled.div` grid-row: slot1-start/slot1-end; @@ -68,7 +72,7 @@ const Slot1 = styled.div` justify-content: center; text-align: center; /* background: skyblue; */ -` +`; const Slot2 = styled.div` grid-row: slot2-start/slot2-end; @@ -77,7 +81,7 @@ const Slot2 = styled.div` justify-content: center; text-align: center; /* background: lightcoral; */ -` +`; const Slot3 = styled.div` grid-row: slot3-start/slot3-end; display: flex; @@ -85,33 +89,33 @@ const Slot3 = styled.div` justify-content: center; text-align: center; /* background: greenyellow; */ -` +`; const SideBySide = styled.div` display: flex; column-gap: 20px; -` +`; const Table = styled.table` - border:solid 1px var(--mainGray); - padding:10px; - border-radius: 6px; -` + border: solid 1px var(--mainGray); + padding: 10px; + border-radius: 6px; +`; const Th = styled.th` - border-bottom:solid 1px var(--mainGray); - max-width:420px; - min-width:390px; - text-align:left; - padding:10px; -` + border-bottom: solid 1px var(--mainGray); + max-width: 420px; + min-width: 390px; + text-align: left; + padding: 10px; +`; const Td = styled.td` - border-bottom:solid 1px var(--mainGray); - max-width:420px; - min-width:390px; - text-align:left; - padding:10px; -` + border-bottom: solid 1px var(--mainGray); + max-width: 420px; + min-width: 390px; + text-align: left; + padding: 10px; +`; const DropPad = styled.div` border: 2px dashed #949494; @@ -122,19 +126,19 @@ const DropPad = styled.div` justify-content: center; align-items: center; align-content: center; -` +`; const DropText = styled.div` color: #949494; font-size: 24pt; -` +`; const DropIcon = styled.div` color: #949494; font-size: 30pt; -` +`; -export function PortfolioActivitySettings(){ +export function PortfolioActivitySettings() { let data = useLoaderData(); const navigate = useNavigate(); let numberOfFilesUploading = useRef(0); @@ -142,217 +146,245 @@ export function PortfolioActivitySettings(){ const { compileActivity, updateAssignItem } = useCourse(data.courseId); let isMakePublic = useRef(false); + let [imagePath, setImagePath] = useState(data.imagePath); - let [imagePath,setImagePath] = useState(data.imagePath); - - const onDrop = useCallback(async (files) => { - let success = true; - const file = files[0]; - if (files.length > 1){ - success = false; - //Should we just grab the first one and ignore the rest - console.log("Only one file upload allowed!") - } - + const onDrop = useCallback( + async (files) => { + let success = true; + const file = files[0]; + if (files.length > 1) { + success = false; + //Should we just grab the first one and ignore the rest + console.log('Only one file upload allowed!'); + } - //Only upload one batch at a time - if (numberOfFilesUploading.current > 0){ - console.log("Already uploading files. Please wait before sending more.") - success = false; - } + //Only upload one batch at a time + if (numberOfFilesUploading.current > 0) { + console.log( + 'Already uploading files. Please wait before sending more.', + ); + success = false; + } - //If any settings aren't right then abort - if (!success){ return; } + //If any settings aren't right then abort + if (!success) { + return; + } - numberOfFilesUploading.current = 1; + numberOfFilesUploading.current = 1; - let image = await window.BrowserImageResizer.readAndCompressImage( - file, - { + let image = await window.BrowserImageResizer.readAndCompressImage(file, { quality: 0.9, maxWidth: 176, maxHeight: 127, - debug: true - } - ); - // const convertToBase64 = (blob) => { - // return new Promise((resolve) => { - // var reader = new FileReader(); - // reader.onload = function () { - // resolve(reader.result); - // }; - // reader.readAsDataURL(blob); - // }); - // }; - // let base64Image = await convertToBase64(image); - // console.log("image",image) - // console.log("base64Image",base64Image) - - - - //Upload files + debug: true, + }); + // const convertToBase64 = (blob) => { + // return new Promise((resolve) => { + // var reader = new FileReader(); + // reader.onload = function () { + // resolve(reader.result); + // }; + // reader.readAsDataURL(blob); + // }); + // }; + // let base64Image = await convertToBase64(image); + // console.log("image",image) + // console.log("base64Image",base64Image) + + //Upload files const reader = new FileReader(); - reader.readAsDataURL(image); //This one could be used with image source to preview image - + reader.readAsDataURL(image); //This one could be used with image source to preview image + reader.onabort = () => {}; reader.onerror = () => {}; reader.onload = () => { - const uploadData = new FormData(); // uploadData.append('file',file); - uploadData.append('file',image); - uploadData.append('doenetId',data.doenetId); - axios.post('/api/upload.php',uploadData).then(({data})=>{ - // console.log("RESPONSE data>",data) - - //uploads are finished clear it out - numberOfFilesUploading.current = 0; - let {success, cid} = data; - if (success){ - setImagePath(`/media/${cid}.jpg`) - } - - }) + uploadData.append('file', image); + uploadData.append('doenetId', data.doenetId); + axios.post('/api/upload.php', uploadData).then(({ data }) => { + // console.log("RESPONSE data>",data) + + //uploads are finished clear it out + numberOfFilesUploading.current = 0; + let { success, cid } = data; + if (success) { + setImagePath(`/media/${cid}.jpg`); + } + }); }; - - }, [data.doenetId]); + }, + [data.doenetId], + ); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); - return <> -
- - - Activity Settings - {/*

Activity Settings

*/} - - - - - - - - - - - - - {isDragActive ? ( ) - : - (<> - )} - - - - - - - {/* + return ( + <> + + + + + Activity Settings + + {/*

Activity Settings

*/} + + +
PropertySetting
- - - - - - Drop Image Here - - Image - - Activity Card - -
Activity Label
+ + + + + + + + + {isDragActive ? ( + + ) : ( + <> + + + + )} + + + + + + + {/*
PropertySetting
+ + + + + + Drop Image Here + + + + + Image{' '} + + + + Activity Card + +
Activity Label + +
Learning Outcomes