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

File uploader - uprava upozorneni #221

Merged
merged 3 commits into from
Nov 15, 2023
Merged

File uploader - uprava upozorneni #221

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
66889d9
Add can resubmit logic
Matushl Nov 12, 2023
c837327
Improve allerts of user when resubmit or after deadline
Matushl Nov 12, 2023
426d417
fix after review
Matushl Nov 15, 2023
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
3 changes: 3 additions & 0 deletions src/components/Problems/Problem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export const Problem: FC<{
registered: boolean
canRegister: boolean
canSubmit: boolean
isAfterDeadline: boolean
invalidateSeriesQuery: () => Promise<void>
displayRegisterDialog: () => void
}> = ({
Expand All @@ -29,6 +30,7 @@ export const Problem: FC<{
setDisplaySideContent,
canRegister,
canSubmit,
isAfterDeadline,
invalidateSeriesQuery,
displayRegisterDialog,
}) => {
Expand Down Expand Up @@ -73,6 +75,7 @@ export const Problem: FC<{
problemId={problem.id}
setDisplayProblemUploadForm={setDisplayProblemUploadForm}
problemSubmitted={!!problem.submitted}
isAfterDeadline={isAfterDeadline}
invalidateSeriesQuery={invalidateSeriesQuery}
setDisplayActions={setDisplayActions}
/>
Expand Down
2 changes: 2 additions & 0 deletions src/components/Problems/Problems.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export const Problems: FC = () => {
const semesterId = series?.semester ?? -1
const canSubmit = series?.can_submit ?? false
const canResubmit = series?.can_resubmit ?? canSubmit
const isAfterDeadline = new Date(series?.deadline ?? '') < new Date()
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

to si skusal? ci na dateoch je nakodeny operator aby to porovnalo timestampy alebo nieco? 😄 hladal by som nejake isBefore/isAfter funkcie v luxone

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no a podobne ako v banneri, budeme asi chciet, aby tu nieco tikalo, checkoval by som tie datumy kludne kazdu sekundu. nejaky useInterval by som cakal zase v use-hooks-ts

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

luxon dokonca odporuca pouzivat obycajne operatory > <= moment/luxon#108

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hmm, nice... ale 😀 oni porovnavaju svoje DateTimes, nie JS Dates 😀 tomu by som teda veril viac 😀 takze bude vhodne DateTime.fromISO() a nejake DateTime.now() abo co a tie porovnat (now som si vymyslel, neviem ako sa robi current v luxone, ale predpokladam)


const [overrideCanRegister, setOverrideCanRegister] = useState<boolean>()
const [overrideIsRegistered, setOverrideIsRegistered] = useState<boolean>()
Expand Down Expand Up @@ -120,6 +121,7 @@ export const Problems: FC = () => {
registered={isRegistered}
canRegister={canRegister}
canSubmit={(canSubmit && !problem.submitted) || (!!problem.submitted && canResubmit)}
Matushl marked this conversation as resolved.
Show resolved Hide resolved
isAfterDeadline={isAfterDeadline}
invalidateSeriesQuery={invalidateSeriesQuery}
displayRegisterDialog={() => setDisplayRegisterDialog(true)}
/>
Expand Down
7 changes: 6 additions & 1 deletion src/components/Problems/UploadProblemForm.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,10 @@
position: relative;
}

.inputWrapper {
position: relative;
}

.files {
margin-top: 8px;
display: grid;
Expand Down Expand Up @@ -39,5 +43,6 @@

.closeButton {
position: absolute;
right: 0;
right: 2px;
top: 2px;
}
1 change: 1 addition & 0 deletions src/components/Problems/UploadProblemForm.module.scss.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export type Styles = {
closeButton: string
container: string
files: string
inputWrapper: string
problemSubmitted: string
}

Expand Down
80 changes: 57 additions & 23 deletions src/components/Problems/UploadProblemForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,23 @@
import {niceBytes} from '@/utils/niceBytes'

import {Button} from '../Clickable/Clickable'
import {Dialog} from '../Dialog/Dialog'
import {FileDropZone} from '../FileDropZone/FileDropZone'
import styles from './UploadProblemForm.module.scss'

export const UploadProblemForm: FC<{
problemId: number
setDisplayProblemUploadForm: Dispatch<SetStateAction<boolean>>
problemSubmitted?: boolean
problemSubmitted: boolean
isAfterDeadline: boolean
setDisplayActions: Dispatch<SetStateAction<boolean>>
invalidateSeriesQuery: () => Promise<void>
}> = ({
problemId,
setDisplayActions,
setDisplayProblemUploadForm,
// problemNumber,
problemSubmitted,
// setDisplaySideContent,
isAfterDeadline,
invalidateSeriesQuery,
}) => {
const {mutate: uploadSolution} = useMutation({
Expand All @@ -33,7 +34,7 @@
invalidateSeriesQuery()
alert('Riešenie úspešne nahrané.')
} else {
console.warn(response)

Check warning on line 37 in src/components/Problems/UploadProblemForm.tsx

View workflow job for this annotation

GitHub Actions / branch-test 

Unexpected console statement
alert(
'Niečo sa ASI pokazilo, skontroluj, či bolo riešenie nahrané, a ak si technický typ, môžeš pozrieť chybu v konzole.',
)
Expand All @@ -42,7 +43,7 @@
})

const [files, setFiles] = useState<File | undefined>(undefined)
const {acceptedFiles, fileRejections, getRootProps, getInputProps} = useDropzone({
const {fileRejections, getRootProps, getInputProps} = useDropzone({
multiple: false,
accept: {
'application/pdf': ['.pdf'],
Expand All @@ -68,34 +69,67 @@
setDisplayActions(true)
}

const [displayAlertDialog, setDisplayAlertDialog] = useState<boolean>(problemSubmitted)
const closeAlertDialog = () => setDisplayAlertDialog(false)
const cancel = () => {
closeAlertDialog()
setDisplayProblemUploadForm(false)
setDisplayActions(true)
}

const alertMessage = isAfterDeadline
? 'Toto riešenie nahrávaš PO TERMÍNE. Nahraním nového riešenia prepíšeš svoje predošlé odovzdanie a pri hodnotení budeme zohľadnovať len toto nové riešenie.'
: 'Nahraním nového riešenia prepíšeš svoje predošlé odovzdanie a pri hodnotení budeme zohľadnovať len toto nové riešenie.'

return (
<div className={styles.container}>
<CloseButton onClick={handleCloseButton} size={24} invertColors className={styles.closeButton} />
{isAfterDeadline && <div className={styles.problemSubmitted}>Toto riešenie už nahrávaš po termíne.</div>}
{problemSubmitted && (
<div className={styles.problemSubmitted}>
Pozor, nahraním nového riešenia prepíšeš svoje predošlé odovzdanie.
</div>
)}
{!files && (
<FileDropZone getRootProps={getRootProps} getInputProps={getInputProps} text="Vlož riešenie vo formáte pdf" />
)}
{files?.name && (
<div className={styles.files}>
<div>
<b>Súbor: </b>
<Dialog
open={displayAlertDialog}
close={closeAlertDialog}
title="Pozor"
contentText={alertMessage}
actions={
<>
<Button onClick={cancel}>Zrušiť</Button>
<Button onClick={closeAlertDialog}>Pokračovať</Button>
</>
}
/>
<div className={styles.inputWrapper}>
{!files && (
<>
<CloseButton onClick={handleCloseButton} size={24} invertColors className={styles.closeButton} />
<FileDropZone
getRootProps={getRootProps}
getInputProps={getInputProps}
text="Vlož riešenie vo formáte pdf"
/>
</>
)}
{files?.name && (
<div className={styles.files}>
<div>
<b>Súbor: </b>

<span>
{files.name} ({niceBytes(files.size)})
</span>
</div>
<div className={styles.actions}>
<Button onClick={handleSubmit}>Uložiť</Button>
<Button onClick={handleRemoveSelection}>Zrušiť</Button>
</div>
<span>
{files.name} ({niceBytes(files.size)})
</span>
</div>
<div className={styles.actions}>
<Button onClick={handleSubmit}>Uložiť</Button>
<Button onClick={handleRemoveSelection}>Zrušiť</Button>
</div>

{/* {fileRejections.length > 0 && <span>Nahraný súbor musí byť vo formáte pdf.</span>} */}
</div>
)}
{fileRejections.length > 0 && <span>Nahraný súbor musí byť vo formáte pdf.</span>}
</div>
)}
</div>
</div>
)
}
Loading