system-praktyk/system-praktyk-front
2
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

Add internship duration form section

Browse Source
This commit is contained in:
Kacper Donat 2020-06-12 19:10:18 +02:00
parent 50ed452ea2
commit 8eae385d03
15 changed files with 1124 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.babelrc.js
View File

@ -1,9 +1,17 @@
const plugins = [
[
'babel-plugin-import',
{
'libraryName': '@material-ui/lab',
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
'lab'
],
[
'babel-plugin-import',
{
'libraryName': '@material-ui/core',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},
@ -13,7 +21,6 @@ const plugins = [
'babel-plugin-import',
{
'libraryName': '@material-ui/icons',
// Use "'libraryDirectory': ''," if your bundler does not support ES modules
'libraryDirectory': 'esm',
'camel2DashComponentName': false
},

4
package.json
View File

@ -5,8 +5,10 @@
"dependencies": {
"@babel/core": "7.9.0",
"@babel/preset-typescript": "^7.10.1",
"@date-io/moment": "^1.3.13",
"@material-ui/core": "^4.10.1",
"@material-ui/lab": "^4.0.0-alpha.55",
"@material-ui/pickers": "^3.2.10",
"@types/node": "^12.0.0",
"@types/react": "^16.9.0",
"@types/react-dom": "^16.9.0",
@ -18,9 +20,11 @@
"babel-preset-react-app": "^9.1.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "3.4.2",
"date-holidays": "^1.5.3",
"file-loader": "4.3.0",
"html-webpack-plugin": "4.0.0-beta.11",
"moment": "^2.26.0",
"node-sass": "^4.14.1",
"optimize-css-assets-webpack-plugin": "5.0.3",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",

1
public/index.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap&subset=latin,latin-ext" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>

41
src/app.tsx
View File

@ -1,22 +1,39 @@
import React from 'react';
import { Container, Typography } from "@material-ui/core";
import { MuiThemeProvider as ThemeProvider } from "@material-ui/core/styles";
import { CompanyForm } from "./forms/company";
import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/core/styles";
import { studentTheme } from "./ui/theme";
import { InternshipForm } from "@/forms/Internship";
import { MuiPickersUtilsProvider } from "@material-ui/pickers";
import MomentUtils from "@date-io/moment";
import "moment/locale/pl"
moment.locale("pl")
import '@/styles/overrides.scss'
import moment, { Moment } from "moment";
class LocalizedMomentUtils extends MomentUtils {
getDatePickerHeaderText(date: Moment): string {
return this.format(date, "d MMM yyyy");
}
}
function App() {
return (
<ThemeProvider theme={ studentTheme }>
<div className="app">
<Container maxWidth={"md"}>
<Typography variant="h3">Zgłoszenie Praktyki</Typography>
<Typography variant="subtitle1" style={{ marginBottom: '100px' }}>UX Demo</Typography>
<StylesProvider injectFirst>
<MuiPickersUtilsProvider utils={ LocalizedMomentUtils } libInstance={ moment }>
<ThemeProvider theme={ studentTheme }>
<div className="app">
<Container maxWidth={"md"}>
<Typography variant="h3">Zgłoszenie Praktyki</Typography>
<Typography variant="subtitle1" style={{ marginBottom: '100px' }}>UX Demo</Typography>
<Typography variant="h5">Miejsce odbywania praktyki</Typography>
<CompanyForm />
</Container>
</div>
</ThemeProvider>
<InternshipForm />
</Container>
</div>
</ThemeProvider>
</MuiPickersUtilsProvider>
</StylesProvider>
);
}

1
src/data/index.ts
View File

@ -3,3 +3,4 @@ export * from './company'
export * from './course'
export * from './internship'
export * from './student'
export { emptyInternship } from "@/provider/dummy/internship";

11
src/data/internship.ts
View File

@ -1,6 +1,6 @@
import { Moment } from "moment";
import { Nullable } from "@/helpers";
import { Identifiable } from "./common";
import { countWorkingWeeksInRange } from "@/utils/date";
export enum InternshipType {
FreeInternship = "FreeInternship",
@ -26,12 +26,3 @@ export interface Internship extends Identifiable {
isAccepted: boolean;
lengthInWeeks: number;
}
export const emptyInternship: Nullable<Internship> = {
endDate: null,
startDate: null,
type: null,
program: null,
isAccepted: false,
lengthInWeeks: 0,
}

80
src/forms/Internship.tsx
View File

@ -1,12 +1,88 @@
import React from "react";
import React, { ChangeEvent, useMemo, useState } from "react";
import { FormControl, Grid, Input, InputLabel, Typography, FormHelperText } from "@material-ui/core";
import { DatePicker } from "@material-ui/pickers";
import { CompanyForm } from "@/forms/company";
import { StudentForm } from "@/forms/student";
import { sampleStudent } from "@/provider/dummy/student";
import { emptyInternship, Internship } from "@/data";
import { Nullable } from "@/helpers";
import moment, { Moment } from "moment";
import { computeWorkingHours } from "@/utils/date";
export type InternshipFormProps = {
export type InternshipFormProps = {}
export type InternshipDetailsFormProps = {
internship: Nullable<Internship>
}
const InternshipDurationForm = ({ internship }: InternshipDetailsFormProps) => {
const [startDate, setStartDate] = useState<Moment | null>(internship.startDate);
const [endDate, setEndDate] = useState<Moment | null>(internship.endDate);
const [overrideHours, setHoursOverride] = useState<number | null>(null)
const [workingHours, setWorkingHours] = useState<number>(40)
const computedHours = useMemo(() => startDate && endDate && computeWorkingHours(startDate, endDate, workingHours / 5), [startDate, endDate, workingHours]);
const hours = useMemo(() => overrideHours !== null ? overrideHours : computedHours || null, [overrideHours, computedHours]);
const weeks = useMemo(() => hours !== null ? Math.floor(hours / 40) : null, [ hours ]);
return (
<Grid container>
<Grid item md={ 4 }>
<DatePicker value={ startDate } onChange={ setStartDate } clearable variant="inline" label={ "Data rozpoczęcia praktyki" } disableToolbar
fullWidth/>
</Grid>
<Grid item md={ 4 }>
<DatePicker value={ endDate } onChange={ setEndDate }
clearable disableToolbar fullWidth
variant="inline" label={ "Data zakończenia praktyki" }
minDate={ startDate || moment() }
/>
</Grid>
<Grid item md={ 4 }/>
<Grid item md={ 4 }>
<FormControl fullWidth>
<InputLabel>Wymiar etatu</InputLabel>
<Input value={ workingHours }
onChange={ ev => setWorkingHours(parseInt(ev.target.value) || 0) }
fullWidth
/>
<FormHelperText>Liczba godzin w tygodniu roboczym</FormHelperText>
</FormControl>
</Grid>
<Grid item md={ 4 }>
<FormControl fullWidth>
<InputLabel>Łączna liczba godzin</InputLabel>
<Input value={ hours || "" }
onChange={ ev => setHoursOverride(parseInt(ev.target.value) || 0) }
fullWidth
/>
</FormControl>
</Grid>
<Grid item md={ 4 }>
<FormControl fullWidth>
<InputLabel>Liczba tygodni</InputLabel>
<Input value={ weeks || "" }
disabled
fullWidth
/>
</FormControl>
</Grid>
</Grid>
);
}
export const InternshipForm: React.FunctionComponent<InternshipFormProps> = props => {
const [internship, setInternship] = useState<Nullable<Internship>>(emptyInternship)
return (
<div className="internship-form">
<Typography variant="h5">Dane osoby odbywającej praktykę</Typography>
<StudentForm student={ sampleStudent }/>
<Typography variant="h5" style={ { marginTop: "1rem" } }>Czas trwania praktyki</Typography>
<InternshipDurationForm internship={ internship }/>
<Typography variant="h5" style={ { marginTop: "1rem" } }>Miejsce odbywania praktyki</Typography>
<CompanyForm/>
</div>
)
}

56
src/forms/company.tsx
View File

@ -63,33 +63,35 @@ export const BranchForm: React.FC<BranchOfficeProps> = ({ company, disabled = fa
useEffect(() => void (office.id && setOffice(emptyBranchOffice)), [company])
return (
<Grid container>
<Grid item md={ 7 }>
<Autocomplete options={ company?.offices || [] }
disabled={ disabled }
getOptionLabel={ office => typeof office == "string" ? office : office.address.city }
renderOption={ office => <OfficeItem office={ office }/> }
renderInput={ props => <TextField { ...props } label={ "Miasto" } fullWidth/> }
onChange={ handleCityChange }
onInputChange={ handleCityInput }
inputValue={ office.address.city }
value={ office.id ? office : null }
freeSolo
/>
<div>
<Grid container>
<Grid item md={ 7 }>
<Autocomplete options={ company?.offices || [] }
disabled={ disabled }
getOptionLabel={ office => typeof office == "string" ? office : office.address.city }
renderOption={ office => <OfficeItem office={ office }/> }
renderInput={ props => <TextField { ...props } label={ "Miasto" } fullWidth/> }
onChange={ handleCityChange }
onInputChange={ handleCityInput }
inputValue={ office.address.city }
value={ office.id ? office : null }
freeSolo
/>
</Grid>
<Grid item md={ 2 }>
<TextField label={ "Kod pocztowy" } fullWidth disabled={ !canEdit } { ...fieldProps("postalCode") }/>
</Grid>
<Grid item md={ 3 }>
<TextField label={ "Kraj" } fullWidth disabled={ !canEdit } { ...fieldProps("country") }/>
</Grid>
<Grid item md={ 10 }>
<TextField label={ "Ulica" } fullWidth disabled={ !canEdit } { ...fieldProps("street") }/>
</Grid>
<Grid item md={ 2 }>
<TextField label={ "Nr Budynku" } fullWidth disabled={ !canEdit } { ...fieldProps("building") }/>
</Grid>
</Grid>
<Grid item md={ 2 }>
<TextField label={ "Kod pocztowy" } fullWidth disabled={ !canEdit } { ...fieldProps("postalCode") }/>
</Grid>
<Grid item md={ 3 }>
<TextField label={ "Kraj" } fullWidth disabled={ !canEdit } { ...fieldProps("country") }/>
</Grid>
<Grid item md={ 10 }>
<TextField label={ "Ulica" } fullWidth disabled={ !canEdit } { ...fieldProps("street") }/>
</Grid>
<Grid item md={ 2 }>
<TextField label={ "Nr Budynku" } fullWidth disabled={ !canEdit } { ...fieldProps("building") }/>
</Grid>
</Grid>
</div>
)
}
@ -114,7 +116,7 @@ export const CompanyForm: React.FunctionComponent<CompanyFormProps> = props => {
return (
<>
<Grid container style={ { marginBottom: 0, marginTop: 0 } }>
<Grid container>
<Grid item>
<Autocomplete options={ sampleCompanies }
getOptionLabel={ option => option.name }

44
src/forms/student.tsx Normal file
View File

@ -0,0 +1,44 @@
import { Course, Student } from "@/data";
import { Button, Grid, TextField } from "@material-ui/core";
import { Alert, Autocomplete } from "@material-ui/lab";
import React from "react";
import { sampleCourse } from "@/provider/dummy/student";
type StudentFormProps = {
student: Student
}
export const StudentForm = ({ student }: StudentFormProps) => {
return (
<>
<Grid container>
<Grid item md={4}>
<TextField label="Imię" value={ student.name } disabled fullWidth/>
</Grid>
<Grid item md={4}>
<TextField label="Nazwisko" value={ student.surname } disabled fullWidth/>
</Grid>
<Grid item md={4}>
<TextField label="Nr Indeksu" value={ student.albumNumber } disabled fullWidth/>
</Grid>
<Grid item md={9}>
<Autocomplete
getOptionLabel={ (course: Course) => course.name }
renderInput={ props => <TextField { ...props } label={ "Kierunek" } fullWidth/> }
options={[ sampleCourse ]}
value={ student.course }
disabled
/>
</Grid>
<Grid item md={3}>
<TextField label="Semestr" value={ student.semester } disabled fullWidth/>
</Grid>
<Grid item>
<Alert severity="warning" action={ <Button color="inherit" size="small">skontaktuj się z opiekunem</Button> }>
Powyższe dane nie są poprawne?
</Alert>
</Grid>
</Grid>
</>
);
}

11
src/provider/dummy/internship.ts Normal file
View File

@ -0,0 +1,11 @@
import { Nullable } from "@/helpers";
import { Internship } from "@/data";
export const emptyInternship: Nullable<Internship> = {
endDate: null,
startDate: null,
type: null,
program: null,
isAccepted: false,
lengthInWeeks: 0,
}

6
src/provider/dummy/student.ts
View File

@ -5,7 +5,7 @@ const programEntryIdSequence = makeIdSequence();
const courseIdSequence = makeIdSequence();
const studentIdSequence = makeIdSequence();
const sampleProgramEntries: InternshipProgramEntry[] = programEntryIdSequence.assignIds([
export const sampleProgramEntries: InternshipProgramEntry[] = programEntryIdSequence.assignIds([
{ description: "Instalacja, konfiguracja i administracja niewielkich sieci komputerowych, w tym bezprzewodowych." },
{ description: "Implementacja polityki bezpieczeństwa informacji w firmie lub instytucji, instalacja ochrony antywirusowej, konfiguracja zapór ogniowych." },
{ description: "Instalacja, konfiguracja i administracja oprogramowania, w szczególnościsystemów operacyjnychiserwerów aplikacji." },
@ -21,14 +21,14 @@ const sampleProgramEntries: InternshipProgramEntry[] = programEntryIdSequence.as
{ description: "Przygotowywanie i analiza dokumentacjitechnicznej przedsięwzięć informatycznych,wykorzystanie modeli i narzędzi zarządzania dla e-biznesu." },
]);
const sampleCourse: Course = {
export const sampleCourse: Course = {
id: courseIdSequence(),
name: "Informatyka",
desiredSemesters: [6],
possibleProgramEntries: sampleProgramEntries,
}
const sampleStudent: Student = {
export const sampleStudent: Student = {
id: studentIdSequence(),
name: "Jan",
surname: "Kowalski",

3
src/styles/overrides.scss Normal file
View File

@ -0,0 +1,3 @@
.MuiGrid-container {
margin-bottom: 0;
}

29
src/utils/date.ts Normal file
View File

@ -0,0 +1,29 @@
import { Moment } from "moment";
import Holidays from "date-holidays";
const holidays = new Holidays()
export function countWorkingWeeksInRange(start: Moment, end: Moment) {
const iterator = start.clone();
let i = 0;
while (iterator.isBefore(end)) {
iterator.add(1, 'day');
const holiday = holidays.isHoliday(iterator.toDate());
const isHoliday = holiday && holiday.type == "public";
const isWeekend = [6, 7].includes(iterator.isoWeekday())
if (isHoliday || isWeekend) {
continue;
}
i++;
}
return i;
}
export function computeWorkingHours(start: Moment, end: Moment, perDay: number = 8) {
return countWorkingWeeksInRange(start, end) * perDay;
}

4
webpack.config.js
View File

@ -45,7 +45,9 @@ const config = {
],
devServer: {
contentBase: path.resolve("./public/"),
port: 3000
port: 3000,
host: 'system-praktyk-front.localhost',
disableHostCheck: true,
},
optimization: {
usedExports: true

914
yarn.lock
View File

File diff suppressed because it is too large Load Diff