From f1d359003dd3a2ede637acc7c9ecd42ddb2df209 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 4 Jan 2025 18:24:59 +0100
Subject: [PATCH] feat: add animation when quality issue increases

---
 .../pull-system/feature/QualityIssue.vue      | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/modules/pull-system/feature/QualityIssue.vue b/src/modules/pull-system/feature/QualityIssue.vue
index 8677040..6430032 100644
--- a/src/modules/pull-system/feature/QualityIssue.vue
+++ b/src/modules/pull-system/feature/QualityIssue.vue
@@ -1,20 +1,49 @@
 <script setup lang="ts">
-defineProps<{
+import { computed, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
   qualityIssue: number
 }>()
+
+const qualityIssue = computed(() => props.qualityIssue)
+const isFlashing = ref(false)
+const flashingDuration = 300
+const flashingTransitionDuration = `${flashingDuration / 1000 + 0.1}s`
+
+watchEffect(() => {
+  if (qualityIssue.value > 0) {
+    isFlashing.value = true
+    setTimeout(() => {
+      isFlashing.value = false
+    }, flashingDuration)
+  }
+})
 </script>
 
 <template>
-  <div class="quality-issue red-bin numeric">{{ qualityIssue }}</div>
+  <div
+    class="quality-issue red-bin numeric"
+    :class="{ 'is-flashing': isFlashing }"
+  >
+    {{ qualityIssue }}
+  </div>
 </template>
 
 <style scoped lang="scss">
 .quality-issue {
+  --warning-color: #ca0e0e;
+  transition: v-bind(flashingTransitionDuration) ease-out;
+  transition-property: background-color, color;
+
   &.red-bin {
-    --warning-color: #ca0e0e;
     border: 2px solid var(--warning-color);
     padding: 0 0.5rem 0.1rem;
     color: var(--warning-color);
   }
+
+  &.is-flashing {
+    background-color: var(--warning-color);
+    color: var(--color);
+  }
 }
 </style>