stufflog2/svelte-ui/src/components/GoalEntry.svelte

<script lang="ts">
  import type { IconName } from "../external/icons";
  import type { GoalResult } from "../models/goal";
  import type { ModalData } from "../stores/modal";
  import Composition from "./Composition.svelte";
  import Option from "./Option.svelte";
  import OptionRow from "./OptionRow.svelte";
  import ParentEntry from "./ParentEntry.svelte";
  import Progress from "./Progress.svelte";
  import ProgressNumbers from "./ProgressNumbers.svelte";
  import TimeProgress from "./TimeProgress.svelte";

  export let goal: GoalResult = null;
  export let showAllOptions = false;
  export let linkGoal = false;

  let mdGoalEdit: ModalData;
  let mdGoalDelete: ModalData;
  let annotations: IconName[];

  $: mdGoalEdit = {name:"goal.edit", goal};
  $: mdGoalDelete = {name:"goal.delete", goal};
  $: {
    annotations = [];
    if (goal.unweighted) {
      annotations.push("balance_scale")
    }
    if (goal.taskFilter) {
      annotations.push("filter")
    }
    if (goal.itemFilter) {
      annotations.push("filter")
    }
  }
</script>

<ParentEntry
  full={showAllOptions} 
  entry={goal} 
  headerLink={linkGoal ? "/goals#"+goal.id : ""}
  annotations={annotations}
>
  {#if showAllOptions}
    <OptionRow>
      <Option open={mdGoalEdit}>Edit</Option>
      <Option open={mdGoalDelete}>Delete</Option>
    </OptionRow>
  {/if}
  <div slot="post-seprator">
    {#if showAllOptions}
      <ProgressNumbers goal={goal} />
    {/if}
  </div>
  <div class="progress">
    <Progress count={goal.completedAmount} target={goal.amount} />
    <TimeProgress startTime={goal.startTime} endTime={goal.endTime} />
  </div>
  <Composition unweighted={goal.unweighted} ignoreZeroWeight logs={goal.logs} mode={goal.compositionMode} />
</ParentEntry>

<style>
  div.progress {
    padding-top: 0.125em;
    font-size: 1.25em;
  }
</style>