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

9
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,6 +67,9 @@ export default function OptionsAndPicture({
const handleImageUpload = async (file: File) => {
if (!selectedVariantId) return;
setPictureUploading(true);
try {
const url = await uploadQuestionImage(
question.id,
quizQid,
@ -84,6 +88,9 @@ export default function OptionsAndPicture({
);
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) {

19
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,6 +61,9 @@ export default function OptionsPicture({
const handleImageUpload = async (file: File) => {
if (!selectedVariantId) return;
setPictureUploading(true);
try {
const url = await uploadQuestionImage(
question.id,
quizQid,
@ -69,8 +80,12 @@ export default function OptionsPicture({
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) {

22
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,8 +17,23 @@ export default function AddOrEditImageButton({
onPlusClick,
sx,
imageSrc,
uploading = false,
}: Props) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790));
return (
<>
{uploading ? (
<Skeleton
variant="rounded"
sx={{
height: "40px",
width: isMobile ? "auto" : "80px",
margin: isMobile ? "8px" : "0 10px 0 8px",
}}
/>
) : (
<Box
sx={{
display: "flex",
@ -68,5 +86,7 @@ export default function AddOrEditImageButton({
<Plus />
</Button>
</Box>
)}
</>
);
}

10
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,6 +39,9 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
const [isImageUploadOpen, openImageUploadModal, closeImageUploadModal] =
useDisclosure();
async function handleImageUpload(file: File) {
setPictureUploading(true);
try {
const url = await uploadQuestionImage(
resultData.id,
quizQid,
@ -49,6 +53,9 @@ export const MediaSelectionAndDisplay: FC<Iprops> = ({ resultData }) => {
);
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(