julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ (steps) extract and create js object to loop steps

Browse Source
This commit is contained in:
Julien Calixte
2023-07-21 00:57:41 +02:00
parent 54ae87c02a
commit 136ee85cd4
4 changed files with 115 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/App.vue
View File

@@ -1,86 +1,10 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import FeatureSteps from '@/FeatureSteps.vue'
</script>
<template>
<main id="main-app">
<ul>
<li>
<header>Pitch</header>
<section class="doing">
<h5>📝</h5>
<ul>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
</section>
<section class="done">
<h5>✅</h5>
<ul>
<li class="blue-bin">feature 1</li>
<li class="blue-bin">feature 2</li>
</ul>
</section>
</li>
<li>
<header>Design</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5>✅</h5>
</section>
</li>
<li>
<header>Investigation</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5>✅</h5>
</section>
</li>
<li>
<header>Product design</header>
<section class="doing">
<h5>📝</h5>
<ul>
<li></li>
<li></li>
</ul>
</section>
<section class="done">
<h5>✅</h5>
<div class="blue-bin">Blue bucket</div>
<div class="blue-bin">Blue bucket</div>
</section>
</li>
<li>
<header>Development</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5>✅</h5>
</section>
</li>
<li>
<header>UAT</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5>✅</h5>
</section>
</li>
<li>
<header>Release</header>
<section class="doing">
<h5>📝</h5>
</section>
<section class="done">
<h5>✅</h5>
</section>
</li>
</ul>
<FeatureSteps />
</main>
</template>

45
src/FeatureStep.vue Normal file
View File

@@ -0,0 +1,45 @@
<script setup lang="ts">
import { FeatureStep } from '@/feature-steps'
import { computed } from 'vue'
const props = defineProps<{
step: FeatureStep
}>()
const remainingBlueBuckets = computed(() =>
Math.max(0, props.step.blueBuckets - props.step.featuresDone.length)
)
</script>
<template>
<li class="feature-step">
<header>{{ step.title }}</header>
<section class="doing">
<h5>📝</h5>
<ul v-if="step.featuresInProgress.length > 0">
<li v-for="feature in step.featuresInProgress" :key="feature">
{{ feature }}
</li>
</ul>
</section>
<section class="done">
<h5>✅</h5>
<ul v-if="step.featuresDone.length > 0">
<li v-for="feature in step.featuresDone" :key="feature">
{{ feature }}
</li>
</ul>
<div
v-for="blueBucket in remainingBlueBuckets"
:key="blueBucket"
class="blue-bin"
>
Blue bucket
</div>
</section>
</li>
</template>
<style scoped lang="scss">
.feature-step {
}
</style>

15
src/FeatureSteps.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
import FeatureStep from '@/FeatureStep.vue'
import { featureSteps } from '@/feature-steps'
</script>
<template>
<ul class="features-steps">
<FeatureStep v-for="step in featureSteps" :key="step.title" :step="step" />
</ul>
</template>
<style scoped lang="scss">
.features-steps {
}
</style>

51
src/feature-steps.ts Normal file
View File

@@ -0,0 +1,51 @@
export type FeatureStep = {
title: string
featuresInProgress: string[]
featuresDone: string[]
blueBuckets: number
}
export const featureSteps: FeatureStep[] = [
{
title: 'Pitch',
featuresInProgress: ['Feature 3', 'Feature 4'],
featuresDone: ['Feature 1', 'Feature 2'],
blueBuckets: 2
},
{
title: 'Design',
featuresInProgress: [],
featuresDone: [],
blueBuckets: 1
},
{
title: 'Investigation',
featuresInProgress: [],
featuresDone: [],
blueBuckets: 1
},
{
title: 'Product design',
featuresInProgress: [],
featuresDone: [],
blueBuckets: 2
},
{
title: 'Development',
featuresInProgress: [],
featuresDone: [],
blueBuckets: 2
},
{
title: 'UAT',
featuresInProgress: [],
featuresDone: [],
blueBuckets: 3
},
{
title: 'Release',
featuresInProgress: [],
featuresDone: [],
blueBuckets: 0
}
]