From 7f71e6758c032d93b99592ddf7a7423ea89576c3 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Wed, 30 Dec 2020 21:22:23 +0100 Subject: [PATCH 01/12] Add reporting with custom fields support --- src/components/step.tsx | 7 +- src/data/report.ts | 37 +++++++++ src/forms/report.tsx | 136 ++++++++++++++++++++++++++++++++ src/pages/internship/report.tsx | 26 ++++++ src/pages/main.tsx | 5 +- src/pages/steps/report.tsx | 85 ++++++++++++++++++++ src/provider/dummy/report.ts | 66 ++++++++++++++++ src/routing.tsx | 2 + src/serialization/report.ts | 4 + src/state/actions/index.ts | 4 + src/state/actions/report.ts | 43 ++++++++++ src/state/reducer/index.ts | 2 + src/state/reducer/report.ts | 66 ++++++++++++++++ 13 files changed, 476 insertions(+), 7 deletions(-) create mode 100644 src/data/report.ts create mode 100644 src/forms/report.tsx create mode 100644 src/pages/internship/report.tsx create mode 100644 src/pages/steps/report.tsx create mode 100644 src/provider/dummy/report.ts create mode 100644 src/serialization/report.ts create mode 100644 src/state/actions/report.ts create mode 100644 src/state/reducer/report.ts diff --git a/src/components/step.tsx b/src/components/step.tsx index 3f322a7..d2b416e 100644 --- a/src/components/step.tsx +++ b/src/components/step.tsx @@ -29,19 +29,18 @@ export const Step = (props: StepProps) => { { label } { state && { state } } + { (notBefore || until) && • } { notBefore && { t('not-before', { date: notBefore }) } } - { until && <> - • + { until && { t('until', { date: until }) } { isLate && - { t('late', { by: moment.duration(now.diff(until)) }) } } { !isLate && !completed && - { t('left', { left: left }) } } - - } + } { children && { children } } diff --git a/src/data/report.ts b/src/data/report.ts new file mode 100644 index 0000000..d399ce8 --- /dev/null +++ b/src/data/report.ts @@ -0,0 +1,37 @@ +import { Multilingual } from "@/data/common"; + +interface PredefinedChoices { + choices: Multilingual[]; +} + +export interface BaseField { + name: string; + description: Multilingual; + label: Multilingual; +} + +export interface TextField extends BaseField { + type: "text"; + value: string | null; +} + +export interface MultiChoiceField extends BaseField, PredefinedChoices { + type: "multi-choice"; + value: Multilingual[] | null; +} + +export interface SingleChoiceField extends BaseField, PredefinedChoices { + type: "single-choice"; + value: Multilingual | null +} + +export interface SelectField extends BaseField, PredefinedChoices { + type: "select"; + value: Multilingual | null +} + +export type ReportField = TextField | MultiChoiceField | SingleChoiceField | SelectField; + +export interface Report { + fields: ReportField[]; +} diff --git a/src/forms/report.tsx b/src/forms/report.tsx new file mode 100644 index 0000000..a4936bf --- /dev/null +++ b/src/forms/report.tsx @@ -0,0 +1,136 @@ +import React from "react"; +import { emptyReport } from "@/provider/dummy/report"; +import { + Button, + FormControl, + FormLabel, + Grid, + Typography, + FormGroup, + FormControlLabel, + Checkbox, + Radio, + InputLabel, + Select, + MenuItem +} from "@material-ui/core"; +import { Actions } from "@/components"; +import { Link as RouterLink } from "react-router-dom"; +import { route } from "@/routing"; +import { useTranslation } from "react-i18next"; +import { MultiChoiceField, Report, ReportField, SelectField, SingleChoiceField } from "@/data/report"; +import { TextField as TextFieldFormik } from "formik-material-ui"; +import { Field, Form, Formik, useFormik, useFormikContext } from "formik"; +import { Multilingual } from "@/data"; +import { Transformer } from "@/serialization"; + +export type ReportFieldProps = { + field: TField; +} + +const CustomField = ({ field, ...props }: ReportFieldProps) => { + switch (field.type) { + case "text": + return + case "single-choice": + case "multi-choice": + return + case "select": + return + } +} + +CustomField.Text = ({ field }: ReportFieldProps) => { + return <> + + + +} + +CustomField.Select = ({ field }: ReportFieldProps) => { + const { t } = useTranslation(); + const id = `custom-field-${field.name}`; + const { values, setFieldValue } = useFormikContext(); + + const value = values[field.name]; + + return + { field.label.pl } + + + +} + +CustomField.Choice = ({ field }: ReportFieldProps) => { + const { t } = useTranslation(); + const { values, setFieldValue } = useFormikContext(); + + const value = values[field.name]; + + const isSelected = field.type == 'single-choice' + ? (checked: Multilingual) => value == checked + : (checked: Multilingual) => (value || []).includes(checked) + + const handleChange = field.type == 'single-choice' + ? (choice: Multilingual) => () => setFieldValue(field.name, choice, false) + : (choice: Multilingual) => () => { + const current = value || []; + setFieldValue(field.name, !current.includes(choice) ? [ ...current, choice ] : current.filter((c: Multilingual) => c != choice), false); + } + + const Component = field.type == 'single-choice' ? Radio : Checkbox; + + return + { field.label.pl } + + { field.choices.map(choice => } + label={ choice.pl } + />) } + + + +} + +export type ReportFormValues = { [field: string]: any }; + +const reportToFormValuesTransformer: Transformer = { + reverseTransform(subject: ReportFormValues, context: { report: Report }): Report { + return { ...context.report }; + }, + transform(subject: Report, context: undefined): ReportFormValues { + return Object.fromEntries(subject.fields.map(field => [ field.name, field.value ])); + } +} + +export default function ReportForm() { + const report = emptyReport; + const { t } = useTranslation(); + + const handleSubmit = async () => {}; + + return + { ({ submitForm }) =>
+ + + { t('forms.report.instructions') } + + { report.fields.map(field => ) } + + + + + + + + +
} + +} + diff --git a/src/pages/internship/report.tsx b/src/pages/internship/report.tsx new file mode 100644 index 0000000..40af7c9 --- /dev/null +++ b/src/pages/internship/report.tsx @@ -0,0 +1,26 @@ +import { Page } from "@/pages/base"; +import { Container, Link, Typography } from "@material-ui/core"; +import { Link as RouterLink } from "react-router-dom"; +import { route } from "@/routing"; +import React from "react"; +import { useTranslation } from "react-i18next"; +import ReportForm from "@/forms/report"; + +export const SubmitReportPage = () => { + const { t } = useTranslation(); + + return + + + { t('pages.my-internship.header') } + { t("steps.report.submit") } + + { t("steps.report.submit") } + + + + + +} + +export default SubmitReportPage; diff --git a/src/pages/main.tsx b/src/pages/main.tsx index 761a47c..fee4de1 100644 --- a/src/pages/main.tsx +++ b/src/pages/main.tsx @@ -18,6 +18,7 @@ import api from "@/api"; import { AppDispatch, InternshipPlanActions, InternshipProposalActions, useDispatch } from "@/state/actions"; import { internshipRegistrationDtoTransformer } from "@/api/dto/internship-registration"; import { UploadType } from "@/api/upload"; +import { ReportStep } from "@/pages/steps/report"; export const updateInternshipInfo = async (dispatch: AppDispatch) => { const internship = await api.internship.get(); @@ -48,10 +49,8 @@ export const MainPage = () => { const student = useSelector(state => state.student); - const deadlines = useDeadlines(); const insurance = useSelector(root => root.insurance); const dispatch = useDispatch(); - const edition = useCurrentEdition(); useEffect(() => { dispatch(updateInternshipInfo); @@ -69,7 +68,7 @@ export const MainPage = () => { if (insurance.required) yield ; - yield + yield ; yield } diff --git a/src/pages/steps/report.tsx b/src/pages/steps/report.tsx new file mode 100644 index 0000000..083021f --- /dev/null +++ b/src/pages/steps/report.tsx @@ -0,0 +1,85 @@ +import { useSelector } from "react-redux"; +import { AppState } from "@/state/reducer"; +import { getSubmissionStatus, SubmissionState, SubmissionStatus } from "@/state/reducer/submission"; +import { useTranslation } from "react-i18next"; +import { Box, Button, ButtonProps, StepProps } from "@material-ui/core"; +import { FileUploadOutline } from "mdi-material-ui/index"; +import { route } from "@/routing"; +import { Link as RouterLink } from "react-router-dom"; +import { Actions, Step } from "@/components"; +import React, { HTMLProps } from "react"; +import { Alert, AlertTitle } from "@material-ui/lab"; +import { ContactButton, Status } from "@/pages/steps/common"; +import { useCurrentEdition, useDeadlines } from "@/hooks"; +import { useSpacing } from "@/styles"; + +const ReportActions = () => { + const status = useSelector(state => getSubmissionStatus(state.report)); + + const { t } = useTranslation(); + + const FormAction = ({ children = t('steps.report.submit'), ...props }: ButtonProps) => + + + switch (status) { + case "awaiting": + return + + case "accepted": + return + { t('send-again') } + + case "declined": + return + { t('send-again') } + + + case "draft": + return + + + + default: + return + } +} + +export const PlanComment = (props: HTMLProps) => { + const { comment, declined } = useSelector(state => state.plan); + const { t } = useTranslation(); + + return comment ? + { t('comments') } + { comment } + : null +} + +export const ReportStep = (props: StepProps) => { + const { t } = useTranslation(); + + const submission = useSelector(state => state.report); + const spacing = useSpacing(2); + const edition = useCurrentEdition(); + + const status = getSubmissionStatus(submission); + const deadlines = useDeadlines(); + + const { sent, declined, comment } = submission; + + return }> +
+

{ t(`steps.report.info.${ status }`) }

+ + { comment && } + + +
+ ; +} diff --git a/src/provider/dummy/report.ts b/src/provider/dummy/report.ts new file mode 100644 index 0000000..ad77aad --- /dev/null +++ b/src/provider/dummy/report.ts @@ -0,0 +1,66 @@ +import { Report } from "@/data/report"; + +const choices = [1, 2, 3, 4, 5].map(n => ({ + pl: `Wybór ${n}`, + en: `Choice ${n}` +})) + +export const emptyReport: Report = { + fields: [ + { + type: "text", + name: "text", + description: { + en: "Text field, with HTML description", + pl: "Pole tekstowe, z opisem w formacie HTML" + }, + value: null, + label: { + en: "Text Field", + pl: "Pole tekstowe", + }, + }, + { + type: "single-choice", + name: "single", + description: { + en: "single choice field, with HTML description", + pl: "Pole jednokrotnego wyboru, z opisem w formacie HTML" + }, + value: null, + choices, + label: { + en: "Single choice field", + pl: "Pole jednokrotnego wyboru", + }, + }, + { + type: "select", + name: "select", + description: { + en: "select field, with HTML description", + pl: "Pole jednokrotnego wyboru z selectboxem, z opisem w formacie HTML" + }, + value: choices[2], + choices, + label: { + en: "Select field", + pl: "Pole jednokrotnego wyboru (selectbox)", + }, + }, + { + name: "multi", + type: "multi-choice", + description: { + en: "Multiple choice field, with HTML description", + pl: "Pole wielokrotnego wyboru, z opisem w formacie HTML" + }, + value: [ choices[0], choices[3] ], + choices, + label: { + en: "Multi choice field", + pl: "Pole wielokrotnego wyboru", + }, + }, + ] +} diff --git a/src/routing.tsx b/src/routing.tsx index a88566b..9fcdb47 100644 --- a/src/routing.tsx +++ b/src/routing.tsx @@ -11,6 +11,7 @@ import { isLoggedInMiddleware, isReadyMiddleware } from "@/middleware"; import UserFillPage from "@/pages/user/fill"; import UserProfilePage from "@/pages/user/profile"; import { managementRoutes } from "@/management/routing"; +import SubmitReportPage from "@/pages/internship/report"; export type Route = { name?: string; @@ -44,6 +45,7 @@ export const routes: Route[] = [ { name: "internship_proposal", path: "/internship/proposal", exact: true, content: () => , middlewares: [ isReadyMiddleware ] }, { name: "internship_proposal_preview", path: "/internship/preview/proposal", exact: true, content: () => , middlewares: [ isReadyMiddleware ] }, { name: "internship_plan", path: "/internship/plan", exact: true, content: () => , middlewares: [ isReadyMiddleware ] }, + { name: "internship_report", path: "/internship/report", exact: true, content: () => , middlewares: [ isReadyMiddleware ] }, // user { name: "user_login", path: "/user/login", content: () => }, diff --git a/src/serialization/report.ts b/src/serialization/report.ts new file mode 100644 index 0000000..32f8238 --- /dev/null +++ b/src/serialization/report.ts @@ -0,0 +1,4 @@ +import { identityTransformer, Serializable, Transformer } from "@/serialization/types"; +import { Report } from "@/data/report"; + +export const reportSerializationTransformer: Transformer> = identityTransformer; diff --git a/src/state/actions/index.ts b/src/state/actions/index.ts index 0fc0534..626d47c 100644 --- a/src/state/actions/index.ts +++ b/src/state/actions/index.ts @@ -9,6 +9,7 @@ import { UserAction, UserActions } from "@/state/actions/user"; import { ThunkDispatch } from "redux-thunk"; import { AppState } from "@/state/reducer"; import { StudentAction, StudentActions } from "@/state/actions/student"; +import { InternshipReportAction, InternshipReportActions } from "@/state/actions/report"; export * from "./base" export * from "./edition" @@ -17,6 +18,7 @@ export * from "./proposal" export * from "./plan" export * from "./user" export * from "./student" +export * from "./report" export type Action = UserAction @@ -25,6 +27,7 @@ export type Action | InternshipProposalAction | StudentAction | InternshipPlanAction + | InternshipReportAction | InsuranceAction; export const Actions = { @@ -35,6 +38,7 @@ export const Actions = { ...InternshipPlanActions, ...InsuranceActions, ...StudentActions, + ...InternshipReportActions, } export type Actions = typeof Actions; export type AppDispatch = ThunkDispatch; diff --git a/src/state/actions/report.ts b/src/state/actions/report.ts new file mode 100644 index 0000000..c98aa7b --- /dev/null +++ b/src/state/actions/report.ts @@ -0,0 +1,43 @@ +import { Internship } from "@/data"; +import { + ReceiveSubmissionApproveAction, + ReceiveSubmissionDeclineAction, + ReceiveSubmissionUpdateAction, + SaveSubmissionAction, + SendSubmissionAction +} from "@/state/actions/submission"; +import { SubmissionState } from "@/api/dto/internship-registration"; +import { Report } from "@/data/report"; + +export enum InternshipReportActions { + Send = "SEND_REPORT", + Save = "SAVE_REPORT", + Approve = "RECEIVE_REPORT_APPROVE", + Decline = "RECEIVE_REPORT_DECLINE", + Receive = "RECEIVE_REPORT_STATE", +} + +export interface SendReportAction extends SendSubmissionAction { +} + +export interface ReceiveReportApproveAction extends ReceiveSubmissionApproveAction { +} + +export interface ReceiveReportDeclineAction extends ReceiveSubmissionDeclineAction { +} + +export interface ReceiveReportUpdateAction extends ReceiveSubmissionUpdateAction { + report: Report; + state: SubmissionState, +} + +export interface SaveReportAction extends SaveSubmissionAction { + report: Report; +} + +export type InternshipReportAction + = SendReportAction + | SaveReportAction + | ReceiveReportApproveAction + | ReceiveReportDeclineAction + | ReceiveReportUpdateAction; diff --git a/src/state/reducer/index.ts b/src/state/reducer/index.ts index d57303b..91d4521 100644 --- a/src/state/reducer/index.ts +++ b/src/state/reducer/index.ts @@ -7,6 +7,7 @@ import internshipProposalReducer from "@/state/reducer/proposal"; import internshipPlanReducer from "@/state/reducer/plan"; import insuranceReducer from "@/state/reducer/insurance"; import userReducer from "@/state/reducer/user"; +import internshipReportReducer from "@/state/reducer/report"; const rootReducer = combineReducers({ student: studentReducer, @@ -16,6 +17,7 @@ const rootReducer = combineReducers({ plan: internshipPlanReducer, insurance: insuranceReducer, user: userReducer, + report: internshipReportReducer, }) export type AppState = ReturnType; diff --git a/src/state/reducer/report.ts b/src/state/reducer/report.ts new file mode 100644 index 0000000..81fb5ac --- /dev/null +++ b/src/state/reducer/report.ts @@ -0,0 +1,66 @@ +import { InternshipReportAction, InternshipReportActions } from "@/state/actions"; +import { Serializable } from "@/serialization/types"; +import { + createSubmissionReducer, + defaultDeanApprovalsState, + defaultSubmissionState, + SubmissionState +} from "@/state/reducer/submission"; +import { Reducer } from "react"; +import { SubmissionAction } from "@/state/actions/submission"; +import { SubmissionState as ApiSubmissionState } from "@/api/dto/internship-registration"; +import { Report } from "@/data/report"; +import { reportSerializationTransformer } from "@/serialization/report"; + +export type InternshipReportState = SubmissionState & { + report: Serializable | null; +} + +const defaultInternshipReportState: InternshipReportState = { + ...defaultDeanApprovalsState, + ...defaultSubmissionState, + report: null, +} + +export const getInternshipReport = ({ report }: InternshipReportState): Report | null => + report && reportSerializationTransformer.reverseTransform(report); + +const internshipReportSubmissionReducer: Reducer = createSubmissionReducer({ + [InternshipReportActions.Approve]: SubmissionAction.Approve, + [InternshipReportActions.Decline]: SubmissionAction.Decline, + [InternshipReportActions.Receive]: SubmissionAction.Receive, + [InternshipReportActions.Save]: SubmissionAction.Save, + [InternshipReportActions.Send]: SubmissionAction.Send, +}) + +const internshipReportReducer = (state: InternshipReportState = defaultInternshipReportState, action: InternshipReportAction): InternshipReportState => { + state = internshipReportSubmissionReducer(state, action); + + switch (action.type) { + case InternshipReportActions.Save: + case InternshipReportActions.Send: + return { + ...state, + } + case InternshipReportActions.Receive: + if (state.overwritten) { + return state; + } + + return { + ...state, + accepted: action.state === ApiSubmissionState.Accepted, + declined: action.state === ApiSubmissionState.Rejected, + sent: [ + ApiSubmissionState.Accepted, + ApiSubmissionState.Rejected, + ApiSubmissionState.Submitted + ].includes(action.state), + report: reportSerializationTransformer.transform(action.report), + } + default: + return state; + } +} + +export default internshipReportReducer; From bb7887cb9367b45b7513d7c5de87cf8f03cf4cd0 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Sat, 2 Jan 2021 23:11:33 +0100 Subject: [PATCH 02/12] Forms for editiing reporting form --- src/components/async.tsx | 1 - src/data/report.ts | 36 ++--- src/forms/report.tsx | 40 +++--- src/management/edition/list.tsx | 41 +++--- src/management/edition/manage.tsx | 82 +++++++++++ src/management/edition/report/fields/edit.tsx | 45 ++++++ src/management/edition/report/fields/form.tsx | 104 ++++++++++++++ src/management/edition/report/fields/list.tsx | 84 +++++++++++ src/management/main.tsx | 21 +-- src/management/routing.tsx | 5 + src/management/type/list.tsx | 2 - src/provider/dummy/report.ts | 130 ++++++++++-------- translations/management.pl.yaml | 19 +++ 13 files changed, 489 insertions(+), 121 deletions(-) create mode 100644 src/management/edition/manage.tsx create mode 100644 src/management/edition/report/fields/edit.tsx create mode 100644 src/management/edition/report/fields/form.tsx create mode 100644 src/management/edition/report/fields/list.tsx diff --git a/src/components/async.tsx b/src/components/async.tsx index f99fbca..82b7e8e 100644 --- a/src/components/async.tsx +++ b/src/components/async.tsx @@ -1,6 +1,5 @@ import { AsyncResult } from "@/hooks"; import React from "react"; -import { CircularProgress } from "@material-ui/core"; import { Alert } from "@material-ui/lab"; import { Loading } from "@/components/loading"; diff --git a/src/data/report.ts b/src/data/report.ts index d399ce8..a5eeafc 100644 --- a/src/data/report.ts +++ b/src/data/report.ts @@ -4,34 +4,38 @@ interface PredefinedChoices { choices: Multilingual[]; } -export interface BaseField { +export interface BaseFieldDefinition { name: string; description: Multilingual; label: Multilingual; } -export interface TextField extends BaseField { - type: "text"; - value: string | null; +export interface TextFieldDefinition extends BaseFieldDefinition { + type: "short-text" | "long-text"; } -export interface MultiChoiceField extends BaseField, PredefinedChoices { - type: "multi-choice"; - value: Multilingual[] | null; +export type TextFieldValue = string; + +export interface MultiChoiceFieldDefinition extends BaseFieldDefinition, PredefinedChoices { + type: "checkbox"; } -export interface SingleChoiceField extends BaseField, PredefinedChoices { - type: "single-choice"; - value: Multilingual | null +export type MultiChoiceValue = Multilingual[]; + +export interface SingleChoiceFieldDefinition extends BaseFieldDefinition, PredefinedChoices { + type: "radio" | "select"; } -export interface SelectField extends BaseField, PredefinedChoices { - type: "select"; - value: Multilingual | null -} +export type SingleChoiceValue = Multilingual; -export type ReportField = TextField | MultiChoiceField | SingleChoiceField | SelectField; +export type ReportFieldDefinition = TextFieldDefinition | MultiChoiceFieldDefinition | SingleChoiceFieldDefinition; +export type ReportFieldValue = TextFieldValue | MultiChoiceValue | SingleChoiceValue; +export type ReportFieldValues = { [field: string]: ReportFieldValue }; +export type ReportSchema = ReportFieldDefinition[]; export interface Report { - fields: ReportField[]; + fields: ReportFieldValues; } + +export const reportFieldTypes = ["short-text", "long-text", "checkbox", "radio", "select"]; + diff --git a/src/forms/report.tsx b/src/forms/report.tsx index a4936bf..dfb08f7 100644 --- a/src/forms/report.tsx +++ b/src/forms/report.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { emptyReport } from "@/provider/dummy/report"; +import { emptyReport, sampleReportSchema } from "@/provider/dummy/report"; import { Button, FormControl, @@ -18,22 +18,23 @@ import { Actions } from "@/components"; import { Link as RouterLink } from "react-router-dom"; import { route } from "@/routing"; import { useTranslation } from "react-i18next"; -import { MultiChoiceField, Report, ReportField, SelectField, SingleChoiceField } from "@/data/report"; +import { MultiChoiceFieldDefinition, Report, ReportFieldDefinition, ReportFieldValues, SingleChoiceFieldDefinition } from "@/data/report"; import { TextField as TextFieldFormik } from "formik-material-ui"; import { Field, Form, Formik, useFormik, useFormikContext } from "formik"; import { Multilingual } from "@/data"; import { Transformer } from "@/serialization"; -export type ReportFieldProps = { +export type ReportFieldProps = { field: TField; } -const CustomField = ({ field, ...props }: ReportFieldProps) => { +export const CustomField = ({ field, ...props }: ReportFieldProps) => { switch (field.type) { - case "text": + case "short-text": + case "long-text": return - case "single-choice": - case "multi-choice": + case "checkbox": + case "radio": return case "select": return @@ -42,12 +43,16 @@ const CustomField = ({ field, ...props }: ReportFieldProps) => { CustomField.Text = ({ field }: ReportFieldProps) => { return <> - + } -CustomField.Select = ({ field }: ReportFieldProps) => { +CustomField.Select = ({ field }: ReportFieldProps) => { const { t } = useTranslation(); const id = `custom-field-${field.name}`; const { values, setFieldValue } = useFormikContext(); @@ -63,24 +68,24 @@ CustomField.Select = ({ field }: ReportFieldProps) => { } -CustomField.Choice = ({ field }: ReportFieldProps) => { +CustomField.Choice = ({ field }: ReportFieldProps) => { const { t } = useTranslation(); const { values, setFieldValue } = useFormikContext(); const value = values[field.name]; - const isSelected = field.type == 'single-choice' + const isSelected = field.type == 'radio' ? (checked: Multilingual) => value == checked : (checked: Multilingual) => (value || []).includes(checked) - const handleChange = field.type == 'single-choice' + const handleChange = field.type == 'radio' ? (choice: Multilingual) => () => setFieldValue(field.name, choice, false) : (choice: Multilingual) => () => { const current = value || []; setFieldValue(field.name, !current.includes(choice) ? [ ...current, choice ] : current.filter((c: Multilingual) => c != choice), false); } - const Component = field.type == 'single-choice' ? Radio : Checkbox; + const Component = field.type == 'radio' ? Radio : Checkbox; return { field.label.pl } @@ -94,19 +99,20 @@ CustomField.Choice = ({ field }: ReportFieldProps } -export type ReportFormValues = { [field: string]: any }; +export type ReportFormValues = ReportFieldValues; const reportToFormValuesTransformer: Transformer = { reverseTransform(subject: ReportFormValues, context: { report: Report }): Report { - return { ...context.report }; + return { ...context.report, fields: subject }; }, transform(subject: Report, context: undefined): ReportFormValues { - return Object.fromEntries(subject.fields.map(field => [ field.name, field.value ])); + return subject.fields; } } export default function ReportForm() { const report = emptyReport; + const schema = sampleReportSchema; const { t } = useTranslation(); const handleSubmit = async () => {}; @@ -117,7 +123,7 @@ export default function ReportForm() { { t('forms.report.instructions') } - { report.fields.map(field => ) } + { schema.map(field => ) } + + + + + + +} diff --git a/src/management/edition/report/fields/form.tsx b/src/management/edition/report/fields/form.tsx new file mode 100644 index 0000000..2c720df --- /dev/null +++ b/src/management/edition/report/fields/form.tsx @@ -0,0 +1,104 @@ +import React from "react"; +import { ReportFieldDefinition, reportFieldTypes } from "@/data/report"; +import { identityTransformer, Transformer } from "@/serialization"; +import { useTranslation } from "react-i18next"; +import { useSpacing } from "@/styles"; +import { Field, FieldArray, FieldProps, useFormikContext } from "formik"; +import { TextField as TextFieldFormik, Select } from "formik-material-ui"; +import { FormControl, InputLabel, Typography, MenuItem, Card, Box, Button, CardContent, CardHeader, IconButton } from "@material-ui/core"; +import { CKEditorField } from "@/field/ckeditor"; +import { Multilingual } from "@/data"; +import { Actions } from "@/components"; +import { Add } from "@material-ui/icons"; +import { TrashCan } from "mdi-material-ui"; +import { FieldPreview } from "@/management/edition/report/fields/list"; +import { createStyles, makeStyles, Theme } from "@material-ui/core/styles"; + +export type FieldDefinitionFormValues = ReportFieldDefinition | { type: string }; + +export const initialFieldFormValues: FieldDefinitionFormValues = { + type: "short-text", + name: "", + description: { + pl: "", + en: "", + }, + label: { + pl: "", + en: "", + }, + choices: [], +} + +export const fieldFormValuesTransformer: Transformer = identityTransformer; +export type ChoiceFieldProps = { name: string }; + +const ChoiceField = ({ field, form, meta }: FieldProps) => { + const { name } = field; + const { t } = useTranslation("management"); + const spacing = useSpacing(2); + + return
+ + +
+} + +const useStyles = makeStyles((theme: Theme) => createStyles({ + preview: { + padding: theme.spacing(2), + backgroundColor: "#e9f0f5", + }, +})) + +export function FieldDefinitionForm() { + const { t } = useTranslation("management"); + const spacing = useSpacing(2); + const { values } = useFormikContext(); + const classes = useStyles(); + + return
+ + + { t("report-field.field.type") } + + { reportFieldTypes.map(type => { t(`report-field.type.${type}`) })} + + + { t("report-field.field.label") } + + + { t("report-field.field.description") } + + + + { ["radio", "select", "checkbox"].includes(values.type) && <> + { t("report-field.field.choices") } + <> + { values.choices.map((value: Multilingual, index: number) => + + helper.remove(index) }> + + + }/> + + + + ) } + + + + } /> + } + +
+ { t("report-field.preview") } + +
+
+} diff --git a/src/management/edition/report/fields/list.tsx b/src/management/edition/report/fields/list.tsx new file mode 100644 index 0000000..2e62e15 --- /dev/null +++ b/src/management/edition/report/fields/list.tsx @@ -0,0 +1,84 @@ +import React, { useState } from "react"; +import { Page } from "@/pages/base"; +import { Management } from "@/management/main"; +import { Box, Container, IconButton, Tooltip, Typography } from "@material-ui/core"; +import { useTranslation } from "react-i18next"; +import { sampleReportSchema } from "@/provider/dummy/report"; +import MaterialTable, { Column } from "material-table"; +import { actionsColumn, fieldComparator, multilingualStringComparator } from "@/management/common/helpers"; +import { MultilingualCell } from "@/management/common/MultilangualCell"; +import { ReportFieldDefinition } from "@/data/report"; +import { Formik } from "formik"; +import { CustomField } from "@/forms/report"; +import { Edit } from "@material-ui/icons"; +import { createPortal } from "react-dom"; +import { createDeleteAction } from "@/management/common/DeleteResourceAction"; +import { EditFieldDefinitionDialog } from "@/management/edition/report/fields/edit"; + +const title = "edition.report-fields.title"; + +export const FieldPreview = ({ field }: { field: ReportFieldDefinition }) => { + return {}}> + + +} + +export const EditionReportFields = () => { + const { t } = useTranslation("management"); + const schema = sampleReportSchema; + + const handleFieldDeletion = () => {} + + const DeleteFieldAction = createDeleteAction({ label: field => field.label.pl, onDelete: handleFieldDeletion }) + const EditFieldAction = ({ field }: { field: ReportFieldDefinition }) => { + const [ open, setOpen ] = useState(false); + + const handleFieldSave = async (field: ReportFieldDefinition) => { + } + + return <> + + setOpen(true) }> + + { open && createPortal( + setOpen(false) }/>, + document.getElementById("modals") as Element + ) } + + } + + const columns: Column[] = [ + { + title: t("report-field.field.label"), + customSort: fieldComparator('label', multilingualStringComparator), + cellStyle: { whiteSpace: "nowrap" }, + render: field => , + }, + { + title: t("report-field.field.type"), + cellStyle: { whiteSpace: "nowrap" }, + render: field => t(`report-field.type.${field.type}`), + }, + actionsColumn(field => <> + + + ), + ] + + return + + + { t(title) } + + { t(title) } + + + } + /> + + +} diff --git a/src/management/main.tsx b/src/management/main.tsx index 4a990ce..73b8dcb 100644 --- a/src/management/main.tsx +++ b/src/management/main.tsx @@ -6,6 +6,13 @@ import { route } from "@/routing"; import { useTranslation } from "react-i18next"; import { CalendarClock, FileCertificateOutline, FileDocumentMultipleOutline } from "mdi-material-ui"; + +export const ManagementLink = ({ icon, route, children }: ManagementLinkProps) => + + { icon } + { children } + + export const Management = { Breadcrumbs: ({ children, ...props }: BreadcrumbsProps) => { const { t } = useTranslation(); @@ -14,7 +21,9 @@ export const Management = { { t("management:title") } { children } ; - } + }, + Menu: List, + MenuItem: ManagementLink, } type ManagementLinkProps = React.PropsWithChildren<{ @@ -22,12 +31,6 @@ type ManagementLinkProps = React.PropsWithChildren<{ route: string, }>; -const ManagementLink = ({ icon, route, children }: ManagementLinkProps) => - - { icon } - { children } - - export const ManagementIndex = () => { const { t } = useTranslation(); @@ -37,7 +40,7 @@ export const ManagementIndex = () => { - + } route={ route("management:editions") }> { t("management:edition.index.title") } @@ -47,7 +50,7 @@ export const ManagementIndex = () => { } route={ route("management:static_pages") }> { t("management:page.index.title") } - + diff --git a/src/management/routing.tsx b/src/management/routing.tsx index a994e67..8e35409 100644 --- a/src/management/routing.tsx +++ b/src/management/routing.tsx @@ -5,11 +5,16 @@ import React from "react"; import { ManagementIndex } from "@/management/main"; import StaticPageManagement from "@/management/page/list"; import { InternshipTypeManagement } from "@/management/type/list"; +import { ManageEditionPage } from "@/management/edition/manage"; +import { EditionReportFields } from "@/management/edition/report/fields/list"; export const managementRoutes: Route[] = ([ { name: "index", path: "/", content: ManagementIndex, exact: true }, + { name: "edition_report_form", path: "/editions/:edition/report", content: EditionReportFields }, + { name: "edition_manage", path: "/editions/:edition", content: ManageEditionPage }, { name: "editions", path: "/editions", content: EditionsManagement }, + { name: "types", path: "/types", content: InternshipTypeManagement }, { name: "static_pages", path: "/static-pages", content: StaticPageManagement } ] as Route[]).map( diff --git a/src/management/type/list.tsx b/src/management/type/list.tsx index 7d34c66..ebad003 100644 --- a/src/management/type/list.tsx +++ b/src/management/type/list.tsx @@ -17,10 +17,8 @@ import { BulkActions } from "@/management/common/BulkActions"; import { useSpacing } from "@/styles"; import { Actions } from "@/components"; import { MultilingualCell } from "@/management/common/MultilangualCell"; -import { default as StaticPage } from "@/data/page"; import { Add, Edit } from "@material-ui/icons"; import { createPortal } from "react-dom"; -import { EditStaticPageDialog } from "@/management/page/edit"; import { EditInternshipTypeDialog } from "@/management/type/edit"; const title = "type.index.title"; diff --git a/src/provider/dummy/report.ts b/src/provider/dummy/report.ts index ad77aad..8973586 100644 --- a/src/provider/dummy/report.ts +++ b/src/provider/dummy/report.ts @@ -1,66 +1,80 @@ -import { Report } from "@/data/report"; +import { Report, ReportSchema } from "@/data/report"; const choices = [1, 2, 3, 4, 5].map(n => ({ pl: `Wybór ${n}`, en: `Choice ${n}` })) +export const sampleReportSchema: ReportSchema = [ + { + type: "short-text", + name: "short", + description: { + en: "Text field, with HTML description", + pl: "Pole tekstowe, z opisem w formacie HTML" + }, + label: { + en: "Text Field", + pl: "Pole tekstowe", + }, + }, + { + type: "long-text", + name: "long", + description: { + en: "Long text field, with HTML description", + pl: "Długie pole tekstowe, z opisem w formacie HTML" + }, + label: { + en: "Long Text Field", + pl: "Długie Pole tekstowe", + }, + }, + { + type: "radio", + name: "radio", + description: { + en: "single choice field, with HTML description", + pl: "Pole jednokrotnego wyboru, z opisem w formacie HTML" + }, + choices, + label: { + en: "Single choice field", + pl: "Pole jednokrotnego wyboru", + }, + }, + { + type: "select", + name: "select", + description: { + en: "select field, with HTML description", + pl: "Pole jednokrotnego wyboru z selectboxem, z opisem w formacie HTML" + }, + choices, + label: { + en: "Select field", + pl: "Pole jednokrotnego wyboru (selectbox)", + }, + }, + { + name: "multi", + type: "checkbox", + description: { + en: "Multiple choice field, with HTML description", + pl: "Pole wielokrotnego wyboru, z opisem w formacie HTML" + }, + choices, + label: { + en: "Multi choice field", + pl: "Pole wielokrotnego wyboru", + }, + }, +] + export const emptyReport: Report = { - fields: [ - { - type: "text", - name: "text", - description: { - en: "Text field, with HTML description", - pl: "Pole tekstowe, z opisem w formacie HTML" - }, - value: null, - label: { - en: "Text Field", - pl: "Pole tekstowe", - }, - }, - { - type: "single-choice", - name: "single", - description: { - en: "single choice field, with HTML description", - pl: "Pole jednokrotnego wyboru, z opisem w formacie HTML" - }, - value: null, - choices, - label: { - en: "Single choice field", - pl: "Pole jednokrotnego wyboru", - }, - }, - { - type: "select", - name: "select", - description: { - en: "select field, with HTML description", - pl: "Pole jednokrotnego wyboru z selectboxem, z opisem w formacie HTML" - }, - value: choices[2], - choices, - label: { - en: "Select field", - pl: "Pole jednokrotnego wyboru (selectbox)", - }, - }, - { - name: "multi", - type: "multi-choice", - description: { - en: "Multiple choice field, with HTML description", - pl: "Pole wielokrotnego wyboru, z opisem w formacie HTML" - }, - value: [ choices[0], choices[3] ], - choices, - label: { - en: "Multi choice field", - pl: "Pole wielokrotnego wyboru", - }, - }, - ] + fields: { + "short": "Testowa wartość", + "select": choices[0], + "multi": [ choices[1], choices[2] ], + } } diff --git a/translations/management.pl.yaml b/translations/management.pl.yaml index 1367f4e..993c35b 100644 --- a/translations/management.pl.yaml +++ b/translations/management.pl.yaml @@ -11,6 +11,7 @@ actions: preview: Podgląd delete: Usuń edit: Edytuj + add: Dodaj edition: index: @@ -20,6 +21,24 @@ edition: start: Początek end: Koniec course: Kierunek + report-fields: + title: "Pola formularza raportu praktyki" + +report-field: + preview: Podgląd + field: + type: "Rodzaj" + name: "Unikalny identyfikator" + label: "Etykieta" + description: "Opis" + choices: "Możliwe wybory" + choice: "Wybór #{{ index }}" + type: + select: "Pole wyboru" + radio: "Jednokrotny wybór (radio)" + checkbox: "Wielokrotny wybór (checkboxy)" + short-text: "Pole krótkiej odpowiedzi" + long-text: "Pole długiej odpowiedzi" type: index: From 78377a934ee2b42399719f15f1b0849b52834d84 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Sun, 3 Jan 2021 13:28:46 +0100 Subject: [PATCH 03/12] Edition form --- src/i18n.ts | 9 ++- src/index.tsx | 8 +-- src/management/api/course.ts | 8 +++ src/management/api/index.ts | 4 +- src/management/edition/form.tsx | 94 +++++++++++++++++++++++++++++ src/management/edition/manage.tsx | 2 +- src/management/edition/settings.tsx | 45 ++++++++++++++ src/management/routing.tsx | 2 + translations/management.pl.yaml | 12 ++++ 9 files changed, 174 insertions(+), 10 deletions(-) create mode 100644 src/management/api/course.ts create mode 100644 src/management/edition/form.tsx create mode 100644 src/management/edition/settings.tsx diff --git a/src/i18n.ts b/src/i18n.ts index fe8160e..0952bef 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -4,8 +4,9 @@ import I18nextBrowserLanguageDetector from "i18next-browser-languagedetector"; import "moment/locale/pl" import "moment/locale/en-gb" -import moment, { isDuration, isMoment, unitOfTime } from "moment-timezone"; +import moment, { isDuration, isMoment, Moment, unitOfTime } from "moment-timezone"; import { convertToRoman } from "@/utils/numbers"; +import MomentUtils from "@date-io/moment"; const resources = { en: { @@ -52,4 +53,10 @@ i18n document.documentElement.lang = i18n.language; moment.locale(i18n.language) +export class LocalizedMomentUtils extends MomentUtils { + getDatePickerHeaderText(date: Moment): string { + return this.format(date, "d MMM yyyy"); + } +} + export default i18n; diff --git a/src/index.tsx b/src/index.tsx index 6df4691..0909519 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,13 +10,7 @@ import { MuiPickersUtilsProvider } from "@material-ui/pickers"; import moment, { Moment } from "moment-timezone"; import { studentTheme } from "@/ui/theme"; import { BrowserRouter } from "react-router-dom"; -import MomentUtils from "@date-io/moment"; - -class LocalizedMomentUtils extends MomentUtils { - getDatePickerHeaderText(date: Moment): string { - return this.format(date, "d MMM yyyy"); - } -} +import { LocalizedMomentUtils } from "@/i18n"; ReactDOM.render( diff --git a/src/management/api/course.ts b/src/management/api/course.ts new file mode 100644 index 0000000..d9afae3 --- /dev/null +++ b/src/management/api/course.ts @@ -0,0 +1,8 @@ +import { Course } from "@/data"; +import { sampleCourse } from "@/provider/dummy"; + +export async function all(): Promise { + return [ + sampleCourse, + ]; +} diff --git a/src/management/api/index.ts b/src/management/api/index.ts index e2390f7..62e75d7 100644 --- a/src/management/api/index.ts +++ b/src/management/api/index.ts @@ -1,11 +1,13 @@ import * as edition from "./edition" import * as page from "./page" import * as type from "./type" +import * as course from "./course" export const api = { edition, page, - type + type, + course, } export default api; diff --git a/src/management/edition/form.tsx b/src/management/edition/form.tsx new file mode 100644 index 0000000..c516a9c --- /dev/null +++ b/src/management/edition/form.tsx @@ -0,0 +1,94 @@ +import React, { useCallback } from "react"; +import { Edition } from "@/data/edition"; +import { Nullable } from "@/helpers"; +import { useTranslation } from "react-i18next"; +import { FieldProps, useFormikContext, Field } from "formik"; +import { identityTransformer, Transformer } from "@/serialization"; +import { Grid, TextField, Typography } from "@material-ui/core"; +import { useSpacing } from "@/styles"; +import { Moment } from "moment-timezone"; +import { KeyboardDatePicker as DatePicker } from "@material-ui/pickers"; +import { TextField as TextFieldFormik } from "formik-material-ui"; +import { Course } from "@/data"; +import { Autocomplete } from "@material-ui/lab"; +import { useAsync } from "@/hooks"; +import api from "@/management/api"; + +export type EditionFormValues = Nullable; +export const initialEditionFormValues: EditionFormValues = { + course: null, + endDate: null, + minimumInternshipHours: 80, + proposalDeadline: null, + reportingEnd: null, + reportingStart: null, + startDate: null +} + +export const editionFormValuesTransformer: Transformer = identityTransformer; + +export const CoursePickerField = ({ field, form, meta, ...props}: FieldProps) => { + const courses = useAsync(useCallback(() => api.course.all(), [])); + const { t } = useTranslation("management"); + + return } + getOptionLabel={ course => course.name } + value={ field.value } + onChange={ field.onChange } + onBlur={ field.onBlur } + /> +} + +export const DatePickerField = ({ field, form, meta, ...props }: FieldProps) => { + const { value, onChange, onBlur } = field; + + return +} + +export const EditionForm = () => { + const { t } = useTranslation("management"); + const spacing = useSpacing(2); + + return
+ { t("edition.fields.basic") } + + + + + + + + + + + + + + + + + { t("edition.fields.deadlines") } + + + + + + + + + + + + + +
+} diff --git a/src/management/edition/manage.tsx b/src/management/edition/manage.tsx index 7ba0a5c..e78f962 100644 --- a/src/management/edition/manage.tsx +++ b/src/management/edition/manage.tsx @@ -68,7 +68,7 @@ export const ManageEditionPage = () => { { t("edition.manage.management") } } route={ route("management:edition_report_form", { edition: edition.id || "" }) }> - { t("management:edition.report-form.title") } + { t("management:edition.report-fields.title") } } route={ route("management:edition_settings", { edition: edition.id || "" }) }> { t("management:edition.settings.title") } diff --git a/src/management/edition/settings.tsx b/src/management/edition/settings.tsx new file mode 100644 index 0000000..bb7dc1f --- /dev/null +++ b/src/management/edition/settings.tsx @@ -0,0 +1,45 @@ +import React, { useCallback } from "react"; +import { Page } from "@/pages/base"; +import { Management } from "@/management/main"; +import { Container, Dialog, Typography } from "@material-ui/core"; +import { Async } from "@/components/async"; +import { useTranslation } from "react-i18next"; +import { useRouteMatch } from "react-router-dom"; +import { useAsync } from "@/hooks"; +import { Edition } from "@/data/edition"; +import api from "@/management/api"; +import { Form, Formik } from "formik"; +import { useSpacing } from "@/styles"; +import { EditionForm } from "@/management/edition/form"; + +const title = "edition.settings.title"; + +export function EditionSettings() { + const { t } = useTranslation("management"); + const { params } = useRouteMatch(); + const spacing = useSpacing(); + + const edition = useAsync(useCallback(() => api.edition.details(params.edition), [params.edition])) + + const handleSubmit = () => {}; + + return + + + { t(title) } + + { t(title) } + + + + { edition => + +
+ + +
+ } + + + ; +} diff --git a/src/management/routing.tsx b/src/management/routing.tsx index 8e35409..ca1d843 100644 --- a/src/management/routing.tsx +++ b/src/management/routing.tsx @@ -7,11 +7,13 @@ import StaticPageManagement from "@/management/page/list"; import { InternshipTypeManagement } from "@/management/type/list"; import { ManageEditionPage } from "@/management/edition/manage"; import { EditionReportFields } from "@/management/edition/report/fields/list"; +import { EditionSettings } from "@/management/edition/settings"; export const managementRoutes: Route[] = ([ { name: "index", path: "/", content: ManagementIndex, exact: true }, { name: "edition_report_form", path: "/editions/:edition/report", content: EditionReportFields }, + { name: "edition_settings", path: "/editions/:edition/settings", content: EditionSettings }, { name: "edition_manage", path: "/editions/:edition", content: ManageEditionPage }, { name: "editions", path: "/editions", content: EditionsManagement }, diff --git a/translations/management.pl.yaml b/translations/management.pl.yaml index 993c35b..ef70f74 100644 --- a/translations/management.pl.yaml +++ b/translations/management.pl.yaml @@ -21,8 +21,20 @@ edition: start: Początek end: Koniec course: Kierunek + reportingStart: Początek raportowania + reportingEnd: Koniec raportowania + proposalDeadline: Termin zgłaszania praktyk + minimumInternshipHours: Minimalna liczba godzin + fields: + basic: "Podstawowe" + deadlines: "Terminy" report-fields: title: "Pola formularza raportu praktyki" + manage: + management: "Zarządzanie edycją" + internships: "Zarządzanie praktykami" + settings: + title: "Konfiguracja edycji" report-field: preview: Podgląd From 2c8bb5b1ba3e02649a383233dd7c6bddccf4c955 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Mon, 4 Jan 2021 00:35:05 +0100 Subject: [PATCH 04/12] Edition types and program form fields --- src/api/dto/edition.ts | 7 ++- src/data/edition.ts | 3 + src/management/edition/form.tsx | 102 +++++++++++++++++++++++++++++--- translations/management.pl.yaml | 4 ++ 4 files changed, 108 insertions(+), 8 deletions(-) diff --git a/src/api/dto/edition.ts b/src/api/dto/edition.ts index 20d47fd..ece5a0f 100644 --- a/src/api/dto/edition.ts +++ b/src/api/dto/edition.ts @@ -4,6 +4,7 @@ import { OneWayTransformer, Transformer } from "@/serialization"; import { Edition } from "@/data/edition"; import moment from "moment-timezone"; import { Subset } from "@/helpers"; +import { InternshipTypeDTO, internshipTypeDtoTransformer } from "@/api/dto/type"; export interface ProgramEntryDTO extends Identifiable { description: string; @@ -16,6 +17,7 @@ export interface EditionDTO extends Identifiable { reportingStart: string, course: CourseDTO, availableSubjects: ProgramEntryDTO[], + availableInternshipTypes: InternshipTypeDTO[], } export interface EditionTeaserDTO extends Identifiable { @@ -45,7 +47,8 @@ export const editionDtoTransformer: Transformer = { editionStart: subject.startDate.toISOString(), course: courseDtoTransformer.reverseTransform(subject.course), reportingStart: subject.reportingStart.toISOString(), - availableSubjects: [], + availableSubjects: subject.program.map(entry => programEntryDtoTransformer.reverseTransform(entry)), + availableInternshipTypes: subject.types.map(entry => internshipTypeDtoTransformer.reverseTransform(entry)) }; }, transform(subject: EditionDTO, context: undefined): Edition { @@ -59,6 +62,8 @@ export const editionDtoTransformer: Transformer = { proposalDeadline: moment(subject.reportingStart), reportingStart: moment(subject.reportingStart), reportingEnd: moment(subject.reportingStart).add(1, 'month'), + program: (subject.availableSubjects || []).map(entry => programEntryDtoTransformer.transform(entry)), + types: (subject.availableInternshipTypes || []).map(entry => internshipTypeDtoTransformer.transform(entry)) }; } } diff --git a/src/data/edition.ts b/src/data/edition.ts index 4e11994..84f3ee7 100644 --- a/src/data/edition.ts +++ b/src/data/edition.ts @@ -1,6 +1,7 @@ import { Moment } from "moment-timezone"; import { Course } from "@/data/course"; import { Identifiable } from "@/data/common"; +import { InternshipProgramEntry, InternshipType } from "@/data/internship"; export type Edition = { course: Course; @@ -11,6 +12,8 @@ export type Edition = { reportingEnd: Moment, minimumInternshipHours: number; maximumInternshipHours?: number; + program: InternshipProgramEntry[]; + types: InternshipType[]; } & Identifiable export type Deadlines = { diff --git a/src/management/edition/form.tsx b/src/management/edition/form.tsx index c516a9c..e3fdb7b 100644 --- a/src/management/edition/form.tsx +++ b/src/management/edition/form.tsx @@ -2,19 +2,37 @@ import React, { useCallback } from "react"; import { Edition } from "@/data/edition"; import { Nullable } from "@/helpers"; import { useTranslation } from "react-i18next"; -import { FieldProps, useFormikContext, Field } from "formik"; +import { FieldProps, Field, FieldArrayRenderProps, FieldArray, getIn } from "formik"; import { identityTransformer, Transformer } from "@/serialization"; -import { Grid, TextField, Typography } from "@material-ui/core"; +import { + Button, Card, CardContent, CardHeader, + Checkbox, + Grid, IconButton, + List, + ListItem, + ListItemIcon, + ListItemSecondaryAction, + ListItemText, + Paper, + TextField, + Tooltip, + Typography +} from "@material-ui/core"; import { useSpacing } from "@/styles"; import { Moment } from "moment-timezone"; import { KeyboardDatePicker as DatePicker } from "@material-ui/pickers"; import { TextField as TextFieldFormik } from "formik-material-ui"; -import { Course } from "@/data"; +import { Course, Identifiable, InternshipProgramEntry, InternshipType } from "@/data"; import { Autocomplete } from "@material-ui/lab"; import { useAsync } from "@/hooks"; import api from "@/management/api"; +import { Async } from "@/components/async"; +import { AccountCheck, ShieldCheck, TrashCan } from "mdi-material-ui"; +import { Actions } from "@/components"; +import { Add } from "@material-ui/icons"; export type EditionFormValues = Nullable; + export const initialEditionFormValues: EditionFormValues = { course: null, endDate: null, @@ -22,12 +40,76 @@ export const initialEditionFormValues: EditionFormValues = { proposalDeadline: null, reportingEnd: null, reportingStart: null, - startDate: null + startDate: null, + types: [], + program: [], } export const editionFormValuesTransformer: Transformer = identityTransformer; -export const CoursePickerField = ({ field, form, meta, ...props}: FieldProps) => { +function toggleValueInArray(array: T[], value: T, comparator: (a: T, b: T) => boolean = (a, b) => a == b): T[] { + return array.findIndex(other => comparator(other, value)) === -1 + ? [ ...array, value ] + : array.filter(other => !comparator(other, value)); +} + +export const ProgramField = ({ remove, push, form, name, ...props }: FieldArrayRenderProps) => { + const value = getIn(form.values, name) as InternshipProgramEntry[]; + const setValue = (value: InternshipProgramEntry[]) => form.setFieldValue(name, value, false); + + const { t } = useTranslation("management"); + + return <> + { value.map((entry, index) => + + remove(index) }> + + + } + /> + + { JSON.stringify(entry) } + + ) } + + + + +} + +export const TypesField = ({ field, form, meta, ...props }: FieldProps) => { + const { name, value = [] } = field; + + const types = useAsync(useCallback(() => api.type.all(), [])); + const { t } = useTranslation("management"); + + const toggle = (type: InternshipType) => () => form.setFieldValue(name, toggleValueInArray(value, type, (a, b) => a.id == b.id)); + const isChecked = (type: InternshipType) => value.findIndex(v => v.id == type.id) !== -1; + + return + { types => { + types.map(type => + + + + +
{ type.label.pl }
+ { type.description?.pl } + + +
+ { type.requiresDeanApproval && } + { type.requiresInsurance && } +
+ + ) + } } + +} + +export const CoursePickerField = ({ field, form, meta, ...props }: FieldProps) => { const courses = useAsync(useCallback(() => api.course.all(), [])); const { t } = useTranslation("management"); @@ -59,7 +141,7 @@ export const EditionForm = () => { const spacing = useSpacing(2); return
- { t("edition.fields.basic") } + { t("edition.fields.basic") } @@ -76,7 +158,7 @@ export const EditionForm = () => { - { t("edition.fields.deadlines") } + { t("edition.fields.deadlines") } @@ -90,5 +172,11 @@ export const EditionForm = () => { + { t("edition.fields.program") } + + { t("edition.fields.types") } + + +
} diff --git a/translations/management.pl.yaml b/translations/management.pl.yaml index ef70f74..7b63159 100644 --- a/translations/management.pl.yaml +++ b/translations/management.pl.yaml @@ -28,6 +28,8 @@ edition: fields: basic: "Podstawowe" deadlines: "Terminy" + program: "Ramowy program praktyk" + types: "Dostępne typy praktyki" report-fields: title: "Pola formularza raportu praktyki" manage: @@ -35,6 +37,8 @@ edition: internships: "Zarządzanie praktykami" settings: title: "Konfiguracja edycji" + program: + entry: "Punkt ramowego programu praktyki #{{ index }}" report-field: preview: Podgląd From 1deaebda3dfcc647f55ba37835cf189179b92e44 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Mon, 4 Jan 2021 22:41:11 +0100 Subject: [PATCH 05/12] Edition program form --- src/management/edition/form.tsx | 17 ++++++++++------- src/management/edition/settings.tsx | 12 ++++++++++-- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/management/edition/form.tsx b/src/management/edition/form.tsx index e3fdb7b..8996d2e 100644 --- a/src/management/edition/form.tsx +++ b/src/management/edition/form.tsx @@ -27,7 +27,7 @@ import { Autocomplete } from "@material-ui/lab"; import { useAsync } from "@/hooks"; import api from "@/management/api"; import { Async } from "@/components/async"; -import { AccountCheck, ShieldCheck, TrashCan } from "mdi-material-ui"; +import { AccountCheck, ArrowDown, ArrowUp, ShieldCheck, TrashCan } from "mdi-material-ui"; import { Actions } from "@/components"; import { Add } from "@material-ui/icons"; @@ -53,9 +53,8 @@ function toggleValueInArray(array: T[], value: T, compar : array.filter(other => !comparator(other, value)); } -export const ProgramField = ({ remove, push, form, name, ...props }: FieldArrayRenderProps) => { +export const ProgramField = ({ remove, swap, push, form, name, ...props }: FieldArrayRenderProps) => { const value = getIn(form.values, name) as InternshipProgramEntry[]; - const setValue = (value: InternshipProgramEntry[]) => form.setFieldValue(name, value, false); const { t } = useTranslation("management"); @@ -64,13 +63,17 @@ export const ProgramField = ({ remove, push, form, name, ...props }: FieldArrayR - remove(index) }> - - + { index < value.length - 1 && swap(index, index + 1) }> } + { index > 0 && swap(index, index - 1) }> } + remove(index) }> } /> - { JSON.stringify(entry) } + ) } diff --git a/src/management/edition/settings.tsx b/src/management/edition/settings.tsx index bb7dc1f..353eec4 100644 --- a/src/management/edition/settings.tsx +++ b/src/management/edition/settings.tsx @@ -1,7 +1,7 @@ import React, { useCallback } from "react"; import { Page } from "@/pages/base"; import { Management } from "@/management/main"; -import { Container, Dialog, Typography } from "@material-ui/core"; +import { Container, Divider, Typography, Button } from "@material-ui/core"; import { Async } from "@/components/async"; import { useTranslation } from "react-i18next"; import { useRouteMatch } from "react-router-dom"; @@ -11,13 +11,16 @@ import api from "@/management/api"; import { Form, Formik } from "formik"; import { useSpacing } from "@/styles"; import { EditionForm } from "@/management/edition/form"; +import { Actions } from "@/components"; +import { Save } from "@material-ui/icons"; +import { Cancel } from "mdi-material-ui"; const title = "edition.settings.title"; export function EditionSettings() { const { t } = useTranslation("management"); const { params } = useRouteMatch(); - const spacing = useSpacing(); + const spacing = useSpacing(2); const edition = useAsync(useCallback(() => api.edition.details(params.edition), [params.edition])) @@ -36,6 +39,11 @@ export function EditionSettings() {
+ + + + +
} From a38409e2d0c43853642980eb71c92228062f17f0 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Wed, 6 Jan 2021 20:51:39 +0100 Subject: [PATCH 06/12] Add edition breadcrumb --- src/app.tsx | 11 +- src/management/edition/manage.tsx | 131 +++++++++++------- src/management/edition/report/fields/list.tsx | 5 +- src/management/edition/settings.tsx | 5 +- src/management/routing.tsx | 9 +- src/routing.tsx | 23 ++- 6 files changed, 111 insertions(+), 73 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 47d9ad6..b6974b6 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,6 +1,6 @@ import React, { HTMLProps, useEffect } from 'react'; import { Link, Route, Switch } from "react-router-dom" -import { processMiddlewares, route, routes } from "@/routing"; +import { processMiddlewares, route, Routes, routes } from "@/routing"; import { useSelector } from "react-redux"; import { AppState } from "@/state/reducer"; import { Trans, useTranslation } from "react-i18next"; @@ -97,14 +97,7 @@ function App() {
- { - { routes.map(({ name, content, middlewares = [], ...route }) => - { - const Next = () => processMiddlewares([ ...middlewares, content ]) - return - } } /> - ) } - } + !route.tags || route.tags.length == 0) }/>