From 73d5804f8cee37bf514c10063299c26f04ab2bcb Mon Sep 17 00:00:00 2001 From: alex Date: Sun, 15 Sep 2024 13:19:03 +0200 Subject: [PATCH] fixed some bugs and changed inputs on converters --- public/locales/de/translation.json | 10 +++- public/locales/en/translation.json | 10 +++- src/core/components/AppRoutes/index.tsx | 22 ++++----- src/core/components/DashboardLayout/index.tsx | 2 +- src/core/components/Header/index.tsx | 2 +- src/core/components/PageContent/index.tsx | 7 +++ src/core/components/SideMenu/index.tsx | 2 +- src/features/Auth/SignIn/index.tsx | 8 +--- src/features/Lessons/LessonPage/index.tsx | 21 ++++++++- .../LessonPageEditor/SortableEditorItem.tsx | 2 - .../Lessons/LessonPageEditor/index.tsx | 47 +++++++++++++------ .../LessonPageEditor/lessonPageEditorSlice.ts | 2 +- src/features/Lessons/Questions/index.tsx | 21 +++++---- src/features/Lessons/converter.tsx | 37 +++++++++------ src/features/Roles/index.tsx | 19 +++++--- src/features/Settings/index.tsx | 4 +- src/features/UserProfile/index.tsx | 4 +- .../components/MyLessonPreviewCard/index.tsx | 29 ++++++++---- .../MyLessonPreviewCard/styles.module.css | 3 ++ src/shared/components/MyUserAvatar/index.tsx | 6 +-- 20 files changed, 168 insertions(+), 90 deletions(-) diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json index 17dae31..f41ad25 100644 --- a/public/locales/de/translation.json +++ b/public/locales/de/translation.json @@ -154,10 +154,17 @@ }, "lessonPage": { "finishLessonButton": "Lektion beenden", - "questions": "Fragen" + "questions": "Fragen", + "addContentButton": "Inhalt hinzufügen" + }, + "lessonPageEditor": { + "previewParagraph": "Vorschau der Lektion", + "pageContentParagraph": "Seiteninhalt der Lektion", + "titlePlaceholder": "Titel hier eingeben..." }, "lessonQuestions": { "messageQuestionSuccessfullyCreated": "Frage erfolgreich erstellt", + "messageReplySuccessfullyCreated": "Antwort erfolgreich erstellt", "askAQuestion": "Frage stellen", "typeSomething": "Etwas schreiben...", "submitButton": "Absenden", @@ -184,6 +191,7 @@ } }, "lessonComponentsConverter": { + "titlePlaceholder": "Titel hier eingeben...", "textPlaceholder": "Text hier eingeben...", "noImageProvided": "Kein Bild bereitgestellt", "gallery": "Galerie", diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index a227a1c..82597bc 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -154,10 +154,17 @@ }, "lessonPage": { "finishLessonButton": "Finish lesson", - "questions": "Questions" + "questions": "Questions", + "addContentButton": "Add Content" + }, + "lessonPageEditor": { + "previewParagraph": "Preview of the lesson", + "pageContentParagraph": "Page content of the lesson", + "titlePlaceholder": "Input title here..." }, "lessonQuestions": { "messageQuestionSuccessfullyCreated": "Question successfully created", + "messageReplySuccessfullyCreated": "Reply successfully created", "askAQuestion": "Ask a question", "typeSomething": "Type something...", "submitButton": "Submit", @@ -184,6 +191,7 @@ } }, "lessonComponentsConverter": { + "titlePlaceholder": "Input title here...", "textPlaceholder": "Input text here...", "noImageProvided": "No image provided", "gallery": "Gallery", diff --git a/src/core/components/AppRoutes/index.tsx b/src/core/components/AppRoutes/index.tsx index a2f22c6..654a368 100644 --- a/src/core/components/AppRoutes/index.tsx +++ b/src/core/components/AppRoutes/index.tsx @@ -1,16 +1,16 @@ import { Route, Routes } from "react-router-dom"; -import { MySupsenseFallback } from "../../../shared/components/MySupsenseFallback"; +import { MySupsenseFallback } from "shared/components/MySupsenseFallback"; import { Constants } from "../../utils/utils"; -import Team from "../../../features/Team"; -import Roles from "../../../features/Roles"; -import WhatsNew from "../../../features/WhatsNew"; -import SuggestFeature from "../../../features/SuggestFeature"; -import ContactSupport from "../../../features/ContactSupport"; -import Lessons from "../../../features/Lessons"; -import Settings from "../../../features/Settings"; -import PageNotFound from "../../../features/PageNotFound"; -import LessonPage from "../../../features/Lessons/LessonPage"; -import LessonPageEditor from "../../../features/Lessons/LessonPageEditor"; +import Team from "features/Team"; +import Roles from "features/Roles"; +import WhatsNew from "features/WhatsNew"; +import SuggestFeature from "features/SuggestFeature"; +import ContactSupport from "features/ContactSupport"; +import Lessons from "features/Lessons"; +import Settings from "features/Settings"; +import PageNotFound from "features/PageNotFound"; +import LessonPage from "features/Lessons/LessonPage"; +import LessonPageEditor from "features/Lessons/LessonPageEditor"; import TeamCreateUser from "features/Team/CreateUser"; import Board from "features/Board"; import UserProfile from "features/UserProfile"; diff --git a/src/core/components/DashboardLayout/index.tsx b/src/core/components/DashboardLayout/index.tsx index 387b6c5..5ffcd23 100644 --- a/src/core/components/DashboardLayout/index.tsx +++ b/src/core/components/DashboardLayout/index.tsx @@ -6,7 +6,7 @@ import { SideMenuContent, SideMenuEditorContent } from "../SideMenu"; import { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { setIsSideMenuCollapsed } from "../SideMenu/sideMenuSlice"; -import { editorActive } from "../../../features/Lessons/LessonPageEditor/lessonPageEditorSlice"; +import { editorActive } from "features/Lessons/LessonPageEditor/lessonPageEditorSlice"; import MyDndContext from "./MyDndContext"; import AiChat from "features/AiChat"; diff --git a/src/core/components/Header/index.tsx b/src/core/components/Header/index.tsx index 27a58a2..36d1173 100644 --- a/src/core/components/Header/index.tsx +++ b/src/core/components/Header/index.tsx @@ -55,7 +55,7 @@ export default function HeaderBar(props: HeaderBarProps = { theme: "light" }) { zIndex: 999, }} > - +
{ + window.scrollTo(0, 0); + }, [pathname]); return (
-
+
{appLogoUrl !== null && ( { + const { t } = useTranslation(); const dispatch = useDispatch(); const { lessonId } = useParams(); + const navigate = useNavigate(); const lessonContents = useSelector(lessonPageContents); @@ -52,7 +54,22 @@ const LessonContents: React.FC = () => { if (isLoading) return ; if (error) return ; - if (!lessonContents || lessonContents.length === 0) return ; + if (!lessonContents || lessonContents.length === 0) + return ( + + + + ); return ( <> diff --git a/src/features/Lessons/LessonPageEditor/SortableEditorItem.tsx b/src/features/Lessons/LessonPageEditor/SortableEditorItem.tsx index 5597c53..2186e0a 100644 --- a/src/features/Lessons/LessonPageEditor/SortableEditorItem.tsx +++ b/src/features/Lessons/LessonPageEditor/SortableEditorItem.tsx @@ -79,8 +79,6 @@ const SortableEditorItem = (props: { item: LessonContent }) => { mode="edititable" lessonContent={lnContent} onEdit={(data) => { - console.log("edit", lnContent.Id, data); - dispatch( updateLessonContent({ id: lnContent.Id, diff --git a/src/features/Lessons/LessonPageEditor/index.tsx b/src/features/Lessons/LessonPageEditor/index.tsx index 48ec02a..15d5e1b 100644 --- a/src/features/Lessons/LessonPageEditor/index.tsx +++ b/src/features/Lessons/LessonPageEditor/index.tsx @@ -9,9 +9,9 @@ import { setLessonThumbnailUrl, setPageEditorLessonState, } from "./lessonPageEditorSlice"; -import { useEffect } from "react"; +import { useEffect, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; -import { Card, Flex } from "antd"; +import { Card, Flex, Typography } from "antd"; import { Constants } from "core/utils/utils"; import HeaderBar from "core/components/Header"; import Droppable from "./Droppable"; @@ -28,10 +28,12 @@ import { addWebSocketReconnectListener, removeWebSocketReconnectListener, } from "core/services/websocketService"; +import { useTranslation } from "react-i18next"; const PreviewCard: React.FC = () => { const dispatch = useDispatch(); const { lessonId } = useParams(); + const debounceRef = useRef(null); const dataLessonThumbnail = useSelector(lessonThumbnail); @@ -69,14 +71,24 @@ const PreviewCard: React.FC = () => { Title: dataLessonThumbnail.title || "", ThumbnailUrl: dataLessonThumbnail.url || "", }} - onEditTitle={async (newTitle) => { + onEditTitle={(newTitle) => { try { - await updateLessonPreviewTitle({ - lessonId: lessonId as string, - newTitle: newTitle, - }).unwrap(); + if (debounceRef.current) { + clearTimeout(debounceRef.current); + } - dispatch(setLessonThumbnailTitle(newTitle)); + debounceRef.current = setTimeout(() => { + try { + updateLessonPreviewTitle({ + lessonId: lessonId as string, + newTitle: newTitle, + }); + + dispatch(setLessonThumbnailTitle(newTitle)); + } catch (err) { + console.error(err); + } + }, 3000); } catch (err) { console.error(err); } @@ -126,6 +138,7 @@ const LessonContentComponents: React.FC = () => { }; export default function LessonPageEditor() { + const { t } = useTranslation(); const { lessonId } = useParams(); const navigate = useNavigate(); @@ -159,15 +172,19 @@ export default function LessonPageEditor() { sticky /> - - + + + + {t("lessonPageEditor.previewParagraph")} + + + {t("lessonPageEditor.pageContentParagraph")} + diff --git a/src/features/Lessons/LessonPageEditor/lessonPageEditorSlice.ts b/src/features/Lessons/LessonPageEditor/lessonPageEditorSlice.ts index f6734fd..0e663d3 100644 --- a/src/features/Lessons/LessonPageEditor/lessonPageEditorSlice.ts +++ b/src/features/Lessons/LessonPageEditor/lessonPageEditorSlice.ts @@ -12,7 +12,7 @@ export const lessonPageEditorSlice = createSlice({ editorActive: false, currentLessonId: "", // required in sideMenu because has no access to useParams lessonThumbnail: { - title: "Test", + title: "", url: "", }, lessonContents: [] as LessonContent[], diff --git a/src/features/Lessons/Questions/index.tsx b/src/features/Lessons/Questions/index.tsx index b60702f..46231cf 100644 --- a/src/features/Lessons/Questions/index.tsx +++ b/src/features/Lessons/Questions/index.tsx @@ -291,18 +291,19 @@ export function QuestionUIRaw({ return ( <> - +
+ +
- + {user.FirstName} {user.LastName} - - - {message} - + + {message} diff --git a/src/features/Roles/index.tsx b/src/features/Roles/index.tsx index 1c632e4..2aa87ba 100644 --- a/src/features/Roles/index.tsx +++ b/src/features/Roles/index.tsx @@ -1,7 +1,7 @@ import { Avatar, Checkbox, Collapse, Form, Tooltip } from "antd"; -import HeaderBar from "../../core/components/Header"; -import MyBanner from "../../shared/components/MyBanner"; -import { MyContainer } from "../../shared/components/MyContainer"; +import HeaderBar from "core/components/Header"; +import MyBanner from "shared/components/MyBanner"; +import { MyContainer } from "shared/components/MyContainer"; import MyErrorResult from "shared/components/MyResult"; import MyEmpty from "shared/components/MyEmpty"; import MyCenteredSpin from "shared/components/MyCenteredSpin"; @@ -70,6 +70,7 @@ interface Permission { // test data +/* const tmpI18nObj = [ { id: 1, @@ -98,7 +99,7 @@ const tmpI18nObj = [ description: "Permission to invite a member. An email will be sent to the new member.", }, -]; +]; */ /* export const tmpRoleNames = { @@ -174,7 +175,11 @@ function RoleComponent({ role }: { role: Role }) { /> ), extra: ( - <> +
{ + event.stopPropagation(); + }} + > {role.Users.length > 0 && (
))} )} - +
), }, ]} diff --git a/src/features/Settings/index.tsx b/src/features/Settings/index.tsx index 5998453..2cfa8ed 100644 --- a/src/features/Settings/index.tsx +++ b/src/features/Settings/index.tsx @@ -1,6 +1,6 @@ import { Button, Flex, Form, Input, Modal } from "antd"; -import HeaderBar from "../../core/components/Header"; -import MyBanner from "../../shared/components/MyBanner"; +import HeaderBar from "core/components/Header"; +import MyBanner from "shared/components/MyBanner"; import { SaveOutlined } from "@ant-design/icons"; import MyUpload from "shared/components/MyUpload"; import { Constants } from "core/utils/utils"; diff --git a/src/features/UserProfile/index.tsx b/src/features/UserProfile/index.tsx index bfb3933..9343221 100644 --- a/src/features/UserProfile/index.tsx +++ b/src/features/UserProfile/index.tsx @@ -7,8 +7,8 @@ import { Select, Typography, } from "antd"; -import HeaderBar from "../../core/components/Header"; -import MyBanner from "../../shared/components/MyBanner"; +import HeaderBar from "core/components/Header"; +import MyBanner from "shared/components/MyBanner"; import MyMiddleCard from "shared/components/MyMiddleCard"; import Meta from "antd/es/card/Meta"; import { useGetUserProfileQuery } from "core/services/userProfile"; diff --git a/src/shared/components/MyLessonPreviewCard/index.tsx b/src/shared/components/MyLessonPreviewCard/index.tsx index 8687259..edc2416 100644 --- a/src/shared/components/MyLessonPreviewCard/index.tsx +++ b/src/shared/components/MyLessonPreviewCard/index.tsx @@ -1,5 +1,5 @@ import { CommentOutlined } from "@ant-design/icons"; -import { Card, Flex, Typography } from "antd"; +import { Card, Flex, Input } from "antd"; import { Constants, getImageUrl } from "core/utils/utils"; import { Link } from "react-router-dom"; import MyUpload from "shared/components/MyUpload"; @@ -81,7 +81,23 @@ export default function MyLessonPreviewCard({ {t("lessonPage.questions")}
) : ( - onEditTitle?.(event.target.value)} + placeholder={t("lessonPageEditor.titlePlaceholder")} + style={{ width: "100%", fontSize: 24, fontWeight: "bold" }} + /> + )} + + + + + ); +} + +/* + {lessonSettings.Title} - )} - - - - - ); -} +*/ diff --git a/src/shared/components/MyLessonPreviewCard/styles.module.css b/src/shared/components/MyLessonPreviewCard/styles.module.css index 33f3a65..6342496 100644 --- a/src/shared/components/MyLessonPreviewCard/styles.module.css +++ b/src/shared/components/MyLessonPreviewCard/styles.module.css @@ -8,6 +8,7 @@ .img { height: 240px; object-fit: cover; + width: 100%; } .title { @@ -23,6 +24,8 @@ .img { height: 140px; + width: 200px; + min-width: 200px; } .title { diff --git a/src/shared/components/MyUserAvatar/index.tsx b/src/shared/components/MyUserAvatar/index.tsx index 413b0bc..e55e0c8 100644 --- a/src/shared/components/MyUserAvatar/index.tsx +++ b/src/shared/components/MyUserAvatar/index.tsx @@ -24,9 +24,9 @@ const MyUserAvatar: React.FC = ({ const isProfilePictureEmpty = profilePictureUrl === ""; const avatarContent = - isProfilePictureEmpty && firstName !== undefined - ? firstName.charAt(0) - : undefined; + isProfilePictureEmpty && firstName !== undefined ? ( + {firstName.charAt(0)} + ) : undefined; const iconContent = isProfilePictureEmpty && firstName === undefined ? (