Skip to content
Snippets Groups Projects
Unverified Commit 94a6b53f authored by Sean Tsai's avatar Sean Tsai Committed by GitHub
Browse files

Delete table navigator from rules page (#1342)

parent 1d60635e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
packages/desktop-client/src/components/ManageRules.js
+ 90
− 135
View file @ 94a6b53f
......@@ -40,15 +40,7 @@ import {
Input,
LinkButton,
} from './common';
import {
SelectCell,
Row,
Field,
Cell,
CellButton,
TableHeader,
useTableNavigator,
} from './table';
import { SelectCell, Row, Field, Cell, CellButton, TableHeader } from './table';
let SchedulesQuery = liveQueryContext(q('schedules').select('*'));
......@@ -298,130 +290,105 @@ function ActionExpression({ field, op, value, options, style }) {
);
}
let Rule = memo(
({
rule,
hovered,
selected,
editing,
focusedField,
onHover,
onEdit,
onEditRule,
}) => {
let dispatchSelected = useSelectedDispatch();
let borderColor = selected ? colors.b8 : colors.border;
let backgroundFocus = hovered || focusedField === 'select';
let Rule = memo(({ rule, hovered, selected, onHover, onEditRule }) => {
let dispatchSelected = useSelectedDispatch();
let borderColor = selected ? colors.b8 : colors.border;
let backgroundFocus = hovered;
return (
<Row
height="auto"
borderColor={borderColor}
backgroundColor={
selected ? colors.selected : backgroundFocus ? colors.hover : 'white'
}
style={{ fontSize: 13, zIndex: editing || selected ? 101 : 'auto' }}
collapsed="true"
onMouseEnter={() => onHover && onHover(rule.id)}
onMouseLeave={() => onHover && onHover(null)}
>
<SelectCell
exposed={hovered || selected || editing}
focused={focusedField === 'select'}
onSelect={e => {
dispatchSelected({ type: 'select', id: rule.id, event: e });
}}
onEdit={() => onEdit(rule.id, 'select')}
selected={selected}
/>
<Cell name="stage" width={50} plain style={{ color: colors.n5 }}>
{rule.stage && (
<View
style={{
alignSelf: 'flex-start',
margin: 5,
backgroundColor: colors.b10,
color: colors.b1,
borderRadius: 4,
padding: '3px 5px',
}}
>
{rule.stage}
</View>
)}
</Cell>
<Field width="flex" style={{ padding: '15px 0' }} truncate={false}>
<Stack direction="row" align="center">
<View
style={{ flex: 1, alignItems: 'flex-start' }}
data-testid="conditions"
>
{rule.conditions.map((cond, i) => (
<ConditionExpression
key={i}
field={cond.field}
op={cond.op}
inline={true}
value={cond.value}
options={cond.options}
prefix={i > 0 ? friendlyOp(rule.conditionsOp) : null}
style={i !== 0 && { marginTop: 3 }}
/>
))}
</View>
return (
<Row
height="auto"
borderColor={borderColor}
backgroundColor={
selected ? colors.selected : backgroundFocus ? colors.hover : 'white'
}
style={{ fontSize: 13, zIndex: selected ? 101 : 'auto' }}
collapsed="true"
onMouseEnter={() => onHover && onHover(rule.id)}
onMouseLeave={() => onHover && onHover(null)}
>
<SelectCell
exposed={hovered || selected}
focused={true}
onSelect={e => {
dispatchSelected({ type: 'select', id: rule.id, event: e });
}}
selected={selected}
/>
<Text>
<ArrowRight color={colors.n4} style={{ width: 12, height: 12 }} />
</Text>
<Cell name="stage" width={50} plain style={{ color: colors.n5 }}>
{rule.stage && (
<View
style={{
alignSelf: 'flex-start',
margin: 5,
backgroundColor: colors.b10,
color: colors.b1,
borderRadius: 4,
padding: '3px 5px',
}}
>
{rule.stage}
</View>
)}
</Cell>
<View
style={{ flex: 1, alignItems: 'flex-start' }}
data-testid="actions"
>
{rule.actions.map((action, i) => (
<ActionExpression
key={i}
field={action.field}
op={action.op}
value={action.value}
options={action.options}
style={i !== 0 && { marginTop: 3 }}
/>
))}
</View>
</Stack>
</Field>
<Field width="flex" style={{ padding: '15px 0' }} truncate={false}>
<Stack direction="row" align="center">
<View
style={{ flex: 1, alignItems: 'flex-start' }}
data-testid="conditions"
>
{rule.conditions.map((cond, i) => (
<ConditionExpression
key={i}
field={cond.field}
op={cond.op}
inline={true}
value={cond.value}
options={cond.options}
prefix={i > 0 ? friendlyOp(rule.conditionsOp) : null}
style={i !== 0 && { marginTop: 3 }}
/>
))}
</View>
<Cell
name="edit"
focused={focusedField === 'edit'}
plain
style={{ padding: '0 15px', paddingLeft: 5 }}
>
<Button
as={CellButton}
onSelect={() => onEditRule(rule)}
onEdit={() => onEdit(rule.id, 'edit')}
<Text>
<ArrowRight color={colors.n4} style={{ width: 12, height: 12 }} />
</Text>
<View
style={{ flex: 1, alignItems: 'flex-start' }}
data-testid="actions"
>
Edit
</Button>
</Cell>
</Row>
);
},
);
{rule.actions.map((action, i) => (
<ActionExpression
key={i}
field={action.field}
op={action.op}
value={action.value}
options={action.options}
style={i !== 0 && { marginTop: 3 }}
/>
))}
</View>
</Stack>
</Field>
<Cell name="edit" plain style={{ padding: '0 15px', paddingLeft: 5 }}>
<Button as={CellButton} onSelect={() => onEditRule(rule)}>
Edit
</Button>
</Cell>
</Row>
);
});
let SimpleTable = forwardRef(
(
{ data, navigator, loadMore, style, onHoverLeave, children, ...props },
ref,
) => {
({ data, loadMore, style, onHoverLeave, children, ...props }, ref) => {
let contentRef = useRef();
let contentHeight = useRef();
let scrollRef = useRef();
let { getNavigatorProps } = navigator;
function onScroll(e) {
if (contentHeight.current != null) {
......@@ -452,7 +419,6 @@ let SimpleTable = forwardRef(
]}
tabIndex="1"
data-testid="table"
{...getNavigatorProps(props)}
>
<View
innerRef={scrollRef}
......@@ -489,7 +455,6 @@ function RulesHeader() {
function RulesList({
rules,
selectedItems,
navigator,
hoveredRule,
collapsed: borderCollapsed,
onHover,
......@@ -505,7 +470,6 @@ function RulesList({
{rules.map(rule => {
let hovered = hoveredRule === rule.id;
let selected = selectedItems.has(rule.id);
let editing = navigator.editingId === rule.id;
return (
<Rule
......@@ -513,10 +477,7 @@ function RulesList({
rule={rule}
hovered={hovered}
selected={selected}
editing={editing}
focusedField={editing && navigator.focusedField}
onHover={onHover}
onEdit={navigator.onEdit}
onEditRule={onEditRule}
/>
);
......@@ -583,7 +544,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
let [rules, setRules] = useState(null);
let [filter, setFilter] = useState('');
let dispatch = useDispatch();
let navigator = useTableNavigator(rules, ['select', 'edit']);
let { data: schedules } = SchedulesQuery.useQuery();
let filterData = useSelector(state => ({
......@@ -715,8 +675,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
onSave: async newRule => {
let newRules = await loadRules();
navigator.onEdit(newRule.id, 'edit');
setRules(rules => {
let newIdx = newRules.findIndex(rule => rule.id === newRule.id);
return newRules.slice(0, newIdx + 75);
......@@ -771,7 +729,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
value={filter}
onChange={e => {
setFilter(e.target.value);
navigator.onEdit(null);
}}
style={{
width: 350,
......@@ -791,7 +748,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
<SimpleTable
ref={tableRef}
data={filteredRules}
navigator={navigator}
loadMore={loadMore}
// Hide the last border of the item in the table
style={{ marginBottom: -1 }}
......@@ -799,7 +755,6 @@ function ManageRulesContent({ isModal, payeeId, setLoading }) {
<RulesList
rules={filteredRules}
selectedItems={selectedInst.items}
navigator={navigator}
hoveredRule={hoveredRule}
onHover={onHover}
onEditRule={onEditRule}
......
upcoming-release-notes/1342.md 0 → 100644
+ 5
− 0
View file @ 94a6b53f
---
category: Maintenance
authors: [aleetsaiya]
---
Remove table navigator from rules page
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment