From 136ee85cd435bd9596de5d21e3abe052fabe11dc Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Fri, 21 Jul 2023 00:57:41 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20(steps)=20extract=20and=20?=
 =?UTF-8?q?create=20js=20object=20to=20loop=20steps?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue          | 84 +++-----------------------------------------
 src/FeatureStep.vue  | 45 ++++++++++++++++++++++++
 src/FeatureSteps.vue | 15 ++++++++
 src/feature-steps.ts | 51 +++++++++++++++++++++++++++
 4 files changed, 115 insertions(+), 80 deletions(-)
 create mode 100644 src/FeatureStep.vue
 create mode 100644 src/FeatureSteps.vue
 create mode 100644 src/feature-steps.ts

diff --git a/src/App.vue b/src/App.vue
index e26264f..69741c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -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>
 
diff --git a/src/FeatureStep.vue b/src/FeatureStep.vue
new file mode 100644
index 0000000..0090032
--- /dev/null
+++ b/src/FeatureStep.vue
@@ -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>
diff --git a/src/FeatureSteps.vue b/src/FeatureSteps.vue
new file mode 100644
index 0000000..dcc19cb
--- /dev/null
+++ b/src/FeatureSteps.vue
@@ -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>
diff --git a/src/feature-steps.ts b/src/feature-steps.ts
new file mode 100644
index 0000000..8251a36
--- /dev/null
+++ b/src/feature-steps.ts
@@ -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
+  }
+]