asie/system-praktyk-front
1
0
Fork 0
forked from system-praktyk/system-praktyk-front
Code Issues Pull Requests Releases Wiki Activity

Add FileInfo component

Browse Source
This commit is contained in:
Kacper Donat 2020-11-07 15:47:07 +01:00
parent 52bda87494
commit 9977f5678c
20 changed files with 223 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -31,6 +31,7 @@
"css-loader": "3.4.2",
"date-holidays": "^1.5.3",
"file-loader": "4.3.0",
"filesize": "^6.1.0",
"formik": "^2.1.5",
"formik-material-ui": "^3.0.0-alpha.0",
"html-webpack-plugin": "4.0.0-beta.11",

12
src/api/upload.ts
View File

@ -1,6 +1,7 @@
import { axios } from "@/api/index";
import { InternshipDocument } from "@/api/dto/internship-registration";
import { prepare } from "@/routing";
import { Identifiable } from "@/data";
export enum UploadType {
Ipp = "IppScan",
@ -8,6 +9,12 @@ export enum UploadType {
Insurance = "NnwInsurance",
}
export interface DocumentFileInfo extends Identifiable {
filename: string;
size: number;
mime: string;
}
const CREATE_DOCUMENT_ENDPOINT = '/document';
const DOCUMENT_UPLOAD_ENDPOINT = '/document/:id/scan';
@ -23,3 +30,8 @@ export async function upload(document: InternshipDocument, file: File) {
const response = await axios.put(prepare(DOCUMENT_UPLOAD_ENDPOINT, { id: document.id as string }), data);
return true;
}
export async function fileinfo(document: InternshipDocument): Promise<DocumentFileInfo> {
const response = await axios.get<DocumentFileInfo>(prepare(DOCUMENT_UPLOAD_ENDPOINT, { id: document.id as string }));
return response.data;
}

46
src/app.tsx
View File

@ -62,7 +62,7 @@ const LanguageSwitcher = ({ className, ...props }: HTMLProps<HTMLUListElement>)
function App() {
const dispatch = useDispatch();
const edition = useSelector<AppState, Edition | null>(state => state.edition);
const edition = useSelector<AppState, Edition | null>(state => state.edition as any);
const { t } = useTranslation();
const locale = useSelector<AppState, Locale>(state => getLocale(state.settings));
@ -73,27 +73,29 @@ function App() {
}, [ locale ])
return <>
<header className="header">
<div id="logo" className="header__logo">
<Link to={ route('home') }>
<img src="img/pg-logotyp.svg"/>
</Link>
</div>
<div className="header__nav">
<nav className="header__top">
<ul className="header__menu">
</ul>
<UserMenu className="header__user"/>
<div className="header__divider"/>
<LanguageSwitcher className="header__language-switcher"/>
</nav>
<nav className="header__bottom">
<ul className="header__menu header__menu--main">
<li><Link to={ route("home") }>{ t("pages.my-internship.header") }</Link></li>
<li><Link to="/regulamin">Regulamin</Link></li>
</ul>
</nav>
</div>
<header>
<Container className="header">
<div id="logo" className="header__logo">
<Link to={ route('home') }>
<img src="img/pg-logotyp.svg"/>
</Link>
</div>
<div className="header__nav">
<nav className="header__top">
<ul className="header__menu">
</ul>
<UserMenu className="header__user"/>
<div className="header__divider"/>
<LanguageSwitcher className="header__language-switcher"/>
</nav>
<nav className="header__bottom">
<ul className="header__menu header__menu--main">
<li><Link to={ route("home") }>{ t("pages.my-internship.header") }</Link></li>
<li><Link to="/regulamin">Regulamin</Link></li>
</ul>
</nav>
</div>
</Container>
</header>
<main id="content">
{ <Switch>

28
src/components/async.tsx Normal file
View File

@ -0,0 +1,28 @@
import { AsyncResult } from "@/hooks";
import React from "react";
import { CircularProgress } from "@material-ui/core";
import { Alert } from "@material-ui/lab";
type AsyncProps<TValue, TError = any> = {
async: AsyncResult<TValue>,
children: (value: TValue) => JSX.Element,
loading?: () => JSX.Element,
error?: (error: TError) => JSX.Element,
}
const defaultLoading = () => <CircularProgress />;
const defaultError = (error: any) => <Alert severity="error">{ error.message }</Alert>;
export function Async<TValue, TError = any>(
{ async, children: render, loading = defaultLoading, error = defaultError }: AsyncProps<TValue, TError>
) {
if (async.isLoading || (!async.error && !async.value)) {
return loading();
}
if (typeof async.error !== "undefined") {
return error(async.error);
}
return render(async.value as TValue);
}

93
src/components/fileinfo.tsx Normal file
View File

@ -0,0 +1,93 @@
import { InternshipDocument } from "@/api/dto/internship-registration";
import { useAsync } from "@/hooks";
import { DocumentFileInfo } from "@/api/upload";
import React, { useCallback } from "react";
import api from "@/api";
import { Async } from "@/components/async";
import { Button, Grid, Paper, PaperProps, SvgIconProps, Theme, Typography } from "@material-ui/core";
import { makeStyles, createStyles } from "@material-ui/core/styles";
import filesize from "filesize";
import { Actions } from "@/components/actions";
import { useTranslation } from "react-i18next";
import { FileDownloadOutline, FileOutline, FileImageOutline, FilePdfOutline, FileWordOutline } from "mdi-material-ui";
import classNames from "classnames";
const useStyles = makeStyles((theme: Theme) => createStyles({
root: {
padding: theme.spacing(2),
backgroundColor: "#e9f0f5",
},
header: {
color: theme.palette.primary.dark,
},
download: {
color: theme.palette.primary.dark,
},
actions: {
marginTop: theme.spacing(2),
},
icon: {
fontSize: "6rem",
margin: "0 auto",
},
grid: {
display: "flex",
alignItems: "center",
},
iconColumn: {
flex: "0 1 auto",
marginRight: "1rem",
color: theme.palette.primary.dark + "af",
},
asideColumn: {
flex: "1 1 auto"
}
}))
export type FileInfoProps = {
document: InternshipDocument
} & PaperProps;
export type FileIconProps = {
mime: string;
} & SvgIconProps;
export function FileIcon({ mime, ...props }: FileIconProps) {
switch (true) {
case ["application/pdf", "application/x-pdf"].includes(mime):
return <FilePdfOutline {...props} />
case mime === "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
return <FileWordOutline {...props} />
case mime.startsWith("image/"):
return <FileImageOutline {...props} />
default:
return <FileOutline {...props} />
}
}
export const FileInfo = ({ document, ...props }: FileInfoProps) => {
const fileinfo = useAsync<DocumentFileInfo>(useCallback(() => api.upload.fileinfo(document), [document.id]));
const classes = useStyles();
const { t } = useTranslation();
return <Paper variant="outlined" { ...props } className={ classNames(classes.root, props.className) }>
<Async async={ fileinfo }>
{ fileinfo => <div className={ classes.grid }>
<div className={ classes.iconColumn }>
<FileIcon mime={ fileinfo.mime } className={ classes.icon } />
</div>
<aside className={ classes.asideColumn }>
<Typography variant="h5" className={ classes.header }>{ fileinfo.filename }</Typography>
<Typography variant="subtitle2">
{ filesize(fileinfo.size) } • { fileinfo.mime }
</Typography>
<Actions className={ classes.actions }>
<Button className={ classes.download } startIcon={ <FileDownloadOutline /> }>{ t("download") }</Button>
</Actions>
</aside>
</div> }
</Async>
</Paper>
}

2
src/forms/company.tsx
View File

@ -194,7 +194,7 @@ export const CompanyForm: React.FunctionComponent = () => {
return (
<>
<Grid container>
<Grid item>
<Grid item xs={12}>
<Autocomplete options={ companies }
getOptionLabel={ option => typeof option === "string" ? option : option.name }
renderOption={ company => <CompanyItem company={ company }/> }

7
src/forms/internship.tsx
View File

@ -141,7 +141,6 @@ const InternshipDurationForm = () => {
format="DD MMMM yyyy"
disableToolbar fullWidth
variant="inline" label={ t("forms.internship.fields.start-date") }
minDate={ moment() }
/>
</Grid>
<Grid item md={ 6 }>
@ -149,7 +148,7 @@ const InternshipDurationForm = () => {
format="DD MMMM yyyy"
disableToolbar fullWidth
variant="inline" label={ t("forms.internship.fields.end-date") }
minDate={ startDate || moment() }
minDate={ startDate }
/>
</Grid>
<Grid item md={ 4 }>
@ -252,12 +251,8 @@ export const InternshipForm: React.FunctionComponent = () => {
});
const edition = useCurrentEdition();
const { t } = useTranslation();
const dispatch = useDispatch();
const history = useHistory();
const [confirmDialogOpen, setConfirmDialogOpen] = useState<boolean>(false);
const validationSchema = Yup.object<Partial<InternshipFormValues>>({

8
src/forms/plan.tsx
View File

@ -41,19 +41,19 @@ export const PlanForm = () => {
}
return <Grid container>
<Grid item>
<Grid item xs={12}>
<Typography variant="body1" component="p">{ t('forms.plan.instructions') }</Typography>
</Grid>
<Grid item>
<Grid item xs={12}>
<Button href="https://eti.pg.edu.pl/documents/611675/100028367/indywidualny%20program%20praktyk" startIcon={ <DescriptionIcon /> }>
{ t('steps.plan.template') }
</Button>
</Grid>
<Grid item>
<Grid item xs={12}>
<DropzoneArea acceptedFiles={["image/*", "application/pdf"]} filesLimit={ 1 } dropzoneText={ t("dropzone") } onChange={ files => setFile(files[0]) }/>
<FormHelperText>{ t('forms.plan.dropzone-help') }</FormHelperText>
</Grid>
<Grid item>
<Grid item xs={12}>
<Actions>
<Button variant="contained" color="primary" onClick={ handleSubmit }>
{ t('confirm') }

2
src/forms/student.tsx
View File

@ -35,7 +35,7 @@ export const StudentForm = () => {
<Grid item md={3}>
<TextField label={ t("forms.internship.fields.semester") } value={ student.semester || "" } disabled fullWidth/>
</Grid>
<Grid item>
<Grid item xs={12}>
<Alert severity="warning" action={ <Button color="inherit" size="small">skontaktuj się z opiekunem</Button> }>
Powyższe dane nie są poprawne?
</Alert>

5
src/forms/user.tsx
View File

@ -10,6 +10,8 @@ import { Actions } from "@/components";
import { Nullable } from "@/helpers";
import * as Yup from "yup";
import { StudentActions, useDispatch } from "@/state/actions";
import { route } from "@/routing";
import { useHistory } from "react-router-dom";
interface StudentFormValues {
firstName: string;
@ -48,6 +50,7 @@ const studentToFormValuesTransformer: Transformer<Nullable<Student>, StudentForm
export const StudentForm = ({ student }: StudentFormProps) => {
const { t } = useTranslation();
const dispatch = useDispatch();
const history = useHistory();
const validationSchema = useMemo(() => Yup.object<StudentFormValues>({
semester: Yup.number().required().min(1).max(10),
@ -71,6 +74,8 @@ export const StudentForm = ({ student }: StudentFormProps) => {
type: StudentActions.Set,
student: updated,
})
history.push(route("home"));
}

4
src/pages/main.tsx
View File

@ -36,6 +36,10 @@ export const updateInternshipInfo = async (dispatch: AppDispatch) => {
document: plan,
state: plan.state,
})
} else {
dispatch({
type: InternshipPlanActions.Reset,
})
}
}

24
src/pages/steps/plan.tsx
View File

@ -12,13 +12,14 @@ import { Alert, AlertTitle } from "@material-ui/lab";
import { ContactAction, Status } from "@/pages/steps/common";
import { Description as DescriptionIcon } from "@material-ui/icons";
import { useDeadlines } from "@/hooks";
import { InternshipDocument } from "@/api/dto/internship-registration";
import { FileInfo } from "@/components/fileinfo";
import { useSpacing } from "@/styles";
const PlanActions = () => {
const status = useSelector<AppState, SubmissionStatus>(state => getSubmissionStatus(state.plan));
const { t } = useTranslation();
const ReviewAction = (props: ButtonProps) =>
<Button startIcon={ <FileDownloadOutline /> } color="primary" { ...props }>{ t('steps.plan.download') }</Button>
const { t } = useTranslation();
const FormAction = ({ children = t('steps.plan.form'), ...props }: ButtonProps) =>
<Button to={ route("internship_plan") } variant="contained" color="primary" component={ RouterLink } startIcon={ <FileUploadOutline /> }>
@ -32,18 +33,14 @@ const PlanActions = () => {
switch (status) {
case "awaiting":
return <Actions>
<ReviewAction />
</Actions>
return <Actions/>
case "accepted":
return <Actions>
<ReviewAction/>
<FormAction variant="outlined" color="secondary">{ t('send-again') }</FormAction>
</Actions>
case "declined":
return <Actions>
<FormAction>{ t('fix-errors') }</FormAction>
<ReviewAction />
<TemplateAction />
<ContactAction/>
</Actions>
@ -72,6 +69,8 @@ export const PlanStep = (props: StepProps) => {
const { t } = useTranslation();
const submission = useSelector<AppState, SubmissionState>(state => state.plan);
const document = useSelector<AppState, InternshipDocument>(state => state.plan.document as InternshipDocument);
const spacing = useSpacing(2);
const status = getSubmissionStatus(submission);
const deadlines = useDeadlines();
@ -83,10 +82,13 @@ export const PlanStep = (props: StepProps) => {
active={ true } completed={ sent } declined={ declined } waiting={ status == "awaiting" }
until={ deadlines.proposal }
state={ <Status submission={ submission } /> }>
<p>{ t(`steps.plan.info.${ status }`) }</p>
<div className={ spacing.vertical }>
<p>{ t(`steps.plan.info.${ status }`) }</p>
{ comment && <Box pb={ 2 }><PlanComment/></Box> }
{ comment && <Box pb={ 2 }><PlanComment/></Box> }
{ document && <FileInfo document={ document } /> }
<PlanActions/>
<PlanActions/>
</div>
</Step>;
}

2
src/pages/steps/student.tsx
View File

@ -30,7 +30,7 @@ export const StudentStep = (props: StepProps) => {
</> : <>
<p>{ t('steps.personal-data.all-filled') }</p>
<Actions>
<Button to={ route("user_profile") } variant="outlined" color="primary" component={ RouterLink } startIcon={ <AccountDetails /> }>
<Button to={ route("user_profile") } component={ RouterLink } startIcon={ <AccountDetails /> }>
{ t('steps.personal-data.actions.info') }
</Button>
</Actions>

8
src/state/actions/plan.ts
View File

@ -7,6 +7,7 @@ import {
} from "@/state/actions/submission";
import { InternshipDocument, SubmissionState } from "@/api/dto/internship-registration";
import { Action } from "@/state/actions/base";
export enum InternshipPlanActions {
Send = "SEND_PLAN",
@ -14,8 +15,11 @@ export enum InternshipPlanActions {
Approve = "RECEIVE_PLAN_APPROVE",
Decline = "RECEIVE_PLAN_DECLINE",
Receive = "RECEIVE_PLAN_STATE",
Reset = "RESET_PLAN",
}
export interface ResetPlanAction extends Action<InternshipPlanActions.Reset> {}
export interface SendPlanAction extends SendSubmissionAction<InternshipPlanActions.Send> {
document: InternshipDocument;
}
@ -40,4 +44,6 @@ export type InternshipPlanAction
| SavePlanAction
| ReceivePlanApproveAction
| ReceivePlanDeclineAction
| ReceivePlanUpdateAction;
| ReceivePlanUpdateAction
| ResetPlanAction
;

5
src/state/reducer/plan.ts
View File

@ -1,4 +1,4 @@
import { InternshipPlanAction, InternshipPlanActions, InternshipProposalActions } from "@/state/actions";
import { InternshipPlanAction, InternshipPlanActions } from "@/state/actions";
import { Serializable } from "@/serialization/types";
import {
createSubmissionReducer,
@ -51,6 +51,9 @@ const internshipPlanReducer = (state: InternshipPlanState = defaultInternshipPla
document: action.document,
}
case InternshipPlanActions.Reset:
return defaultInternshipPlanState;
default:
return state;
}

7
src/styles/header.scss
View File

@ -1,9 +1,12 @@
@import "variables";
.header {
height: 110px;
header {
background: $main;
}
.header {
display: flex;
height: 110px;
color: white;
}

13
src/styles/spacing.ts
View File

@ -17,3 +17,16 @@ export const useHorizontalSpacing = makeStyles(theme => createStyles({
}
}
}))
export const useSpacing = makeStyles(theme => createStyles({
horizontal: {
"& > *:not(:last-child)": {
marginRight: (spacing: number = defaultSpacing) => theme.spacing(spacing)
}
},
vertical: {
"& > *:not(:last-child)": {
marginBottom: (spacing: number = defaultSpacing) => theme.spacing(spacing)
}
}
}))

1
src/ui/theme.ts
View File

@ -4,7 +4,6 @@ export const studentTheme = responsiveFontSizes(createMuiTheme({
props: {
MuiGrid: {
spacing: 3,
xs: 12,
},
MuiContainer: {
maxWidth: "md"

1
translations/pl.yaml
View File

@ -200,3 +200,4 @@ validation:
minimum-hours: "Minimalna liczba godzin wynosi {{ hours }}"
contact-coordinator: "Skontaktuj się z koordynatorem"
download: "pobierz"

5
yarn.lock
View File

@ -3858,6 +3858,11 @@ filesize@6.0.1:
resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.0.1.tgz#f850b509909c7c86f7e450ea19006c31c2ed3d2f"
integrity sha512-u4AYWPgbI5GBhs6id1KdImZWn5yfyFrrQ8OWZdN7ZMfA8Bf4HcO0BGo9bmUIEV8yrp8I1xVfJ/dn90GtFNNJcg==
filesize@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.1.0.tgz#e81bdaa780e2451d714d71c0d7a4f3238d37ad00"
integrity sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==
fill-range@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"