diff --git a/templates/settings/repository.jsx b/templates/settings/repository.jsx
index d6ddb665..c435501a 100644
--- a/templates/settings/repository.jsx
+++ b/templates/settings/repository.jsx
@@ -5,7 +5,7 @@ import { Button } from '@oacore/design/lib/elements'
import { useRouter } from 'next/router'
import styles from './styles.module.css'
-import { Card, TextField } from '../../design'
+import { Card, ProgressSpinner, TextField } from '../../design'
import content from '../../texts/settings'
import Markdown from '../../components/markdown'
import Upload from '../../components/upload'
@@ -16,6 +16,8 @@ import DropdownInput from '../../components/input-select/input-select'
import warning from './assets/warning.svg'
import { GlobalContext } from '../../store'
import infoGreen from '../../components/upload/assets/infoGreen.svg'
+import removeBin from '../../components/upload/assets/removeBin.svg'
+import toggleArrow from '../../components/upload/assets/dropdownArrow.svg'
const UploadSection = ({
className,
@@ -76,6 +78,20 @@ const RepositoryPageTemplate = observer(
setGlobalRorId,
init,
status,
+ setsList,
+ loadingSets,
+ enableSet,
+ enabledList,
+ disabledList,
+ deleteSet,
+ getSetsWholeList,
+ wholeSetData,
+ loadingWholeSets,
+ loadingWholeSetsBtn,
+ getSetsEnabledList,
+ setLoadingWholeSetsBtn,
+ loadingRemoveItem,
+ setLoadingRemoveAction,
tag: Tag = 'main',
...restProps
}) => {
@@ -93,9 +109,18 @@ const RepositoryPageTemplate = observer(
const [isChanged, setChanged] = useState(false)
const [isNameOpen, setNameIsOpen] = useState(false)
const [isIdOpen, setIdIsOpen] = useState(false)
-
const [isNameChanged, setNameChanged] = useState(false)
const [isFormSubmitted, setFormSubmitted] = useState(false)
+ const [selectedItem, setSelectedItem] = useState(null)
+ const dropdownRef = useRef(null)
+ const [isOpen, setIsOpen] = useState(false)
+ const [setNameDisplay, setSetNameDisplay] = useState({})
+ const [isEditing, setIsEditing] = useState({})
+ const [showFullList, setShowFullList] = useState(false)
+ const [inputValue, setInputValue] = useState('')
+
+ const router = useRouter()
+ const providerId = router.query['data-provider-id']
useEffect(() => {
fetch(`https://api.ror.org/organizations?query=${rorId}`)
@@ -119,15 +144,20 @@ const RepositoryPageTemplate = observer(
})
}, [rorName])
+ useEffect(() => {
+ getSetsEnabledList()
+ }, [providerId])
+
const uploadRef = useRef(null)
const mappingRef = useRef(null)
- const router = useRouter()
+ const setRef = useRef(null)
const isStartingMember = membershipPlan.billing_type === 'starting'
const scrollTarget = {
upload: uploadRef,
mapping: mappingRef,
+ sets: setRef,
}
useScrollEffect(scrollTarget[router.query.referrer])
@@ -142,6 +172,7 @@ const RepositoryPageTemplate = observer(
const present = {
'data-provider': updateDataProvider,
'mapping': mappingSubmit,
+ 'sets': mappingSubmit,
}[scope]
const result = await present(data)
@@ -206,6 +237,108 @@ const RepositoryPageTemplate = observer(
return null
}
+ const handleDropdownClick = async () => {
+ setIsOpen(!isOpen)
+ if (!wholeSetData.length) await getSetsWholeList()
+ }
+
+ const handleSelect = (item) => {
+ setSelectedItem(item)
+ setInputValue(item.setName)
+ setIsOpen(false)
+ }
+
+ const handleAddClick = async () => {
+ if (selectedItem) {
+ try {
+ setLoadingWholeSetsBtn(true)
+ await enableSet({
+ setSpec: selectedItem.setSpec,
+ setName: selectedItem.setName,
+ setNameDisplay: selectedItem.setNameDisplay,
+ })
+ setSelectedItem(null)
+ await getSetsWholeList()
+ await getSetsEnabledList()
+ } catch (error) {
+ console.error('Error patching settings:', error)
+ } finally {
+ setLoadingWholeSetsBtn(false)
+ }
+ }
+ }
+
+ const handleDelete = async (id) => {
+ try {
+ setLoadingRemoveAction(true, id)
+ await deleteSet(id)
+ await getSetsWholeList()
+ await getSetsEnabledList()
+ } catch (error) {
+ console.error('Error patching settings:', error)
+ } finally {
+ setLoadingRemoveAction(false, id)
+ }
+ }
+
+ const handleInputChange = (id, event) => {
+ setSetNameDisplay((prevState) => ({
+ ...prevState,
+ [id]: event.target.value,
+ }))
+ }
+
+ const handleEditClick = (id) => {
+ setIsEditing((prevState) => ({
+ ...prevState,
+ [id]: true,
+ }))
+ }
+
+ const handleButtonClick = async (item) => {
+ try {
+ await enableSet({
+ id: item.id,
+ setSpec: item.setSpec,
+ setName: item.setName,
+ setNameDisplay: setNameDisplay[item.id],
+ })
+ setIsEditing((prevState) => ({
+ ...prevState,
+ [item.id]: false,
+ }))
+ } catch (error) {
+ console.error('Error patching settings:', error)
+ }
+ }
+
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target))
+ setIsOpen(false)
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside)
+ }
+ }, [dropdownRef])
+
+ const displayAllSets = showFullList ? enabledList : enabledList.slice(0, 3)
+
+ const toggleList = () => {
+ setShowFullList(!showFullList)
+ }
+
+ const handleSetInputChange = (event) => {
+ setInputValue(event.target.value)
+ }
+
+ const filteredData = wholeSetData.filter((item) =>
+ item.setName.toLowerCase().includes(inputValue.toLowerCase())
+ )
+
return (
)}
+ {globalStore.enabledList.length > 0 ? (
+
+
+
+
+
{content.sets.title}
+
+ {content.sets.description}
+
+
+ {displayAllSets.map((item) => (
+
+
+
+
100
+ ? `${setNameDisplay[item.id].substring(
+ 0,
+ 100
+ )}...`
+ : setNameDisplay[item.id]) ||
+ (item?.setNameDisplay?.length > 100
+ ? `${item.setNameDisplay.substring(
+ 0,
+ 100
+ )}...`
+ : item.setNameDisplay)
+ }
+ onChange={(event) =>
+ handleInputChange(item.id, event)
+ }
+ className={styles.setInnerField}
+ disabled={!isEditing[item.id]}
+ />
+ {!isEditing[item.id] ? (
+
+ ) : (
+
+ )}
+
+
+ {loadingRemoveItem.id === item.id &&
+ loadingRemoveItem.value ? (
+
+ ) : (
+ // eslint-disable-next-line max-len
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+
![]()
handleDelete(item.id)}
+ src={removeBin}
+ alt=""
+ />
+ )}
+
+
+
+
+
setName
+
+ {item.setName.length > 110
+ ? `${item.setName.substring(0, 110)}...`
+ : item.setName}
+
+
+
+
setSpec
+
+ {item.setSpec.length > 110
+ ? `${item.setSpec.substring(0, 110)}...`
+ : item.setSpec}
+
+
+
+
+ ))}
+ {enabledList.length > 3 && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {isOpen && (
+
+ {loadingWholeSets ? (
+
Loading...
+ ) : (
+
+ {filteredData.map((item) => (
+ // eslint-disable-next-line max-len
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
+ - handleSelect(item)}
+ className={styles.selectItem}
+ >
+ {item.setName}
+
+ ))}
+
+ )}
+
+ )}
+
+
+
+
+