Chyby rozhraní pro tvůrce #361 (v2) (#434)

LIBCAS · Jul 16, 2024 · 64d763b · 64d763b
1 parent c6f8975
commit 64d763b
Show file tree

Hide file tree

Showing 16 changed files with 197 additions and 54 deletions.
diff --git a/web/src/components/editors/WysiwygEditor/WysiwygEditor.tsx b/web/src/components/editors/WysiwygEditor/WysiwygEditor.tsx
@@ -8,7 +8,7 @@ import "react-quill/dist/quill.snow.css";
 
 import "./custom-editor-styles.scss";
 import CustomToolbar from "./CustomToolbar";
-import { getTextFromHtml } from "./getTextFromHtml";
+import { getTextFromHtml } from "./utils";
 
 // Other components
 import CharacterCount from "../character-count";

diff --git a/.../editors/WysiwygEditor/getTextFromHtml.ts → ...components/editors/WysiwygEditor/utils.ts b/.../editors/WysiwygEditor/getTextFromHtml.ts → ...components/editors/WysiwygEditor/utils.ts
@@ -9,3 +9,7 @@ export const getTextFromHtml = (htmlMarkup: string) => {
 
   return plainText;
 };
+
+export const wrapTextInParagraph = (text: string) => {
+  return `<p>${text}</p>`;
+};
diff --git a/web/src/components/editors/screen-description.tsx b/web/src/components/editors/screen-description.tsx
@@ -11,24 +11,32 @@ import { Screen } from "models";
 import { AppDispatch } from "store/store";
 
 import { getFileById } from "actions/file-actions-typed";
-import { updateScreenData } from "actions/expoActions";
+import { saveScreen, updateScreenData } from "actions/expoActions";
 import { helpIconText } from "enums/text";
 import { ScreenCompletedCheckbox } from "./Checkboxes";
