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

<script lang="ts">
  import type { IconName } from "../external/icons";
  import type { TaskResult } from "../models/task";
  import DaysLeft from "./DaysLeft.svelte";
  import Icon from "./Icon.svelte";
  import LinkHook from "./LinkHook.svelte";
  import Markdown from "./Markdown.svelte";
  import ProjectProgress from "./ProjectProgress.svelte";
import TimeProgress from "./TimeProgress.svelte";

  interface EntryIconHolder {
    icon: IconName
  }

  interface EntryCommon {
    id: string
    name: string
    description: string
    icon?: IconName
    startTime?: string
    endTime?: string
    createdTime?: string
    group?: EntryIconHolder
    project?: EntryIconHolder
    tasks?: TaskResult[]
    active?: boolean
  }

  export let entry: EntryCommon;
  export let full = false;
  export let headerLink = "";
  export let hideProgress: boolean = false;
  export let hideIcon: boolean = false;
  export let showTimeProgress: boolean = false;

  let iconName: IconName;

  $: {
    if (entry.project != null) {
      iconName = entry.project.icon;
    } else if (entry.group != null) {
      iconName = entry.group.icon;
    } else {
      iconName = entry.icon || "question";
    }
  }
</script>

<div class="parent-entry" class:full={full}>
  <LinkHook id={entry.id} />
  {#if !hideIcon}
    <div class="icon" class:completed={entry.active === false}>
      <Icon block name={iconName} />
    </div>
  {/if}
  <div class="body">
    <div class="header">
      <div class="name">
        {#if headerLink}
          <a href={headerLink}>{entry.name}</a>
        {:else}
          {entry.name}
        {/if}
      </div>
      {#if entry.endTime != null}
        <div class="days-left">
          <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
        </div>
      {/if}
    </div>
    {#if (!hideProgress && entry.tasks != null)}
      <ProjectProgress project={entry} />
      {#if showTimeProgress && entry.endTime}
        <TimeProgress startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
      {/if}
    {/if}
    {#if (full)}
      <Markdown source={entry.description} />
    {/if}
    <slot></slot>
  </div>
</div>

<style>
  div.parent-entry {
    display: flex;
    flex-direction: row;
    padding-bottom: 0.5em;
  }
  div.parent-entry.full {
    padding-bottom: 1em;
  }
  div.icon {
    font-size: 2em;
    padding: 0 0.5ch;
    width: 2ch;
    padding-top: 0.125em;
    color: #333;
  }
  div.icon.completed {
    color: #484;
  }
  div.body {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  div.header {
    display: flex;
    flex-direction: row;
  }

  div.name {
    font-size: 1em;
    margin: auto 0;
    vertical-align: middle;
    font-weight: 100;
  }
  div.days-left {
    margin-left: auto; 
    margin-right: 0.25ch;
  }

  a {
    color: inherit;
    text-decoration-color: #777;
  }
</style>