From 24e2527c1b04c2f277fa81cc72c0f66d8b952ee7 Mon Sep 17 00:00:00 2001 From: Kacper Donat Date: Sat, 14 Nov 2020 22:22:14 +0100 Subject: [PATCH] Edit static pages --- package.json | 2 ++ src/components/confirm.tsx | 2 +- src/field/ckeditor.tsx | 23 +++++++++++++++++ src/management/edition/list.tsx | 2 +- src/management/page/{create.tsx => edit.tsx} | 14 +++++++--- src/management/page/form.tsx | 5 ++-- src/management/page/list.tsx | 27 +++++++++++++++++--- translations/management.pl.yaml | 3 +++ yarn.lock | 12 +++++++++ 9 files changed, 79 insertions(+), 11 deletions(-) create mode 100644 src/field/ckeditor.tsx rename src/management/page/{create.tsx => edit.tsx} (76%) diff --git a/package.json b/package.json index 2482de1..51d8da2 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "dependencies": { "@babel/core": "7.9.0", "@babel/preset-typescript": "^7.10.1", + "@ckeditor/ckeditor5-build-classic": "^23.1.0", + "@ckeditor/ckeditor5-react": "^3.0.0", "@date-io/moment": "^1.3.13", "@material-ui/core": "^4.10.1", "@material-ui/icons": "^4.9.1", diff --git a/src/components/confirm.tsx b/src/components/confirm.tsx index 7a8cf42..a384647 100644 --- a/src/components/confirm.tsx +++ b/src/components/confirm.tsx @@ -35,8 +35,8 @@ export function Confirm({ children, title, content, onConfirm, onCancel }: Confi { content || t('confirmation') } + - , document.getElementById("modals") as Element, diff --git a/src/field/ckeditor.tsx b/src/field/ckeditor.tsx new file mode 100644 index 0000000..07e4ea3 --- /dev/null +++ b/src/field/ckeditor.tsx @@ -0,0 +1,23 @@ +import { FieldProps } from "formik"; + +// @ts-ignore +import { CKEditor } from '@ckeditor/ckeditor5-react'; +// @ts-ignore +import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; +import { FormControl, FormControlLabel, FormControlProps, FormLabel, TextFieldProps } from "@material-ui/core"; +import React from "react"; + +export type CKEditorFieldProps = FieldProps & FormControlProps & { label?: string }; + +export function CKEditorField({ field, form, error, label, ...props }: CKEditorFieldProps) { + const handleChange = (_: unknown, editor: any) => { + const data = editor.getData(); + form.setFieldValue(field.name, data); + form.setFieldTouched(field.name); + } + + return + { label } + + +} diff --git a/src/management/edition/list.tsx b/src/management/edition/list.tsx index 535450b..d718651 100644 --- a/src/management/edition/list.tsx +++ b/src/management/edition/list.tsx @@ -10,7 +10,7 @@ import { Edition } from "@/data/edition"; import { Pencil } from "mdi-material-ui"; import { Management } from "../main"; import { createPortal } from "react-dom"; -import { CreateStaticPageDialog } from "@/management/page/create"; +import { EditStaticPageDialog } from "@/management/page/create"; export type EditionDetailsProps = { edition: string; diff --git a/src/management/page/create.tsx b/src/management/page/edit.tsx similarity index 76% rename from src/management/page/create.tsx rename to src/management/page/edit.tsx index 59c3870..c185e49 100644 --- a/src/management/page/create.tsx +++ b/src/management/page/edit.tsx @@ -9,11 +9,12 @@ import { Cancel } from "mdi-material-ui"; import { useSpacing } from "@/styles"; import { default as StaticPage } from "@/data/page"; -export type CreateStaticPageDialogProps = { +export type EditStaticPageDialogProps = { onSave?: (page: StaticPage) => void; + page?: StaticPage; } & DialogProps; -export function CreateStaticPageDialog({ onSave, ...props }: CreateStaticPageDialogProps) { +export function EditStaticPageDialog({ onSave, page, ...props }: EditStaticPageDialogProps) { const { t } = useTranslation("management"); const spacing = useSpacing(3); @@ -21,10 +22,14 @@ export function CreateStaticPageDialog({ onSave, ...props }: CreateStaticPageDia onSave?.(staticPageFormValuesTransformer.reverseTransform(values)); }; + const initialValues = page + ? staticPageFormValuesTransformer.transform(page) + : initialStaticPageFormValues; + return - +
- { t("page.create.title") } + { t(page ? "page.edit.title" : "page.create.title") } @@ -38,3 +43,4 @@ export function CreateStaticPageDialog({ onSave, ...props }: CreateStaticPageDia
} + diff --git a/src/management/page/form.tsx b/src/management/page/form.tsx index c0dfb3a..fe28dd6 100644 --- a/src/management/page/form.tsx +++ b/src/management/page/form.tsx @@ -6,6 +6,7 @@ import { TextField as TextFieldFormik } from "formik-material-ui"; import { Typography } from "@material-ui/core"; import { useTranslation } from "react-i18next"; import { useSpacing } from "@/styles"; +import { CKEditorField } from "@/field/ckeditor"; export type StaticPageFormValues = StaticPage; @@ -33,7 +34,7 @@ export function StaticPageForm() { { t("page.field.content") } - - + + } diff --git a/src/management/page/list.tsx b/src/management/page/list.tsx index 8d21234..4eaf524 100644 --- a/src/management/page/list.tsx +++ b/src/management/page/list.tsx @@ -13,9 +13,9 @@ import { encapsulate, one } from "@/helpers"; import { Actions } from "@/components"; import { useSpacing } from "@/styles"; import { useHistory } from "react-router-dom"; -import { Add } from "@material-ui/icons"; +import { Add, Edit } from "@material-ui/icons"; import { createPortal } from "react-dom"; -import { CreateStaticPageDialog } from "@/management/page/create"; +import { EditStaticPageDialog } from "@/management/page/edit"; import { Confirm } from "@/components/confirm"; export const StaticPageManagement = () => { @@ -29,6 +29,26 @@ export const StaticPageManagement = () => { useEffect(updatePageList, []); + const EditStaticPageAction = ({ page }: { page: StaticPage }) => { + const [ open, setOpen ] = useState(false); + + const handlePageCreation = async (page: StaticPage) => { + await api.page.save(page); + setOpen(false); + updatePageList(); + } + + return <> + + setOpen(true) }> + + { open && createPortal( + setOpen(false) }/>, + document.getElementById("modals") as Element + ) } + + } + const CreateStaticPageAction = () => { const [ open, setOpen ] = useState(false); @@ -41,7 +61,7 @@ export const StaticPageManagement = () => { return <> { createPortal( - setOpen(false) }/>, + setOpen(false) }/>, document.getElementById("modals") as Element ) } @@ -85,6 +105,7 @@ export const StaticPageManagement = () => { { title: t("actions.label"), render: page => + , diff --git a/translations/management.pl.yaml b/translations/management.pl.yaml index 7eb655c..1b9e4ac 100644 --- a/translations/management.pl.yaml +++ b/translations/management.pl.yaml @@ -9,6 +9,7 @@ actions: label: Akcje preview: Podgląd delete: Usuń + edit: Edytuj edition: index: @@ -28,3 +29,5 @@ page: slug: Adres create: title: Utwórz stronę statyczną + edit: + title: Zmień stronę statyczną diff --git a/yarn.lock b/yarn.lock index 5f3d70b..3b7c7b6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -988,6 +988,18 @@ lodash "^4.17.13" to-fast-properties "^2.0.0" +"@ckeditor/ckeditor5-build-classic@^23.1.0": + version "23.1.0" + resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-build-classic/-/ckeditor5-build-classic-23.1.0.tgz#b358bd9c266727cd1504d16fb069ada43694e2e5" + integrity sha512-wqJZ6yuqm48NoiciRcfs+t73YOfIKovJIiLSHf0yB2I3Mc+bL6iNhwwyJ3b6D/22IgYEXTpc6PiwsYFbGFnq2Q== + +"@ckeditor/ckeditor5-react@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@ckeditor/ckeditor5-react/-/ckeditor5-react-3.0.0.tgz#05a1bdd7b26a8c1df6fd734376ea84e394d6ab47" + integrity sha512-kqoD0rbGeUp7CjYBtKcwXVVSWO/VL1QsoTyeGbFyoMHmkM96fBj0TI0Xs2kFqKkeiICtAnwvul3GVNWbIlK/Tw== + dependencies: + prop-types "^15.7.2" + "@csstools/convert-colors@^1.4.0": version "1.4.0" resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"