+import { wrapTextInParagraph } from "./WysiwygEditor/utils";
 
 type ScreenDescriptionProps = {
   activeScreen: Screen;
+  rowNum: string | undefined;
+  colNum: string | undefined;
   sumOfPhotosTimes?: number | null; // in case of slideshow description
   totalZoomScreenTime?: number;
 };
 
 const ScreenDescription = ({
   activeScreen,
+  rowNum,
+  colNum,
   sumOfPhotosTimes,
   totalZoomScreenTime,
 }: ScreenDescriptionProps) => {
   const { t } = useTranslation("expo-editor");
   const dispatch = useDispatch<AppDispatch>();
 
+  const text =
+    "text" in activeScreen && activeScreen.text ? activeScreen.text : "";
+
   const audioFile =
     "audio" in activeScreen && activeScreen.audio
       ? dispatch(getFileById(activeScreen.audio))
@@ -47,13 +55,17 @@ const ScreenDescription = ({
             <TitleTextField titleValue={activeScreen.title ?? ""} />
             <WysiwygEditor
               controlType="uncontrolled"
-              defaultValue={
-                "text" in activeScreen && activeScreen.text
-                  ? activeScreen.text
-                  : ""
-              }
-              onChange={(newContent: string) => {
-                dispatch(updateScreenData({ text: newContent }));
+              defaultValue={text}
+              onChange={(newText: string) => {
+                const wrappedOldText = wrapTextInParagraph(text.trimEnd());
+                dispatch(updateScreenData({ text: newText }));
+
+                // NOTE: Additional check
+                // Means that the new text is just wrapped old text
+                // We do not want this change to act as a change done from user, so immediately save it
+                if (newText === wrappedOldText) {
+                  dispatch(saveScreen(activeScreen, rowNum, colNum));
+                }
               }}
             />
           </div>

diff --git a/web/src/containers/expo-administration/expo-editor/screen-external/screen-external.tsx b/web/src/containers/expo-administration/expo-editor/screen-external/screen-external.tsx
@@ -29,6 +29,9 @@ const ScreenExternal = (props: ScreenEditorProps) => {
   const externalScreenProps = props as ScreenEditorExternalProps;
   const { activeScreen, url } = externalScreenProps;
 
+  const rowNum = match.params.position.match(/^(\d*)/)?.[0];
+  const colNum = match.params.position.match(/(\d*)$/)?.[0];
+
   return (
     <div>
       <TabMenu
@@ -49,7 +52,13 @@ const ScreenExternal = (props: ScreenEditorProps) => {
       />
       <Route
         path={`${match.url}/description`}
-        render={() => <ScreenDescription activeScreen={activeScreen} />}
+        render={() => (
+          <ScreenDescription
+            activeScreen={activeScreen}
+            rowNum={rowNum}
+            colNum={colNum}
+          />
+        )}
       />
       <Route
         path={`${match.url}/externalData`}
@@ -62,8 +71,8 @@ const ScreenExternal = (props: ScreenEditorProps) => {
       <Footer
         activeExpo={props.activeExpo}
         activeScreen={activeScreen}
-        rowNum={match.params.position.match(/^(\d*)/)?.[0]}
-        colNum={match.params.position.match(/(\d*)$/)?.[0]}
+        rowNum={rowNum}
+        colNum={colNum}
         history={history}
         url={url}
       />

diff --git a/...rc/containers/expo-administration/expo-editor/screen-image-change/screen-image-change.tsx b/...rc/containers/expo-administration/expo-editor/screen-image-change/screen-image-change.tsx
@@ -28,6 +28,9 @@ const ScreenImageChange = (props: ScreenEditorProps) => {
   const imageChangeProps = props as ScreenEditorImageChangeProps;
   const { activeScreen } = imageChangeProps;
 
+  const rowNum = match.params.position.match(/^(\d*)/)?.[0];
+  const colNum = match.params.position.match(/(\d*)$/)?.[0];
+
   return (
     <div>
       <TabMenu
@@ -48,7 +51,13 @@ const ScreenImageChange = (props: ScreenEditorProps) => {
       />
       <Route
         path={`${match.url}/description`}
-        render={() => <ScreenDescription activeScreen={activeScreen} />}
+        render={() => (
+          <ScreenDescription
+            activeScreen={activeScreen}
+            rowNum={rowNum}
+            colNum={colNum}
+          />
+        )}
       />
       <Route
         path={`${match.url}/images`}
@@ -61,8 +70,8 @@ const ScreenImageChange = (props: ScreenEditorProps) => {
       <Footer
         activeExpo={props.activeExpo}
         activeScreen={activeScreen}
-        rowNum={match.params.position.match(/^(\d*)/)?.[0]}
-        colNum={match.params.position.match(/(\d*)$/)?.[0]}
+        rowNum={rowNum}
+        colNum={colNum}
         history={history}
         url={imageChangeProps.url}
       />

diff --git a/web/src/containers/expo-administration/expo-editor/screen-image/screen-image.tsx b/web/src/containers/expo-administration/expo-editor/screen-image/screen-image.tsx
@@ -30,6 +30,9 @@ const ScreenImage = (props: ScreenEditorProps) => {
   const imageScreenProps = props as ScreenEditorImageProps;
   const { activeScreen, url } = imageScreenProps;
 
+  const rowNum = match.params.position.match(/^(\d*)/)?.[0];
+  const colNum = match.params.position.match(/(\d*)$/)?.[0];
+
   return (
     <div>
       <TabMenu
@@ -50,7 +53,13 @@ const ScreenImage = (props: ScreenEditorProps) => {
       />
       <Route
         path={`${match.url}/description`}
-        render={() => <ScreenDescription activeScreen={activeScreen} />}
+        render={() => (
+          <ScreenDescription
+            activeScreen={activeScreen}
+            rowNum={rowNum}
+            colNum={colNum}
+          />
+        )}
       />
       <Route
         path={`${match.url}/image`}
@@ -63,8 +72,8 @@ const ScreenImage = (props: ScreenEditorProps) => {
       <Footer
         activeExpo={props.activeExpo}
         activeScreen={activeScreen}
-        rowNum={match.params.position.match(/^(\d*)/)?.[0]}
-        colNum={match.params.position.match(/(\d*)$/)?.[0]}
+        rowNum={rowNum}
+        colNum={colNum}
         noActions={!!find(activeScreen.infopoints, (item) => item.edit)}
         history={history}
         url={url}

diff --git a/web/src/containers/expo-administration/expo-editor/screen-parallax/screen-parallax.tsx b/web/src/containers/expo-administration/expo-editor/screen-parallax/screen-parallax.tsx
@@ -29,6 +29,9 @@ const ScreenParallax = (props: ScreenEditorProps) => {
   const parallaxScreenProps = props as ScreenEditorParallaxProps;
   const { activeScreen, url } = parallaxScreenProps;
 
+  const rowNum = match.params.position.match(/^(\d*)/)?.[0];
+  const colNum = match.params.position.match(/(\d*)$/)?.[0];
+
   return (
     <div>
       <TabMenu
@@ -49,7 +52,13 @@ const ScreenParallax = (props: ScreenEditorProps) => {
       />
       <Route
         path={`${match.url}/description`}
-        render={() => <ScreenDescription activeScreen={activeScreen} />}
+        render={() => (
+          <ScreenDescription
+            activeScreen={activeScreen}
+            rowNum={rowNum}
+            colNum={colNum}
+          />
+        )}
       />
       <Route
         path={`${match.url}/parallax`}
@@ -62,8 +71,8 @@ const ScreenParallax = (props: ScreenEditorProps) => {
       <Footer
         activeExpo={props.activeExpo}
         activeScreen={activeScreen}
-        rowNum={match.params.position.match(/^(\d*)/)?.[0]}
-        colNum={match.params.position.match(/(\d*)$/)?.[0]}
+        rowNum={rowNum}
+        colNum={colNum}
         history={history}
         url={url}
       />

diff --git a/web/src/containers/expo-administration/expo-editor/screen-photogallery/Description.tsx b/web/src/containers/expo-administration/expo-editor/screen-photogallery/Description.tsx
@@ -15,17 +15,28 @@ import { File as IndihuFile } from "models";
 
 // Utils
 import { getFileById } from "actions/file-actions";
-import { updateScreenData } from "actions/expoActions/screen-actions";
+import {
+  saveScreen,
+  updateScreenData,
+} from "actions/expoActions/screen-actions";
+import { wrapTextInParagraph } from "components/editors/WysiwygEditor/utils";
 
 // - -
 
-const Description = (props: ScreenEditorPhotogalleryProps) => {
+type DescriptionProps = ScreenEditorPhotogalleryProps & {
+  rowNum: string | undefined;
+  colNum: string | undefined;
+};
+
+const Description = (props: DescriptionProps) => {
   const { t } = useTranslation("expo-editor");
   const dispatch = useDispatch<AppDispatch>();
 
-  const { activeScreen } = props;
+  const { activeScreen, rowNum, colNum } = props;
   const audio = dispatch(getFileById(props.activeScreen.audio)) as IndihuFile;
 
+  const text = activeScreen.text ?? "";
+
   return (
     <div className="container container-tabMenu">
       <div className="screen">
@@ -35,9 +46,17 @@ const Description = (props: ScreenEditorPhotogalleryProps) => {
             <TitleTextField titleValue={activeScreen.title ?? ""} />
             <WysiwygEditor
               controlType="uncontrolled"
-              defaultValue={activeScreen.text ?? ""}
-              onChange={(newContent: string) => {
-                dispatch(updateScreenData({ text: newContent }));
+              defaultValue={text}
+              onChange={(newText: string) => {
+                const wrappedOldText = wrapTextInParagraph(text.trimEnd());
+                dispatch(updateScreenData({ text: newText }));
+
+                // NOTE: Additional check
+                // Means that the new text is just wrapped old text
+                // We do not want this change to act as a change done from user, so immediately save it
+                if (newText === wrappedOldText) {
+                  dispatch(saveScreen(activeScreen, rowNum, colNum));
+                }
               }}
             />
           </div>

diff --git a/...ontainers/expo-administration/expo-editor/screen-photogallery/screen-photogallery-new.tsx b/...ontainers/expo-administration/expo-editor/screen-photogallery/screen-photogallery-new.tsx
@@ -29,6 +29,9 @@ const ScreenPhotogallery = (props: ScreenEditorProps) => {
 
   const photogalleryProps = props as ScreenEditorPhotogalleryProps;
 
+  const rowNum = match.params.position.match(/^(\d*)/)?.[0];
+  const colNum = match.params.position.match(/(\d*)$/)?.[0];
+
   return (
     <div>
       <TabMenu
@@ -43,7 +46,9 @@ const ScreenPhotogallery = (props: ScreenEditorProps) => {
       />
       <Route
         path={`${match.url}/description`}
-        render={() => <Description {...photogalleryProps} />}
+        render={() => (
+          <Description {...photogalleryProps} rowNum={rowNum} colNum={colNum} />
+        )}
       />
       <Route
         path={`${match.url}/photogallery`}
@@ -59,8 +64,8 @@ const ScreenPhotogallery = (props: ScreenEditorProps) => {
       <Footer
         activeExpo={props.activeExpo}
         activeScreen={props.activeScreen}
-        rowNum={match.params.position.match(/^(\d*)/)?.[0]}
-        colNum={match.params.position.match(/(\d*)$/)?.[0]}
+        rowNum={rowNum}
+        colNum={colNum}
         history={history}
         url={props.url}
       />

diff --git a/web/src/containers/expo-administration/expo-editor/screen-signpost/screen-signpost.tsx b/web/src/containers/expo-administration/expo-editor/screen-signpost/screen-signpost.tsx
@@ -30,6 +30,9 @@ const ScreenSignpost = (props: ScreenEditorProps) => {
   const signpostProps = props as ScreenEditorSignpostProps;
   const { activeScreen, url } = signpostProps;
 
+  const rowNum = match.params.position.match(/^(\d*)/)?.[0];
+  const colNum = match.params.position.match(/(\d*)$/)?.[0];
+
   return (
     <div>
       <TabMenu
@@ -50,7 +53,13 @@ const ScreenSignpost = (props: ScreenEditorProps) => {
       />
       <Route
         path={`${match.url}/description`}
-        render={() => <ScreenDescription activeScreen={activeScreen} />}
+        render={() => (
+          <ScreenDescription
+            activeScreen={activeScreen}
+            rowNum={rowNum}
+            colNum={colNum}
+          />
+        )}
       />
       <Route
         path={`${match.url}/references`}
@@ -64,8 +73,8 @@ const ScreenSignpost = (props: ScreenEditorProps) => {
       <Footer
         activeExpo={props.activeExpo}
         activeScreen={activeScreen}
-        rowNum={match.params.position.match(/^(\d*)/)?.[0]}
-        colNum={match.params.position.match(/(\d*)$/)?.[0]}
+        rowNum={rowNum}
+        colNum={colNum}
         history={history}
         url={url}
       />

diff --git a/web/src/containers/expo-administration/expo-editor/screen-slideshow/screen-slideshow.tsx b/web/src/containers/expo-administration/expo-editor/screen-slideshow/screen-slideshow.tsx
@@ -36,6 +36,9 @@ const ScreenSlideshow = (props: ScreenEditorProps) => {
   const slideshowProps = props as ScreenEditorSlideshowProps;
   const { activeScreen } = slideshowProps;
 
+  const rowNum = match.params.position.match(/^(\d*)/)?.[0];
+  const colNum = match.params.position.match(/(\d*)$/)?.[0];
+
   const timePhotosManual = useMemo(
     () => activeScreen.timePhotosManual,
     [activeScreen.timePhotosManual]
@@ -99,6 +102,8 @@ const ScreenSlideshow = (props: ScreenEditorProps) => {
           <ScreenDescription
             activeScreen={activeScreen}
             sumOfPhotosTimes={sumOfPhotosTimes}
+            rowNum={rowNum}
+            colNum={colNum}
           />
         )}
       />
@@ -118,8 +123,8 @@ const ScreenSlideshow = (props: ScreenEditorProps) => {
       <Footer
         activeExpo={props.activeExpo}
         activeScreen={activeScreen}
-        rowNum={match.params.position.match(/^(\d*)/)?.[0]}
-        colNum={match.params.position.match(/(\d*)$/)?.[0]}
+        rowNum={rowNum}
+        colNum={colNum}
         noActions={
           !!find(activeScreen.images, (image) =>
             find(image?.infopoints, (item) => item.edit)