From 1a7f9a5ccea21cca3954e5ba077a6fc32a994aad Mon Sep 17 00:00:00 2001
From: Spythere <spythere@protonmail.com>
Date: Fri, 22 Jul 2022 17:11:10 +0200
Subject: [PATCH] =?UTF-8?q?Animacja=20listy=20rozkaz=C3=B3w?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/OrderList.vue | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/components/OrderList.vue b/src/components/OrderList.vue
index c2578f4..2b555b0 100644
--- a/src/components/OrderList.vue
+++ b/src/components/OrderList.vue
@@ -2,8 +2,8 @@
   <section class="order-list">
     <h3>Zapisane rozkazy pisemne ({{ localOrderCount }})</h3>
 
-    <ul>
-      <li v-for="order in sortedOrderList">
+    <transition-group name="list" tag="ul">
+      <li v-for="order in sortedOrderList" :key="order.id">
         <b>
           {{ getOrderName(order.orderType) }} nr {{ order.orderBody['header']['orderNo'] }} dla pociągu nr
           {{ order.orderBody['header']['trainNo'] }}
@@ -15,7 +15,7 @@
         <button class="g-button action" @click="selectLocalOrder(order)">Wybierz</button>
         <button class="g-button action" @click="removeOrder(order)">Usuń</button>
       </li>
-    </ul>
+    </transition-group>
   </section>
 </template>
 
@@ -84,13 +84,32 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.list {
+  &-move,
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.5s ease;
+  }
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+
+  &-leave-active {
+    position: absolute;
+  }
+}
+
 .order-list {
   padding: 1em;
 }
 
 ul {
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
   height: 60vh;
+  position: relative;
 }
 
 h3 {
@@ -104,6 +123,7 @@ li {
   padding: 1em;
   margin: 0.5em;
   background-color: #222;
+  width: 100%;
 
   cursor: pointer;