stufflog/svelte-ui/src/components/tables/GoalTable.svelte

<script>
	import { createEventDispatcher } from 'svelte';
  import pluralize from "pluralize";

  import Link from "../Link.svelte";
  import Table from "../Table.svelte";
  import ActivityIcon from "../ActivityIcon.svelte";
  import PointsBar from "../PointsBar.svelte";
  import ActivityDisplay from "../ActivityDisplay.svelte";

  export let period = {goals: []};
  export let activities = [];

  const dispatch = createEventDispatcher();
  let activityMap = {};

  function onOption(name, goalId) {
    const goal = period.goals.find(g => g.id === goalId);
    const activity = activities.find(a => a.id === goal.activityId)

    dispatch("option", {name, period, goal, activity})
  }

</script>

<Table headers={["Activity", "Points", "Options"]} percentages={[25, 55, 20]}>
  {#each period.goals as goal (goal.id)}
    <tr>
      <td class="ellipsis">
        <ActivityDisplay activity={activities.find(a => a.id === goal.activityId)} />
      </td>
      <td><PointsBar value={period.scores[goal.id]} goal={goal.pointCount} /></td>
      <td class="td-options">
        <Link on:click={() => onOption("periodgoal.remove", goal.id)}>Delete</Link>
      </td>
    </tr>
  {/each}
</Table>