You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
3.0 KiB
87 lines
3.0 KiB
<script lang="ts">
|
|
import Markdown from "$lib/components/common/Markdown.svelte";
|
|
import SubSection from "$lib/components/layout/SubSection.svelte";
|
|
import Option from "$lib/components/layout/Option.svelte";
|
|
import OptionsRow from "$lib/components/layout/OptionsRow.svelte";
|
|
import type Item from "$lib/models/item";
|
|
import Status from "$lib/models/status";
|
|
import Amount from "../common/Amount.svelte";
|
|
import AmountRow from "../common/AmountRow.svelte";
|
|
import type { IconName } from "../layout/Icon.svelte";
|
|
import Icon from "../layout/Icon.svelte";
|
|
import { formatTime } from "$lib/utils/date";
|
|
import RequirementReference from "./RequirementReference.svelte";
|
|
|
|
export let item: Item;
|
|
export let event: "created" | "scheduled" | "acquired" | "none" = "none";
|
|
export let compact = false;
|
|
export let showAcquiredTime = false;
|
|
export let hideStats = false;
|
|
|
|
let icon: IconName
|
|
let status: Status
|
|
let eventText: string
|
|
|
|
$: {
|
|
icon = void(0);
|
|
|
|
if (event === "none" || event === "acquired") {
|
|
if (item.acquiredTime) {
|
|
icon = "check";
|
|
status = Status.Completed;
|
|
eventText = (showAcquiredTime || event === "acquired") ? formatTime(item.acquiredTime) : void(0)
|
|
}
|
|
} else if (event === "scheduled") {
|
|
if (item.acquiredTime) {
|
|
icon = "hourglass";
|
|
status = Status.Blocked;
|
|
eventText = "scheduled"
|
|
}
|
|
} else if (event === "created") {
|
|
icon = "lightbulb";
|
|
status = Status.Available;
|
|
eventText = formatTime(item.createdTime)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<SubSection small noProgress title={item.name} icon={icon} status={status} event={eventText}>
|
|
<OptionsRow slot="right">
|
|
{#if item.acquiredTime == null}
|
|
<Option open={{name: "item.acquire", item}} color="green"><Icon name="check_slot" /></Option>
|
|
{/if}
|
|
{#if !compact}
|
|
<Option open={{name: "item.edit", item}}><Icon name="pen" /></Option>
|
|
<Option open={{name: "item.delete", item}} color="red"><Icon name="trash" /></Option>
|
|
{/if}
|
|
</OptionsRow>
|
|
{#if item.project != null}
|
|
<RequirementReference project={item.project} requirement={item.requirement} scopeId={item.scopeId} />
|
|
{/if}
|
|
{#if !compact}
|
|
<Markdown source={item.description} />
|
|
{/if}
|
|
<AmountRow>
|
|
{#if !hideStats}
|
|
{#if item.acquiredTime != null}
|
|
{#each item.stats as stat (stat.id)}
|
|
{#if stat.required > 0}
|
|
<Amount label={stat.name} value={stat.acquired} target={stat.required} />
|
|
{/if}
|
|
{/each}
|
|
{#if item.weightedRequired}
|
|
<Amount dark right label="" value={item.weightedAcquired} target={item.weightedRequired} />
|
|
{/if}
|
|
{:else}
|
|
{#each item.stats as stat (stat.id)}
|
|
{#if stat.required > 0}
|
|
<Amount label={stat.name} value={stat.required} />
|
|
{/if}
|
|
{/each}
|
|
{#if item.weightedRequired}
|
|
<Amount dark right label="" value={item.weightedRequired} />
|
|
{/if}
|
|
{/if}
|
|
{/if}
|
|
</AmountRow>
|
|
</SubSection>
|