SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: AddOrEditImageButton skeleton

Browse Source
This commit is contained in:
IlyaDoronin 2024-01-18 17:21:09 +03:00
parent 80a370959a
commit 043246d2f2
4 changed files with 150 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx
View File

@ -41,6 +41,7 @@ export default function OptionsAndPicture({
setOpenBranchingPage,
}: Props) {
const [switchState, setSwitchState] = useState("setting");
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
null,
);
@ -66,24 +67,30 @@ export default function OptionsAndPicture({
const handleImageUpload = async (file: File) => {
if (!selectedVariantId) return;
const url = await uploadQuestionImage(
question.id,
quizQid,
file,
(question, url) => {
if (!("variants" in question.content)) return;
setPictureUploading(true);
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
try {
const url = await uploadQuestionImage(
question.id,
quizQid,
file,
(question, url) => {
if (!("variants" in question.content)) return;
variant.extendedText = url;
variant.originalImageUrl = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
variant.extendedText = url;
variant.originalImageUrl = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
} catch {}
setPictureUploading(false);
};
function handleCropModalSaveClick(imageBlob: Blob) {
@ -111,6 +118,7 @@ export default function OptionsAndPicture({
{!isMobile && (
<AddOrEditImageButton
imageSrc={variant.extendedText}
uploading={pictureUploding}
onImageClick={() => {
setSelectedVariantId(variant.id);
if (variant.extendedText) {
@ -136,6 +144,7 @@ export default function OptionsAndPicture({
{isMobile && (
<AddOrEditImageButton
imageSrc={variant.extendedText}
uploading={pictureUploding}
onImageClick={() => {
setSelectedVariantId(variant.id);
if (variant.extendedText) {

51
src/pages/Questions/OptionsPicture/OptionsPicture.tsx
View File

@ -1,4 +1,11 @@
import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import {
Box,
Link,
Typography,
Skeleton,
useMediaQuery,
useTheme,
} from "@mui/material";
import {
addQuestionVariant,
uploadQuestionImage,
@ -30,6 +37,7 @@ export default function OptionsPicture({
const theme = useTheme();
const onClickAddAnAnswer = useAddAnswer();
const quizQid = useCurrentQuiz()?.qid;
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const [selectedVariantId, setSelectedVariantId] = useState<string | null>(
null,
);
@ -53,24 +61,31 @@ export default function OptionsPicture({
const handleImageUpload = async (file: File) => {
if (!selectedVariantId) return;
const url = await uploadQuestionImage(
question.id,
quizQid,
file,
(question, url) => {
if (!("variants" in question.content)) return;
setPictureUploading(true);
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
try {
const url = await uploadQuestionImage(
question.id,
quizQid,
file,
(question, url) => {
if (!("variants" in question.content)) return;
variant.extendedText = url;
variant.originalImageUrl = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
const variant = question.content.variants.find(
(variant) => variant.id === selectedVariantId,
);
if (!variant) return;
variant.extendedText = url;
variant.originalImageUrl = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
} catch {}
setPictureUploading(false);
};
function handleCropModalSaveClick(imageBlob: Blob) {
@ -98,6 +113,7 @@ export default function OptionsPicture({
{!isMobile && (
<AddOrEditImageButton
imageSrc={variant.extendedText}
uploading={pictureUploding}
onImageClick={() => {
setSelectedVariantId(variant.id);
if (variant.extendedText) {
@ -123,6 +139,7 @@ export default function OptionsPicture({
{isMobile && (
<AddOrEditImageButton
imageSrc={variant.extendedText}
uploading={pictureUploding}
onImageClick={() => {
setSelectedVariantId(variant.id);
if (variant.extendedText) {

122
src/ui_kit/AddOrEditImageButton.tsx
View File

@ -1,12 +1,15 @@
import { Box, Button, Skeleton, useTheme, useMediaQuery } from "@mui/material";
import Plus from "@icons/questionsPage/plus";
import { Box, Button, SxProps, Theme } from "@mui/material";
import Image from "../assets/icons/questionsPage/image";
import type { SxProps, Theme } from "@mui/material";
interface Props {
sx?: SxProps<Theme>;
imageSrc?: string;
onImageClick?: () => void;
onPlusClick?: () => void;
uploading: boolean;
}
export default function AddOrEditImageButton({
@ -14,59 +17,76 @@ export default function AddOrEditImageButton({
onPlusClick,
sx,
imageSrc,
uploading = false,
}: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<Box
sx={{
display: "flex",
height: "40px",
minWidth: "60px",
width: "60px",
borderRadius: "3px",
overflow: "hidden",
...sx,
}}
>
<Button
onClick={onImageClick}
sx={{
p: 0,
minWidth: "40px",
flexGrow: 1,
backgroundColor: "#EEE4FC",
}}
>
{imageSrc ? (
<img
src={imageSrc}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "scale-down",
display: "block",
}}
/>
) : (
<Image
<>
{uploading ? (
<Skeleton
variant="rounded"
sx={{
height: "40px",
width: isMobile ? "auto" : "80px",
margin: isMobile ? "8px" : "0 10px 0 8px",
}}
/>
) : (
<Box
sx={{
display: "flex",
height: "40px",
minWidth: "60px",
width: "60px",
borderRadius: "3px",
overflow: "hidden",
...sx,
}}
>
<Button
onClick={onImageClick}
sx={{
height: "100%",
width: "100%",
p: 0,
minWidth: "40px",
flexGrow: 1,
backgroundColor: "#EEE4FC",
}}
/>
)}
</Button>
<Button
onClick={onPlusClick}
data-cy="add-image-button"
sx={{
p: 0,
minWidth: "20px",
width: "20px",
}}
>
<Plus />
</Button>
</Box>
>
{imageSrc ? (
<img
src={imageSrc}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "scale-down",
display: "block",
}}
/>
) : (
<Image
sx={{
height: "100%",
width: "100%",
}}
/>
)}
</Button>
<Button
onClick={onPlusClick}
data-cy="add-image-button"
sx={{
p: 0,
minWidth: "20px",
width: "20px",
}}
>
<Plus />
</Button>
</Box>
)}
</>
);
}

32
src/ui_kit/MediaSelectionAndDisplay.tsx
View File

@ -1,4 +1,4 @@
import { FC } from "react";
import { useState, FC } from "react";
import {
Box,
Button,
@ -25,6 +25,7 @@ interface Iprops {
}
export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
const [pictureUploding, setPictureUploading] = useState<boolean>(false);
const quizQid = useCurrentQuiz()?.qid;
const theme = useTheme();
const {
@ -38,17 +39,23 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
useDisclosure();
async function handleImageUpload(file: File) {
const url = await uploadQuestionImage(
resultData.id,
quizQid,
file,
(question, url) => {
question.content.back = url;
question.content.originalBack = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
setPictureUploading(true);
try {
const url = await uploadQuestionImage(
resultData.id,
quizQid,
file,
(question, url) => {
question.content.back = url;
question.content.originalBack = url;
},
);
closeImageUploadModal();
openCropModal(file, url);
} catch {}
setPictureUploading(false);
}
function handleCropModalSaveClick(imageBlob: Blob) {
@ -142,6 +149,7 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
>
<AddOrEditImageButton
imageSrc={resultData.content.back}
uploading={pictureUploding}
onImageClick={() => {
if (resultData.content.back) {
return openCropModal(