fakz9/Fulfillment-Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: passport images for user

Browse Source
This commit is contained in:
AlexSserb
2024-12-04 20:21:01 +04:00
parent 1795cacc5b
commit 2cb62a4e0b
15 changed files with 260 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/pages/AdminPage/components/PassportImageDropzone/PassportImageDropzone.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { DropzoneProps, FileWithPath } from "@mantine/dropzone";
import { FC } from "react";
import { notifications } from "../../../../shared/lib/notifications.ts";
import { UserService } from "../../../../client";
import { BaseFormInputProps } from "../../../../types/utils.ts";
import useImageDropzone from "../../../../hooks/useImageDropzone.tsx";
import ImageDropzone from "../../../../components/ImageDropzone/ImageDropzone.tsx";
interface RestProps {
imageUrlInputProps?: BaseFormInputProps<string>;
userId?: number;
}
type Props = Omit<DropzoneProps, "onDrop"> & RestProps;
const ProductImageDropzone: FC<Props> = ({ imageUrlInputProps, userId }: Props) => {
const imageDropzoneProps = useImageDropzone({
imageUrlInputProps,
});
const onDrop = (files: FileWithPath[]) => {
if (!userId || !imageUrlInputProps) return;
if (files.length > 1) {
notifications.error({ message: "Прикрепите одно изображение" });
return;
}
const { setIsLoading, setShowDropzone } = imageDropzoneProps;
const file = files[0];
setIsLoading(true);
UserService.uploadPassportImage({
userId: userId,
formData: {
upload_file: file,
},
})
.then(({ ok, message, imageUrl }) => {
notifications.guess(ok, { message });
setIsLoading(false);
if (!ok || !imageUrl) {
setShowDropzone(true);
return;
}
imageUrlInputProps?.onChange(imageUrl);
setShowDropzone(false);
})
.catch(error => {
notifications.error({ message: error.toString() });
setShowDropzone(true);
setIsLoading(false);
});
};
return (
<ImageDropzone onDrop={onDrop} imageDropzone={imageDropzoneProps} />
);
};
export default ProductImageDropzone;

18
src/pages/AdminPage/modals/UserFormModal/UserFormModal.tsx
View File

@@ -10,6 +10,8 @@ import { capitalize } from "lodash";
import { IMaskInput } from "react-imask";
import phone from "phone";
import PayRateSelect from "../../../../components/Selects/PayRateSelect/PayRateSelect.tsx";
import { BaseFormInputProps } from "../../../../types/utils.ts";
import PassportImageDropzone from "../../components/PassportImageDropzone/PassportImageDropzone.tsx";
type Props = CreateEditFormProps<UserSchema>;
const UserFormModal = ({
@@ -107,6 +109,10 @@ const UserFormModal = ({
{...form.getInputProps("phoneNumber")}
/>
</Input.Wrapper>
</Stack>
</Fieldset>
<Fieldset legend={"Паспортные данные"}>
<Stack>
<Input.Wrapper
label={"Серия и номер паспорта"}
error={form.getInputProps("passportData").error}>
@@ -117,6 +123,18 @@ const UserFormModal = ({
{...form.getInputProps("passportData")}
/>
</Input.Wrapper>
{
isEditing && (
<PassportImageDropzone
imageUrlInputProps={
form.getInputProps(
"passportImageUrl",
) as BaseFormInputProps<string>
}
userId={innerProps?.element.id}
/>
)
}
</Stack>
</Fieldset>
<Fieldset legend={"Роль и должность"}>

60
src/pages/ProductsPage/components/ProductImageDropzone/ProductImageDropzone.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { DropzoneProps, FileWithPath } from "@mantine/dropzone";
import { FC } from "react";
import { notifications } from "../../../../shared/lib/notifications.ts";
import { ProductService } from "../../../../client";
import { BaseFormInputProps } from "../../../../types/utils.ts";
import useImageDropzone from "../../../../hooks/useImageDropzone.tsx";
import ImageDropzone from "../../../../components/ImageDropzone/ImageDropzone.tsx";
interface RestProps {
imageUrlInputProps?: BaseFormInputProps<string>;
productId?: number;
}
type Props = Omit<DropzoneProps, "onDrop"> & RestProps;
const ProductImageDropzone: FC<Props> = ({ imageUrlInputProps, productId }: Props) => {
const imageDropzoneProps = useImageDropzone({
imageUrlInputProps,
});
const onDrop = (files: FileWithPath[]) => {
if (!productId || !imageUrlInputProps) return;
if (files.length > 1) {
notifications.error({ message: "Прикрепите одно изображение" });
return;
}
const { setIsLoading, setShowDropzone } = imageDropzoneProps;
const file = files[0];
setIsLoading(true);
ProductService.uploadProductImage({
productId,
formData: {
upload_file: file,
},
})
.then(({ ok, message, imageUrl }) => {
notifications.guess(ok, { message });
setIsLoading(false);
if (!ok || !imageUrl) {
setShowDropzone(true);
return;
}
imageUrlInputProps?.onChange(imageUrl);
setShowDropzone(false);
})
.catch(error => {
notifications.error({ message: error.toString() });
setShowDropzone(true);
setIsLoading(false);
});
};
return (
<ImageDropzone onDrop={onDrop} imageDropzone={imageDropzoneProps} />
);
};
export default ProductImageDropzone;

4
src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx
View File

@@ -4,9 +4,9 @@ import { useForm } from "@mantine/form";
import { BaseProduct, CreateProductRequest } from "../../types.ts";
import { ProductSchema } from "../../../../client";
import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
import ImageDropzone from "../../../../components/ImageDropzone/ImageDropzone.tsx";
import { BaseFormInputProps } from "../../../../types/utils.ts";
import BarcodeImageDropzone from "../../../../components/BarcodeImageDropzone/BarcodeImageDropzone.tsx";
import ProductImageDropzone from "../../components/ProductImageDropzone/ProductImageDropzone.tsx";
type CreateProps = {
clientId: number;
@@ -117,7 +117,7 @@ const CreateProductModal = ({
isEditProps && (
// <Fieldset legend={"Изображение"}>
<>
<ImageDropzone
<ProductImageDropzone
imageUrlInputProps={
form.getInputProps(
"imageUrl",