Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

366 feat dialog before delete an uploaded element #377

Merged
merged 10 commits into from
Mar 6, 2024
Merged

366 feat dialog before delete an uploaded element #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
01c0f1e
refactor: add missing validation for revision
Mar 5, 2024
8db9140
feat: document file name property in types
Mar 6, 2024
ba9308f
feat: (wip) dialog for delete uploaded element
Mar 6, 2024
ec14254
feat: (wip) show file name instead of docType name
Mar 6, 2024
aa81225
Merge branch 'develop' into 366-feat-dialog-before-delete-an-uploaded…
Mar 6, 2024
309e9e9
feat: tool tip for files + confirm dialog on download
Mar 6, 2024
ccb9914
fix: file overflow, file name on delete dialog
Mar 6, 2024
944e10b
chore: typo
Mar 6, 2024
9f412df
refactor: remove confirm dialog
Mar 6, 2024
df7c145
fix: file name on downloaded file
Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 55 additions & 52 deletions src/components/File/File.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
StyledFileWrapper,
StyledIconWrapper,
} from './style';
import { Button as MuiButton } from '@mui/material';
import { Button as MuiButton, Tooltip } from '@mui/material';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';
import { Document } from '../../services/apiTypes';
Expand All @@ -27,67 +27,70 @@ export const File = ({ doc, file, handleFileRemoval, downloadButton }: FileProps
}
if (doc) {
const downloadLink = document.createElement('a');
downloadLink.download = `${doc.name}`;
downloadLink.download = `${fileName}`;
downloadLink.href = `data:${doc.contentType};base64,${doc.bytes}`;
downloadLink.click();
}
};

const maxLength = 14;
const fileName = doc?.fileName ? doc.fileName : doc?.name;

return (
<StyledFileWrapper className="files">
<svg
xmlns="http://www.w3.org/2000/svg"
width="121"
height="153"
viewBox="0 0 121 153"
fill="none"
>
<foreignObject width={121} height={153}>
<StyledFileShapeWrapper>
<StyledFileTypeWrapper>
<h3>
.
{doc
? doc.contentType.split('/')[1].toUpperCase()
: file?.type.split('/')[1].toUpperCase()}
</h3>
</StyledFileTypeWrapper>
<StyledIconWrapper>
{downloadButton && (
<Tooltip title={fileName}>
<StyledFileWrapper className="files">
<svg
xmlns="http://www.w3.org/2000/svg"
width="121"
height="153"
viewBox="0 0 121 153"
fill="none"
>
<foreignObject width={121} height={153}>
<StyledFileShapeWrapper>
<StyledFileTypeWrapper>
<h3>
.
{doc
? doc.contentType.split('/')[1].toUpperCase()
: file?.type.split('/')[1].toUpperCase()}
</h3>
</StyledFileTypeWrapper>
<StyledIconWrapper>
{downloadButton && (
<MuiButton
onClick={
doc
? () => handleFileDownload(doc)
: () => handleFileDownload(undefined, file)
}
sx={{ color: 'black' }}
>
<FileDownloadOutlinedIcon fontSize="large" />
</MuiButton>
)}
<MuiButton
onClick={
doc
? () => handleFileDownload(doc)
: () => handleFileDownload(undefined, file)
}
sx={{ color: 'black' }}
onClick={handleFileRemoval}
sx={{ color: 'black', marginLeft: 'auto' }}
>
<FileDownloadOutlinedIcon fontSize="large" />
<DeleteOutlineOutlinedIcon fontSize="large" />
</MuiButton>
)}
<MuiButton
onClick={handleFileRemoval}
sx={{ color: 'black', marginLeft: 'auto' }}
>
<DeleteOutlineOutlinedIcon fontSize="large" />
</MuiButton>
</StyledIconWrapper>
</StyledFileShapeWrapper>
</foreignObject>
<path
d="M95 1H1V152H120V21.1333M95 1L120 21.1333M95 1V21.1333H120"
stroke="black"
/>
</svg>
<StyledDocumentName>
{doc?.fileName
? doc.fileName.length > maxLength
? `${doc.fileName.substring(0, maxLength)}...`
: doc.fileName
: doc?.name}
</StyledDocumentName>
</StyledFileWrapper>
</StyledIconWrapper>
</StyledFileShapeWrapper>
</foreignObject>
<path
d="M95 1H1V152H120V21.1333M95 1L120 21.1333M95 1V21.1333H120"
stroke="black"
/>
</svg>
<StyledDocumentName>
{doc?.fileName
? doc.fileName.length > maxLength
? `${doc.fileName.substring(0, maxLength)}...`
: doc.fileName
: doc?.name}
</StyledDocumentName>
</StyledFileWrapper>
</Tooltip>
);
};
65 changes: 52 additions & 13 deletions src/components/Upload/Upload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { useGetDocumentsByItemId } from '../../services/hooks/documents/useGetDo
import { useUploadDocumentToItem } from '../../services/hooks/documents/useUploadDocumentToItem';
import { COLORS } from '../../style/GlobalStyles';
import { File } from '../File/File';
import { CustomDialog } from '../CustomDialog/CustomDialog';

