UI change for scope selection. functionality to add book to scope. re…

…move button added for scop
bible-technology · Aug 13, 2024 · f6c04f7 · f6c04f7
1 parent 49dc3af
commit f6c04f7
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 49 deletions.
diff --git a/renderer/src/components/ProjectManagement/scope-management/BookItem.jsx b/renderer/src/components/ProjectManagement/scope-management/BookItem.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import BookButton from '../Common/Button/BookButton';
+import XMark from '@/icons/Xelah/XMark.svg';
+
+function BookItem({
+  book, handleSelectBook, handleRemoveScope, isInScope,
+}) {
+  return (
+    <div className="flex items-center">
+      <BookButton
+        className={`flex items-center gap-1.5 w-full border ${isInScope ? 'bg-primary/25' : ''}`}
+        onClick={(e) => handleSelectBook(e, book)}
+      >
+        <div
+          title={isInScope ? 'Modify Chapters' : 'Add to scope'}
+          role="button"
+          tabIndex={-2}
+          className="flex-[3.5] truncate text-left"
+        >
+          {book.name}
+        </div>
+
+        <XMark
+          title="Remove Scope"
+          className={`flex-1 w-2 h-5 text-black hover:text-white  ${isInScope ? 'visible' : 'opacity-0 pointer-events-none'}`}
+          onClick={(e) => handleRemoveScope(e, book)}
+        />
+      </BookButton>
+    </div>
+  );
+}
+
+export default BookItem;
diff --git a/renderer/src/components/ProjectManagement/scope-management/BookList.jsx b/renderer/src/components/ProjectManagement/scope-management/BookList.jsx
diff --git a/renderer/src/components/ProjectManagement/scope-management/ScopeManagement.jsx b/renderer/src/components/ProjectManagement/scope-management/ScopeManagement.jsx
@@ -5,7 +5,7 @@ import TitleBar from './TitleBar';
 import BookButton from '../Common/Button/BookButton';
 import BulkSelectionGroup from './BulkSelectionGroup';
 import Button from '../Common/Button/Button';
-import File from '@/icons/file.svg';
+import BookItem from './BookItem';
 
 const initialBook = 'gen';
 const initialChapter = '1';
@@ -58,11 +58,8 @@ function ScopeManagement({ metadata }) {
 
   const handleSelectBook = (e, book) => {
     console.log('clicked book : ', book);
-  };
-
-  const handleChangeBook = (bookId) => {
-    console.log({ bookId });
-    onChangeBook(bookId, bookId);
+    setCurrentScope((prev) => ({ ...prev, [book.key.toUpperCase()]: [] }));
+    onChangeBook(book.key, book.key);
   };
 
   const handleChapterRangeSelection = (e) => {
@@ -80,6 +77,12 @@ function ScopeManagement({ metadata }) {
     // e.target.end.value = '';
   };
 
+  const handleRemoveScope = (e, book) => {
+    e.stopPropagation();
+    console.log('clicked remove : ', book);
+  };
+
+  // set current scope from meta
   useEffect(() => {
     if (metadata?.type?.flavorType?.currentScope) {
       setCurrentScope(metadata?.type?.flavorType?.currentScope);
@@ -107,22 +110,13 @@ function ScopeManagement({ metadata }) {
           {bookList?.slice(0, 39)?.map((book) => {
             const isScope = book?.key?.toUpperCase() in currentScope;
             return (
-              <div key={book.key} className="flex justify-between gap-1 items-center group/btn">
-                <BookButton
-                  onClick={(e) => handleSelectBook(e, book)}
-                  className={`flex justify-between group-hover/btn:bg-primary group-hover/btn:font-medium group-hover/btn:text-white
-                  ${isScope ? 'bg-blue-500 text-white' : ''}}`}
-                >
-                  <p className="text-ellipsis" title="Select Book">
-                    {book.name}
-                  </p>
-                </BookButton>
-                {isScope && (
-                  <button type="button" title="Modify Chapter Scope">
-                    <File className="w-3 items-center cursor-pointer group-hover/btn:text-primary" onClick={() => handleChangeBook(book.key)} />
-                  </button>
-                )}
-              </div>
+              <BookItem
+                key={book.key}
+                book={book}
+                handleRemoveScope={handleRemoveScope}
+                handleSelectBook={handleSelectBook}
+                isInScope={isScope}
+              />
             );
           })}
         </div>
@@ -133,24 +127,13 @@ function ScopeManagement({ metadata }) {
           {bookList?.slice(39)?.map((book) => {
             const isScope = book?.key?.toUpperCase() in currentScope;
             return (
-              <div key={book.key} className="flex justify-between gap-2 items-center group/btn">
-                <BookButton
-                  onClick={(e) => handleSelectBook(e, book)}
-                  className={`flex justify-between group-hover/btn:bg-primary group-hover/btn:font-medium group-hover/btn:text-white
-                    ${isScope ? 'bg-blue-500 text-white' : ''}`}
-                >
-                  <span className="" title="Select Book">
-                    {book.name}
-                  </span>
-
-                </BookButton>
-                {isScope && (
-                  <button type="button" title="Modify Chapter Scope">
-                    <File className="w-3 items-center cursor-pointer group-hover/btn:text-primary" onClick={() => handleChangeBook(book.key)} />
-                  </button>
-                )}
-
-              </div>
+              <BookItem
+                key={book.key}
+                book={book}
+                handleRemoveScope={handleRemoveScope}
+                handleSelectBook={handleSelectBook}
+                isInScope={isScope}
+              />
             );
           })}
         </div>