mirror of
https://github.com/Dictionarry-Hub/profilarr.git
synced 2026-01-22 10:51:02 +01:00
140 lines
7.2 KiB
JavaScript
140 lines
7.2 KiB
JavaScript
import React from 'react';
|
|
import {Loader} from 'lucide-react';
|
|
import Modal from '@ui/Modal';
|
|
|
|
const DataSelectorModal = ({
|
|
isOpen,
|
|
onClose,
|
|
isLoading,
|
|
availableData = {profiles: [], customFormats: []},
|
|
selectedData = {profiles: [], customFormats: []},
|
|
onDataToggle,
|
|
error
|
|
}) => {
|
|
// Ensure we have safe defaults for selectedData
|
|
const profiles = selectedData?.profiles || [];
|
|
const customFormats = selectedData?.customFormats || [];
|
|
|
|
return (
|
|
<Modal
|
|
isOpen={isOpen}
|
|
onClose={onClose}
|
|
title='Select Data to Sync'
|
|
height='2xl'
|
|
width='2xl'>
|
|
<div className='space-y-6'>
|
|
{isLoading ? (
|
|
<div className='flex items-center justify-center py-12'>
|
|
<Loader className='w-6 h-6 animate-spin text-blue-500' />
|
|
</div>
|
|
) : (
|
|
<>
|
|
{/* Quality Profiles Section */}
|
|
<div className='space-y-3'>
|
|
<div className='flex items-center justify-between'>
|
|
<h4 className='text-sm font-medium'>
|
|
Quality Profiles
|
|
</h4>
|
|
<span className='text-xs text-gray-500 dark:text-gray-400'>
|
|
{profiles.length} selected
|
|
</span>
|
|
</div>
|
|
<div className='grid grid-cols-2 gap-2'>
|
|
{(availableData?.profiles || []).map(
|
|
profile => (
|
|
<label
|
|
key={profile.file_name}
|
|
className='flex items-center p-2 bg-white dark:bg-gray-800
|
|
hover:bg-gray-50 dark:hover:bg-gray-700
|
|
rounded-lg cursor-pointer group transition-colors
|
|
border border-gray-200 dark:border-gray-700'>
|
|
<input
|
|
type='checkbox'
|
|
checked={profiles.includes(
|
|
profile.content.name
|
|
)}
|
|
onChange={() =>
|
|
onDataToggle(
|
|
'profiles',
|
|
profile.content.name
|
|
)
|
|
}
|
|
className='rounded border-gray-300 text-blue-600
|
|
focus:ring-blue-500 focus:ring-offset-0'
|
|
/>
|
|
<span
|
|
className='ml-3 text-sm text-gray-700 dark:text-gray-300
|
|
group-hover:text-gray-900 dark:group-hover:text-gray-100'>
|
|
{profile.content.name}
|
|
</span>
|
|
</label>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Custom Formats Section */}
|
|
<div className='space-y-3'>
|
|
<div className='space-y-1'>
|
|
<div className='flex items-center justify-between'>
|
|
<h4 className='text-sm font-medium'>
|
|
Custom Formats
|
|
</h4>
|
|
<span className='text-xs text-gray-500 dark:text-gray-400'>
|
|
{customFormats.length} selected
|
|
</span>
|
|
</div>
|
|
<p className='text-xs text-gray-500 dark:text-gray-400'>
|
|
Note: Custom formats used in selected
|
|
quality profiles are automatically imported
|
|
and don't need to be selected here.
|
|
</p>
|
|
</div>
|
|
<div className='grid grid-cols-2 gap-2'>
|
|
{(availableData?.customFormats || []).map(
|
|
format => (
|
|
<label
|
|
key={format.file_name}
|
|
className='flex items-center p-2 bg-white dark:bg-gray-800
|
|
hover:bg-gray-50 dark:hover:bg-gray-700
|
|
rounded-lg cursor-pointer group transition-colors
|
|
border border-gray-200 dark:border-gray-700'>
|
|
<input
|
|
type='checkbox'
|
|
checked={customFormats.includes(
|
|
format.content.name
|
|
)}
|
|
onChange={() =>
|
|
onDataToggle(
|
|
'customFormats',
|
|
format.content.name
|
|
)
|
|
}
|
|
className='rounded border-gray-300 text-blue-600
|
|
focus:ring-blue-500 focus:ring-offset-0'
|
|
/>
|
|
<span
|
|
className='ml-3 text-sm text-gray-700 dark:text-gray-300
|
|
group-hover:text-gray-900 dark:group-hover:text-gray-100'>
|
|
{format.content.name}
|
|
</span>
|
|
</label>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className='pt-2'>
|
|
<p className='text-xs text-red-500'>{error}</p>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default DataSelectorModal;
|