fixes and updated the module to make it easier to use

bible-technology · Sep 25, 2024 · cc51526 · cc51526
1 parent b0473ea
commit cc51526
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -185,7 +185,7 @@
     "is-electron": "^2.2.1",
     "isomorphic-git": "^1.24.0",
     "js-yaml": "^4.1.0",
-    "jxl-pdf": "0.6.5",
+    "jxl-pdf": "0.7.0",
     "localforage": "1.10.0",
     "lodash.isequal": "^4.5.0",
     "markdown-translatable": "1.3.0",

diff --git a/renderer/src/layouts/editor/InnerFramePopup.js b/renderer/src/layouts/editor/InnerFramePopup.js
@@ -259,7 +259,8 @@ export default function InnerFramePopup() {
   // the order Of The Selected choice
   const [orderSelection, setOrderSelection] = useState([0]);
   // is the json is validate or not
-  const [isJsonValidate, setIsJsonValidate] = useState(false);
+  const [isJsonValidate, setIsJsonValidate] = useState(true);
+  const [jsonValidation, setJsonValidation] = useState({});
   const [messagePrint, setMessagePrint] = useState('');
   // the actual kitchenFaucet
   const pdfCallBacks = (json) => {
@@ -285,7 +286,7 @@ export default function InnerFramePopup() {
   );
 
   // the selected headerInfo
-  const [headerInfo, setHeaderInfo] = useState('{"sizes":"9on11","fonts":"allGentium","pages":"EXECUTIVE"}');
+  const [headerInfo, setHeaderInfo] = useState('{"sizes":"9on11","fonts":"allGentium","pages":"EXECUTIVE", "verbose":"false"}');
   // const [headerInfo, setHeaderInfo] = useState('{}');
   const [nameFile, setNameFile] = useState('');
   const [folder, setFolder] = useState(null);
@@ -417,6 +418,7 @@ export default function InnerFramePopup() {
 
   useEffect(() => {
     const validationJson = global.PdfGenStatic.validateConfig(JSON.parse(kitchenFaucet));
+    setJsonValidation(validationJson);
     if (validationJson.length === 0) {
       const header = JSON.parse(headerInfo);
       if (
@@ -438,7 +440,7 @@ export default function InnerFramePopup() {
         setIsJsonValidate(true);
       }
     } else {
-      setIsJsonValidate(false);
+      setIsJsonValidate(true);
     }
   }, [selected, headerInfo, orderSelection, folder, kitchenFaucet]);
 
@@ -457,7 +459,6 @@ export default function InnerFramePopup() {
       }
       if (chosenFolder.filePaths.length > 0) {
         setFolder(chosenFolder.filePaths[0]);
-        setMessagePrint((prev) => `${prev }\nfolder selected : ${ chosenFolder.filePaths[0]}`);
       } else {
         // Handle case where no folder was selected
         // eslint-disable-next-line
@@ -559,19 +560,19 @@ export default function InnerFramePopup() {
           }}
         >
           {SelectOption(
-            'fonts',
-            'fonts',
-            jsonWithHeaderChoice.fonts,
+            'Paper size',
+            'pages',
+            jsonWithHeaderChoice.pages,
             handleChangeHeaderInfo,
           )}
           {SelectOption(
-            'Pages',
-            'pages',
-            jsonWithHeaderChoice.pages,
+            'Font',
+            'fonts',
+            jsonWithHeaderChoice.fonts,
             handleChangeHeaderInfo,
           )}
           {SelectOption(
-            'Sizes',
+            'Font size',
             'sizes',
             jsonWithHeaderChoice.sizes,
             handleChangeHeaderInfo,
@@ -637,7 +638,7 @@ export default function InnerFramePopup() {
                       fontWeight: 600,
                     }}
                   >
-                    Advanced
+                    Advanced mode
                   </div>
                   <div
                     style={{
@@ -646,7 +647,7 @@ export default function InnerFramePopup() {
                       fontWeight: 400,
                     }}
                   >
-                    mode Merge projects into a single
+                    Merge projects into a single
                     export, access more print types, and use
                     loop mode.
                   </div>
@@ -750,6 +751,7 @@ export default function InnerFramePopup() {
                   alignItems: 'center',
                   backgroundColor: '#F50',
                   color: 'white',
+                  cursor: 'pointer',
                 }}
                 onClick={() => handleOpenModalAddWrapper(true)}
               >
@@ -783,8 +785,9 @@ export default function InnerFramePopup() {
                 openFileDialogSettingData();
               }}
             >
-              Choose export folder
+              Choose an export folder
             </Button>
+            <div>{folder ? `Folder selected : ${folder}` : "Please choose an export folder"}</div>
             <Input
               onChange={(e) => {
                 handleInputChange(e);
@@ -815,7 +818,7 @@ export default function InnerFramePopup() {
                   }
               }
               onClick={async () => {
-                if (isJsonValidate) {
+                if (jsonValidation.length == 0) {
                   setMessagePrint('');
                   const pdfGen = new global.PdfGenStatic(
                     JSON.parse(kitchenFaucet),
@@ -830,6 +833,22 @@ export default function InnerFramePopup() {
                     return;
                   }
                   setMessagePrint((prev) => `${prev }\nSuccessful pdf generation.`);
+                } else {
+                  let cleanerMessage = jsonValidation.map(
+                    txt => {
+                      console.log(txt);
+                      console.log("txt.includes('outputPath')", txt.includes('outputPath'));
+                      if(txt.includes('outputPath')) {
+                        return "Please choose an export folder";
+                      } else if(txt.includes('Unknown section type')) {
+                        return "Please choose at least one 'Print type'";
+                      } else if(txt.includes('requires ranges')) {
+                        return "Canon specification : please choose at least one book";
+                      }
+                      return txt;
+                    }
+                  ).join('\n');
+                  setMessagePrint(`# Error\n${cleanerMessage}`);
                 }
               }}
             >

diff --git a/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/BookList.js b/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/BookList.js
@@ -0,0 +1,17 @@
+import React from 'react';
+
+export const BookList = ({ books }) => {
+  return (
+    <div style={{ paddingBottom: '12px', borderRadius: 999, display: 'inline-flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', gap: 8}}>
+      {books.map((book, index) => (
+        <div key={index} style={{ alignSelf: 'stretch', height: 30, padding: '4px 11px', backgroundColor: '#464646', borderRadius: 999, border: '1px solid #737373', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8 }}>
+          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+            <div style={{ color: 'white', fontSize: 14, fontFamily: 'Lato', fontWeight: 400, lineHeight: '20px', wordWrap: 'break-word' }}>
+              {book}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/HeaderWrapper/BCVHeaderWrapper.js b/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/HeaderWrapper/BCVHeaderWrapper.js
@@ -1,12 +1,14 @@
 import { useEffect, useState, useContext } from 'react';
 import { Modal } from '@material-ui/core';
 import { ProjectContext } from '@/components/context/ProjectContext';
+import { ReferenceContext } from '@/components/context/ReferenceContext';
 import SelectBook from '@/components/EditorPage/Navigation/reference/SelectBook';
 import { useBibleReference } from 'bible-reference-rcl';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 import { useTranslation } from 'react-i18next';
 import Layout from '../../../../../../public/icons/basil/Solid/Interface/Layout.svg';
 import { TextOnlyTooltip, LoopSwitch } from '../fieldPicker/customMuiComponent';
+import { BookList } from '../BookList';
 
 export function BCVWrapperSortableList({
   keyWrapper,
@@ -21,19 +23,24 @@ export function BCVWrapperSortableList({
   const initialVerse = '1';
 
   const { t } = useTranslation();
+  const {
+    state: {
+      bookId,
+    },
+  } = useContext(ReferenceContext);
 
   const {
     state: { bookList },
   } = useBibleReference({
-    initialBook,
+    initialBook: bookId,
     initialChapter,
     initialVerse,
   });
   const {
     states: { canonList },
   } = useContext(ProjectContext);
   // end get all book from current project
-  const [selectedBooks, setSelectedBooks] = useState([]);
+  const [selectedBooks, setSelectedBooks] = useState(bookId ? [bookId.toUpperCase()] : []);
   const [openModalBook, setOpenModalBook] = useState(false);
 
   useEffect(() => {
@@ -47,7 +54,7 @@ export function BCVWrapperSortableList({
 
   return (
     <div>
-      <div style={{ display: 'flex', justifyContent: 'end' }}>
+      <div style={{ display: 'flex', justifyContent: 'left' }}>
         {advanceMode ? (
           <div>
             <TextOnlyTooltip
@@ -70,8 +77,8 @@ export function BCVWrapperSortableList({
                       fontWeight: 400,
                     }}
                   >
-                    Ressources in the loop will be added to
-                    the export, form
+                    Projects in the loop are added one by one to the document,
+                    for each book selected above.
                   </div>
                 </div>
               )}
@@ -99,13 +106,13 @@ export function BCVWrapperSortableList({
           style={{
             margin: 'auto',
             display: 'flex',
-            justifyContent: 'center',
+            justifyContent: 'left',
             alignItems: 'center', // Added alignment to center vertically
-            fontSize: 24,
+            fontSize: 20,
             color: 'black',
           }}
         >
-          <div style={{ width: 25, height: 25, marginRight: 8 }}>
+          <div style={{ width: 18, height: 18, marginRight: 8 }}>
             <Layout />
           </div>
           Translation
@@ -212,7 +219,10 @@ export function BCVWrapperSortableList({
         >
           {t('label-custom')}
         </div>
+        <br />
       </div>
+      <BookList books={selectedBooks ?? []} />
+      <br />
 
       <Modal
         open={openModalBook}

diff --git a/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/HeaderWrapper/JXLHeaderWrapper.js b/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/HeaderWrapper/JXLHeaderWrapper.js
@@ -21,19 +21,24 @@ export function JXLHeaderWrapper({
   const initialVerse = '1';
 
   const { t } = useTranslation();
+  const {
+    state: {
+      bookId,
+    },
+  } = useContext(ReferenceContext);
 
   const {
     state: { bookList },
   } = useBibleReference({
-    initialBook,
+    initialBook: bookId,
     initialChapter,
     initialVerse,
   });
   const {
     states: { canonList },
   } = useContext(ProjectContext);
   // end get all book from current project
-  const [selectedBooks, setSelectedBooks] = useState([]);
+  const [selectedBooks, setSelectedBooks] = useState(bookId ? [bookId.toUpperCase()] : []);
   const [openModalBook, setOpenModalBook] = useState(false);
 
   useEffect(() => {
@@ -70,8 +75,8 @@ export function JXLHeaderWrapper({
                       fontWeight: 400,
                     }}
                   >
-                    Ressources in the loop will be added to
-                    the export, form
+                    Projects in the loop are added one by one to the document,
+                    for each book selected above.
                   </div>
                 </div>
               )}

diff --git a/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/HeaderWrapper/OBSHeaderWrapper.js b/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/HeaderWrapper/OBSHeaderWrapper.js
@@ -127,8 +127,8 @@ export function OBSWrapperSortableList({
                       fontWeight: 400,
                     }}
                   >
-                    Ressources in the loop will be added to
-                    the export, form
+                    Projects in the loop are added one by one to the document,
+                    for each book selected above.
                   </div>
                 </div>
               )}

diff --git a/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/SectionAccordion.js b/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/SectionAccordion.js
@@ -20,6 +20,20 @@ const convertionWrapperType = (type) => {
   }
 };
 
+const hashPrintTypes = {
+  'bcvBible': 'Bible by verse',
+  'bookNote': 'Book Note',
+  '4ColumnSpread': 'Four resources on facing pages',
+  '2Column': 'Two resources in two columns',
+  'biblePlusNotes': 'Notes focus (by verse)',
+  'paraBible': 'Formatted Bible',
+  'markdown': 'Simple formatting',
+    // 'jxlSpread': 'Juxtalinear on facing pages',
+  'jxlSimple': 'Juxtalinear',
+  'obs': 'Obs',
+  'obsPlusNotes': 'Obs with Notes',
+}
+
 export function AccordionPicker({
   language,
   setSelected,
@@ -236,7 +250,7 @@ export function AccordionPicker({
               }}
             >
               {keySpecification !== 'null'
-                ? keySpecification
+                ? hashPrintTypes[keySpecification]
                 : 'select a print type'}
 
               <ChevronDownIcon className="h-5 w-5 text-gray-500" />

diff --git a/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/WrapperTemplate.js b/renderer/src/layouts/editor/pdfGenInterface/pdfGenWrappers/WrapperTemplate.js
@@ -228,7 +228,7 @@ export function WrapperTemplate({
           }}
         >
           <div style={{ display: 'flex' }}>
-            <Button
+            {advanceMode && (<Button
               style={{
                 borderStyle: 'solid',
                 color: 'white',
@@ -259,7 +259,7 @@ export function WrapperTemplate({
                 color="black"
                 style={{ height: 35, width: 35 }}
               />
-            </Button>
+            </Button>)}
           </div>
         </div>
 

diff --git a/styles/globals.css b/styles/globals.css
@@ -378,6 +378,7 @@ p.paragraph:has(.chapter) {
   border-radius: 6px;
   border-style: solid;
   border-width: 1px;
+  cursor: pointer;
 }
 
 .pdfChoice:hover {
@@ -609,12 +610,18 @@ Select scribe theme Start
 */
 
 .selectScribeTheme {
+  width: 200px;
   min-width: 120px;
   border-radius: 5px;
   border-color: rgba(115, 115, 115, 1);
   border-width: 1px;
   background-color: #ffffff;
-  /* Default background color */
+}
+
+.centered-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .selectScribeTheme:hover {