type UploadProps = {
itemId: string;
Expand All @@ -35,7 +36,9 @@ export const ExampleUpload = ({ itemId }: UploadProps) => {
const [openDocumentTypeDialog, setOpenDocumentTypeDialog] = useState(false);
const [chosenDocumentType, setChosenDocumentType] = useState<string | null>(null);
const [file, setFile] = useState<File | null>(null);

const [isDeleteConfirmationOpen, setIsDeleteConfirmationOpen] = useState(false);
const [documentIdToDelete, setDocumentIdToDelete] = useState('');
const [documentNameToDelete, setDocumentNameToDelete] = useState('');
const handleFileUpload = () => {
setOpenDocumentTypeDialog(false);
if (file) {
Expand All @@ -49,16 +52,32 @@ export const ExampleUpload = ({ itemId }: UploadProps) => {
setChosenDocumentType(null);
};

const handleFileDelete = (documentId: string) => {
deleteDocument(documentId);
};

const handleCancel = () => {
setOpenDocumentTypeDialog(false);
setFile(null);
setChosenDocumentType(null);
};

const handleClose = () => {
setIsDeleteConfirmationOpen(false);
setDocumentNameToDelete('');
};

const handleFileDeleteConfirmation = (documentId: string, documentName?: string) => {
setDocumentIdToDelete(documentId);
if (documentName) {
setDocumentNameToDelete(documentName);
}
setIsDeleteConfirmationOpen(true);
};

const handleFileToDelete = () => {
if (documentIdToDelete) {
deleteDocument(documentIdToDelete);
}
setIsDeleteConfirmationOpen(false);
};

return (
<Box sx={{ margin: '8px 0' }}>
<Dialog open={openDocumentTypeDialog}>
Expand Down Expand Up @@ -103,6 +122,18 @@ export const ExampleUpload = ({ itemId }: UploadProps) => {
</Box>
</DialogContent>
</Dialog>
<CustomDialog
open={isDeleteConfirmationOpen}
SubmitButtonOnClick={handleFileToDelete}
CancelButtonOnClick={handleClose}
onClose={handleClose}
isWarning
title="Delete upload"
>
Are you sure you want to permanently delete &quot;
{documentNameToDelete ? documentNameToDelete : 'No file name'}
&quot;?
</CustomDialog>

<Box
sx={{
Expand All @@ -112,19 +143,27 @@ export const ExampleUpload = ({ itemId }: UploadProps) => {
border: `1px dashed ${COLORS.black}`,
boxSizing: 'border-box',
minHeight: '200px',
overflowX: 'auto',
}}
>
{isLoading ? (
<CircularProgress />
) : (
documents?.map((document) => (
<File
key={document.id}
doc={document}
handleFileRemoval={() => handleFileDelete(document.id)}
downloadButton={true}
/>
))
documents?.map((document) => {
return (
<File
key={document.id}
doc={document}
handleFileRemoval={() =>
handleFileDeleteConfirmation(
document.id,
document?.fileName ? document.fileName : document.name
)
}
downloadButton={true}
/>
);
})
)}
</Box>
<Box sx={{ display: 'flex', justifyContent: 'end' }}>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/addItem/hooks/itemValidator.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const templateSchema = z.object({
productNumber: z.string().min(1, 'Product number is required'),
description: z.string().min(1, 'Description is required'),
createdById: z.string(),
revision: z.string().min(1, 'Revision is required'),
revision: z.string().min(3, 'Revision is required, must be at least 3 characters'),
});

export const itemSchema = z.object({
Expand Down
Loading