Ft/offline text merge

docs/Development/Offline Merge Text Translation/development.md

@@ -0,0 +1,18 @@
+## Offline Merge Transaltion
+
+-   Offline Merge Feature for Text Translation
+-   Merge Option available on Import Existing Project ( Flavour Text Translation )
+-   The Merge Can be resumed later from the check point ( Check Point will be the completion of each chapter. The system will only take care of chapter by chapter . You can not stop and continue from middle of a chapter )
+-   The merge will be corrupted if back end data is modified / removed manually. Can not be restored
+-   One commit will be created on merge start with all the changes before the merge ( timestamp and commit message can be used to identify the commit)
+-   One commit will be created after the merge with all the merged changes ( timestamp and commit message can be used to identify)
+-   This commit can be used to revert back to earlier stage ( **advanced option** )
+-   Can not re work on chapter or book once you finish the conflicts with book / chapter
+-   updating `metadata.json` with new USFM's metadata on finish merge conflict for entire project
+-   Merge UI ( options)
+    -   Accept all new changes
+    -   Keep All existing changes
+    -   Revert All changes
+    -   Accept single changes ( current or new )
+    -   Chapter Completion ( Check point )
+    -   Merge Conflict Completion ( on completion : replace the original USFM with new merge USFM )

package.json

@@ -138,6 +138,7 @@
     "bible-reference-rcl": "1.1.0",
     "clsx": "1.1.1",
     "crypto-js": "^4.1.1",
+    "diff-match-patch": "^1.0.5",
     "dotenv": "^16.3.1",
     "electron-is-dev": "^2.0.0",
     "electron-log": "4.4.7",

renderer/src/components/Projects/ProjectList.js

@@ -53,7 +53,7 @@ export default function ProjectList() {
   };
 
   const closeEditProject = async () => {
-    logger.debug('ProjectList.js', 'Closing edit project page and updating the values');
+    logger.debug('ProjectList.js', 'Closing edit project page and updating the valuesd');
     setCallEditProject(false);
     await FetchProjects();
   };

renderer/src/components/Projects/ProjectRow.js

@@ -204,6 +204,7 @@ const ProjectRow = ({
                               </button>
                             )}
                           </Menu.Item>
+
                           <Menu.Item>
                             {({ active }) => (
                               <button

renderer/src/components/SnackBar/SnackBar.js

@@ -5,7 +5,9 @@
 import { Popover, Transition } from '@headlessui/react';
 import PropTypes from 'prop-types';
 
-const colors = { success: '#82E0AA', failure: '#F5B7B1', warning: '#F8C471' };
+const colors = {
+ success: '#82E0AA', failure: '#F5B7B1', warning: '#F8C471', info: '#17a2b8',
+};
 const SnackBar = ({
   openSnackBar,
   snackText,
@@ -41,7 +43,7 @@
 
   useEffect(() => {
     if (openSnackBar) {
       setTimeLeft(3);
     }
   }, [openSnackBar]);
 

renderer/src/components/TextTranslationMerge/ImportUsfmUI.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+function ImportUsfmUI({
+  currentProjectMeta, handleImportUsfm, buttonName, savedConflictsBooks, resumeConflictResolution,
+}) {
+  return (
+    <div className="w-full h-full flex justify-center items-center">
+      <div className="w-full h-[30vh]  flex justify-center items-center gap-2">
+
+        <div className="w-full h-full flex-1">
+
+          <div className="flex flex-col gap-3 items-center justify-center h-full">
+            <h4 className="font-medium text-center">Current Project Scope</h4>
+            <div className="grid grid-cols-7 overflow-y-auto">
+
+              {currentProjectMeta && Object.keys(currentProjectMeta?.type?.flavorType?.currentScope).map((scope) => (
+                <span className="ml-2" key={scope}>{scope}</span>
+              ))}
+            </div>
+            <button
+              type="button"
+              className="border-2 border-primary rounded-lg px-2 py-1 hover:bg-primary hover:text-white"
+              onClick={handleImportUsfm}
+            >
+              {buttonName}
+            </button>
+          </div>
+
+        </div>
+
+        <div className="w-[.5px] h-full bg-gray-400" />
+
+        {/* saved conflicts - resume */}
+        {savedConflictsBooks?.length > 0 && (
+
+          <div className="w-full flex-1 h-full flex flex-col justify-center items-center gap-2">
+
+            <h4 className="font-medium text-center">Resume Conflict Resolution</h4>
+            <div className="grid grid-cols-5 gap-2 overflow-y-auto">
+
+              {savedConflictsBooks.map((book) => (
+                <button
+                  key={book}
+                  type="button"
+                  className="border-2 border-primary rounded-lg px-2 py-1 hover:bg-primary hover:text-white"
+                  onClick={() => resumeConflictResolution(book)}
+                >
+                  {book.toUpperCase().split('.')[0]}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default ImportUsfmUI;

renderer/src/components/TextTranslationMerge/TranslationMergNavBar.jsx

@@ -0,0 +1,70 @@
+// import { Cog8ToothIcon } from '@heroicons/react/24/outline';
+// import { useTranslation } from 'react-i18next';
+
+function TranslationMergNavBar({
+  conflictedBooks, selectedBook, setSelectedBook, resolvedBooks, disableSelection, conflictedChapters, selectedChapter, setSelectedChapter,
+}) {
+  // const { t } = useTranslation();
+  return (
+    <div className="bg-white border-2 rounded-md border-black h-[78vh] overflow-hidden ">
+      <div className="flex items-center justify-between bg-black py-1.5 px-2.5">
+
+        <span className="px-2.5 py-0.5 bg-primary text-white font-medium tracking-wider text-xs uppercase rounded-xl">
+          Books :
+          {' '}
+          {`${conflictedBooks?.length} `}
+        </span>
+        {/* <Cog8ToothIcon className="w-5 h-5 text-white" /> */}
+      </div>
+
+      <div className="h-full overflow-auto ">
+        <ul className="text-black text-xs py-2.5">
+          {conflictedBooks?.map((book) => {
+            const bookId = book.split('/');
+            return (
+              <li
+                key={book}
+                // className="w-full"
+                className={`w-full py-2 mb-4 ${resolvedBooks.includes(book)
+                  ? 'pointer-events-none'
+                  : `${selectedBook === book ? 'bg-primary/70' : 'hover:bg-primary cursor-pointer'}`} `}
+
+              // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+              >
+                <button
+                  type="button"
+                  onClick={() => { setSelectedBook(book); setSelectedChapter(); }}
+                  aria-disabled={disableSelection}
+                  className="w-full text-center"
+
+                >
+                  <span className={`${resolvedBooks.includes(book) && 'line-through decoration-2'}`}>{bookId[1]}</span>
+
+                </button>
+                {/* chapter selection */}
+                {selectedBook === book && !resolvedBooks.includes(book) && (
+
+                  <div className="bg-white w-[95%] mx-auto my-2 grid grid-cols-3 gap-2 border border-gray-400 rounded-md min-h-[50px] p-2">
+                    {conflictedChapters?.map((chNo) => (
+                      <button
+                        key={chNo}
+                        type="button"
+                        className={`p-2 border rounded-md ${selectedChapter === chNo ? 'bg-primary/70' : 'hover:bg-primary cursor-pointer'}`}
+                        onClick={() => setSelectedChapter(chNo)}
+                      >
+                        {chNo}
+                      </button>
+                    ))}
+                  </div>
+                )}
+
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default TranslationMergNavBar;