From 822ef4510ab3771781ee16bce781da16e586c05d Mon Sep 17 00:00:00 2001
From: Eloi Zalczer <ezalczer@dxomark.com>
Date: Wed, 19 Jun 2024 11:00:43 +0200
Subject: [PATCH] Fixed price field and added timeout for creation toast

---
 src/assets/toast.css                     | 10 ++++++++++
 src/components/CreateRestaurantModal.vue |  2 +-
 src/views/CreateView.vue                 | 24 +++++++++++++++++-------
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src/assets/toast.css

diff --git a/src/assets/toast.css b/src/assets/toast.css
new file mode 100644
index 0000000..1df0194
--- /dev/null
+++ b/src/assets/toast.css
@@ -0,0 +1,10 @@
+/* we will explain what these classes do next! */
+.toast-fade-enter-active,
+.toast-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.toast-fade-enter-from,
+.toast-fade-leave-to {
+  opacity: 0;
+}
\ No newline at end of file
diff --git a/src/components/CreateRestaurantModal.vue b/src/components/CreateRestaurantModal.vue
index d282008..aab53b3 100644
--- a/src/components/CreateRestaurantModal.vue
+++ b/src/components/CreateRestaurantModal.vue
@@ -35,7 +35,7 @@ const submit = handleSubmit((values) => {
   try {
     pb.collection("restaurants").create({
       name: values.name,
-      price_range: values.price,
+      price: values.price,
       tags: tags,
       latitude: position.value?.lat,
       longitude: position.value?.lng,
diff --git a/src/views/CreateView.vue b/src/views/CreateView.vue
index 1a89c9e..5d62ef9 100644
--- a/src/views/CreateView.vue
+++ b/src/views/CreateView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import "@/assets/form.css";
+import "@/assets/toast.css";
 
 import RestaurantsMap from "../components/RestaurantsMap.vue";
 import { ref } from "vue";
@@ -15,27 +16,36 @@ function onMapClicked(latlng) {
   createRestaurantModal.value?.show();
 }
 
+function resetToast() {
+  successMessage.value = undefined;
+  errorMessage.value = undefined;
+}
+
 function onRestaurantCreationSucceeded(message: string) {
   successMessage.value = message;
   errorMessage.value = undefined;
   createRestaurantModal.value?.hide();
+  setTimeout(resetToast, 5000);
 }
 
 function onRestaurantCreationFailed(message: string) {
   successMessage.value = undefined;
   errorMessage.value = message;
   createRestaurantModal.value?.hide();
+  setTimeout(resetToast, 5000);
 }
 </script>
 
 <template>
-  <div class="toast toast-top toast-end">
-    <div v-if="errorMessage" class="alert alert-error">
-      <span>{{ errorMessage }}</span>
-    </div>
-    <div v-if="successMessage" class="alert alert-success">
-      <span>{{ successMessage }}</span>
-    </div>
+  <div class="toast toast-top toast-end z-[10000]">
+    <Transition name="toast-fade">
+      <div v-if="errorMessage" class="alert alert-error">
+        <span>{{ errorMessage }}</span>
+      </div>
+      <div v-else-if="successMessage" class="alert alert-success">
+        <span>{{ successMessage }}</span>
+      </div>
+    </Transition>
   </div>
 
   <RestaurantsMap @clicked="onMapClicked" />