Revize ff40cb89

Formating of Home page
re #9714

backend/src/main/java/cz/zcu/kiv/backendapi/security/SecurityConfig.java

@@ -62 +62 @@
         PERMITTED_ENDPOINTS.put("/v3/api-docs/swagger-config", HttpMethod.GET);
         PERMITTED_ENDPOINTS.put("/catalog-items", HttpMethod.GET);
         PERMITTED_ENDPOINTS.put("/catalog-items/**", HttpMethod.GET);
+        PERMITTED_ENDPOINTS.put("/title-page", HttpMethod.GET);
     }
 
     /**
@@ -90 +91 @@
                 .antMatchers(HttpMethod.POST, "/catalog-items").hasAuthority(Permission.WRITE.name())
                 .antMatchers(HttpMethod.PUT, "/catalog-items/*").hasAuthority(Permission.WRITE.name())
                 .antMatchers(HttpMethod.DELETE, "/catalog-items/*").hasAuthority(Permission.DELETE.name())
+                .antMatchers(HttpMethod.POST, "/title-page").hasRole(Role.ADMIN.name())
                 .anyRequest()
                 .authenticated();
     }

frontend/package.json

@@ -21 +21 @@
     "react-html-parser": "^2.0.2",
     "react-leaflet": "3.2.5",
     "react-leaflet-textpath": "^2.1.1",
+    "react-quill": "^1.3.5",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",

frontend/src/App.tsx

@@ -13 +13 @@
 import TrackingTool from './features/TrackingTool/TrackingTool'
 import Logout from './features/Auth/Logout'
 import ThemeWrapper from './features/Theme/ThemeWrapper'
+import EditHome from "./features/Home/EditHome"
 
 const App = () => {
 
@@ -22 +23 @@
                 <Box sx={{mx: 10}}>
                     <Routes>
                         <Route path="/" element={<Home />} />
+                        <Route path="/editHome" element={<EditHome />} />
                         <Route path="/catalog" element={<Catalog />} />
                         <Route
                             path="/catalog/:itemId"

frontend/src/features/Home/EditHome.tsx

@@ +1 @@
+import {Button, Paper} from '@mui/material'
+import {Fragment, useEffect, useState} from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { logout } from '../Auth/userSlice'
+import { RootState } from '../redux/store'
+import {TitlePageDto} from "../../swagger/data-contracts"
+import axiosInstance from "../../api/api"
+import ReactQuill from "react-quill"
+import 'react-quill/dist/quill.snow.css'
+import ContentLoading from "../Reusables/ContentLoading"
+import {Link as RouterLink, useNavigate} from "react-router-dom"
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos"
+
+
+const apiError =
+    'Error while fetching data from the server, please try again later.'
+
+const EditHome = () => {
+    const [content, setContent] = useState<TitlePageDto | undefined>(undefined)
+    const [isContentLoading, setIsContentLoading] = useState(true)
+    const [err, setErr] = useState<string | undefined>(undefined)
+
+    const navigate = useNavigate()
+
+    const updateContent = (updated: string) => {
+        console.log("updateContent: " + updated)
+        if (content) {
+            content["content"] = updated
+        }
+    }
+
+    const handleSubmit = () => {
+        postData()
+    }
+
+    const postData = async () => {
+        const {data, status} = await axiosInstance.post('/title-page', content)
+        if (status != 200) {
+            console.error("Title page data submitting failed.")
+        }
+    }
+
+    const roles = useSelector(
+        (state: RootState) => state.user.roles
+    )
+
+    // Fetch the item from the api after mounting the component
+    useEffect(() => {
+        // Function to fetch the item from the api
+        const fetchItem = async () => {
+            try {
+                const { data, status } = await axiosInstance.get(
+                    `/title-page`
+                )
+                if (status !== 200) {
+                    setErr(apiError)
+                    return
+                }
+
+                setContent(data)
+                setIsContentLoading(false)
+            } catch (err: any) {
+                setErr(apiError)
+            }
+        }
+
+        fetchItem()
+    }, [])
+
+    return (
+        <Fragment>
+            <Button
+                startIcon={<ArrowBackIosIcon />}
+                variant="contained"
+                component={RouterLink}
+                to="/"
+                color="primary"
+                sx={{ mb: 2 }}
+            >
+                Return To Catalog
+            </Button>
+            <Paper style={{ minHeight: '100vh' }} variant="outlined">
+    {isContentLoading && !err ? <ContentLoading /> : null}
+    {!isContentLoading && content ? (
+        <div>
+            <h1>Home</h1>
+        <form onSubmit={handleSubmit}>
+    <input type="submit" value="Submit" />
+    <ReactQuill
+        theme='snow'
+        value={content["content"]}
+        onChange={updateContent}
+        style={{minHeight: '300px'}}
+        />
+        </form>
+        </div>
+    ) : null}
+    </Paper>
+    </Fragment>
+)
+}
+
+export default EditHome

frontend/src/features/Home/Home.tsx

@@ -1 @@
-import { Button } from '@mui/material'
-import { Fragment } from 'react'
+import {Button, Paper} from '@mui/material'
+import {Fragment, useEffect, useState} from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { logout } from '../Auth/userSlice'
 import { RootState } from '../redux/store'
+import {TitlePageDto} from "../../swagger/data-contracts"
+import axiosInstance from "../../api/api"
+import ReactQuill from "react-quill"
+import 'react-quill/dist/quill.snow.css'
+import ContentLoading from "../Reusables/ContentLoading"
+import EditHome from "./EditHome"
+import {Link as RouterLink, useNavigate} from "react-router-dom"
+import EditIcon from '@mui/icons-material/Edit'
+import { formatHtmlStringToReactDom } from "../../utils/formatting/HtmlUtils"
+
+
+const apiError =
+    'Error while fetching data from the server, please try again later.'
 
 const Home = () => {
+    const [content, setContent] = useState<TitlePageDto | undefined>(undefined)
+    const [isContentLoading, setIsContentLoading] = useState(true)
+    const [err, setErr] = useState<string | undefined>(undefined)
+
+    let navigate = useNavigate()
+    const openEditHomePage = () => {
+        let path = 'editHome'
+        navigate(path)
+    }
+
+    const roles = useSelector(
+        (state: RootState) => state.user.roles
+    )
+
+    const isAdmin = roles.includes("ROLE_ADMIN")
+
+    // Fetch the item from the api after mounting the component
+    useEffect(() => {
+        // Function to fetch the item from the api
+        console.log("useEffect called")
+        const fetchItem = async () => {
+            try {
+                const { data, status } = await axiosInstance.get(
+                    `/title-page`
+                )
+                if (status !== 200) {
+                    setErr(apiError)
+                    return
+                }
+
+                setContent(data)
+                setIsContentLoading(false)
+            } catch (err: any) {
+                setErr(apiError)
+            }
+        }
+        fetchItem()
+    }, [roles])
+
     return (
         <Fragment>
-            <h1>Home</h1>
+            <Paper style={{ minHeight: '100vh' }} variant="outlined">
+                {isContentLoading && !err ? <ContentLoading /> : null}
+                {!isContentLoading && content ? (
+                    <div>
+                        <h1>Home</h1>
+                        {formatHtmlStringToReactDom(content["content"] as string)}
+                    </div>
+                ) : null}
+                {isAdmin ? (
+                        <Button
+                            startIcon={<EditIcon />}
+                            variant="contained"
+                            component={RouterLink}
+                            to="/editHome"
+                            color="primary"
+                            sx={{ mb: 2 }}
+                        >
+                            Edit
+                        </Button>
+
+                ) : null}
+            </Paper>
         </Fragment>
     )
 }