git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 10:51:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: add functionality to move conditions to top and bottom in format conditions tab

Browse Source
This commit is contained in:
Sam Chau
2025-02-07 19:05:59 +10:30
parent 958e5fbcba
commit b5655f3ae2
2 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/format/FormatConditionsTab.jsx
View File

@@ -45,6 +45,24 @@ const FormatConditionsTab = ({conditions, onConditionsChange}) => {
}
};
const handleMoveToTop = index => {
if (index > 0) {
const newConditions = [...conditions];
const [movedCondition] = newConditions.splice(index, 1);
newConditions.unshift(movedCondition);
onConditionsChange(newConditions);
}
};
const handleMoveToBottom = index => {
if (index < conditions.length - 1) {
const newConditions = [...conditions];
const [movedCondition] = newConditions.splice(index, 1);
newConditions.push(movedCondition);
onConditionsChange(newConditions);
}
};
if (isLoading) {
return (
<div className='flex items-center justify-center h-full'>
@@ -101,6 +119,8 @@ const FormatConditionsTab = ({conditions, onConditionsChange}) => {
patterns={patterns}
onMoveUp={() => handleMoveUp(index)}
onMoveDown={() => handleMoveDown(index)}
onMoveToTop={() => handleMoveToTop(index)}
onMoveToBottom={() => handleMoveToBottom(index)}
isFirst={index === 0}
isLast={index === conditions.length - 1}
/>

24
frontend/src/components/format/conditions/ConditionCard.jsx
View File

@@ -1,7 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {CONDITION_TYPES, createCondition} from './conditionTypes';
import {ArrowUp, ArrowDown, X} from 'lucide-react';
import {ArrowUp, ArrowDown, X, ChevronsUp, ChevronsDown} from 'lucide-react';
import BrowserSelect from '@ui/BrowserSelect';
const ConditionCard = ({
@@ -11,6 +11,8 @@ const ConditionCard = ({
patterns,
onMoveUp,
onMoveDown,
onMoveToTop,
onMoveToBottom,
isFirst,
isLast
}) => {
@@ -123,6 +125,15 @@ const ConditionCard = ({
<div
className='absolute right-0 top-0 bottom-0 flex flex-col
divide-y divide-gray-700/50 border-l border-gray-700/50 bg-gray-800/30'>
<button
onClick={onMoveToTop}
disabled={isFirst}
className='flex items-center justify-center w-10 flex-1
text-gray-400 hover:text-gray-200 hover:bg-gray-700/50
disabled:opacity-50 disabled:pointer-events-none
transition-colors'>
<ChevronsUp className='w-4 h-4' />
</button>
<button
onClick={onMoveUp}
disabled={isFirst}
@@ -141,6 +152,15 @@ const ConditionCard = ({
transition-colors'>
<ArrowDown className='w-4 h-4' />
</button>
<button
onClick={onMoveToBottom}
disabled={isLast}
className='flex items-center justify-center w-10 flex-1
text-gray-400 hover:text-gray-200 hover:bg-gray-700/50
disabled:opacity-50 disabled:pointer-events-none
transition-colors'>
<ChevronsDown className='w-4 h-4' />
</button>
<button
onClick={onDelete}
className='flex items-center justify-center w-10 flex-1
@@ -170,6 +190,8 @@ ConditionCard.propTypes = {
).isRequired,
onMoveUp: PropTypes.func.isRequired,
onMoveDown: PropTypes.func.isRequired,
onMoveToTop: PropTypes.func.isRequired,
onMoveToBottom: PropTypes.func.isRequired,
isFirst: PropTypes.bool.isRequired,
isLast: PropTypes.bool.isRequired
};