Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 4x 4x 4x 4x 1x 1x 4x 12x 4x 4x 4x 1x | import React from 'react';
import {Checkbox} from "primereact/checkbox";
import {Activity} from "../generated/api";
import {format} from "date-fns";
import {Button} from "primereact/button";
import classNames from "classnames";
import {ProgressInfo} from "../type";
import {confirmPopup} from "primereact/confirmpopup";
import {Tooltip} from "primereact/tooltip";
/**
* The {@link ActivityItem} properties.
*/
type Props = {
activity: Activity
doneToggle: (a: Activity) => void,
removeActivity: (a: Activity) => void,
loading: ProgressInfo,
}
type ActivityItemState = {
}
/**
* Component for design the single activity item.
*/
export default class ActivityItem extends React.Component<Props, ActivityItemState> {
longToString = (date?: number) => {
Iif (!date) {
return 'unknown';
}
return format(new Date(date!), 'yyyy-MM-dd');
}
setChecked = (checked: boolean) => {
const a: Activity = {
...this.props.activity,
done: checked
}
this.props.doneToggle(a);
}
isLoading = () => {
return this.props.loading.edit.indexOf(this.props.activity.id!) !== -1
|| this.props.loading.remove.indexOf(this.props.activity.id!) !== -1
}
accept = () => { this.props.removeActivity(this.props.activity) };
confirm1 = (event: any) => {
confirmPopup({
target: event.currentTarget,
message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle',
accept: this.accept
});
};
render() {
return (
<div className={classNames({
"activity-item": true,
"shadow-2": true,
"my-2": true,
"p-4": true,
"border-round": true,
"w-full": true,
"flex": true,
"flex-nowrap": true,
"justify-content-between": true,
"loading": this.isLoading(),
"done": this.props.activity.done
})}>
<div className="description-block flex flex-column flex-nowrap">
<Tooltip target=".description-item" />
<div data-pr-tooltip={this.props.activity.description} className="description-item" >
{this.props.activity.description}
</div>
<div className="date-item my-2">
<i className="pi pi-calendar p-mr-2"/> <span className={"date"}>{this.longToString(this.props.activity.date)}</span>
</div>
</div>
<div className="done-block my-auto flex flex-row ">
<Checkbox inputId="binary"
disabled={this.isLoading()}
className={'my-auto'}
checked={this.props.activity.done}
onChange={e => this.setChecked(e.checked)} />
<Button icon="pi pi-times"
disabled={this.isLoading()}
className="p-button-rounded p-button-text my-auto p-button-danger"
onClick={this.confirm1}
/>
</div>
</div>);
}
}
|