{children}
+ ); +} + +export default ScopeHead; diff --git a/renderer/src/components/ProjectManagement/scope-management/ScopeManagement.jsx b/renderer/src/components/ProjectManagement/scope-management/ScopeManagement.jsx new file mode 100644 index 000000000..87961a39a --- /dev/null +++ b/renderer/src/components/ProjectManagement/scope-management/ScopeManagement.jsx @@ -0,0 +1,292 @@ +import React, { useEffect, useState } from 'react'; +import { useBibleReference } from 'bible-reference-rcl'; +import ScopeHead from './ScopeHead'; +import TitleBar from './TitleBar'; +import BookButton from '../Common/Button/BookButton'; +import BulkSelectionGroup from './BulkSelectionGroup'; +import Button from '../Common/Button/Button'; +import BookItem from './BookItem'; +import * as logger from '../../../logger'; + +const initialBook = 'gen'; +const initialChapter = '1'; +const initialVerse = '1'; + +const ToggleBookOptions = [ + { key: 'all', name: 'All' }, + { key: 'old', name: 'Old' }, + { key: 'new', name: 'New' }, + { key: 'none', name: 'Deselect' }, +]; + +const ToggleChapterOptions = [ + { key: 'all', name: 'All' }, + { key: 'none', name: 'Deselect' }, +]; + +function ScopeManagement({ + metadata, currentScope, setCurrentScope, backendScope, +}) { + const [bookFilter, setBookFilter] = useState(''); + const [chapterFilter, setChapterFilter] = useState(''); + const [selectedChaptersSet, setSelectedChaptersSet] = useState(new Set([])); + + const { + state: { + // chapter, + // verse, + bookList, + chapterList, + // verseList, + bookName, + bookId, + }, actions: { + onChangeBook, + // onChangeChapter, + // onChangeVerse, + // applyBooksFilter, + }, + } = useBibleReference({ + initialBook, + initialChapter, + initialVerse, + }); + + const handleChangeBookToggle = (event) => { + setBookFilter(event.target.value); + const bookObj = {}; + if (event.target.value === 'all') { + bookList.forEach((book) => { + bookObj[book.key.toUpperCase()] = []; + }); + } else if (event.target.value === 'old') { + bookList?.slice(0, 39)?.forEach((book) => { + bookObj[book.key.toUpperCase()] = []; + }); + } else if (event.target.value === 'new') { + bookList?.slice(39)?.forEach((book) => { + bookObj[book.key.toUpperCase()] = []; + }); + } + const bookCode = Object.keys(bookObj)[0]; + onChangeBook(bookCode, bookCode); + setCurrentScope(bookObj); + }; + + const handleChangeChapterToggle = (event) => { + setChapterFilter(event.target.value); + let stringArray = []; + if (event.target.value === 'all') { + const numberArray = Array(chapterList.length).fill().map((_, idx) => 1 + idx); + stringArray = numberArray.map(String); + } + setCurrentScope((prev) => { + // check and change the selectedChapters + setSelectedChaptersSet(new Set(stringArray)); + return ({ ...prev, [bookId.toUpperCase()]: stringArray }); + }); + }; + + const handleSelectBook = (e, book) => { + if (bookFilter) { + setBookFilter(''); + } + const bookCode = book.key.toUpperCase(); + setCurrentScope((prev) => { + // check and change the selectedChapters + setSelectedChaptersSet(new Set(prev[bookCode]) || new Set([])); + return ({ ...prev, [bookCode]: prev[bookCode] || [] }); + }); + onChangeBook(book.key, book.key); + }; + + const handleChapterRangeSelection = (e) => { + e.preventDefault(); + let start = parseInt(e.target?.start?.value, 10) || null; + let end = parseInt(e.target?.end?.value, 10) || null; + // hanlde start greater and end smaller + if (start > end) { + const temp = start; + start = end; + end = temp; + } + const numberArray = Array(end - start + 1).fill().map((_, idx) => start + idx); + const stringArray = numberArray.map(String); + setCurrentScope((prev) => { + // check and change the selectedChapters + setSelectedChaptersSet(new Set(stringArray)); + return ({ ...prev, [bookId.toUpperCase()]: stringArray }); + }); + // e.target.start.value = ''; + // e.target.end.value = ''; + }; + + const handleRemoveScope = (e, book) => { + e.stopPropagation(); + if (bookFilter) { + setBookFilter(''); + } + const bukId = book.key.toUpperCase(); + const newScopeObj = { ...currentScope }; + delete newScopeObj[bukId]; + setCurrentScope(newScopeObj); + }; + + /** + * Fn to toggle chapter selection for the active book + */ + const handleChapterSelection = (e, chapter) => { + if (chapterFilter) { + setChapterFilter(''); + } + const bukId = bookId.toUpperCase(); + if (bukId in currentScope) { + setCurrentScope((prev) => { + const currentCh = new Set(prev[bukId] || new Set([])); + if (currentCh.has(chapter)) { + currentCh.delete(chapter); + } else { + currentCh.add(chapter); + } + setSelectedChaptersSet(currentCh); + return { + ...prev, + [bukId]: Array.from(currentCh), + }; + }); + } else { + logger.error('ScopeManagement.js', 'Active book is not in scope'); + } + }; + + // set current scope from meta + useEffect(() => { + if (metadata?.type?.flavorType?.currentScope) { + const scopeObj = metadata?.type?.flavorType?.currentScope; + // expect at least 1 scope - because creation and scope modification won't allow 0 scope + setSelectedChaptersSet(new Set(scopeObj[0]) || new Set([])); + const bookCode = Object.keys(scopeObj)[0].toUpperCase(); + onChangeBook(bookCode, bookCode); + setCurrentScope(scopeObj); + } else { + logger.error('ScopeManagement.js', 'Unable to read the scope from burrito'); + } + }, []); + + return ( +Book Selection
++ Chapter Selection : + {bookName} +
+