From f6c04f70e7e7062adadc600632bc5efb49393b46 Mon Sep 17 00:00:00 2001
From: sijumoncy <72241997+sijumoncy@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:36:34 +0530
Subject: [PATCH] UI change for scope selection. functionality to add book to
 scope. remove button added for scop

---
 .../scope-management/BookItem.jsx             | 33 ++++++++++
 .../scope-management/BookList.jsx             |  9 ---
 .../scope-management/ScopeManagement.jsx      | 63 +++++++------------
 3 files changed, 56 insertions(+), 49 deletions(-)
 create mode 100644 renderer/src/components/ProjectManagement/scope-management/BookItem.jsx
 delete mode 100644 renderer/src/components/ProjectManagement/scope-management/BookList.jsx

diff --git a/renderer/src/components/ProjectManagement/scope-management/BookItem.jsx b/renderer/src/components/ProjectManagement/scope-management/BookItem.jsx
new file mode 100644
index 00000000..e97ed1ca
--- /dev/null
+++ 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
deleted file mode 100644
index c7aea46c..00000000
--- a/renderer/src/components/ProjectManagement/scope-management/BookList.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-function BookList() {
-  return (
-    <div>BookList</div>
-  );
-}
-
-export default BookList;
diff --git a/renderer/src/components/ProjectManagement/scope-management/ScopeManagement.jsx b/renderer/src/components/ProjectManagement/scope-management/ScopeManagement.jsx
index bde96d9a..1938156e 100644
--- 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>