115 lines
2.5 KiB
Vue
115 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { Feature } from '@/modules/feature/feature'
|
|
import { FeatureStep } from '@/modules/feature/feature-steps'
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
step: FeatureStep
|
|
features: Feature[]
|
|
}>()
|
|
const featuresInProgress = computed(() =>
|
|
props.features.filter((feature) => feature.status === 'doing')
|
|
)
|
|
const featuresDone = computed(() =>
|
|
props.features.filter((feature) => feature.status === 'done')
|
|
)
|
|
|
|
const remainingBlueBuckets = computed(() =>
|
|
Math.max(0, props.step.blueBuckets - featuresDone.value.length)
|
|
)
|
|
const hasFeaturesInProgress = computed(
|
|
() => featuresInProgress.value.length > 0
|
|
)
|
|
const hasFeaturesDone = computed(() => featuresInProgress.value.length > 0)
|
|
</script>
|
|
|
|
<template>
|
|
<li class="feature-step">
|
|
<header>{{ step.title }}</header>
|
|
<section class="doing">
|
|
<h5>📝⌛</h5>
|
|
<ul v-if="hasFeaturesInProgress">
|
|
<li
|
|
v-for="feature in featuresInProgress"
|
|
:key="feature.name"
|
|
class="bin"
|
|
>
|
|
<div>
|
|
{{ feature.name }}
|
|
</div>
|
|
<div class="lead-time">{{ feature.leadTime }} days</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section class="done">
|
|
<h5>📝✅</h5>
|
|
<ul v-if="hasFeaturesDone">
|
|
<li v-for="feature in featuresDone" :key="feature.name" class="bin">
|
|
<div>
|
|
{{ feature.name }}
|
|
</div>
|
|
<div class="lead-time">{{ feature.leadTime }} days</div>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
v-for="blueBucket in remainingBlueBuckets"
|
|
:key="blueBucket"
|
|
class="bin blue-bin"
|
|
>
|
|
Blue bucket
|
|
</div>
|
|
</section>
|
|
</li>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');
|
|
|
|
.feature-step {
|
|
header {
|
|
padding: 0.5rem;
|
|
border: solid 2px var(--background-color);
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
section {
|
|
margin: 1rem 0;
|
|
flex: 1;
|
|
}
|
|
|
|
h5 {
|
|
margin-bottom: 0;
|
|
background-color: var(--background-color);
|
|
padding: 0.35rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.bin {
|
|
margin-top: 1rem;
|
|
border: 3px solid var(--background-color);
|
|
height: 62px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 12pt;
|
|
padding: 0 0.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.blue-bin {
|
|
background-color: var(--background-color);
|
|
color: white;
|
|
font-size: 18pt;
|
|
}
|
|
|
|
li {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.lead-time {
|
|
font-family: 'Cutive Mono', monospace;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
</style>
|