57 lines
1.2 KiB
Svelte
57 lines
1.2 KiB
Svelte
|
<script>
|
||
|
|
import { useTracker } from 'meteor/rdb:svelte-meteor-data';
|
||
|
|
import { Tasks } from "../api/tasks.js";
|
||
|
|
|
||
|
|
export let key;
|
||
|
|
export let task;
|
||
|
|
let showPrivateButton;
|
||
|
|
|
||
|
|
$: currentUser = useTracker(() => Meteor.user());
|
||
|
|
|
||
|
|
$: {
|
||
|
|
showPrivateButton = false;
|
||
|
|
if($currentUser){
|
||
|
|
showPrivateButton = task.owner === $currentUser._id;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleChecked() {
|
||
|
|
// Set the checked property to the opposite of its current value
|
||
|
|
Meteor.call("tasks.setChecked", task._id, !task.checked);
|
||
|
|
}
|
||
|
|
|
||
|
|
function deleteThisTask() {
|
||
|
|
Meteor.call("tasks.remove", task._id);
|
||
|
|
}
|
||
|
|
|
||
|
|
function togglePrivate() {
|
||
|
|
Meteor.call("tasks.setPrivate", task._id, !task.private);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<li class:checked="{task.checked}"
|
||
|
|
class:private="{task.private}" >
|
||
|
|
<button class="delete" on:click={deleteThisTask}>
|
||
|
|
×
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
readonly
|
||
|
|
checked={!!task.checked}
|
||
|
|
on:click={toggleChecked}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{#if showPrivateButton}
|
||
|
|
<button className="toggle-private" on:click="{togglePrivate}">
|
||
|
|
{ task.private ? "Private" : "Public" }
|
||
|
|
</button>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
<span class="text">
|
||
|
|
<strong>{ task.username }</strong>
|
||
|
|
: { task.text }
|
||
|
|
</span>
|
||
|
|
</li>
|