From 09ecd40933a22f4dddf1f90c7242768c1f8478d6 Mon Sep 17 00:00:00 2001
From: Amon De Shir <amonsir29@gmail.com>
Date: Tue, 26 Nov 2024 11:07:05 +0100
Subject: [PATCH] fix NoContent

---
 resources/js/components/Crud/CrudPage.vue       | 17 +++++++++++------
 .../components/{Common => Crud}/SearchBar.vue   |  0
 2 files changed, 11 insertions(+), 6 deletions(-)
 rename resources/js/components/{Common => Crud}/SearchBar.vue (100%)

diff --git a/resources/js/components/Crud/CrudPage.vue b/resources/js/components/Crud/CrudPage.vue
index 867754f8..77260aa0 100644
--- a/resources/js/components/Crud/CrudPage.vue
+++ b/resources/js/components/Crud/CrudPage.vue
@@ -5,12 +5,12 @@ import { vAutoAnimate } from '@formkit/auto-animate'
 import Expand from '@/components/Common/Expand.vue'
 import Dropdown from '@/components/Common/Dropdown.vue'
 import {type Errors} from '@inertiajs/core'
-import {ref} from 'vue'
+import {ref, watch} from 'vue'
 import Button from '@/components/Common/Button.vue'
 import CrudNewItem from '@/components/Crud/CrudNewItem.vue'
 import CrudItem from '@/components/Crud/CrudItem.vue'
 import {useSorter} from '@/Helpers/Sorter'
-import SearchBar from '@/components/Common/SearchBar.vue'
+import SearchBar from '@/components/Crud/SearchBar.vue'
 import Pagination from '@/components/Common/Pagination.vue'
 import {useParams} from '@/Helpers/Params'
 import NoContent from '@/components/Common/NoContent.vue'
@@ -54,6 +54,11 @@ function handleSearch(text: string | undefined) {
   }
 }
 
+const isSearchbarEmpty = ref(!params.search)
+watch(() => props.items.data, () => {
+  isSearchbarEmpty.value = !searchValue.value
+})
+
 const [query, options] = useSorter(props.options, searchValue, props.customQueries)
 </script>
 
@@ -91,7 +96,7 @@ const [query, options] = useSorter(props.options, searchValue, props.customQueri
     <div v-auto-animate class="flex flex-col gap-4 p-4">
       <template v-if="newItemMode">
         <slot name="newItem" :new-item-mode="newItemMode">
-          <CrudNewItem :new-item-data="newItemData" :resource-name="resourceName" @done="newItemMode = false">
+          <CrudNewItem :new-item-data="newItemData" :resource-name="resoisSearchbarEmptyurceName" @done="newItemMode = false">
             <template #title="data">
               <slot name="title" v-bind="data as any" />
             </template>
@@ -124,9 +129,9 @@ const [query, options] = useSorter(props.options, searchValue, props.customQueri
       </slot>
 
       <template v-if="items.data.length === 0">
-        <slot name="noContent" :search="!!searchValue">
-          <NoContent :description="searchValue ? `Wygląda na to że nie mamy tego czego szukasz.` : undefined">
-            <div v-if="!searchValue">
+        <slot name="noContent" :search="!isSearchbarEmpty">
+          <NoContent :description="!isSearchbarEmpty ? `Wygląda na to że nie mamy tego czego szukasz.` : undefined">
+            <div v-if="isSearchbarEmpty">
               <Button class="rounded-xl" button-class="pl-3 font-bold" @click="newItemMode = true">
                 <PlusCircleIcon class="size-6 text-white" /> {{ newButtonText }}
               </Button>
diff --git a/resources/js/components/Common/SearchBar.vue b/resources/js/components/Crud/SearchBar.vue
similarity index 100%
rename from resources/js/components/Common/SearchBar.vue
rename to resources/js/components/Crud/SearchBar.vue