From c256da11f742295dd9c37318aa2af7dc76a7d64c Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Sat, 19 Feb 2022 20:55:37 +0100
Subject: [PATCH] fix issue with new wishlists and a empty item list

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 src/views/DetailView.vue | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index cd6cf62..89f8b21 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -112,10 +112,20 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
         </div>
         <FormWishlist v-else :wishlist="state" @update="handleUpdateWishlist" />
       </div>
+
       <div
-        v-if="filteredItems.length > 0"
-        class="flex flex-col space-y-14 py-10 md:space-y-8"
+        v-if="!editModeIsActive && filteredItems.length === 0"
+        class="flex h-1/2 w-full justify-center"
       >
+        <div
+          class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
+        >
+          <IconNoGift class="h-10 w-10 fill-gray-600/75 dark:fill-white/70" />
+          <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
+        </div>
+      </div>
+
+      <div v-else class="flex flex-col space-y-14 py-10 md:space-y-8">
         <FormWishlistItem
           v-if="editModeIsActive"
           mode="create"
@@ -136,14 +146,6 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
           />
         </div>
       </div>
-      <div v-else class="flex h-1/2 w-full justify-center">
-        <div
-          class="flex flex-col flex-wrap items-center justify-center text-center text-xl text-gray-600/75 dark:text-white/70 sm:flex-row sm:space-x-2 sm:text-left"
-        >
-          <IconNoGift class="h-10 w-10 fill-gray-600/75 dark:fill-white/70" />
-          <span>{{ t('pages.detail-view.main.empty-list.text') }}</span>
-        </div>
-      </div>
     </div>
   </div>
 </template>