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.
57 lines
1.3 KiB
57 lines
1.3 KiB
<script lang="ts" context="module">
|
|
export interface IDAndName {
|
|
id: number
|
|
name: string
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import { projectPrettyId, scopePrettyId } from "$lib/utils/prettyIds";
|
|
import { getScopeContext } from "../contexts/ScopeContext.svelte";
|
|
import { getScopeListContext } from "../contexts/ScopeListContext.svelte";
|
|
|
|
export let project: IDAndName
|
|
export let requirement: IDAndName
|
|
export let scopeId: number
|
|
|
|
const {scope} = getScopeContext();
|
|
const {scopes} = getScopeListContext();
|
|
|
|
let projectLink: string
|
|
let requirementLink: string
|
|
|
|
$: {
|
|
let actualScope = $scope;
|
|
if (actualScope == null || actualScope.id !== scopeId) {
|
|
actualScope = $scopes.find(s => s.id === scopeId);
|
|
}
|
|
|
|
projectLink = `/${scopePrettyId(actualScope)}/projects/${projectPrettyId(project)}`
|
|
requirementLink = `${projectLink}#${projectPrettyId(requirement)}`
|
|
}
|
|
</script>
|
|
|
|
<div class="reference">
|
|
<a href={projectLink}>{project.name}</a>
|
|
<span>></span>
|
|
<a href={requirementLink}>{requirement.name}</a>
|
|
</div>
|
|
|
|
<style lang="sass">
|
|
@import "../../css/colors"
|
|
|
|
div.reference
|
|
font-size: 0.8em
|
|
|
|
> span
|
|
color: $color-entry3
|
|
|
|
> a
|
|
color: $color-entry5
|
|
text-decoration: none
|
|
line-height: 1em
|
|
transition: 250ms
|
|
|
|
&:hover
|
|
color: $color-entry8
|
|
</style>
|