import React, { useState, useMemo } from 'react';
import { useSelector } from 'react-redux';
import * as monthUtils from 'loot-core/src/shared/months';
import { getScheduledAmount } from 'loot-core/src/shared/schedules';
import { integerToCurrency } from 'loot-core/src/shared/util';
import {
View,
Text,
Button,
Tooltip,
Menu
} from 'loot-design/src/components/common';
import {
Table,
TableHeader,
Row,
Field,
Cell
} from 'loot-design/src/components/table';
import { colors } from 'loot-design/src/style';
import DotsHorizontalTriple from 'loot-design/src/svg/v1/DotsHorizontalTriple';
import Check from 'loot-design/src/svg/v2/Check';
import DisplayId from '../util/DisplayId';
import { StatusBadge } from './StatusBadge';
export let ROW_HEIGHT = 43;
function OverflowMenu({ schedule, status, onAction }) {
let [open, setOpen] = useState(false);
return (
{open && (
setOpen(false)}
>
)}
);
}
export function ScheduleAmountCell({ amount, op }) {
let num = getScheduledAmount(amount);
let str = integerToCurrency(Math.abs(num || 0));
let isApprox = op === 'isapprox' || op === 'isbetween';
return (
{isApprox && (
~
)}
0 ? colors.g5 : null,
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
}}
title={(isApprox ? 'Approximately ' : '') + str}
>
{num > 0 ? `+${str}` : `${str}`}
|
);
}
export function SchedulesTable({
schedules,
statuses,
minimal,
allowCompleted,
style,
onSelect,
onAction
}) {
let dateFormat = useSelector(state => {
return state.prefs.local.dateFormat || 'MM/dd/yyyy';
});
let [showCompleted, setShowCompleted] = useState(false);
let items = useMemo(() => {
if (!allowCompleted) {
return schedules.filter(s => !s.completed);
}
if (showCompleted) {
return schedules;
}
let arr = schedules.filter(s => !s.completed);
if (schedules.find(s => s.completed)) {
arr.push({ type: 'show-completed' });
}
return arr;
}, [schedules, showCompleted, allowCompleted]);
function renderSchedule({ item }) {
return (
onSelect(item.id)}
style={{
cursor: 'pointer',
backgroundColor: 'white',
':hover': { backgroundColor: colors.hover }
}}
>
{item.next_date
? monthUtils.format(item.next_date, dateFormat)
: null}
{!minimal && (
{item._date && item._date.frequency && (
)}
)}
{!minimal && (
)}
);
}
function renderItem({ item }) {
if (item.type === 'show-completed') {
return (
setShowCompleted(true)}
>
Show completed schedules
);
}
return renderSchedule({ item });
}
return (
<>
Payee
Account
Next date
Status
Amount
{!minimal && (
Recurring
)}
{!minimal && }
>
);
}