upload foto, dan bugs import

2022-12-21 17:22:45 +07:00
parent 88ad144921
commit b1c908a6f6
12 changed files with 576 additions and 169 deletions
--- a/frontend/dashboard/src/components/MyDropzone.tsx
+++ b/frontend/dashboard/src/components/MyDropzone.tsx
@@ -0,0 +1,93 @@
+import React, { Dispatch, FunctionComponent, useCallback, useState } from 'react';
+
+import { useDropzone } from 'react-dropzone';
+import { Box, Stack, Typography } from '@mui/material';
+import BlockContent from './upload/BlockContent';
+import { styled } from '@mui/material/styles';
+import { UploadIllustration } from '../assets';
+
+const DropZoneStyle = styled('div')(({ theme }) => ({
+  outline: 'none',
+  overflow: 'hidden',
+  position: 'relative',
+  padding: theme.spacing(5, 1),
+  borderRadius: theme.shape.borderRadius,
+  transition: theme.transitions.create('padding'),
+  // backgroundColor: theme.palette.background.neutral,
+  backgroundColor: '#ffffff',
+
+  border: `2px dashed ${theme.palette.grey[500_32]}`,
+  '&:hover': { cursor: 'pointer', backgroundColor: '#f7f7f7' },
+}));
+
+const MyDropzone: FunctionComponent<{
+  setFile: Dispatch<any>;
+  currentImage: string;
+}> = ({
+  setFile,
+  currentImage,
+
+  // onChanges,
+}) => {
+  const onDrop = useCallback((acceptedFiles) => {
+    // Do something with the files
+    console.log(acceptedFiles);
+    setFile(acceptedFiles[0]);
+    setImage(acceptedFiles[0]);
+    // onChanges(acceptedFiles[0]);
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
+    onDrop,
+    multiple: false,
+  });
+  const [image, setImage] = useState<File | null>(null);
+  return (
+    <DropZoneStyle
+      {...getRootProps()}
+      sx={{
+        ...(isDragActive && { opacity: 2.72 }),
+      }}
+    >
+      <input {...getInputProps()} />
+      <Stack
+        spacing={2}
+        alignItems="center"
+        justifyContent="center"
+        direction={{ xs: 'column', md: 'row' }}
+        sx={{ width: 1, textAlign: { xs: 'center', md: 'left' } }}
+      >
+        {image ? (
+          <img src={URL.createObjectURL(image)} alt="preview" width={220} />
+        ) : currentImage ? (
+          <img src={currentImage} alt="preview" width={220} />
+        ) : (
+          <UploadIllustration sx={{ width: 220 }} />
+        )}
+
+        <Box sx={{ p: 3 }}>
+          <Typography gutterBottom variant="h5">
+            Pilih Foto
+          </Typography>
+
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            Letakkan foto disini atau klik jelajahi &nbsp;
+            <Typography
+              variant="body2"
+              component="span"
+              sx={{ color: 'primary.main', textDecoration: 'underline' }}
+            >
+              jelajahi
+            </Typography>
+            &nbsp;foto di perangkat Anda
+          </Typography>
+        </Box>
+      </Stack>
+      {/* <BlockContent file={image} /> */}
+
+      {isDragReject && <p>Unsupported file type...</p>}
+    </DropZoneStyle>
+  );
+};
+
+export default MyDropzone;
--- a/frontend/dashboard/src/components/UploadImage.tsx
+++ b/frontend/dashboard/src/components/UploadImage.tsx
@@ -0,0 +1,128 @@
+import React, { Dispatch, FunctionComponent, useCallback, useState } from 'react';
+
+import { useDropzone } from 'react-dropzone';
+import { Box, Stack, Typography } from '@mui/material';
+import BlockContent from './upload/BlockContent';
+import { styled } from '@mui/material/styles';
+import { UploadIllustration } from '../assets';
+import Iconify from './Iconify';
+
+const RootStyle = styled('div')(({ theme }) => ({
+  width: 144,
+  height: 144,
+  margin: 'auto',
+  borderRadius: '50%',
+  padding: theme.spacing(1),
+  border: `2px dashed ${theme.palette.grey[500_32]}`,
+}));
+const DropZoneStyle = styled('div')({
+  zIndex: 0,
+  width: '100%',
+  height: '100%',
+  outline: 'none',
+  display: 'flex',
+  overflow: 'hidden',
+  borderRadius: '50%',
+  position: 'relative',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '& > *': { width: '100%', height: '100%' },
+  '&:hover': {
+    cursor: 'pointer',
+    '& .placeholder': {
+      zIndex: 9,
+    },
+  },
+});
+
+const PlaceholderStyle = styled('div')(({ theme }) => ({
+  display: 'flex',
+  position: 'absolute',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  color: theme.palette.text.secondary,
+  // backgroundColor: theme.palette.background.neutral,
+  transition: theme.transitions.create('opacity', {
+    easing: theme.transitions.easing.easeInOut,
+    duration: theme.transitions.duration.shorter,
+  }),
+  '&:hover': { opacity: 0.72 },
+}));
+
+const UploadImage: FunctionComponent<{
+  setFile: Dispatch<any>;
+  currentImage: string;
+}> = ({ setFile, currentImage, setSave, error, file, helperText, sx, ...other }) => {
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      // Do something with the files
+      console.log(acceptedFiles);
+      setFile(acceptedFiles[0]);
+      setImage(acceptedFiles[0]);
+    },
+    [setFile, setSave]
+  );
+
+  const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone({
+    onDrop,
+    multiple: false,
+  });
+
+  const [image, setImage] = useState<File | null>(null);
+
+  return (
+    <RootStyle
+      sx={{
+        ...((isDragReject || error) && {
+          borderColor: 'error.light',
+        }),
+        ...sx,
+      }}
+    >
+      <DropZoneStyle
+        {...getRootProps()}
+        sx={{
+          ...(isDragActive && { opacity: 2.72 }),
+        }}
+      >
+        <input {...getInputProps()} />
+        {/* <Stack
+        spacing={2}
+        alignItems="center"
+        justifyContent="center"
+        direction={{ xs: 'column', md: 'row' }}
+        sx={{ width: 1, textAlign: { xs: 'center', md: 'left' } }}
+      > */}
+        {image ? (
+          <img src={URL.createObjectURL(image)} alt="preview" width={220} />
+        ) : currentImage ? (
+          <img src={currentImage} alt="preview" width={220} />
+        ) : (
+          <PlaceholderStyle
+            className="placeholder"
+            sx={{
+              ...((isDragReject || error) && {
+                bgcolor: 'error.lighter',
+              }),
+            }}
+          >
+            <Iconify icon={'ic:round-add-a-photo'} sx={{ width: 24, height: 24, mb: 1 }} />
+            <Typography variant="caption">{image ? 'Update photo' : 'Upload photo'}</Typography>
+          </PlaceholderStyle>
+        )}
+
+        <PlaceholderStyle className="placeholder">
+          <Iconify icon={'ic:round-add-a-photo'} sx={{ width: 24, height: 24, mb: 1 }} />
+          <Typography variant="caption">{image ? 'Update photo' : 'Upload photo'}</Typography>
+        </PlaceholderStyle>
+        {/* </Stack> */}
+        {/* <BlockContent file={image} /> */}
+
+        {isDragReject && <p>Unsupported file type...</p>}
+      </DropZoneStyle>
+    </RootStyle>
+  );
+};
+
+export default UploadImage;
--- a/frontend/dashboard/src/components/hook-form/RHFDatepicker.tsx
+++ b/frontend/dashboard/src/components/hook-form/RHFDatepicker.tsx
@@ -1,10 +1,18 @@
 // form
 import { useFormContext, Controller } from 'react-hook-form';
+import * as React from 'react';
+
 // @mui
-import { TextField, TextFieldProps } from '@mui/material';
+import { IconButton, TextField, TextFieldProps } from '@mui/material';
 import { LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';

+import { DesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+
+import InputAdornment from '@mui/material/InputAdornment';
+import EventIcon from '@mui/icons-material/Event';
+import { fPostFormat } from '../../utils/formatTime';
+
 // ----------------------------------------------------------------------

 interface IProps {
@@ -13,19 +21,43 @@ interface IProps {

 export default function RHFDatepicker({ name, ...other }: IProps & TextFieldProps) {
  const { control } = useFormContext();
+
  return (
    <Controller
      name={name}
      control={control}
      render={({ field, fieldState: { error } }) => (
-
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <MobileDatePicker
            inputFormat="yyyy-MM-dd"
            value={field.value}
-            onChange={field.onChange}
-            renderInput={(field) => <TextField {...field} fullWidth error={!!error} helperText={error?.message} {...other} />}
+            onChange={(value) => {
+              field.onChange(fPostFormat(value));
+            }}
+            renderInput={(field) => (
+              <TextField
+                {...field}
+                fullWidth
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <EventIcon />
+                    </InputAdornment>
+                  ),
+                }}
+                error={!!error}
+                helperText={error?.message}
+                {...other}
+              />
+            )}
          />
+          {/* <DesktopDatePicker
+            value={field.value}
+            onChange={(value) => {
+              field.onChange(fPostFormat(value));
+            }}
+            renderInput={(params) => <TextField {...params} fullWidth />}
+          /> */}
        </LocalizationProvider>
      )}
    />
--- a/frontend/dashboard/src/components/hook-form/RHFUpload.tsx
+++ b/frontend/dashboard/src/components/hook-form/RHFUpload.tsx
@@ -26,7 +26,6 @@ export function RHFUploadAvatar({ name, ...other }: Props) {
      control={control}
      render={({ field, fieldState: { error } }) => {
        const checkError = !!error && !field.value;
-
        return (
          <div>
            <UploadAvatar error={checkError} {...other} file={field.value} />